fix: refactor forgot password system (#329)

* refactor forgot password system * ready
2025-11-20 15:51:08 +10:00 · 2024-09-19 15:51:51 +01:00
parent b152c858b4
commit e56f7933f4
29 changed files with 578 additions and 338 deletions
--- a/apps/client/src/features/auth/components/auth.module.css
+++ b/apps/client/src/features/auth/components/auth.module.css
@ -3,12 +3,3 @@
    border-radius: 4px;
    background: light-dark(var(--mantine-color-body), rgba(0, 0, 0, 0.1));
 }
-
-.forgotPasswordBtn {
-    font-size: var(--input-label-size, var(--mantine-font-size-sm));
-    text-decoration: underline;
-}
-
-.formElemWithTopMargin {
-    margin-top: var(--mantine-spacing-md);
-}
--- a/apps/client/src/features/auth/components/forgot-password-form.tsx
+++ b/apps/client/src/features/auth/components/forgot-password-form.tsx
@ -1,109 +1,70 @@
-import * as React from "react";
-import {useState} from "react";
+import { useState } from "react";
 import * as z from "zod";
-import {useForm, zodResolver} from "@mantine/form";
+import { useForm, zodResolver } from "@mantine/form";
 import useAuth from "@/features/auth/hooks/use-auth";
-import {IForgotPassword} from "@/features/auth/types/auth.types";
-import {Box, Button, Container, PasswordInput, TextInput, Title,} from "@mantine/core";
+import { IForgotPassword } from "@/features/auth/types/auth.types";
+import { Box, Button, Container, Text, TextInput, Title } from "@mantine/core";
 import classes from "./auth.module.css";
-import {useRedirectIfAuthenticated} from "@/features/auth/hooks/use-redirect-if-authenticated.ts";
-import {notifications} from "@mantine/notifications";
+import { useRedirectIfAuthenticated } from "@/features/auth/hooks/use-redirect-if-authenticated.ts";

-const stepOneSchema = z.object({
-    email: z
-        .string()
-        .min(1, {message: "Email is required"})
-        .email({message: "Invalid email address"}),
-});
-
-const stepTwoSchema = z.object({
-    email: z
-        .string()
-        .min(1, {message: "Email is required"})
-        .email({message: "Invalid email address"}),
-    token: z.string().min(1, {message: 'Token is required'}),
-    newPassword: z.string().min(8, {message: 'Password must contain at least 8 character(s)'}),
+const formSchema = z.object({
+  email: z
+    .string()
+    .min(1, { message: "Email is required" })
+    .email({ message: "Invalid email address" }),
 });

 export function ForgotPasswordForm() {
-    const {forgotPassword, isLoading} = useAuth();
-    const [isTokenSend, setIsTokenSend] = useState<boolean>(false)
-    useRedirectIfAuthenticated();
+  const { forgotPassword, isLoading } = useAuth();
+  const [isTokenSent, setIsTokenSent] = useState<boolean>(false);
+  useRedirectIfAuthenticated();

-    const form = useForm<IForgotPassword>({
-        validate: isTokenSend ? zodResolver(stepTwoSchema) : zodResolver(stepOneSchema),
-        initialValues: {
-            email: "",
-            token: null,
-            newPassword: null,
-        },
-    });
+  const form = useForm<IForgotPassword>({
+    validate: zodResolver(formSchema),
+    initialValues: {
+      email: "",
+    },
+  });

-    async function onSubmit(data: IForgotPassword) {
-        const success = await forgotPassword(data);
-
-        if (success) {
-            if (isTokenSend) {
-                notifications.show({
-                    message: 'Password updated',
-                    color: "green",
-                });
-            }
-
-            if (!isTokenSend) {
-                setIsTokenSend(true);
-            }
-        }
+  async function onSubmit(data: IForgotPassword) {
+    if (await forgotPassword(data)) {
+      setIsTokenSent(true);
    }
+  }

-    return (
-        <Container size={420} my={40} className={classes.container}>
-            <Box p="xl" mt={200}>
-                <Title order={2} ta="center" fw={500} mb="md">
-                    Forgot password
-                </Title>
+  return (
+    <Container size={420} my={40} className={classes.container}>
+      <Box p="xl" mt={200}>
+        <Title order={2} ta="center" fw={500} mb="md">
+          Forgot password
+        </Title>

-                <form onSubmit={form.onSubmit(onSubmit)}>
-                    <TextInput
-                        id="email"
-                        type="email"
-                        label="Email"
-                        placeholder="email@example.com"
-                        variant="filled"
-                        disabled={isTokenSend}
-                        {...form.getInputProps("email")}
-                    />
+        <form onSubmit={form.onSubmit(onSubmit)}>
+          {!isTokenSent && (
+            <TextInput
+              id="email"
+              type="email"
+              label="Email"
+              placeholder="email@example.com"
+              variant="filled"
+              {...form.getInputProps("email")}
+            />
+          )}

-                    {
-                        isTokenSend
-                        && (
-                            <>
-                                <TextInput
-                                    id="token"
-                                    className={classes.formElemWithTopMargin}
-                                    type="text"
-                                    label="Token"
-                                    placeholder="token"
-                                    variant="filled"
-                                    {...form.getInputProps("token")}
-                                />
+          {isTokenSent && (
+            <Text>
+              A password reset link has been sent to your email. Please check
+              your inbox.
+            </Text>
+          )}

-                                <PasswordInput
-                                    label="Password"
-                                    placeholder="Your password"
-                                    variant="filled"
-                                    mt="md"
-                                    {...form.getInputProps("newPassword")}
-                                />
-                            </>
-                        )
-                    }
-
-                    <Button type="submit" fullWidth mt="xl" loading={isLoading}>
-                        {isTokenSend ? 'Set password' : 'Send Token'}
-                    </Button>
-                </form>
-            </Box>
-        </Container>
-    );
+          {!isTokenSent && (
+            <Button type="submit" fullWidth mt="xl" loading={isLoading}>
+              Send reset link
+            </Button>
+          )}
+        </form>
+      </Box>
+    </Container>
+  );
 }
--- a/apps/client/src/features/auth/components/login-form.tsx
+++ b/apps/client/src/features/auth/components/login-form.tsx
@ -1,4 +1,3 @@
-import * as React from "react";
 import * as z from "zod";
 import { useForm, zodResolver } from "@mantine/form";
 import useAuth from "@/features/auth/hooks/use-auth";
@ -10,12 +9,12 @@ import {
  Button,
  PasswordInput,
  Box,
-  UnstyledButton,
+
+  Anchor,
 } from "@mantine/core";
 import classes from "./auth.module.css";
 import { useRedirectIfAuthenticated } from "@/features/auth/hooks/use-redirect-if-authenticated.ts";
-import clsx from "clsx";
-import {useNavigate} from "react-router-dom";
+import { Link, useNavigate } from "react-router-dom";
 import APP_ROUTE from "@/lib/app-route.ts";

 const formSchema = z.object({
@ -28,7 +27,6 @@ const formSchema = z.object({

 export function LoginForm() {
  const { signIn, isLoading } = useAuth();
-  const navigate = useNavigate();
  useRedirectIfAuthenticated();

  const form = useForm<ILogin>({
@ -68,17 +66,19 @@ export function LoginForm() {
            {...form.getInputProps("password")}
          />

-          <UnstyledButton
-              onClick={() => navigate(APP_ROUTE.AUTH.FORGOT_PASSWORD)}
-              className = {clsx(classes.forgotPasswordBtn, classes.formElemWithTopMargin)}>
-            <div>
-              <span>Forgot Password</span>
-            </div>
-          </UnstyledButton>
          <Button type="submit" fullWidth mt="xl" loading={isLoading}>
            Sign In
          </Button>
        </form>
+
+        <Anchor
+          to={APP_ROUTE.AUTH.FORGOT_PASSWORD}
+          component={Link}
+          underline="never"
+          size="sm"
+        >
+          Forgot your password?
+        </Anchor>
      </Box>
    </Container>
  );
--- a/apps/client/src/features/auth/components/password-reset-form.tsx
+++ b/apps/client/src/features/auth/components/password-reset-form.tsx
@ -0,0 +1,67 @@
+import * as z from "zod";
+import { useForm, zodResolver } from "@mantine/form";
+import useAuth from "@/features/auth/hooks/use-auth";
+import { IPasswordReset } from "@/features/auth/types/auth.types";
+import {
+  Box,
+  Button,
+  Container,
+  PasswordInput,
+  Text,
+  Title,
+} from "@mantine/core";
+import classes from "./auth.module.css";
+import { useRedirectIfAuthenticated } from "@/features/auth/hooks/use-redirect-if-authenticated.ts";
+
+const formSchema = z.object({
+  newPassword: z
+    .string()
+    .min(8, { message: "Password must contain at least 8 characters" }),
+});
+
+interface PasswordResetFormProps {
+  resetToken?: string;
+}
+
+export function PasswordResetForm({ resetToken }: PasswordResetFormProps) {
+  const { passwordReset, isLoading } = useAuth();
+  useRedirectIfAuthenticated();
+
+  const form = useForm<IPasswordReset>({
+    validate: zodResolver(formSchema),
+    initialValues: {
+      newPassword: "",
+    },
+  });
+
+  async function onSubmit(data: IPasswordReset) {
+    await passwordReset({
+      token: resetToken,
+      newPassword: data.newPassword
+    })
+  }
+
+  return (
+    <Container size={420} my={40} className={classes.container}>
+      <Box p="xl" mt={200}>
+        <Title order={2} ta="center" fw={500} mb="md">
+          Password Reset
+        </Title>
+
+        <form onSubmit={form.onSubmit(onSubmit)}>
+          <PasswordInput
+            label="New password"
+            placeholder="Your new password"
+            variant="filled"
+            mt="md"
+            {...form.getInputProps("newPassword")}
+          />
+
+          <Button type="submit" fullWidth mt="xl" loading={isLoading}>
+            Set password
+          </Button>
+        </form>
+      </Box>
+    </Container>
+  );
+}
--- a/apps/client/src/features/auth/hooks/use-auth.ts
+++ b/apps/client/src/features/auth/hooks/use-auth.ts
@ -1,10 +1,22 @@
 import { useState } from "react";
-import {forgotPassword, login, setupWorkspace} from "@/features/auth/services/auth-service";
+import {
+  forgotPassword,
+  login,
+  passwordReset,
+  setupWorkspace,
+  verifyUserToken,
+} from "@/features/auth/services/auth-service";
 import { useNavigate } from "react-router-dom";
 import { useAtom } from "jotai";
 import { authTokensAtom } from "@/features/auth/atoms/auth-tokens-atom";
 import { currentUserAtom } from "@/features/user/atoms/current-user-atom";
-import {IForgotPassword, ILogin, ISetupWorkspace} from "@/features/auth/types/auth.types";
+import {
+  IForgotPassword,
+  ILogin,
+  IPasswordReset,
+  ISetupWorkspace,
+  IVerifyUserToken,
+} from "@/features/auth/types/auth.types";
 import { notifications } from "@mantine/notifications";
 import { IAcceptInvite } from "@/features/workspace/types/workspace.types.ts";
 import { acceptInvitation } from "@/features/workspace/services/workspace-service.ts";
@ -76,6 +88,28 @@ export default function useAuth() {
    }
  };

+  const handlePasswordReset = async (data: IPasswordReset) => {
+    setIsLoading(true);
+
+    try {
+      const res = await passwordReset(data);
+      setIsLoading(false);
+
+      setAuthToken(res.tokens);
+
+      navigate(APP_ROUTE.HOME);
+      notifications.show({
+        message: "Password reset was successful",
+      });
+    } catch (err) {
+      setIsLoading(false);
+      notifications.show({
+        message: err.response?.data.message,
+        color: "red",
+      });
+    }
+  };
+
  const handleIsAuthenticated = async () => {
    if (!authToken) {
      return false;
@ -109,7 +143,7 @@ export default function useAuth() {
    setIsLoading(true);

    try {
-      const res = await forgotPassword(data);
+      await forgotPassword(data);
      setIsLoading(false);

      return true;
@ -125,13 +159,31 @@ export default function useAuth() {
    }
  };

+  const handleVerifyUserToken = async (data: IVerifyUserToken) => {
+    setIsLoading(true);
+
+    try {
+      await verifyUserToken(data);
+      setIsLoading(false);
+    } catch (err) {
+      console.log(err);
+      setIsLoading(false);
+      notifications.show({
+        message: err.response?.data.message,
+        color: "red",
+      });
+    }
+  };
+
  return {
    signIn: handleSignIn,
    invitationSignup: handleInvitationSignUp,
    setupWorkspace: handleSetupWorkspace,
    isAuthenticated: handleIsAuthenticated,
-    logout: handleLogout,
    forgotPassword: handleForgotPassword,
+    passwordReset: handlePasswordReset,
+    verifyUserToken: handleVerifyUserToken,
+    logout: handleLogout,
    hasTokens,
    isLoading,
  };
--- a/apps/client/src/features/auth/queries/auth-query.tsx
+++ b/apps/client/src/features/auth/queries/auth-query.tsx
@ -0,0 +1,14 @@
+import { useQuery, UseQueryResult } from "@tanstack/react-query";
+import { verifyUserToken } from "../services/auth-service";
+import { IVerifyUserToken } from "../types/auth.types";
+
+export function useVerifyUserTokenQuery(
+    verify: IVerifyUserToken,
+  ): UseQueryResult<any, Error> {
+    return useQuery({
+      queryKey: ["verify-token", verify],
+      queryFn: () => verifyUserToken(verify),
+      enabled: !!verify.token,
+      staleTime: 0,
+    });
+  }
--- a/apps/client/src/features/auth/services/auth-service.ts
+++ b/apps/client/src/features/auth/services/auth-service.ts
@ -3,9 +3,11 @@ import {
  IChangePassword,
  IForgotPassword,
  ILogin,
+  IPasswordReset,
  IRegister,
  ISetupWorkspace,
  ITokenResponse,
+  IVerifyUserToken,
 } from "@/features/auth/types/auth.types";

 export async function login(data: ILogin): Promise<ITokenResponse> {
@ -20,21 +22,30 @@ export async function register(data: IRegister): Promise<ITokenResponse> {
 }*/

 export async function changePassword(
-  data: IChangePassword,
+  data: IChangePassword
 ): Promise<IChangePassword> {
  const req = await api.post<IChangePassword>("/auth/change-password", data);
  return req.data;
 }

 export async function setupWorkspace(
-  data: ISetupWorkspace,
+  data: ISetupWorkspace
 ): Promise<ITokenResponse> {
  const req = await api.post<ITokenResponse>("/auth/setup", data);
  return req.data;
 }

-export async function forgotPassword(data: IForgotPassword): Promise<any> {
-  const req = await api.post<any>("/auth/forgot-password", data);
+export async function forgotPassword(data: IForgotPassword): Promise<void> {
+  await api.post<any>("/auth/forgot-password", data);
+}
+
+export async function passwordReset(
+  data: IPasswordReset
+): Promise<ITokenResponse> {
+  const req = await api.post<any>("/auth/password-reset", data);
  return req.data;
 }

+export async function verifyUserToken(data: IVerifyUserToken): Promise<any> {
+  return api.post<any>("/auth/verify-token", data);
+}
--- a/apps/client/src/features/auth/types/auth.types.ts
+++ b/apps/client/src/features/auth/types/auth.types.ts
@ -3,12 +3,6 @@ export interface ILogin {
  password: string;
 }

-export interface IForgotPassword {
-  email: string;
-  token: string;
-  newPassword: string;
-}
-
 export interface IRegister {
  name?: string;
  email: string;
@ -35,3 +29,17 @@ export interface IChangePassword {
  oldPassword: string;
  newPassword: string;
 }
+
+export interface IForgotPassword {
+  email: string;
+}
+
+export interface IPasswordReset {
+  token?: string;
+  newPassword: string;
+}
+
+export interface IVerifyUserToken {
+  token: string;
+  type: string;
+}