Add forget password functionality

Author: guanquann

frontend/src/App.tsx

@@ -10,6 +10,7 @@ import Landing from "./pages/Landing";
 import Home from "./pages/Home";
 import SignUp from "./pages/SignUp";
 import LogIn from "./pages/LogIn";
+import ForgetPassword from "./pages/ForgetPassword";
 import Matched from "./pages/Matched";
 import Timeout from "./pages/Timeout";
 import ProtectedRoutes from "./components/ProtectedRoutes";
@@ -52,6 +53,7 @@ function App() {
         </Route>
         <Route path="signup" element={<SignUp />} />
         <Route path="login" element={<LogIn />} />
+        <Route path="forget-password" element={<ForgetPassword />} />
       </Routes>
     </AuthProvider>
   );

frontend/src/contexts/AuthContext.tsx

@@ -29,6 +29,7 @@ type AuthContextType = {
   ) => void;
   login: (email: string, password: string) => void;
   logout: () => void;
+  resetPassword: (email: string) => void;
   user: User | null;
   setUser: React.Dispatch<React.SetStateAction<User | null>>;
   loading: boolean;
@@ -107,12 +108,20 @@ const AuthProvider: React.FC<{ children?: React.ReactNode }> = (props) => {
     toast.success(SUCCESS_LOG_OUT);
   };
 
+  const resetPassword = (email: string) => {
+    userClient.post("/users/reset-password", { email }).then(() => {
+      toast.success("Reset link sent to your email");
+    });
+  };
+
   if (loading) {
     return <Loader />;
   }
 
   return (
-    <AuthContext.Provider value={{ signup, login, logout, user, setUser, loading }}>
+    <AuthContext.Provider
+      value={{ signup, login, logout, user, setUser, resetPassword, loading }}
+    >
       {children}
     </AuthContext.Provider>
   );

frontend/src/pages/ForgetPassword/index.tsx

@@ -0,0 +1,102 @@
+import { Box, Button, Stack, TextField, Typography } from "@mui/material";
+import LogInSvg from "../../assets/login.svg?react";
+import { useAuth } from "../../contexts/AuthContext";
+import { emailValidator } from "../../utils/validators";
+import { ToastContainer } from "react-toastify";
+import "react-toastify/dist/ReactToastify.css";
+import { useForm } from "react-hook-form";
+import { USE_AUTH_ERROR_MESSAGE } from "../../utils/constants";
+
+const ForgetPassword: React.FC = () => {
+  const auth = useAuth();
+  if (!auth) {
+    throw new Error(USE_AUTH_ERROR_MESSAGE);
+  }
+  const { resetPassword } = auth;
+
+  const {
+    register,
+    handleSubmit,
+    formState: { errors },
+  } = useForm<{ email: string }>({ mode: "all" });
+
+  return (
+    <Box
+      sx={{
+        display: "flex",
+        flexDirection: "row",
+        minHeight: "100vh",
+        minWidth: "755px",
+      }}
+    >
+      <Box flex={1}>
+        <Stack
+          height="100%"
+          direction="column"
+          sx={(theme) => ({
+            backgroundColor: "secondary.main",
+            padding: theme.spacing(2, 10),
+            justifyContent: "center",
+          })}
+        >
+          <Typography
+            component="h1"
+            variant="h1"
+            sx={{ color: "primary.main", textAlign: "center" }}
+          >
+            Reset Password
+          </Typography>
+          <Stack
+            component="form"
+            direction="column"
+            spacing={1.5}
+            sx={(theme) => ({
+              marginTop: theme.spacing(2),
+              marginBottom: theme.spacing(2),
+            })}
+            onSubmit={handleSubmit((data) => resetPassword(data.email))}
+            noValidate
+          >
+            <Typography>
+              Enter your email address and we will send you a password reset
+              link.
+            </Typography>
+            <TextField
+              label="Email"
+              required
+              fullWidth
+              margin="normal"
+              type="email"
+              {...register("email", {
+                setValueAs: (value: string) => value.trim(),
+                validate: { emailValidator },
+              })}
+              error={!!errors.email}
+              helperText={errors.email?.message}
+            />
+            <Button
+              type="submit"
+              variant="contained"
+              sx={(theme) => ({ margin: theme.spacing(2, 0) })}
+            >
+              Send Reset Link
+            </Button>
+          </Stack>
+        </Stack>
+      </Box>
+      <Box
+        flex={1}
+        sx={{
+          display: "flex",
+          justifyContent: "center",
+          alignItems: "center",
+        }}
+      >
+        <LogInSvg width="80%" height="80%" />
+      </Box>
+      <ToastContainer position="bottom-right" />
+    </Box>
+  );
+};
+
+export default ForgetPassword;

frontend/src/pages/LogIn/index.tsx

@@ -122,6 +122,7 @@ const LogIn: React.FC = () => {
                   textDecoration: "underline",
                 },
               }}
+              onClick={() => navigate("/forget-password")}
             >
               Forget password
             </StyledTypography>