import InputError from '@/components/input-error'; import { Button } from '@/components/ui/button'; import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, } from '@/components/ui/dialog'; import { Input } from '@/components/ui/input'; import { Label } from '@/components/ui/label'; import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue, } from '@/components/ui/select'; import { Head, router, useForm } from '@inertiajs/react'; import { motion } from 'framer-motion'; import { AlertCircle, Eye, EyeOff, Loader2 } from 'lucide-react'; import { useEffect, useState } from 'react'; import MasukCardLayout from './masuk-card-layout'; type LoginForm = { nip: string; password: string; remember: boolean; }; interface LoginProps { flash?: { step?: number; message?: string; tahuns?: { id: number; nama: string; jenis: string }[]; }; } export default function IndexMasuk({ flash }: LoginProps) { const [step, setStep] = useState(1); const [showPassword, setShowPassword] = useState(false); const [loading, setLoading] = useState(false); const [selectedYear, setSelectedYear] = useState(null); const [yearError, setYearError] = useState(null); const [errorMessage, setErrorMessage] = useState(null); const [openErrorDialog, setOpenErrorDialog] = useState(false); const isLocal = import.meta.env.MODE === 'development'; const { data, setData, post, processing } = useForm({ nip: isLocal ? '11223344' : '', password: isLocal ? 'password' : '', remember: false, }); const container = { hidden: { opacity: 0, y: 20 }, show: { opacity: 1, y: 0, transition: { staggerChildren: 0.15 }, }, }; const item = { hidden: { opacity: 0, y: 15 }, show: { opacity: 1, y: 0 }, }; useEffect(() => { if (flash?.step === 2) { setStep(2); } }, [flash]); const handleSubmit = (e: React.FormEvent) => { e.preventDefault(); setLoading(true); post('/masuk-proses', { onFinish: () => setLoading(false), onError: (errs: any) => { const msg = errs.nip || errs.password || 'Login gagal'; setErrorMessage(msg); setOpenErrorDialog(true); // 🔥 tampilkan dialog error }, onSuccess: (page: any) => { if (page.props.flash?.step === 2) { setStep(2); } }, }); }; const handleTahun = (e: React.FormEvent) => { e.preventDefault(); if (!selectedYear) { setYearError('Tahun wajib dipilih'); return; } router.post('/select-year', { tahun_id: selectedYear }); }; return ( {step === 1 && ( setData( 'nip', e.target.value.replace( /[^0-9]/g, '', ), ) } />
setData('password', e.target.value) } />
)} {step === 2 && (
)}
Gagal Login {errorMessage} {/* */} ); }