import React, { useState } from 'react'; import { Head, Link, router } from '@inertiajs/react'; import { KeyRound, Eye, EyeOff, Loader2, AlertTriangle, CheckCircle2, ArrowLeft } from 'lucide-react'; import axios from 'axios'; export default function ForgotPassword() { const [step, setStep] = useState(1); // 1 = Request Code, 2 = Verify & Reset, 3 = Success const [email, setEmail] = useState(''); const [otp, setOtp] = useState(''); const [password, setPassword] = useState(''); const [passwordConfirmation, setPasswordConfirmation] = useState(''); const [showPassword, setShowPassword] = useState(false); const [showConfirmPassword, setShowConfirmPassword] = useState(false); const [loading, setLoading] = useState(false); const [error, setError] = useState(''); const [successMessage, setSuccessMessage] = useState(''); const handleSendCode = async (e) => { e.preventDefault(); setError(''); if (!email.trim()) { setError('Please enter your email address.'); return; } setLoading(true); try { const response = await axios.post('/employer/forgot-password', { email }); if (response.data.success) { setStep(2); setSuccessMessage('A 6-digit verification code has been sent to your email.'); } else { setError(response.data.message || 'Failed to send reset code. Please try again.'); } } catch (err) { setError(err.response?.data?.message || 'Failed to send reset code. Please verify your email address.'); } finally { setLoading(false); } }; const handleResetPassword = async (e) => { e.preventDefault(); setError(''); if (!otp.trim() || otp.length !== 6) { setError('Please enter the 6-digit verification code.'); return; } if (!password) { setError('Please enter a new password.'); return; } if (password.length < 8) { setError('Password must be at least 8 characters long.'); return; } if (password !== passwordConfirmation) { setError('Passwords do not match.'); return; } // Validate password strength: 1 uppercase, 1 lowercase, 1 number, 1 special character const hasUppercase = /[A-Z]/.test(password); const hasLowercase = /[a-z]/.test(password); const hasNumber = /[0-9]/.test(password); const hasSpecial = /[^A-Za-z0-9]/.test(password); if (!hasUppercase || !hasLowercase || !hasNumber || !hasSpecial) { setError('Password must contain at least 1 uppercase, 1 lowercase, 1 number, and 1 special character.'); return; } setLoading(true); try { const response = await axios.post('/employer/reset-password', { email, otp, password, password_confirmation: passwordConfirmation }); if (response.data.success) { setStep(3); } else { setError(response.data.message || 'Failed to reset password. Please check your verification code.'); } } catch (err) { setError(err.response?.data?.message || 'Failed to reset password. Please check your inputs and try again.'); } finally { setLoading(false); } }; return (
{/* Header Icon & Title */} {step !== 3 && (

{step === 1 ? 'Forgot Password' : 'Reset Password'}

{step === 1 ? "Enter your registration email address and we'll send you a verification code." : `Enter the 6-digit code sent to ${email} and your new password.` }

)} {/* Status/Error Messages */} {error && (
{error}
)} {successMessage && step === 2 && (
{successMessage}
)} {/* Step 1: Request Code Form */} {step === 1 && (
setEmail(e.target.value)} className="w-full px-3.5 py-2.5 rounded-xl border border-slate-300 text-sm focus:outline-none focus:ring-2 focus:ring-[#185FA5]/20 focus:border-[#185FA5]" autoFocus required />
)} {/* Step 2: Verification and Reset Form */} {step === 2 && (
{/* OTP Input */}
setOtp(e.target.value.replace(/\D/g, ''))} className="w-full px-3.5 py-2.5 rounded-xl border border-slate-300 text-sm font-semibold tracking-wider text-center focus:outline-none focus:ring-2 focus:ring-[#185FA5]/20 focus:border-[#185FA5]" autoFocus required />
{/* Password Input */}
setPassword(e.target.value)} className="w-full pl-3.5 pr-10 py-2.5 rounded-xl border border-slate-300 text-sm focus:outline-none focus:ring-2 focus:ring-[#185FA5]/20 focus:border-[#185FA5]" required />

Must be at least 8 characters with 1 uppercase, 1 lowercase, 1 number, and 1 special symbol.

{/* Confirm Password Input */}
setPasswordConfirmation(e.target.value)} className="w-full pl-3.5 pr-10 py-2.5 rounded-xl border border-slate-300 text-sm focus:outline-none focus:ring-2 focus:ring-[#185FA5]/20 focus:border-[#185FA5]" required />
)} {/* Step 3: Success Screen */} {step === 3 && (

Password Reset Success

Your password has been successfully updated. You can now use your new password to sign in.

)} {/* Footer Back Link */} {step !== 3 && (
Return to Sign in
)}
); }