Merge pull request #55 from uwblueprint/F24/trinity/update-login-page

F24/trinity/update-login-page

Author: trinity-y

frontend/src/components/auth/Login.tsx

@@ -1,79 +1,147 @@
-import React, { useContext, useState } from "react";
+import React, { useContext, useState, useEffect } from "react";
+import { Text, Flex } from "@chakra-ui/react";
 import { Redirect } from "react-router-dom";
 import { isSignInWithEmailLink } from "firebase/auth";
 import auth from "../../firebase/firebase";
 import authAPIClient from "../../APIClients/AuthAPIClient";
-import { HOME_PAGE } from "../../constants/Routes";
+import { CREATE_PASSWORD_PAGE, HOME_PAGE } from "../../constants/Routes";
 import AuthContext from "../../contexts/AuthContext";
 import { AuthenticatedUser } from "../../types/AuthTypes";
-
-let didInit = false;
+import ResponsiveModalWindow from "../common/responsive/ResponsiveModalWindow";
 
 const Login = (): React.ReactElement => {
   const { authenticatedUser, setAuthenticatedUser } = useContext(AuthContext);
   const [email, setEmail] = useState("");
   const [password, setPassword] = useState("");
-  const onLogInClick = async () => {
-    const user: AuthenticatedUser = await authAPIClient.login(email, password);
-    setAuthenticatedUser(user);
-  };
-  const checkIfSignInLink = async () => {
-    if (!authenticatedUser) {
+  const [redirectTo, setRedirectTo] = useState<string | null>(null);
+  const [status, setStatus] = useState<"loading" | "error" | "default">(
+    "default",
+  );
+
+  useEffect(() => {
+    setStatus("loading");
+    const checkIfSignInLink = async () => {
       const url = window.location.href;
       const urlSearchParams = new URLSearchParams(window.location.search);
       const signInEmail = urlSearchParams.get("email"); // passed in from actionCode
       const isSignInLink = isSignInWithEmailLink(auth, url);
+
       if (signInEmail && isSignInLink) {
         const user: AuthenticatedUser = await authAPIClient.loginWithSignInLink(
           url,
           signInEmail,
         );
-        setAuthenticatedUser(user);
+        if (user) {
+          setAuthenticatedUser(user);
+          setRedirectTo(CREATE_PASSWORD_PAGE);
+        } else {
+          setStatus("error");
+        }
+      } else {
+        setStatus("default");
       }
+    };
+
+    if (authenticatedUser) {
+      setRedirectTo(HOME_PAGE);
+    } else {
+      checkIfSignInLink();
     }
-    // alert: user is already logged in, please log out before trying again
-  };
+  }, [authenticatedUser, setAuthenticatedUser]);
 
-  if (authenticatedUser) {
-    return <Redirect to={HOME_PAGE} />;
+  if (redirectTo) {
+    return <Redirect to={redirectTo} />;
   }
 
-  if (!didInit) {
-    didInit = true;
-    checkIfSignInLink();
-  }
+  const onLogInClick = async () => {
+    const user: AuthenticatedUser = await authAPIClient.login(email, password);
+    setAuthenticatedUser(user);
+  };
 
   return (
-    <div style={{ textAlign: "center" }}>
-      <h1>Login</h1>
-      <form>
-        <div>
-          <input
-            type="email"
-            value={email}
-            onChange={(event) => setEmail(event.target.value)}
-            placeholder="username@domain.com"
-          />
-        </div>
-        <div>
-          <input
-            type="password"
-            value={password}
-            onChange={(event) => setPassword(event.target.value)}
-            placeholder="password"
-          />
-        </div>
-        <div>
-          <button
-            className="btn btn-primary"
-            type="button"
-            onClick={onLogInClick}
-          >
-            Log In
-          </button>
+    <>
+      {status === "loading" && (
+        <Flex
+          maxWidth="100vw"
+          height="100vh"
+          position="relative"
+          backgroundRepeat="no-repeat"
+          backgroundPosition="center"
+          backgroundSize="cover"
+          sx={{
+            "@media (orientation: landscape)": {
+              height: "auto",
+              minHeight: "100vh",
+              overflowY: "auto",
+            },
+          }}
+        >
+          <ResponsiveModalWindow>
+            <Text color="#2C5282" textAlign="center">
+              Loading, please wait...
+            </Text>
+          </ResponsiveModalWindow>
+        </Flex>
+      )}
+
+      {status === "error" && (
+        <Flex
+          maxWidth="100vw"
+          height="100vh"
+          position="relative"
+          backgroundRepeat="no-repeat"
+          backgroundPosition="center"
+          backgroundSize="cover"
+          sx={{
+            "@media (orientation: landscape)": {
+              height: "auto",
+              minHeight: "100vh",
+              overflowY: "auto",
+            },
+          }}
+        >
+          <ResponsiveModalWindow>
+            <Text color="red.500" textAlign="center">
+              An error occurred. If your link is expired, ask an adminstrator
+              for assistance.
+            </Text>
+          </ResponsiveModalWindow>
+        </Flex>
+      )}
+
+      {status === "default" && !redirectTo && (
+        <div style={{ textAlign: "center" }}>
+          <h1>Login</h1>
+          <form>
+            <div>
+              <input
+                type="email"
+                value={email}
+                onChange={(event) => setEmail(event.target.value)}
+                placeholder="username@domain.com"
+              />
+            </div>
+            <div>
+              <input
+                type="password"
+                value={password}
+                onChange={(event) => setPassword(event.target.value)}
+                placeholder="password"
+              />
+            </div>
+            <div>
+              <button
+                className="btn btn-primary"
+                type="button"
+                onClick={onLogInClick}
+              >
+                Log In
+              </button>
+            </div>
+          </form>
         </div>
-      </form>
-    </div>
+      )}
+    </>
   );
 };
 

frontend/src/components/pages/CreatePasswordPage.tsx

@@ -10,13 +10,15 @@ import {
   FormLabel,
   FormControl,
 } from "@chakra-ui/react";
+import { useHistory } from "react-router-dom";
 import ResponsiveLogo from "../common/responsive/ResponsiveAuthPageLogo";
 import ResponsivePasswordInput from "../common/responsive/ResponsivePasswordInput";
 import ResponsiveAuthContainer from "../common/responsive/ResponsiveAuthContainer";
 import ResponsiveModalWindow from "../common/responsive/ResponsiveModalWindow";
 import background from "../assets/background.png";
 import backgroundMobile from "../assets/background_mobile.png";
 import AuthAPIClient from "../../APIClients/AuthAPIClient";
+import { HOME_PAGE } from "../../constants/Routes";
 
 const CreatePasswordPage = (): React.ReactElement => {
   const [showModal, setShowModal] = React.useState(false);
@@ -25,6 +27,8 @@ const CreatePasswordPage = (): React.ReactElement => {
   const [errorMessage, setErrorMessage] = React.useState("");
   const [email, setEmail] = React.useState("Email not found.");
 
+  const history = useHistory();
+
   React.useEffect(() => {
     const getEmail = async () => {
       const userEmail = await AuthAPIClient.getEmailOfCurrentUser();
@@ -73,7 +77,7 @@ const CreatePasswordPage = (): React.ReactElement => {
   };
 
   const handleGetStarted = () => {
-    // TODO: Navigate to main page
+    history.push(HOME_PAGE);
   };
 
   return (