Add templates? Maybe?

src/components/default/profile/ResetPasswordForm.tsx

@@ -0,0 +1,130 @@
+import { z } from 'zod';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { useForm } from 'react-hook-form';
+import {
+  Button,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+  Form,
+  FormControl,
+  FormDescription,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+  Input,
+} from '@/components/ui';
+import { Loader2 } from 'lucide-react';
+import { useState } from 'react';
+
+const formSchema = z
+  .object({
+    password: z.string().min(8, {
+      message: 'Password must be at least 8 characters.',
+    }),
+    confirmPassword: z.string(),
+  })
+  .refine((data) => data.password === data.confirmPassword, {
+    message: 'Passwords do not match.',
+    path: ['confirmPassword'],
+  });
+
+type ResetPasswordFormProps = {
+  onSubmit: (values: z.infer<typeof formSchema>) => Promise<void>;
+  message?: string;
+};
+
+export const ResetPasswordForm = ({
+  onSubmit,
+  message,
+}: ResetPasswordFormProps) => {
+  const [isLoading, setIsLoading] = useState(false);
+  const [statusMessage, setStatusMessage] = useState(message ?? '');
+
+  const form = useForm<z.infer<typeof formSchema>>({
+    resolver: zodResolver(formSchema),
+    defaultValues: {
+      password: '',
+      confirmPassword: '',
+    },
+  });
+
+  const handleSubmit = async (values: z.infer<typeof formSchema>) => {
+    setIsLoading(true);
+    try {
+      await onSubmit(values);
+      setStatusMessage('Password updated successfully');
+      form.reset();
+    } catch (error) {
+      setStatusMessage(error instanceof Error ? error.message : 'An error occurred');
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  return (
+    <div>
+    <CardHeader className='pb-5'>
+      <CardTitle className='text-xl'>Change Password</CardTitle>
+      <CardDescription>
+        Update your password to keep your account secure
+      </CardDescription>
+    </CardHeader>
+      
+      <Form {...form}>
+        <form onSubmit={form.handleSubmit(handleSubmit)} className='space-y-6'>
+          <FormField
+            control={form.control}
+            name='password'
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel>New Password</FormLabel>
+                <FormControl>
+                  <Input type='password' {...field} />
+                </FormControl>
+                <FormDescription>
+                  Enter your new password. Must be at least 8 characters.
+                </FormDescription>
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+          <FormField
+            control={form.control}
+            name='confirmPassword'
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel>Confirm Password</FormLabel>
+                <FormControl>
+                  <Input type='password' {...field} />
+                </FormControl>
+                <FormDescription>
+                  Please re-enter your new password to confirm.
+                </FormDescription>
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+          {statusMessage && (
+            <div className={`text-sm text-center ${statusMessage.includes('error') || statusMessage.includes('failed') ? 'text-destructive' : 'text-green-600'}`}>
+              {statusMessage}
+            </div>
+          )}
+          <div className='flex justify-center'>
+            <Button type='submit' disabled={isLoading}>
+              {isLoading ? (
+                <>
+                  <Loader2 className='mr-2 h-4 w-4 animate-spin' />
+                  Updating Password...
+                </>
+              ) : (
+                'Update Password'
+              )}
+            </Button>
+          </div>
+        </form>
+      </Form>
+    </div>
+  );
+};