Forgot password backend logic + frontend design

backend/rest/authRoutes.ts

@@ -3,7 +3,7 @@
 import { generate } from "generate-password";
 import {
   getAccessToken,
   isAuthorizedByEmail,
   isAuthorizedByUserId,
   isAuthorizedByRole,
   isFirstTimeInvitedUser,
@@ -144,17 +144,16 @@
 );
 
 /* Emails a password reset link to the user with the specified email */
 authRouter.post(
   "/resetPassword/:email",
-  isAuthorizedByEmail("email"),
   async (req, res) => {
     try {
       await authService.resetPassword(req.params.email);
       res.status(204).send();
     } catch (error: unknown) {
       res.status(500).json({ error: getErrorMessage(error) });
     }
   },
 );
 
 authRouter.post("/isUserVerified/:email", async (req, res) => {

frontend/src/APIClients/AuthAPIClient.ts

@@ -64,17 +64,9 @@ const signup = async (
   }
 };
 
-const resetPassword = async (email: string | undefined): Promise<boolean> => {
-  const bearerToken = `Bearer ${getLocalStorageObjProperty(
-    AUTHENTICATED_USER_KEY,
-    "accessToken",
-  )}`;
+const resetPassword = async (email: string): Promise<boolean> => {
   try {
-    await baseAPIClient.post(
-      `/auth/resetPassword/${email}`,
-      {},
-      { headers: { Authorization: bearerToken } },
-    );
+    await baseAPIClient.post(`/auth/resetPassword/${email}`, {});
     return true;
   } catch (error) {
     return false;

frontend/src/APIClients/BaseAPIClient.ts

@@ -33,7 +33,7 @@ baseAPIClient.interceptors.request.use(async (config: AxiosRequestConfig) => {
         decodedToken.exp <= Math.round(new Date().getTime() / 1000))
     ) {
       const { data } = await axios.post(
-        `${process.env.REACT_APP_BACKEND_URL}/auth/refresh`,
+        `${process.env.REACT_APP_BACKEND_URL}auth/refresh`,
         {},
         { withCredentials: true },
       );

frontend/src/App.tsx

@@ -1,4 +1,6 @@
 import "bootstrap/dist/css/bootstrap.min.css";
+import { CssBaseline } from "@mui/material";
+import { createTheme, ThemeProvider } from "@mui/material/styles";
 import React, { useState, useReducer, useEffect } from "react";
 import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
 import Welcome from "./components/pages/Welcome";
@@ -22,12 +24,26 @@
 import { AuthenticatedUser } from "./types/AuthTypes";
 import authAPIClient from "./APIClients/AuthAPIClient";
 import * as Routes from "./constants/Routes";
-import ManageUserPage from "./components/pages/ManageUserPage";
 import { SocketProvider } from "./contexts/SocketContext";
+
+import ManageUserPage from "./components/pages/ManageUserPage";
 import MakeHelpRequestPage from "./components/pages/MakeHelpRequestPage";
 import ViewHelpRequestsPage from "./components/pages/ViewHelpRequestsPage";
 import HelpRequestPage from "./components/pages/HelpRequestPage";
 import CreatePasswordPage from "./components/pages/CreatePasswordPage";
+import ForgotPasswordPage from "./components/auth/forgot_password/ForgotPasswordPage";
+
+// Add Lexend Deca font globally
+const link = document.createElement("link");
+link.href = "https://fonts.googleapis.com/css2?family=Lexend+Deca:wght@400;600&display=swap";
+link.rel = "stylesheet";
+document.head.appendChild(link);
+
+const theme = createTheme({
+  typography: {
+    fontFamily: "'Lexend Deca', sans-serif",
+  },
+});
 
 const App = (): React.ReactElement => {
   const currentUser: AuthenticatedUser | null =
@@ -35,7 +51,8 @@
 
   const [authenticatedUser, setAuthenticatedUser] =
     useState<AuthenticatedUser | null>(currentUser);
 
+
   // Some sort of global state. Context API replaces redux.
   // Split related states into different contexts as necessary.
   // Split dispatcher and state into separate contexts as necessary.
@@ -60,77 +77,82 @@
 
   return (
     <SampleContext.Provider value={sampleContext}>
-      <SampleContextDispatcherContext.Provider
-        value={dispatchSampleContextUpdate}
-      >
-        <AuthContext.Provider
-          value={{ authenticatedUser, setAuthenticatedUser }}
+      <ThemeProvider theme={theme}>
+        <CssBaseline />
+        <SampleContextDispatcherContext.Provider
+          value={dispatchSampleContextUpdate}
         >
-          <SocketProvider id={authenticatedUser?.id}>
-            <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} />
-                <PrivateRoute
-                  exact
-                  path={Routes.HOME_PAGE}
-                  component={Default}
-                  allowedRoles={["Administrator", "Facilitator", "Learner"]}
-                />
-                <PrivateRoute
-                  exact
-                  path={Routes.MY_ACCOUNT_PAGE}
-                  component={MyAccount}
-                  allowedRoles={["Administrator", "Facilitator", "Learner"]}
-                />
-                <PrivateRoute
-                  exact
-                  path={Routes.CREATE_MODULE_PAGE}
-                  component={CreateModulePage}
-                  allowedRoles={["Administrator"]}
-                />
-                <Route
-                  exact
-                  path={Routes.NOT_AUTHORIZED_PAGE}
-                  component={NotAuthorized}
-                />
-                <PrivateRoute
-                  exact
-                  path={Routes.CREATE_PASSWORD_PAGE}
-                  component={CreatePasswordPage}
-                  allowedRoles={["Administrator", "Learner"]}
-                />
-                <PrivateRoute
-                  exact
-                  path={Routes.MANAGE_USERS_PAGE}
-                  component={ManageUserPage}
-                  allowedRoles={["Administrator"]}
-                />
-                <PrivateRoute
-                  exact
-                  path={Routes.MAKE_HELP_REQUEST_PAGE}
-                  component={MakeHelpRequestPage}
-                  allowedRoles={["Learner"]}
-                />
-                <PrivateRoute
-                  exact
-                  path={Routes.VIEW_HELP_REQUESTS_PAGE}
-                  component={ViewHelpRequestsPage}
-                  allowedRoles={["Facilitator"]}
-                />
-                <PrivateRoute
-                  exact
-                  path={`${Routes.VIEW_HELP_REQUESTS_PAGE}/:id`}
-                  component={HelpRequestPage}
-                  allowedRoles={["Facilitator"]}
-                />
-                <Route exact path="*" component={NotFound} />
-              </Switch>
-            </Router>
-          </SocketProvider>
-        </AuthContext.Provider>
-      </SampleContextDispatcherContext.Provider>
+          <AuthContext.Provider
+            value={{ authenticatedUser, setAuthenticatedUser }}
+          >
+            <SocketProvider id={authenticatedUser?.id}>
+              <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 path={Routes.FORGOT_PASSWORD_PAGE} component={ForgotPasswordPage} />
+
+                  <PrivateRoute
+                    exact
+                    path={Routes.HOME_PAGE}
+                    component={Default}
+                    allowedRoles={["Administrator", "Facilitator", "Learner"]}
+                  />
+                  <PrivateRoute
+                    exact
+                    path={Routes.MY_ACCOUNT_PAGE}
+                    component={MyAccount}
+                    allowedRoles={["Administrator", "Facilitator", "Learner"]}
+                  />
+                  <PrivateRoute
+                    exact
+                    path={Routes.CREATE_MODULE_PAGE}
+                    component={CreateModulePage}
+                    allowedRoles={["Administrator"]}
+                  />
+                  <Route
+                    exact
+                    path={Routes.NOT_AUTHORIZED_PAGE}
+                    component={NotAuthorized}
+                  />
+                  <PrivateRoute
+                    exact
+                    path={Routes.CREATE_PASSWORD_PAGE}
+                    component={CreatePasswordPage}
+                    allowedRoles={["Administrator", "Learner"]}
+                  />
+                  <PrivateRoute
+                    exact
+                    path={Routes.MANAGE_USERS_PAGE}
+                    component={ManageUserPage}
+                    allowedRoles={["Administrator"]}
+                  />
+                  <PrivateRoute
+                    exact
+                    path={Routes.MAKE_HELP_REQUEST_PAGE}
+                    component={MakeHelpRequestPage}
+                    allowedRoles={["Learner"]}
+                  />
+                  <PrivateRoute
+                    exact
+                    path={Routes.VIEW_HELP_REQUESTS_PAGE}
+                    component={ViewHelpRequestsPage}
+                    allowedRoles={["Facilitator"]}
+                  />
+                  <PrivateRoute
+                    exact
+                    path={`${Routes.VIEW_HELP_REQUESTS_PAGE}/:id`}
+                    component={HelpRequestPage}
+                    allowedRoles={["Facilitator"]}
+                  />
+                  <Route exact path="*" component={NotFound} />
+                </Switch>
+              </Router>
+            </SocketProvider>
+          </AuthContext.Provider>
+        </SampleContextDispatcherContext.Provider>
+      </ThemeProvider>
     </SampleContext.Provider>
   );
 };

frontend/src/components/auth/ResetPassword.tsx

@@ -7,7 +7,11 @@
   const { authenticatedUser } = useContext(AuthContext);
 
   const onResetPasswordClick = async () => {
-    await authAPIClient.resetPassword(authenticatedUser?.email);
+    if (!authenticatedUser?.email) {
+      console.error("Email is undefined. Cannot reset password.");
+      return;
+    }
+    await authAPIClient.resetPassword(authenticatedUser.email);
   };
 
   return (

frontend/src/components/auth/forgot_password/ForgotPasswordConfirmation.tsx

@@ -0,0 +1,92 @@
+import React from "react";
+import { Container, Typography, Button } from "@mui/material";
+
+interface ForgotPasswordConfirmationProps {
+  email: string;
+  onBackToEmail: () => void;
+}
+
+const ForgotPasswordConfirmation: React.FC<ForgotPasswordConfirmationProps> = ({
+  email,
+  onBackToEmail,
+}) => {
+  return (
+    <Container
+      sx={{
+        display: "flex",
+        justifyContent: "center",
+        alignItems: "center",
+        height: "100vh",
+        width: "100vw",
+      }}
+    >
+      <Container
+        sx={{
+          display: "flex",
+          width: "500px",
+          flexDirection: "column",
+          alignItems: "flex-start",
+          gap: "20px",
+          flexShrink: 0,
+        }}
+      >
+        <Container
+          sx={{
+            display: "flex",
+            flexDirection: "column",
+            alignItems: "flex-start",
+            gap: "8px",
+            alignSelf: "stretch",
+            marginLeft: "-24px",
+          }}
+        >
+          <Typography
+            variant="h4"
+            gutterBottom
+            sx={{
+              color: "#000",
+              fontFamily: "Lexend Deca",
+              fontSize: "28px",
+              fontWeight: 600,
+              lineHeight: "120%",
+              marginBottom: 0,
+            }}
+          >
+            Email sent
+          </Typography>
+          <Typography
+            variant="body1"
+            sx={{
+              color: "#000",
+              fontFamily: "Lexend Deca",
+              fontSize: "16px",
+              fontWeight: 400,
+              lineHeight: "140%",
+              letterSpacing: "0.2px",
+            }}
+          >
+            Check your email ({email}) and open the link we sent to continue.
+          </Typography>
+        </Container>
+        <Button
+          variant="text"
+          color="primary"
+          onClick={onBackToEmail}
+          sx={{
+            color: "#006877",
+            fontSize: "12.5px",
+            fontWeight: 300,
+            lineHeight: "120%",
+            letterSpacing: "0.625px",
+            textTransform: "uppercase",
+            padding: 0,
+          }}
+        >
+          NOT YOUR EMAIL? Go back to change your email
+        </Button>
+      </Container>
+    </Container>
+  );
+};
+
+export default ForgotPasswordConfirmation;