done for the day

src/components/default/profile/ResetPasswordForm.tsx

@@ -2,7 +2,7 @@ import { z } from 'zod';
 import { zodResolver } from '@hookform/resolvers/zod';
 import { useForm } from 'react-hook-form';
 import {
-  Button,
+  CardContent,
   CardDescription,
   CardHeader,
   CardTitle,
@@ -15,8 +15,10 @@ import {
   FormMessage,
   Input,
 } from '@/components/ui';
-import { Loader2 } from 'lucide-react';
+import { SubmitButton } from '@/components/default';
 import { useState } from 'react';
+import { type Result } from '@/lib/actions';
+import { FormMessage as Pw } from '@/components/default';
 
 const formSchema = z
   .object({
@@ -31,7 +33,7 @@ const formSchema = z
   });
 
 type ResetPasswordFormProps = {
-  onSubmit: (values: z.infer<typeof formSchema>) => Promise<void>;
+  onSubmit: (formData: FormData) => Promise<Result<null>>;
   message?: string;
 };
 
@@ -50,14 +52,25 @@ export const ResetPasswordForm = ({
     },
   });
 
-  const handleSubmit = async (values: z.infer<typeof formSchema>) => {
+  const handleUpdatePassword = async (values: z.infer<typeof formSchema>) => {
     setIsLoading(true);
     try {
-      await onSubmit(values);
-      setStatusMessage('Password updated successfully');
-      form.reset();
+      // Convert form values to FormData for your server action
+      const formData = new FormData();
+      formData.append('password', values.password);
+      formData.append('confirmPassword', values.confirmPassword);
+
+      const result = await onSubmit(formData);
+      if (result?.success) {
+        setStatusMessage('Password updated successfully!');
+        form.reset(); // Clear the form on success
+      } else {
+        setStatusMessage('Error: Unable to update password!');
+      }
     } catch (error) {
-      setStatusMessage(error instanceof Error ? error.message : 'An error occurred');
+      setStatusMessage(
+        error instanceof Error ? error.message : 'Password was not updated!'
+      );
     } finally {
       setIsLoading(false);
     }
@@ -65,15 +78,19 @@ export const ResetPasswordForm = ({
 
   return (
     <div>
-    <CardHeader className='pb-5'>
-      <CardTitle className='text-xl'>Change Password</CardTitle>
-      <CardDescription>
-        Update your password to keep your account secure
-      </CardDescription>
-    </CardHeader>
-      
+      <CardHeader className='pb-5'>
+        <CardTitle className='text-2xl'>Change Password</CardTitle>
+        <CardDescription>
+          Update your password to keep your account secure
+        </CardDescription>
+      </CardHeader>
+      <CardContent>
+
       <Form {...form}>
-        <form onSubmit={form.handleSubmit(handleSubmit)} className='space-y-6'>
+        <form 
+          onSubmit={form.handleSubmit(handleUpdatePassword)}
+          className='space-y-6'
+        >
           <FormField
             control={form.control}
             name='password'
@@ -107,24 +124,27 @@ export const ResetPasswordForm = ({
             )}
           />
           {statusMessage && (
-            <div className={`text-sm text-center ${statusMessage.includes('error') || statusMessage.includes('failed') ? 'text-destructive' : 'text-green-600'}`}>
+            <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>
+            <SubmitButton
+              disabled={isLoading}
+              pendingText='Updating Password...'
+            >
+              Update Password
+            </SubmitButton>
           </div>
         </form>
       </Form>
+      </CardContent>
     </div>
   );
 };