216 lines
8.1 KiB
TypeScript
216 lines
8.1 KiB
TypeScript
'use client';
|
|
|
|
import { zodResolver } from '@hookform/resolvers/zod';
|
|
import { ChevronDown, Loader2, Sparkles } from 'lucide-react';
|
|
import { useRouter, useSearchParams } from 'next/navigation';
|
|
import { useTranslations } from 'next-intl';
|
|
import { useState } from 'react';
|
|
import { useForm } from 'react-hook-form';
|
|
import { OAuthButtons } from '@/components/auth/oauth-buttons';
|
|
import { Badge } from '@/components/ui/badge';
|
|
import { Button } from '@/components/ui/button';
|
|
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '@/components/ui/card';
|
|
import { Input } from '@/components/ui/input';
|
|
import { Label } from '@/components/ui/label';
|
|
import { Link } from '@/i18n/navigation';
|
|
import { useAuthStore } from '@/lib/auth-store';
|
|
import { loginSchema, type LoginFormData } from '@/lib/validations/auth';
|
|
|
|
const ENABLE_DEMO_ACCOUNTS = process.env['NEXT_PUBLIC_ENABLE_DEMO_ACCOUNTS'] === 'true';
|
|
const DEMO_PASSWORD = process.env['NEXT_PUBLIC_DEMO_PASSWORD'] ?? '';
|
|
|
|
type DemoAccount = {
|
|
phone: string;
|
|
name: string;
|
|
role: 'ADMIN' | 'AGENT' | 'SELLER' | 'BUYER' | 'DEVELOPER' | 'PARK_OPERATOR';
|
|
badgeClass: string;
|
|
};
|
|
|
|
function parseDemoAccounts(): DemoAccount[] {
|
|
const raw = process.env['NEXT_PUBLIC_DEMO_ACCOUNTS'];
|
|
if (!raw) return [];
|
|
try {
|
|
const parsed = JSON.parse(raw) as DemoAccount[];
|
|
return Array.isArray(parsed) ? parsed : [];
|
|
} catch {
|
|
return [];
|
|
}
|
|
}
|
|
|
|
const DEMO_ACCOUNTS = parseDemoAccounts();
|
|
|
|
export default function LoginPage() {
|
|
const router = useRouter();
|
|
const searchParams = useSearchParams();
|
|
const { login, isLoading, error, clearError } = useAuthStore();
|
|
const [showPassword, setShowPassword] = useState(false);
|
|
const [demoOpen, setDemoOpen] = useState(true);
|
|
const t = useTranslations('auth');
|
|
const showDemoAccounts = ENABLE_DEMO_ACCOUNTS && DEMO_PASSWORD && DEMO_ACCOUNTS.length > 0;
|
|
|
|
const oauthError = searchParams.get('error');
|
|
const oauthErrorMessage = oauthError
|
|
? t(`oauthErrors.${oauthError}` as Parameters<typeof t>[0]) ?? t('oauthErrors.default')
|
|
: null;
|
|
|
|
const {
|
|
register,
|
|
handleSubmit,
|
|
setValue,
|
|
formState: { errors },
|
|
} = useForm<LoginFormData>({
|
|
resolver: zodResolver(loginSchema),
|
|
});
|
|
|
|
const fillDemoAccount = (phone: string) => {
|
|
setValue('phone', phone, { shouldValidate: true });
|
|
setValue('password', DEMO_PASSWORD, { shouldValidate: true });
|
|
clearError();
|
|
};
|
|
|
|
const onSubmit = async (data: LoginFormData) => {
|
|
try {
|
|
await login(data);
|
|
router.push('/');
|
|
} catch {
|
|
// Error is handled by the store
|
|
}
|
|
};
|
|
|
|
return (
|
|
<Card>
|
|
<CardHeader className="space-y-1 text-center">
|
|
<CardTitle className="text-2xl font-bold">{t('loginTitle')}</CardTitle>
|
|
<CardDescription>{t('loginDescription')}</CardDescription>
|
|
</CardHeader>
|
|
<CardContent>
|
|
{showDemoAccounts && (
|
|
<div className="mb-4 rounded-lg border border-primary/20 bg-primary/5">
|
|
<button
|
|
type="button"
|
|
onClick={() => setDemoOpen(!demoOpen)}
|
|
className="flex w-full items-center justify-between px-3 py-2 text-sm font-medium"
|
|
aria-expanded={demoOpen}
|
|
>
|
|
<span className="inline-flex items-center gap-2">
|
|
<Sparkles className="h-4 w-4 text-primary" aria-hidden="true" />
|
|
{t('demoAccountsTitle')}
|
|
</span>
|
|
<ChevronDown
|
|
className={`h-4 w-4 text-muted-foreground transition-transform ${demoOpen ? 'rotate-180' : ''}`}
|
|
aria-hidden="true"
|
|
/>
|
|
</button>
|
|
{demoOpen && (
|
|
<div className="space-y-2 border-t border-primary/20 p-3">
|
|
<p className="text-xs text-muted-foreground">
|
|
{t('demoAccountsHint')} <code className="rounded bg-muted px-1 py-0.5 font-mono text-xs">{DEMO_PASSWORD}</code>
|
|
</p>
|
|
<ul className="flex flex-col gap-1.5">
|
|
{DEMO_ACCOUNTS.map((acc) => (
|
|
<li key={acc.phone}>
|
|
<button
|
|
type="button"
|
|
onClick={() => fillDemoAccount(acc.phone)}
|
|
className="flex w-full items-center gap-2 rounded-md border bg-card px-2.5 py-1.5 text-left text-xs transition-colors hover:border-primary/40 hover:bg-primary/5"
|
|
>
|
|
<Badge variant="outline" className={`shrink-0 ${acc.badgeClass}`}>
|
|
{acc.role}
|
|
</Badge>
|
|
<span className="flex-1 truncate font-medium">{acc.name}</span>
|
|
<span className="font-mono text-muted-foreground">{acc.phone}</span>
|
|
</button>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
)}
|
|
</div>
|
|
)}
|
|
|
|
<form onSubmit={handleSubmit(onSubmit)} className="space-y-4" noValidate>
|
|
{oauthErrorMessage && (
|
|
<div className="rounded-md bg-destructive/10 p-3 text-sm text-destructive" role="alert">
|
|
{oauthErrorMessage}
|
|
</div>
|
|
)}
|
|
{error && (
|
|
<div className="rounded-md bg-destructive/10 p-3 text-sm text-destructive" role="alert">
|
|
{error}
|
|
<button type="button" onClick={clearError} className="ml-2 font-medium underline">
|
|
{t('dismiss')}
|
|
</button>
|
|
</div>
|
|
)}
|
|
|
|
<div className="space-y-2">
|
|
<Label htmlFor="phone">{t('phone')}</Label>
|
|
<Input
|
|
id="phone"
|
|
type="tel"
|
|
placeholder={t('phonePlaceholder')}
|
|
autoComplete="tel"
|
|
aria-describedby={errors.phone ? 'phone-error' : undefined}
|
|
aria-invalid={!!errors.phone}
|
|
{...register('phone')}
|
|
/>
|
|
{errors.phone && (
|
|
<p id="phone-error" className="text-sm text-destructive" role="alert">{errors.phone.message}</p>
|
|
)}
|
|
</div>
|
|
|
|
<div className="space-y-2">
|
|
<div className="flex items-center justify-between">
|
|
<Label htmlFor="password">{t('password')}</Label>
|
|
<button
|
|
type="button"
|
|
className="text-xs text-muted-foreground hover:text-primary"
|
|
onClick={() => setShowPassword(!showPassword)}
|
|
aria-label={showPassword ? t('hidePassword') : t('showPassword')}
|
|
>
|
|
{showPassword ? t('hidePassword') : t('showPassword')}
|
|
</button>
|
|
</div>
|
|
<Input
|
|
id="password"
|
|
type={showPassword ? 'text' : 'password'}
|
|
placeholder={t('passwordPlaceholder')}
|
|
autoComplete="current-password"
|
|
aria-describedby={errors.password ? 'password-error' : undefined}
|
|
aria-invalid={!!errors.password}
|
|
{...register('password')}
|
|
/>
|
|
{errors.password && (
|
|
<p id="password-error" className="text-sm text-destructive" role="alert">{errors.password.message}</p>
|
|
)}
|
|
</div>
|
|
|
|
<Button type="submit" className="w-full" disabled={isLoading}>
|
|
{isLoading && <Loader2 className="mr-2 h-4 w-4 animate-spin" aria-hidden="true" />}
|
|
{t('loginButton')}
|
|
</Button>
|
|
</form>
|
|
|
|
<div className="relative my-4">
|
|
<div className="absolute inset-0 flex items-center">
|
|
<span className="w-full border-t" />
|
|
</div>
|
|
<div className="relative flex justify-center text-xs uppercase">
|
|
<span className="bg-card px-2 text-muted-foreground">{t('orLoginWith')}</span>
|
|
</div>
|
|
</div>
|
|
|
|
<OAuthButtons />
|
|
</CardContent>
|
|
<CardFooter className="justify-center">
|
|
<p className="text-sm text-muted-foreground">
|
|
{t('noAccount')}{' '}
|
|
<Link href="/register" className="font-medium text-primary hover:underline">
|
|
{t('registerLink')}
|
|
</Link>
|
|
</p>
|
|
</CardFooter>
|
|
</Card>
|
|
);
|
|
}
|