142 lines
3.9 KiB
TypeScript
142 lines
3.9 KiB
TypeScript
"use client";
|
|
|
|
import { zodResolver } from "@hookform/resolvers/zod";
|
|
import { useForm } from "react-hook-form";
|
|
import { z } from "zod";
|
|
|
|
import { Button } from "@/components/ui/button";
|
|
import {
|
|
Form,
|
|
FormControl,
|
|
FormField,
|
|
FormItem,
|
|
FormLabel,
|
|
FormMessage,
|
|
} from "@/components/ui/form";
|
|
import { Input } from "@/components/ui/input";
|
|
import { toast } from "@/components/ui/use-toast";
|
|
import { Card, CardContent, CardHeader, CardTitle } from "./ui/card";
|
|
import { Separator } from "./ui/separator";
|
|
|
|
const profileFormSchema = z.object({
|
|
currentPassword: z.string().trim().min(6, {
|
|
message: "Password must be at least 6 characters.",
|
|
}),
|
|
newPassword: z.string().trim().min(6, {
|
|
message: "Password must be at least 6 characters.",
|
|
}),
|
|
confirmPassword: z.string().trim().min(6, {
|
|
message: "Password must be at least 6 characters.",
|
|
}),
|
|
});
|
|
|
|
type ProfileFormValues = z.infer<typeof profileFormSchema>;
|
|
|
|
const defaultValues: Partial<ProfileFormValues> = {
|
|
currentPassword: "",
|
|
newPassword: "",
|
|
confirmPassword: "",
|
|
};
|
|
|
|
export default function ChangePasswordForm() {
|
|
const form = useForm<ProfileFormValues>({
|
|
resolver: zodResolver(profileFormSchema),
|
|
defaultValues,
|
|
mode: "onChange",
|
|
});
|
|
|
|
function onSubmit(data: ProfileFormValues) {
|
|
if (data.newPassword !== data.confirmPassword) {
|
|
toast({
|
|
variant: "destructive",
|
|
title: "New Password and Confirm Password don't match!",
|
|
});
|
|
|
|
return;
|
|
}
|
|
|
|
toast({
|
|
title: "You submitted the following values:",
|
|
description: (
|
|
<pre className="mt-2 w-[340px] rounded-md bg-slate-950 p-4">
|
|
<code className="text-white">{JSON.stringify(data, null, 2)}</code>
|
|
</pre>
|
|
),
|
|
});
|
|
|
|
form.reset();
|
|
}
|
|
|
|
return (
|
|
<Card className="max-w-[600px] w-full">
|
|
<CardHeader>
|
|
<CardTitle className="mb-4 font-bold text-xl">
|
|
Change Password
|
|
</CardTitle>
|
|
<Separator />
|
|
</CardHeader>
|
|
|
|
<CardContent>
|
|
<Form {...form}>
|
|
<form onSubmit={form.handleSubmit(onSubmit)} className="space-y-8">
|
|
<FormField
|
|
control={form.control}
|
|
name="currentPassword"
|
|
render={({ field }) => (
|
|
<FormItem>
|
|
<FormLabel>Current Password</FormLabel>
|
|
<FormControl>
|
|
<Input
|
|
type="password"
|
|
placeholder="Enter your current password..."
|
|
{...field}
|
|
/>
|
|
</FormControl>
|
|
<FormMessage />
|
|
</FormItem>
|
|
)}
|
|
/>
|
|
<FormField
|
|
control={form.control}
|
|
name="newPassword"
|
|
render={({ field }) => (
|
|
<FormItem>
|
|
<FormLabel>New Password</FormLabel>
|
|
<FormControl>
|
|
<Input
|
|
type="password"
|
|
placeholder="Enter your new password..."
|
|
{...field}
|
|
/>
|
|
</FormControl>
|
|
<FormMessage />
|
|
</FormItem>
|
|
)}
|
|
/>
|
|
<FormField
|
|
control={form.control}
|
|
name="confirmPassword"
|
|
render={({ field }) => (
|
|
<FormItem>
|
|
<FormLabel>Confirm New Password</FormLabel>
|
|
<FormControl>
|
|
<Input
|
|
type="password"
|
|
placeholder="Confirm the new password..."
|
|
{...field}
|
|
/>
|
|
</FormControl>
|
|
<FormMessage />
|
|
</FormItem>
|
|
)}
|
|
/>
|
|
<Button type="submit" className="w-full" size="lg">
|
|
Reset Password
|
|
</Button>
|
|
</form>
|
|
</Form>
|
|
</CardContent>
|
|
</Card>
|
|
);
|
|
}
|