From 67c1b9e8213794bde0defe960dcd8ed2441ee3ed Mon Sep 17 00:00:00 2001
From: Harrison Deng <yunyangdeng@gmail.com>
Date: Tue, 5 Apr 2022 14:20:50 -0500
Subject: [PATCH] Added route guards and login page template.

---
 sports-matcher/client/src/Layout.js        |  3 +-
 sports-matcher/client/src/pages/Login.js   | 39 ++++++++++++++++++++++
 sports-matcher/client/src/utils/routing.js | 24 +++++++++++++
 3 files changed, 64 insertions(+), 2 deletions(-)
 create mode 100644 sports-matcher/client/src/pages/Login.js
 create mode 100644 sports-matcher/client/src/utils/routing.js

diff --git a/sports-matcher/client/src/Layout.js b/sports-matcher/client/src/Layout.js
index 3fe80fb..7765c45 100644
--- a/sports-matcher/client/src/Layout.js
+++ b/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>
diff --git a/sports-matcher/client/src/pages/Login.js b/sports-matcher/client/src/pages/Login.js
new file mode 100644
index 0000000..650879e
--- /dev/null
+++ b/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>
+        );
+    }
+}
\ No newline at end of file
diff --git a/sports-matcher/client/src/utils/routing.js b/sports-matcher/client/src/utils/routing.js
new file mode 100644
index 0000000..94c328e
--- /dev/null
+++ b/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;
+}
\ No newline at end of file