87 lines
2.9 KiB
TypeScript
87 lines
2.9 KiB
TypeScript
import { useAuth } from '@/contexts/AuthContext';
|
|
import { Button } from '@/components/ui/button';
|
|
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
|
|
import { LogIn, Shield } from 'lucide-react';
|
|
|
|
export function Auth() {
|
|
const { login, isLoading, error } = useAuth();
|
|
|
|
const handleSSOLogin = async () => {
|
|
// Clear any existing session data
|
|
localStorage.clear();
|
|
sessionStorage.clear();
|
|
|
|
try {
|
|
await login();
|
|
} catch (loginError) {
|
|
console.error('========================================');
|
|
console.error('LOGIN ERROR');
|
|
console.error('Error details:', loginError);
|
|
console.error('Error message:', (loginError as Error)?.message);
|
|
console.error('Error stack:', (loginError as Error)?.stack);
|
|
console.error('========================================');
|
|
}
|
|
};
|
|
|
|
if (error) {
|
|
console.error('Auth0 Error in Auth Component:', {
|
|
message: error.message,
|
|
error: error
|
|
});
|
|
}
|
|
|
|
return (
|
|
<div className="min-h-screen flex items-center justify-center bg-gradient-to-br from-slate-50 to-slate-100 p-4">
|
|
<Card className="w-full max-w-md shadow-xl">
|
|
<CardHeader className="space-y-1 text-center pb-6">
|
|
<div className="flex justify-center mb-4">
|
|
<div className="w-16 h-16 bg-gradient-to-br from-slate-800 to-slate-900 rounded-2xl flex items-center justify-center shadow-lg">
|
|
<Shield className="w-8 h-8 text-white" />
|
|
</div>
|
|
</div>
|
|
<CardTitle className="text-3xl font-bold text-gray-900">
|
|
Royal Enfield
|
|
</CardTitle>
|
|
<CardDescription className="text-lg text-gray-600 mt-2">
|
|
Approval & Request Management Portal
|
|
</CardDescription>
|
|
</CardHeader>
|
|
|
|
<CardContent className="space-y-4">
|
|
{error && (
|
|
<div className="bg-red-50 border border-red-200 text-red-700 px-4 py-3 rounded-lg">
|
|
<p className="text-sm font-medium">Authentication Error</p>
|
|
<p className="text-sm">{error.message}</p>
|
|
</div>
|
|
)}
|
|
|
|
<Button
|
|
onClick={handleSSOLogin}
|
|
disabled={isLoading}
|
|
className="w-full h-12 text-base font-semibold bg-slate-900 hover:bg-slate-800"
|
|
size="lg"
|
|
>
|
|
{isLoading ? (
|
|
<>
|
|
<div className="mr-2 h-4 w-4 animate-spin rounded-full border-2 border-background border-t-transparent" />
|
|
Logging in...
|
|
</>
|
|
) : (
|
|
<>
|
|
<LogIn className="mr-2 h-5 w-5" />
|
|
SSO Login
|
|
</>
|
|
)}
|
|
</Button>
|
|
|
|
<div className="text-center text-sm text-gray-500 mt-4">
|
|
<p>Secure Single Sign-On</p>
|
|
<p className="text-xs mt-1">Powered by Auth0</p>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
);
|
|
}
|
|
|