Reaching a finishing point!

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

@@ -4,7 +4,6 @@ import { z } from 'zod';
 import { zodResolver } from '@hookform/resolvers/zod';
 import { useForm } from 'react-hook-form';
 import {
-  Button,
   Card,
   CardContent,
   CardDescription,
@@ -12,20 +11,18 @@ import {
   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 { useRouter } from 'next/navigation';
 import { useAuth } from '@/components/context/auth';
 import { useEffect, useState } from 'react';
+import { StatusMessage, SubmitButton } from '@/components/default';
 
 const formSchema = z.object({
   email: z.string().email({
@@ -58,6 +55,7 @@ const Login = () => {
 
   const handleSignIn = async (values: z.infer<typeof formSchema>) => {
     try {
+      setStatusMessage('');
       const formData  = new FormData();
       formData.append('email', values.email);
       formData.append('password', values.password);
@@ -77,7 +75,7 @@ const Login = () => {
   };
 
   return (
-    <Card>
+    <Card className='min-w-xs md:min-w-sm'>
       <CardHeader>
         <CardTitle className='text-2xl font-medium'>
           Sign In
@@ -131,15 +129,12 @@ const Login = () => {
               )}
             />
             {statusMessage && (
-              <div
-                className={`text-sm text-center ${
-                  statusMessage.includes('Error') || statusMessage.includes('failed')
-                    ? 'text-destructive'
-                    : 'text-green-800'
-                }`}
-              >
-                {statusMessage}
-              </div>
+              statusMessage.includes('Error') ||
+                statusMessage.includes('error') ||
+                statusMessage.includes('failed') ||
+                statusMessage.includes('invalid')
+                ? <StatusMessage message={{error: statusMessage}} />
+                : <StatusMessage message={{ message: statusMessage }} />
             )}
             <SubmitButton
               disabled={isLoading}