Add login flows

uwblueprint · Nov 21, 2024 · f8742f2 · f8742f2
1 parent 810bd0e
commit f8742f2
Show file tree

Hide file tree

Showing 8 changed files with 144 additions and 83 deletions.
diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
@@ -3,7 +3,6 @@ import { CssBaseline } from "@mui/material";
 import React, { useState, useReducer, useEffect } from "react";
 import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
 import Welcome from "./components/pages/Welcome";
-import Login from "./components/auth/Login";
 import Signup from "./components/pages/Signup";
 import PrivateRoute from "./components/auth/PrivateRoute";
 import Default from "./components/pages/Default";
@@ -71,7 +70,6 @@ const App = (): React.ReactElement => {
             <Router>
               <Switch>
                 <Route exact path={Routes.WELCOME_PAGE} component={Welcome} />
-                <Route exact path={Routes.LOGIN_PAGE} component={Login} />
                 <Route exact path={Routes.SIGNUP_PAGE} component={Signup} />
                 <Route
                   exact

diff --git a/frontend/src/components/auth/Login.tsx b/frontend/src/components/auth/Login.tsx
@@ -1,17 +1,18 @@
 import React, { useContext, useState } from "react";
-import { Link, Redirect } from "react-router-dom";
+import { Redirect } from "react-router-dom";
 import {
   Box,
   Button,
   Container,
+  Link,
   TextField,
   Typography,
   useTheme,
 } from "@mui/material";
 import { AlternateEmail, Password } from "@mui/icons-material";
 import InputAdornment from "@mui/material/InputAdornment";
 import authAPIClient from "../../APIClients/AuthAPIClient";
-import { HOME_PAGE } from "../../constants/Routes";
+import { FORGOT_PASSWORD_PAGE, HOME_PAGE } from "../../constants/Routes";
 import AuthContext from "../../contexts/AuthContext";
 import { AuthenticatedUser, Role } from "../../types/AuthTypes";
 import AUTHENTICATED_USER_KEY from "../../constants/AuthConstants";
@@ -217,16 +218,18 @@ const Login: React.FC<LoginProps> = ({
                 />
               </Box>
               <Box sx={{ textAlign: "right" }}>
-                <Typography
-                  variant="bodySmall"
-                  style={{
-                    color:
-                      theme.palette[userRole.toLowerCase() as PaletteRole]
-                        ?.main || "primary",
-                  }}
-                >
-                  Forgot Password
-                </Typography>
+                <Link href={FORGOT_PASSWORD_PAGE} underline="none">
+                  <Typography
+                    variant="bodySmall"
+                    style={{
+                      color:
+                        theme.palette[userRole.toLowerCase() as PaletteRole]
+                          ?.main || "primary",
+                    }}
+                  >
+                    Forgot Password
+                  </Typography>
+                </Link>
               </Box>
             </form>
             <Box
@@ -267,15 +270,16 @@ const Login: React.FC<LoginProps> = ({
               {redirectSignUpPath() && (
                 <Box sx={{ textAlign: "center" }}>
                   <Link
-                    to={signUpPath as string}
+                    href={signUpPath as string}
                     style={{ textDecoration: "none" }}
                   >
                     <Typography
-                      variant="labelSmall"
+                      variant="bodySmall"
                       style={{
                         color:
                           theme.palette[userRole.toLowerCase() as PaletteRole]
                             ?.main || "primary",
+                        textTransform: "uppercase",
                       }}
                     >
                       {signUpPrompt}
@@ -425,14 +429,16 @@ const Login: React.FC<LoginProps> = ({
               />
             </Box>
             <Box sx={{ textAlign: "right" }}>
-              <Typography
-                variant="bodySmall"
-                style={{
-                  color: theme.palette.learner.main,
-                }}
-              >
-                Forgot Password
-              </Typography>
+              <Link href={FORGOT_PASSWORD_PAGE} underline="none">
+                <Typography
+                  variant="bodySmall"
+                  style={{
+                    color: theme.palette.learner.main,
+                  }}
+                >
+                  Forgot Password
+                </Typography>
+              </Link>
             </Box>
           </form>
           <Box
@@ -459,7 +465,7 @@ const Login: React.FC<LoginProps> = ({
               }}
             >
               <Typography
-                variant="headlineSmall"
+                variant="titleLarge"
                 style={{
                   color: "white",
                 }}

diff --git a/frontend/src/components/auth/forgot_password/ForgotPasswordPage.tsx b/frontend/src/components/auth/forgot_password/ForgotPasswordPage.tsx
@@ -13,7 +13,7 @@ import { useHistory, Redirect } from "react-router-dom";
 import AuthContext from "../../../contexts/AuthContext";
 import ForgotPasswordConfirmation from "./ForgotPasswordConfirmation";
 import authAPIClient from "../../../APIClients/AuthAPIClient";
-import { LOGIN_PAGE, HOME_PAGE } from "../../../constants/Routes";
+import { HOME_PAGE, WELCOME_PAGE } from "../../../constants/Routes";
 
 const ForgotPasswordPage = (): React.ReactElement => {
   const [email, setEmail] = useState("");
@@ -43,7 +43,7 @@ const ForgotPasswordPage = (): React.ReactElement => {
   };
 
   const handleBackToLogin = () => {
-    history.push(LOGIN_PAGE);
+    history.push(WELCOME_PAGE);
   };
 
   if (isEmailSent) {

diff --git a/frontend/src/components/pages/Signup.tsx b/frontend/src/components/pages/Signup.tsx
@@ -1,23 +1,31 @@
 import React, { useContext, useState } from "react";
 import { Redirect } from "react-router-dom";
-
 import {
   Box,
   Button,
   Container,
+  Drawer,
+  IconButton,
   InputAdornment,
   Link,
   Stack,
   TextField,
   Typography,
   useTheme,
 } from "@mui/material";
-import { AlternateEmail, BadgeOutlined, Password } from "@mui/icons-material";
+import {
+  AlternateEmail,
+  BadgeOutlined,
+  Password,
+  Close,
+} from "@mui/icons-material";
 import authAPIClient from "../../APIClients/AuthAPIClient";
 import { HOME_PAGE, WELCOME_PAGE } from "../../constants/Routes";
 import AuthContext from "../../contexts/AuthContext";
 import { AuthenticatedUser } from "../../types/AuthTypes";
 import logo from "../assets/logoColoured.png";
+import { getSignUpPath, getSignUpPrompt } from "./Welcome";
+import Login from "../auth/Login";
 
 const Signup = (): React.ReactElement => {
   const { authenticatedUser } = useContext(AuthContext);
@@ -27,6 +35,8 @@ const Signup = (): React.ReactElement => {
   const [email, setEmail] = useState("");
   const [password, setPassword] = useState("");
 
+  const [loginDrawerOpen, setLoginDrawerOpen] = useState(false);
+
   const onSignupClick = async () => {
     const user: AuthenticatedUser | null = await authAPIClient.signup(
       firstName,
@@ -224,7 +234,18 @@ const Signup = (): React.ReactElement => {
                   Not a facilitator?
                 </Typography>
               </Link>
-              <Link href={WELCOME_PAGE}>
+              <Button
+                variant="text"
+                onClick={() => setLoginDrawerOpen(true)}
+                sx={{
+                  position: "absolute",
+                  right: 0,
+                  width: "50%",
+                  "&:hover": {
+                    bgcolor: "transparent",
+                  },
+                }}
+              >
                 <Typography
                   sx={{
                     ...theme.typography.labelSmall,
@@ -235,11 +256,53 @@ const Signup = (): React.ReactElement => {
                 >
                   Already have an account?
                 </Typography>
-              </Link>
+              </Button>
             </Stack>
           </Box>
         </Box>
       </Box>
+
+      <Drawer
+        PaperProps={{
+          sx: { maxWidth: "560px", width: "100%" },
+        }}
+        anchor="right"
+        open={loginDrawerOpen}
+        onClose={() => setLoginDrawerOpen(false)}
+        style={{
+          position: "relative",
+        }}
+      >
+        <IconButton
+          onClick={() => setLoginDrawerOpen(false)}
+          style={{
+            position: "absolute",
+            right: 56,
+            top: 56,
+          }}
+        >
+          <Close />
+        </IconButton>
+        <Box
+          sx={{
+            height: "100%",
+            width: "100%",
+            display: "flex",
+            flexDirection: "column",
+            justifyContent: "center",
+            alignItems: "center",
+          }}
+        >
+          {loginDrawerOpen && (
+            <Login
+              userRole="Facilitator"
+              isDrawerComponent
+              signUpPrompt={getSignUpPrompt("facilitator")}
+              signUpPath={getSignUpPath("facilitator")}
+            />
+          )}
+        </Box>
+      </Drawer>
     </Container>
   );
 };