fix: refactor forgot password system (#329)

* refactor forgot password system

* ready

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);
-}

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>
+  );
 }

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>
   );

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>
+  );
+}