reset password

src/api/authApi.ts

@@ -4,7 +4,7 @@ import {
   type LoginResponse,
   type MeResponse,
   type RegistrationPayload,
-  type User,
+  type ResetPasswordPayload,
 } from "../components/shared/types/AuthTypes";
 import axiosInstance from "./axiosInstance";
 
@@ -13,7 +13,7 @@ export const loginRequest = async (data: LoginPayload) => {
   return res.data;
 };
 
-export const fetchMe = async (): Promise<User> => {
+export const fetchMe = async () => {
   const res = await axiosInstance.get<MeResponse>("/api/auth/me");
   return res.data.user;
 };
@@ -33,3 +33,19 @@ export const activateAccount = async (token: string) => {
   );
   return res.data;
 };
+
+export const requestPasswordReset = async (email: string) => {
+  const res = await axiosInstance.post<{ message: string }>(
+    "/api/auth/forgot-password",
+    { email }
+  );
+  return res.data;
+};
+
+export const resetPassword = async (data: ResetPasswordPayload) => {
+  const res = await axiosInstance.post<{ message: string }>(
+    "/api/auth/reset-password",
+    data
+  );
+  return res.data;
+};

src/components/shared/types/AuthTypes.ts

@@ -33,3 +33,9 @@ export interface RegistrationPayload {
 export interface RegistrationResponse {
   message: string;
 }
+
+export interface ResetPasswordPayload {
+  token: string;
+  password: string;
+  password_confirmation: string;
+}

src/hooks/useRequestPasswordReset.ts

@@ -0,0 +1,15 @@
+import { useMutation } from "@tanstack/react-query";
+import { requestPasswordReset } from "../api/authApi";
+import { toast } from "react-toastify";
+
+export const useRequestPasswordReset = () => {
+  return useMutation({
+    mutationFn: (email: string) => requestPasswordReset(email),
+    onSuccess: (data) => {
+      toast.success(data.message);
+    },
+    onError: (err: any) => {
+      toast.error(err.response?.data?.message);
+    },
+  });
+};

src/hooks/useResetPassword.ts

@@ -0,0 +1,16 @@
+import { useMutation } from "@tanstack/react-query";
+import type { ResetPasswordPayload } from "../components/shared/types/AuthTypes";
+import { resetPassword } from "../api/authApi";
+import { toast } from "react-toastify";
+
+export const useResetPassword = () => {
+  return useMutation({
+    mutationFn: (data: ResetPasswordPayload) => resetPassword(data),
+    onSuccess: (data) => {
+      toast.success(data.message);
+    },
+    onError: (error: any) => {
+      toast.error(error.response?.data?.message);
+    },
+  });
+};

src/pages/LoginPage/LoginPage.styles.ts

@@ -0,0 +1,13 @@
+import styled from "@emotion/styled";
+import { Link } from "react-router-dom";
+
+export const RegisterLink = styled(Link)({
+  fontSize: "24px",
+  margin: "auto",
+  color: "#1565C0",
+  "&:hover":{
+    color: "#4B2981"
+  }
+});
+
+

src/pages/LoginPage/LoginPage.tsx

@@ -2,7 +2,8 @@ import { useEffect, useState } from "react";
 import { useAuth } from "../../context/AuthContext";
 import Container from "../../components/shared/Container";
 import { Box, Button, TextField, Typography } from "@mui/material";
-import { useNavigate } from "react-router-dom";
+import { Link, useNavigate } from "react-router-dom";
+import { RegisterLink } from "./LoginPage.styles";
 
 const LoginPage = () => {
   const { login, user } = useAuth();
@@ -46,6 +47,7 @@ const LoginPage = () => {
             margin="normal"
             required
           />
+          <Link to="/reset-password">Forgot Password?</Link>
           <Button
             type="submit"
             variant="contained"
@@ -57,6 +59,11 @@ const LoginPage = () => {
           </Button>
         </form>
       </Box>
+      <Box sx={{ display: "flex", alignItems: "center" }}>
+        <RegisterLink to={"/register"}>
+          Don't have and account? Register now!
+        </RegisterLink>
+      </Box>
     </Container>
   );
 };

src/pages/NotFoundPage/NotFoundPage.tsx

@@ -0,0 +1,22 @@
+import { Box, Typography } from "@mui/material";
+function NotFoundPage() {
+  return (
+    <Box
+      display="flex"
+      justifyContent="center"
+      alignItems="center"
+      flexDirection="column"
+      minHeight="80vh"
+    >
+      <Typography variant="h2" color="error" mb={2}>
+        404
+      </Typography>
+      <Typography variant="h5" mb={1}>
+        Page Not Found
+      </Typography>
+      <Typography>The page you are looking for does not exist.</Typography>
+    </Box>
+  );
+}
+
+export default NotFoundPage;

src/pages/RequestResetPage/RequestResetPage.tsx

@@ -0,0 +1,61 @@
+import { Box, Button, TextField, Typography } from "@mui/material";
+import Container from "../../components/shared/Container";
+import { useNavigate } from "react-router-dom";
+import { useAuth } from "../../context/AuthContext";
+import { useEffect, useState } from "react";
+import { useRequestPasswordReset } from "../../hooks/useRequestPasswordReset";
+
+const RequestResetPage = () => {
+  const { user } = useAuth();
+  const [email, setEmail] = useState("");
+  const navigate = useNavigate();
+  const requestPasswordReset = useRequestPasswordReset();
+
+  useEffect(() => {
+    if (user) {
+      navigate("/");
+    }
+  }, [user, navigate]);
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    requestPasswordReset.mutate(email, {
+      onSuccess: () => {
+        setEmail("");
+      },
+    });
+  };
+
+  return (
+    <Container>
+      <Box sx={{ padding: 4, maxWidth: 360, margin: "auto" }}>
+        <Typography variant="h4" mb={3} textAlign="center">
+          Request Password Reset
+        </Typography>
+        <form onSubmit={handleSubmit}>
+          <TextField
+            label="Email"
+            type="email"
+            value={email}
+            onChange={(e) => setEmail(e.target.value)}
+            fullWidth
+            margin="normal"
+            required
+          />
+
+          <Button
+            type="submit"
+            variant="contained"
+            color="primary"
+            fullWidth
+            sx={{ mt: "10px" }}
+          >
+            Send
+          </Button>
+        </form>
+      </Box>
+    </Container>
+  );
+};
+
+export default RequestResetPage;

src/pages/ResetPasswordPage/ResetPasswordPage.tsx

@@ -0,0 +1,87 @@
+import { useEffect, useState } from "react";
+import { useNavigate, useParams } from "react-router-dom";
+import { useAuth } from "../../context/AuthContext";
+import { toast } from "react-toastify";
+import { useResetPassword } from "../../hooks/useResetPassword";
+import Container from "../../components/shared/Container";
+import { Box, Button, TextField, Typography } from "@mui/material";
+
+const ResetPasswordPage = () => {
+  const navigate = useNavigate();
+  const { user } = useAuth();
+  const { token } = useParams<{ token: string }>();
+
+  const [password, setPassword] = useState("");
+  const [confirmPassword, setConfirmPassword] = useState("");
+
+  const resetMutation = useResetPassword();
+
+  useEffect(() => {
+    if (user) navigate("/");
+  }, [user, navigate]);
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    if (password !== confirmPassword) {
+      toast.error("Passwords do not match");
+      return;
+    }
+
+    if (!token) return;
+
+    resetMutation.mutate(
+      {
+        token,
+        password,
+        password_confirmation: confirmPassword,
+      },
+      {
+        onSuccess: () => {
+          navigate("/login");
+        },
+      }
+    );
+  };
+  return (
+    <Container>
+      <Box sx={{ padding: 4, maxWidth: 360, margin: "auto" }}>
+        <Typography variant="h4" mb={3} textAlign="center">
+          Reset Password
+        </Typography>
+
+        <form onSubmit={handleSubmit}>
+          <TextField
+            label="Password"
+            type="password"
+            value={password}
+            onChange={(e) => setPassword(e.target.value)}
+            fullWidth
+            margin="normal"
+            required
+          />
+          <TextField
+            label="Confirm Password"
+            type="password"
+            value={confirmPassword}
+            onChange={(e) => setConfirmPassword(e.target.value)}
+            fullWidth
+            margin="normal"
+            required
+          />
+          <Button
+            type="submit"
+            variant="contained"
+            color="primary"
+            fullWidth
+            sx={{ mt: 2 }}
+            disabled={resetMutation.isPending}
+          >
+            {resetMutation.isPending ? "Sending..." : "Send"}
+          </Button>
+        </form>
+      </Box>
+    </Container>
+  );
+};
+
+export default ResetPasswordPage;

src/pages/Unauthorized/Unauthorized.tsx

@@ -7,6 +7,7 @@ export default function Unauthorized() {
       justifyContent="center"
       alignItems="center"
       flexDirection="column"
+      minHeight="80vh"
     >
       <Typography variant="h2" color="error" mb={2}>
         401

src/router/router.tsx

@@ -6,6 +6,9 @@ import ProfilePage from "../pages/ProfilePage/Profilepage";
 import { ProtectedRoute } from "../components/ProtectedRoute/ProtectedRoute";
 import RegistrationPage from "../pages/RegistrationPage/RegistrationPage";
 import ActivateAccountPage from "../pages/ActivateAccountPage/ActivateAccountPage";
+import RequestResetPage from "../pages/RequestResetPage/RequestResetPage";
+import NotFoundPage from "../pages/NotFoundPage/NotFoundPage";
+import ResetPasswordPage from "../pages/ResetPasswordPage/ResetPasswordPage";
 
 const router = createBrowserRouter([
   {
@@ -36,6 +39,18 @@ const router = createBrowserRouter([
         path: "/auth/email-activation/:token",
         element: <ActivateAccountPage />,
       },
+      {
+        path: "/reset-password",
+        element: <RequestResetPage />,
+      },
+      {
+        path: "/auth/reset-password/:token",
+        element: <ResetPasswordPage />,
+      },
+      {
+        path: "*",
+        element: <NotFoundPage />,
+      },
     ],
   },
 ]);