Login form

.gitignore

@@ -13,10 +13,7 @@
 
 # misc
 .DS_Store
-.env.local
-.env.development.local
-.env.test.local
-.env.production.local
+.env*
 
 npm-debug.log*
 yarn-debug.log*

README.md

@@ -1,3 +1,18 @@
+# Exercise in Preparation for MBU's IPA
+
+## Development
+
+To use the 4D Test API add a `.env.development` file and include the following lines replacing `<url>` and `<credentials>`:
+
+    REACT_APP_API_URL=<url>
+    REACT_APP_API_AUTH_CREDENTIALS=<credentials>
+
+### Debugging
+
+To use a JetBrains IDE to debug, see: [Debugging React Apps Created With Create React App in WebStorm](https://blog.jetbrains.com/webstorm/2017/01/debugging-react-apps/)
+
+***
+
 # Getting Started with Create React App
 
 This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).

src/App.js

@@ -4,6 +4,7 @@ import Home from './pages/Home';
 import Tagesmenu from './pages/Tagesmenu'
 import { createBrowserRouter, RouterProvider } from 'react-router-dom';
 import LunchMenu from "./pages/LunchMenu";
+import Login from "./pages/Login";
 
 function App() {
 
@@ -20,6 +21,10 @@ function App() {
     {
       path: "/lunch-menu",
       element: <LunchMenu />
+    },
+    {
+      path: "/login",
+      element: <Login />
     }
 
   ]);

src/pages/Login.js

@@ -0,0 +1,71 @@
+import {useState} from "react";
+import {useNavigate} from "react-router-dom";
+
+export default function Login() {
+
+    const [username, setUsername] = useState("");
+    const [password, setPassword] = useState("");
+
+    const [errorMessage, setErrorMessage] = useState("");
+
+    const navigate = useNavigate();
+
+    function handleUsernameChange(event) {
+        setUsername(event.target.value);
+    }
+
+    function handlePasswordChange(event) {
+        setPassword(event.target.value);
+    }
+
+    async function handleSubmit(event) {
+        event.preventDefault();
+        // cf. https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch#uploading_json_data
+        try {
+            // cf. https://create-react-app.dev/docs/adding-custom-environment-variables/
+            const response = await fetch(`${process.env.REACT_APP_API_URL}/authentication/login`, {
+                method: "POST",
+                headers: {
+                    Authorization: `Basic ${process.env.REACT_APP_API_AUTH_CREDENTIALS}`,
+                    "Content-Type": "application/json"
+                },
+                body: JSON.stringify({
+                    username,
+                    password
+                })
+            });
+            const data = await response.json();
+            console.log(data);
+            if (data && data.authToken) {
+                // cf. https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage
+                localStorage.setItem("auth", data?.authToken);
+                setErrorMessage("");
+                navigate("/");
+            } else {
+                setErrorMessage(data.message);
+            }
+        } catch (error) {
+            console.error(error);
+        }
+    }
+
+    return (
+        <>
+            {/*cf. https://getbootstrap.com/docs/5.2/forms/overview/*/}
+            <form onSubmit={handleSubmit} className="container">
+                <label htmlFor="username" className="form-label">Username</label>
+                <input id="username" name="username" type="text" value={username} onChange={handleUsernameChange}
+                       required
+                       className="form-control"/>
+                <label htmlFor="password" className="form-label">Password</label>
+                <input id="password" name="password" type="password" value={password} onChange={handlePasswordChange}
+                       required
+                       className="form-control"/>
+                <input type="submit" className="btn btn-primary"/>
+            </form>
+            <div className="container text-danger">
+                {errorMessage}
+            </div>
+        </>
+    );
+}