MOPC-App/src/app/(auth)/error/page.tsx

47 lines
1.7 KiB
TypeScript

'use client'
import { useSearchParams } from 'next/navigation'
import Link from 'next/link'
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
import { Button } from '@/components/ui/button'
import { Logo } from '@/components/shared/logo'
import { AlertCircle } from 'lucide-react'
const errorMessages: Record<string, string> = {
Configuration: 'There is a problem with the server configuration.',
AccessDenied: 'You do not have access to this resource.',
Verification: 'The verification link has expired or already been used.',
Default: 'An error occurred during authentication.',
}
export default function AuthErrorPage() {
const searchParams = useSearchParams()
const error = searchParams.get('error') || 'Default'
const message = errorMessages[error] || errorMessages.Default
return (
<Card className="w-full max-w-md">
<CardHeader className="text-center">
<div className="mx-auto mb-4">
<Logo variant="small" />
</div>
<div className="mx-auto mb-2 flex h-12 w-12 items-center justify-center rounded-full bg-destructive/10">
<AlertCircle className="h-6 w-6 text-destructive" />
</div>
<CardTitle className="text-xl">Authentication Error</CardTitle>
</CardHeader>
<CardContent className="space-y-4 text-center">
<p className="text-muted-foreground">{message}</p>
<div className="flex gap-3 justify-center border-t pt-4">
<Button asChild>
<Link href="/login">Return to Login</Link>
</Button>
<Button variant="outline" asChild>
<Link href="/">Home</Link>
</Button>
</div>
</CardContent>
</Card>
)
}