167 lines
4.5 KiB
TypeScript
167 lines
4.5 KiB
TypeScript
import { zodResolver } from "@hookform/resolvers/zod"
|
|
import { useMutation } from "@tanstack/react-query"
|
|
import {
|
|
createFileRoute,
|
|
Link as RouterLink,
|
|
redirect,
|
|
useNavigate,
|
|
} from "@tanstack/react-router"
|
|
import { useForm } from "react-hook-form"
|
|
import { z } from "zod"
|
|
|
|
import { LoginService } from "@/client"
|
|
import { AuthLayout } from "@/components/Common/AuthLayout"
|
|
import {
|
|
Form,
|
|
FormControl,
|
|
FormField,
|
|
FormItem,
|
|
FormLabel,
|
|
FormMessage,
|
|
} from "@/components/ui/form"
|
|
import { LoadingButton } from "@/components/ui/loading-button"
|
|
import { PasswordInput } from "@/components/ui/password-input"
|
|
import { isLoggedIn } from "@/hooks/useAuth"
|
|
import useCustomToast from "@/hooks/useCustomToast"
|
|
import { handleError } from "@/utils"
|
|
|
|
const searchSchema = z.object({
|
|
token: z.string().catch(""),
|
|
})
|
|
|
|
const formSchema = z
|
|
.object({
|
|
new_password: z
|
|
.string()
|
|
.min(1, { message: "Password is required" })
|
|
.min(8, { message: "Password must be at least 8 characters" }),
|
|
confirm_password: z
|
|
.string()
|
|
.min(1, { message: "Password confirmation is required" }),
|
|
})
|
|
.refine((data) => data.new_password === data.confirm_password, {
|
|
message: "The passwords don't match",
|
|
path: ["confirm_password"],
|
|
})
|
|
|
|
type FormData = z.infer<typeof formSchema>
|
|
|
|
export const Route = createFileRoute("/reset-password")({
|
|
component: ResetPassword,
|
|
validateSearch: searchSchema,
|
|
beforeLoad: async ({ search }) => {
|
|
if (isLoggedIn()) {
|
|
throw redirect({ to: "/" })
|
|
}
|
|
if (!search.token) {
|
|
throw redirect({ to: "/login" })
|
|
}
|
|
},
|
|
head: () => ({
|
|
meta: [
|
|
{
|
|
title: "Reset Password - FastAPI Cloud",
|
|
},
|
|
],
|
|
}),
|
|
})
|
|
|
|
function ResetPassword() {
|
|
const { token } = Route.useSearch()
|
|
const { showSuccessToast, showErrorToast } = useCustomToast()
|
|
const navigate = useNavigate()
|
|
|
|
const form = useForm<FormData>({
|
|
resolver: zodResolver(formSchema),
|
|
mode: "onBlur",
|
|
criteriaMode: "all",
|
|
defaultValues: {
|
|
new_password: "",
|
|
confirm_password: "",
|
|
},
|
|
})
|
|
|
|
const mutation = useMutation({
|
|
mutationFn: (data: { new_password: string; token: string }) =>
|
|
LoginService.resetPassword({ requestBody: data }),
|
|
onSuccess: () => {
|
|
showSuccessToast("Password updated successfully")
|
|
form.reset()
|
|
navigate({ to: "/login" })
|
|
},
|
|
onError: handleError.bind(showErrorToast),
|
|
})
|
|
|
|
const onSubmit = (data: FormData) => {
|
|
mutation.mutate({ new_password: data.new_password, token })
|
|
}
|
|
|
|
return (
|
|
<AuthLayout>
|
|
<Form {...form}>
|
|
<form
|
|
onSubmit={form.handleSubmit(onSubmit)}
|
|
className="flex flex-col gap-6"
|
|
>
|
|
<div className="flex flex-col items-center gap-2 text-center">
|
|
<h1 className="text-2xl font-bold">Reset Password</h1>
|
|
</div>
|
|
|
|
<div className="grid gap-4">
|
|
<FormField
|
|
control={form.control}
|
|
name="new_password"
|
|
render={({ field }) => (
|
|
<FormItem>
|
|
<FormLabel>New Password</FormLabel>
|
|
<FormControl>
|
|
<PasswordInput
|
|
data-testid="new-password-input"
|
|
placeholder="New Password"
|
|
{...field}
|
|
/>
|
|
</FormControl>
|
|
<FormMessage />
|
|
</FormItem>
|
|
)}
|
|
/>
|
|
|
|
<FormField
|
|
control={form.control}
|
|
name="confirm_password"
|
|
render={({ field }) => (
|
|
<FormItem>
|
|
<FormLabel>Confirm Password</FormLabel>
|
|
<FormControl>
|
|
<PasswordInput
|
|
data-testid="confirm-password-input"
|
|
placeholder="Confirm Password"
|
|
{...field}
|
|
/>
|
|
</FormControl>
|
|
<FormMessage />
|
|
</FormItem>
|
|
)}
|
|
/>
|
|
|
|
<LoadingButton
|
|
type="submit"
|
|
className="w-full"
|
|
loading={mutation.isPending}
|
|
>
|
|
Reset Password
|
|
</LoadingButton>
|
|
</div>
|
|
|
|
<div className="text-center text-sm">
|
|
Remember your password?{" "}
|
|
<RouterLink to="/login" className="underline underline-offset-4">
|
|
Log in
|
|
</RouterLink>
|
|
</div>
|
|
</form>
|
|
</Form>
|
|
</AuthLayout>
|
|
)
|
|
}
|