Added route guards and login page template.

sports-matcher/client/src/Layout.js

@@ -28,8 +28,7 @@ export default class Layout extends React.Component {
                 </header>
                 <main>
                     <Routes>
-                        <Route path="/" element={<Welcome></Welcome>}>
-                        </Route>
+                        <Route path="/" element={<Welcome></Welcome>} />
                     </Routes>
                 </main>
                 <footer>

sports-matcher/client/src/pages/Login.js

@@ -0,0 +1,39 @@
+import React from "react";
+import { Button, Card, Form } from "react-bootstrap";
+import { apiClient } from "../utils/httpClients";
+import { guard } from "../utils/routing";
+
+export default class Login extends React.Component {
+    constructor(props) {
+        super(props);
+    }
+
+    async componentDidMount() {
+        const getUserResponse = await apiClient.get("/user");
+        guard(() => getUserResponse.status === 401, "/dashboard"); // If it's not 401, then we redirect to dashboard.
+    }
+
+    render() {
+        return (
+            <Card>
+                <Card.Body>
+                    <Card.Title>Login</Card.Title>
+                    <Card.Subtitle>Welcome back!</Card.Subtitle>
+                    <Form>
+                        <Form.Group className="mb-3" controlId="loginEmail">
+                            <Form.Label>E-mail</Form.Label>
+                            <Form.Control type="email" placeholder="Ex. youremail@mail.com" />
+                        </Form.Group>
+                        <Form.Group className="mb-3" controlId="loginPassword">
+                            <Form.Label>Password</Form.Label>
+                            <Form.Control type="password" placeholder="Enter password" />
+                        </Form.Group>
+                        <Button variant="primary" type="submit">
+                            Login
+                        </Button>
+                    </Form>
+                </Card.Body>
+            </Card>
+        );
+    }
+}

sports-matcher/client/src/utils/routing.js

@@ -0,0 +1,24 @@
+import { useNavigate } from "react-router-dom";
+import { apiClient } from "./httpClients";
+
+export function guard(evaluator, redirect, navigateOptions, onRedirect) {
+    if (!evaluator) throw new Error("evaluator required.");
+    if (!redirect) throw new Error("redirect required.");
+    if (!navigateOptions) {
+        navigateOptions = {
+            replace: true
+        };
+    }
+    let navigate = useNavigate();
+    let redirecting = !evaluator();
+    if (redirecting) {
+        if (onRedirect) onRedirect();
+        navigate(redirect, navigateOptions);
+    }
+}
+
+export async function needUser() {
+    let userDataResponse = await apiClient.get("/user");
+    guard(() => userDataResponse.status === 200, "/login");
+    return userDataResponse.data;
+}