import { useForm } from 'react-hook-form'; import { zodResolver } from '@hookform/resolvers/zod'; import { z } from 'zod'; import { router, usePage, Head } from '@inertiajs/react'; import { toast } from 'sonner'; import { useEffect } from 'react'; import AuthLayout from '@/Layouts/AuthLayout'; import { Button } from '@/components/ui/button'; import { Input } from '@/components/ui/input'; import { Label } from '@/components/ui/label'; import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'; import { Checkbox } from '@/components/ui/checkbox'; import type { PageProps } from '@/Types'; const loginSchema = z.object({ email: z.string().email('Please enter a valid email address'), password: z.string().min(1, 'Password is required'), remember: z.boolean().optional(), }); type LoginFormData = z.infer; interface DemoAccount { role: string; email: string; password: string; color: string; } interface LoginProps extends PageProps { showDemo: boolean; demoAccounts: DemoAccount[]; } const colorMap: Record = { indigo: 'bg-indigo-50 border-indigo-200 text-indigo-700 hover:bg-indigo-100 dark:bg-indigo-950/40 dark:border-indigo-800 dark:text-indigo-300 dark:hover:bg-indigo-900/50', violet: 'bg-violet-50 border-violet-200 text-violet-700 hover:bg-violet-100 dark:bg-violet-950/40 dark:border-violet-800 dark:text-violet-300 dark:hover:bg-violet-900/50', blue: 'bg-blue-50 border-blue-200 text-blue-700 hover:bg-blue-100 dark:bg-blue-950/40 dark:border-blue-800 dark:text-blue-300 dark:hover:bg-blue-900/50', sky: 'bg-sky-50 border-sky-200 text-sky-700 hover:bg-sky-100 dark:bg-sky-950/40 dark:border-sky-800 dark:text-sky-300 dark:hover:bg-sky-900/50', emerald: 'bg-emerald-50 border-emerald-200 text-emerald-700 hover:bg-emerald-100 dark:bg-emerald-950/40 dark:border-emerald-800 dark:text-emerald-300 dark:hover:bg-emerald-900/50', amber: 'bg-amber-50 border-amber-200 text-amber-700 hover:bg-amber-100 dark:bg-amber-950/40 dark:border-amber-800 dark:text-amber-300 dark:hover:bg-amber-900/50', orange: 'bg-orange-50 border-orange-200 text-orange-700 hover:bg-orange-100 dark:bg-orange-950/40 dark:border-orange-800 dark:text-orange-300 dark:hover:bg-orange-900/50', }; export default function Login() { const { flash, errors: serverErrors, showDemo, demoAccounts } = usePage().props; const { register, handleSubmit, setValue, watch, setError, formState: { errors, isSubmitting }, } = useForm({ resolver: zodResolver(loginSchema), defaultValues: { email: '', password: '', remember: false }, }); useEffect(() => { if (flash?.error) toast.error(flash.error); if (flash?.success) toast.success(flash.success); }, [flash]); useEffect(() => { if (serverErrors?.email) setError('email', { message: serverErrors.email }); if (serverErrors?.password) setError('password', { message: serverErrors.password }); }, [serverErrors, setError]); const onSubmit = (data: LoginFormData) => { router.post('/login', data, { onError: (errs) => { if (errs.email) setError('email', { message: errs.email }); if (errs.password) setError('password', { message: errs.password }); if (errs.message) toast.error(errs.message); }, }); }; const fillDemo = (account: DemoAccount) => { setValue('email', account.email, { shouldValidate: true }); setValue('password', account.password, { shouldValidate: true }); toast.info(`Demo: ${account.role} credentials filled`); }; const remember = watch('remember'); return (

{/* Logo / Branding */}

Genius SMS

School Management System

{/* Demo accounts panel — shown only on .test / xgenious.com */} {showDemo && demoAccounts.length > 0 && (

Demo Mode — click a role to fill credentials

{demoAccounts.map((account) => ( ))}

Password for all demo accounts: password

)} Welcome back Sign in to your account to continue

{/* Email */}

Email address {errors.email && (

{errors.email.message}

)}

{/* Password */}

Password Forgot password?

{errors.password && (

{errors.password.message}

)}

{/* Remember me */}

setValue('remember', checked === true) } /> Remember me for 30 days

{/* Submit */}

); }