Rebuild authentication page

Rebuild the authentication page.

src/pages/Auth.tsx

@@ -2,7 +2,7 @@
 import { useState } from 'react';
 import { Navigate } from 'react-router-dom';
 import { useAuth } from '@/contexts/AuthContext';
-import { ShieldCheck, Mail, Lock, User } from 'lucide-react';
+import { ShieldCheck, Mail, Lock, User, Loader2 } from 'lucide-react';
 import { Button } from '@/components/ui/button';
 import { Input } from '@/components/ui/input';
 import { Label } from '@/components/ui/label';
@@ -15,8 +15,9 @@ const Auth = () => {
   const [password, setPassword] = useState('');
   const [fullName, setFullName] = useState('');
   const [authError, setAuthError] = useState<string | null>(null);
+  const [activeTab, setActiveTab] = useState('login');
 
-  // If user is already logged in, redirect to home page
+  // If user is already logged in, redirect to dashboard
   if (user) {
     return <Navigate to="/dashboard" />;
   }
@@ -27,7 +28,8 @@ const Auth = () => {
     try {
       await signIn(email, password);
     } catch (error: any) {
-      setAuthError(error.message);
+      console.error('Sign in error:', error);
+      // Error is already handled by the toast in AuthContext
     }
   };
 
@@ -36,30 +38,38 @@ const Auth = () => {
     setAuthError(null);
     try {
       await signUp(email, password, fullName);
+      // Switch to login tab after successful signup
+      setActiveTab('login');
     } catch (error: any) {
-      setAuthError(error.message);
+      console.error('Sign up error:', error);
+      // Error is already handled by the toast in AuthContext
     }
   };
 
   return (
-    <div className="min-h-screen flex items-center justify-center bg-muted/30 px-4">
+    <div className="min-h-screen flex items-center justify-center bg-gradient-to-b from-muted/50 to-muted/30 px-4 py-8">
-      <div className="max-w-md w-full">
+      <div className="w-full max-w-md">
         <div className="text-center mb-8">
-          <div className="inline-flex mb-6 p-4 bg-primary/10 rounded-full">
+          <div className="inline-flex items-center justify-center mb-4 w-16 h-16 rounded-full bg-primary/10">
             <ShieldCheck className="w-8 h-8 text-primary" />
           </div>
           <h1 className="text-3xl font-bold mb-2">SecuPolicy</h1>
-          <p className="text-muted-foreground">Sign in to access your account</p>
+          <p className="text-muted-foreground">Secure access to your account</p>
         </div>
 
-        <Tabs defaultValue="login" className="w-full">
+        <Tabs 
+          defaultValue="login" 
+          value={activeTab} 
+          onValueChange={setActiveTab}
+          className="w-full"
+        >
           <TabsList className="grid w-full grid-cols-2 mb-6">
-            <TabsTrigger value="login">Login</TabsTrigger>
+            <TabsTrigger value="login">Sign In</TabsTrigger>
-            <TabsTrigger value="register">Register</TabsTrigger>
+            <TabsTrigger value="register">Create Account</TabsTrigger>
           </TabsList>
 
           <TabsContent value="login">
-            <Card>
+            <Card className="border-2">
               <CardHeader>
                 <CardTitle>Welcome back</CardTitle>
                 <CardDescription>
@@ -104,10 +114,17 @@ const Auth = () => {
                 <CardFooter>
                   <Button
                     type="submit"
-                    className="w-full rounded-full"
+                    className="w-full"
                     disabled={loading}
                   >
-                    {loading ? 'Signing in...' : 'Sign In'}
+                    {loading ? (
+                      <>
+                        <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+                        Signing in...
+                      </>
+                    ) : (
+                      'Sign In'
+                    )}
                   </Button>
                 </CardFooter>
               </form>
@@ -115,7 +132,7 @@ const Auth = () => {
           </TabsContent>
 
           <TabsContent value="register">
-            <Card>
+            <Card className="border-2">
               <CardHeader>
                 <CardTitle>Create an account</CardTitle>
                 <CardDescription>
@@ -176,10 +193,17 @@ const Auth = () => {
                 <CardFooter>
                   <Button
                     type="submit"
-                    className="w-full rounded-full"
+                    className="w-full"
                     disabled={loading}
                   >
-                    {loading ? 'Creating account...' : 'Create Account'}
+                    {loading ? (
+                      <>
+                        <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+                        Creating account...
+                      </>
+                    ) : (
+                      'Create Account'
+                    )}
                   </Button>
                 </CardFooter>
               </form>