Adding reset password feature.

src/components/wrappers/auth/reset-password/reset-password-form.tsx

@@ -0,0 +1,94 @@
+"use client";
+
+import {useRouter} from "next/navigation";
+import {useMutation} from "@tanstack/react-query";
+import {Form, FormControl, FormField, FormItem, FormLabel, useZodForm} from "@/components/ui/form";
+import {PasswordStrengthInput} from "@/components/ui/password-input-indicator";
+import {ResetPasswordSchema, ResetPasswordType} from "@/components/wrappers/auth/reset-password/reset-password-schema";
+import {PasswordInput} from "@/components/ui/password-input";
+import {Card, CardContent, CardHeader} from "@/components/ui/card";
+import {ButtonWithLoading} from "@/components/wrappers/common/button/button-with-loading";
+import {authClient} from "@/lib/auth/auth-client";
+import {toast} from "sonner";
+
+type ResetPasswordFormProps = {
+    token: string;
+};
+
+export const ResetPasswordForm = ({token}: ResetPasswordFormProps) => {
+
+    const router = useRouter();
+    const form = useZodForm({
+        schema: ResetPasswordSchema,
+    });
+
+    const mutationResetPassword = useMutation({
+        mutationFn: async (data: ResetPasswordType) => {
+
+            await authClient.resetPassword({
+                newPassword: data.password,
+                token,
+            }, {
+                onSuccess: (response) => {
+                    console.log(response);
+                    toast.success("Password changed successfully.");
+                    setTimeout(() => router.push("/"), 1000);
+                },
+                onError: (error) => {
+                    console.error(error);
+                    toast.error(error.error.message);
+                },
+            });
+        },
+    });
+
+    return (
+        <Card>
+            <CardHeader>
+                <div className="grid gap-2 text-center mb-2">
+                    <h1 className="text-3xl font-bold">Reset Password</h1>
+                    <p className="text-balance text-muted-foreground">Fill information bellow to change your
+                        password</p>
+                </div>
+            </CardHeader>
+            <CardContent>
+                <Form
+                    form={form}
+                    className="flex flex-col gap-4"
+                    onSubmit={async (values) => {
+                        await mutationResetPassword.mutateAsync(values);
+                    }}
+                >
+                    <FormField
+                        control={form.control}
+                        name="password"
+                        defaultValue=""
+                        render={({field}) => (
+                            <FormItem>
+                                <PasswordStrengthInput label={"Enter new password"} field={field}/>
+                            </FormItem>
+                        )}
+                    />
+                    <FormField
+                        control={form.control}
+                        name="confirmPassword"
+                        defaultValue=""
+                        render={({field}) => (
+                            <FormItem>
+                                <FormLabel>Confirmation Password</FormLabel>
+                                <FormControl>
+                                    <PasswordInput placeholder={"Confirm password"} {...field}
+                                                   value={field.value ?? ""}/>
+                                </FormControl>
+                            </FormItem>
+                        )}
+                    />
+
+                    <ButtonWithLoading type="submit" isPending={mutationResetPassword.isPending}>
+                        Validate
+                    </ButtonWithLoading>
+                </Form>
+            </CardContent>
+        </Card>
+    );
+};

src/components/wrappers/auth/reset-password/reset-password-schema.ts

@@ -0,0 +1,22 @@
+import {z} from "zod";
+
+const passwordRegex = /^(?=.*?[A-Z])(?=.*?[a-z])(?=.*?[0-9])(?=.*?[#?!@$%^&*-])/;
+
+const zPassword = () => z.string().min(8, {message: "New Password too short"}).regex(passwordRegex, {message: "New Password too weak"});
+
+export const ResetPasswordSchema = z
+    .object({
+        password: zPassword(),
+        confirmPassword: zPassword(),
+    })
+    .superRefine(({confirmPassword, password}, ctx) => {
+        if (confirmPassword !== password) {
+            ctx.addIssue({
+                code: "custom",
+                message: "Passwords don't match.",
+                path: ["confirmPassword"],
+            });
+        }
+    });
+
+export type ResetPasswordType = z.infer<typeof ResetPasswordSchema>;

src/components/wrappers/auth/reset-password/reset-password-section.tsx

@@ -0,0 +1,37 @@
+"use client"
+
+import {useRouter, useSearchParams} from "next/navigation";
+import {ResetPasswordForm} from "@/components/wrappers/auth/reset-password/reset-password-form";
+import {toast} from "sonner";
+import {useEffect} from "react";
+import {LoadingSpinner} from "@/components/wrappers/common/loading/loading-spinner";
+
+export const ResetPasswordSection = () => {
+    const router = useRouter();
+    const searchParams = useSearchParams();
+
+    const token = searchParams.get("token");
+    const error = searchParams.get("error");
+
+    useEffect(() => {
+        if (error || !token) {
+            if (error == "INVALID_TOKEN") {
+                toast.error("Invalid reset token");
+            } else {
+                toast.error("An error occurred.");
+            }
+            setTimeout(() => router.push("/"), 1000);
+        }
+    }, [error, token, router]);
+
+
+    if (!token) return (
+        <div className="w-full h-full flex flex-col items-center justify-center">
+            <LoadingSpinner size={50}/>
+        </div>
+    );
+
+    return (
+        <ResetPasswordForm token={token}/>
+    )
+}