done for the day

src/app/(auth-pages)/sign-in/page.tsx

@@ -1,15 +1,53 @@
 'use client';
+
+import { z } from 'zod';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { useForm } from 'react-hook-form';
+import {
+  Button,
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+  Form,
+  FormControl,
+  FormDescription,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+  Input,
+  Label,
+} from '@/components/ui';
 import Link from 'next/link';
 import { signIn } from '@/lib/actions';
 import { SubmitButton } from '@/components/default';
-import { Input, Label } from '@/components/ui';
 import { useRouter } from 'next/navigation';
 import { useAuth } from '@/components/context/auth';
-import { useEffect } from 'react';
+import { useEffect, useState } from 'react';
+
+const formSchema = z.object({
+  email: z.string().email({
+    message: 'Please enter a valid email address.',
+  }),
+  password: z.string().min(8, {
+    message: 'Password must be at least 8 characters.',
+  }),
+})
 
 const Login = () => {
   const router = useRouter();
-  const { isAuthenticated, refreshUserData } = useAuth();
+  const { isAuthenticated, isLoading, refreshUserData } = useAuth();
+  const [statusMessage, setStatusMessage] = useState('');
+
+  const form = useForm<z.infer<typeof formSchema>>({
+    resolver: zodResolver(formSchema),
+    defaultValues: {
+      email: '',
+      password: '',
+    },
+  });
 
   // Redirect if already authenticated
   useEffect(() => {
@@ -18,46 +56,102 @@ const Login = () => {
     }
   }, [isAuthenticated, router]);
 
-  const handleSignIn = async (formData: FormData) => {
-    const result = await signIn(formData);
-    if (result?.success) {
-      await refreshUserData();
-      router.push('/');
+  const handleSignIn = async (values: z.infer<typeof formSchema>) => {
+    try {
+      const formData  = new FormData();
+      formData.append('email', values.email);
+      formData.append('password', values.password);
+      const result = await signIn(formData);
+      if (result?.success) {
+        await refreshUserData();
+        form.reset();
+        router.push('');
+      } else {
+        setStatusMessage(`Error: ${result.error}`)
+      }
+    } catch (error) {
+      setStatusMessage(
+        `Error: ${error instanceof Error ? error.message : 'Could not sign in!'}`
+      );
     }
   };
 
   return (
-    <form className='flex-1 flex flex-col min-w-64'>
-      <h1 className='text-2xl font-medium'>Sign in</h1>
-      <p className='text-sm text-foreground'>
-        Don&apos;t have an account?{' '}
-        <Link className='text-foreground font-medium underline' href='/sign-up'>
-          Sign up
-        </Link>
-      </p>
-      <div className='flex flex-col gap-2 [&>input]:mb-3 mt-8'>
-        <Label htmlFor='email'>Email</Label>
-        <Input name='email' placeholder='you@example.com' required />
-        <div className='flex justify-between items-center'>
-          <Label htmlFor='password'>Password</Label>
-          <Link
-            className='text-xs text-foreground underline'
-            href='/forgot-password'
-          >
-            Forgot Password?
+    <Card>
+      <CardHeader>
+        <CardTitle className='text-2xl font-medium'>
+          Sign In
+        </CardTitle>
+        <CardDescription className='text-sm text-foreground'>
+          Don&apos;t have an account?{' '}
+          <Link className='font-medium underline' href='/sign-up'>
+            Sign up
           </Link>
-        </div>
-        <Input
-          type='password'
-          name='password'
-          placeholder='Your password'
-          required
-        />
-        <SubmitButton pendingText='Signing In...' formAction={handleSignIn}>
-          Sign in
-        </SubmitButton>
-      </div>
-    </form>
+        </CardDescription>
+      </CardHeader>
+      <CardContent>
+        <Form {...form}>
+          <form
+            onSubmit={form.handleSubmit(handleSignIn)}
+            className='flex flex-col min-w-64 space-y-6'
+          >
+            <FormField
+              control={form.control}
+              name='email'
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>Email</FormLabel>
+                  <FormControl>
+                    <Input type='email' placeholder='you@example.com' {...field} />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )} 
+            />
+
+            <FormField
+              control={form.control}
+              name='password'
+              render={({ field }) => (
+                <FormItem>
+                  <div className='flex justify-between'>
+                    <FormLabel>Password</FormLabel>
+                    <Link
+                      className='text-xs text-foreground underline text-right'
+                      href='/forgot-password'
+                    >
+                      Forgot Password?
+                    </Link>
+                  </div>
+                  <FormControl>
+                    <Input type='password' placeholder='Your password' {...field} />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+            {statusMessage && (
+              <div
+                className={`text-sm text-center ${
+                  statusMessage.includes('Error') || statusMessage.includes('failed')
+                    ? 'text-destructive'
+                    : 'text-green-800'
+                }`}
+              >
+                {statusMessage}
+              </div>
+            )}
+            <SubmitButton
+              disabled={isLoading}
+              pendingText='Signing In...'
+            >
+              Sign in
+            </SubmitButton>
+          </form>
+        </Form>
+
+      </CardContent>
+    </Card>
   );
 };