feat: added async fetch of credentials

login-auth/README.md

@@ -1 +1,7 @@
-[source](https://blog.logrocket.com/react-router-dom-tutorial-examples/)
+#Enable async await
+[babel/polyfill](https://babeljs.io/docs/en/babel-polyfill)
+[async/await with Babel and Webpack](https://dev.to/btandayamo/a-guide-to-through-async-await-with-babel-and-webpack-mh5)
+
+#Links
+[source](https://www.digitalocean.com/community/tutorials/how-to-add-login-authentication-to-react-applications)
+[source](https://blog.logrocket.com/react-router-dom-tutorial-examples/)

login-auth/package.json

@@ -19,6 +19,7 @@
   },
   "devDependencies": {
     "@babel/core": "^7.15.5",
+    "@babel/polyfill": "^7.12.1",
     "@babel/preset-env": "^7.15.4",
     "@babel/preset-react": "^7.14.5",
     "babel-eslint": "^10.1.0",

login-auth/src/components/login/login.js

@@ -1,17 +1,70 @@
-import React from 'react';
+import React, { useState } from 'react';
+import PropTypes from 'prop-types';
+
+//NOTE: All async fcts return Promises!
+async function loginUser (credentials) {
+    console.log('from loginUser() credentials: ', credentials);
+
+    const port = 4242;
+    console.log('from loginUser() port: ', port);
+
+    try {
+    //NOTE: You can only await for a fct that returns a Promise!
+        let rsp = await fetch('http://localhost:' + port + '/login', {
+            method: 'POST',
+            headers: {
+                ContentType: 'application/json'
+            },
+            body: JSON.stringify(credentials)
+        });
+        let data = await rsp.json();
+        console.log('from loginUser() data: ', data);
+
+        return data;
+    } catch (err) {
+        console.log('from loginUser() err.message: ', err.message);
+    }
+}
+
+//destructure the props object to pull out the setToken prop
+function Login ({ setToken }) {
+    //local state to capture user email and key
+    const [email, setEmail] = useState('');
+    const [key, setKey] = useState('');
+
+    //create form submit handler
+    const handleSubmit = async (e) => {
+        console.log('from handleSubmit() started...');
+
+        //TODO What the heck?
+        e.preventDefault();
+
+        const token = await loginUser({
+            email,
+            key
+        });
+        console.log('from handleSubmit() token: ', token);
+
+        setToken(token);
+    };
 
-export default function Login () {
     return (
         <div>
             <h1>Please Log In</h1>
-            <form>
+            {
+                //call handleSubmit using the onSubmit event handler of form
+            }
+            <form onSubmit={handleSubmit}>
                 <label>
-                    <p>Username</p>
-                    <input type="text" />
+                    <p>Email</p>
+                    {
+                        //make the inputs uncontrolled components
+                    }
+                    <input type="text" onChange={(e) => setEmail(e.target.value)} />
                 </label>
                 <label>
-                    <p>Password</p>
-                    <input type="password" />
+                    <p>Key</p>
+                    <input type="password" onChange={(e) => setKey(e.target.value)} />
                 </label>
                 <div>
                     <button type="submit">Submit</button>
@@ -20,3 +73,9 @@ export default function Login () {
         </div>
     );
 }
+
+Login.propTypes = {
+    setToken: PropTypes.func.isRequired
+};
+
+export default Login;

login-auth/webpack.config.js

@@ -5,7 +5,7 @@ module.exports = {
     //tell Webpack to generate src maps
     devtool: 'inline-source-map',
     //entry point of app
-    entry: './src/index.js',
+    entry: ['@babel/polyfill', './src/index.js'],
     //put the output of the bundling process at this place
     output: {
 	path: path.resolve(__dirname, 'build'),