Goddy/secupolicy.x
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Rebuild authentication page

Browse Source 
Rebuild the authentication page.
This commit is contained in:
gpt-engineer-app[bot] 2025-03-10 08:37:22 +00:00
parent 4e4d446422
commit 746a8dbea0
1 changed files with 41 additions and 17 deletions

58
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="max-w-md w-full">
<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="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="register">Register</TabsTrigger>
<TabsTrigger value="login">Sign In</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>