'use client'; import { useState } from 'react'; import { createPortal } from 'react-dom'; import { X, CheckCircle } from 'lucide-react'; import { iamAuthApi } from '@/lib/api/auth'; interface ChangePasswordModalProps { isOpen: boolean; onClose: () => void; } export default function ChangePasswordModal({ isOpen, onClose }: ChangePasswordModalProps) { const [currentPassword, setCurrentPassword] = useState(''); const [newPassword, setNewPassword] = useState(''); const [confirmPassword, setConfirmPassword] = useState(''); const [loading, setLoading] = useState(false); const [error, setError] = useState(''); const [success, setSuccess] = useState(false); if (!isOpen) return null; const handleClose = () => { setCurrentPassword(''); setNewPassword(''); setConfirmPassword(''); setError(''); setSuccess(false); onClose(); }; const handleSubmit = async (e: React.FormEvent) => { e.preventDefault(); setError(''); if (newPassword.length < 6) { setError('New password must be at least 6 characters.'); return; } if (newPassword !== confirmPassword) { setError('New passwords do not match.'); return; } if (newPassword === currentPassword) { setError('New password must be different from the current password.'); return; } setLoading(true); try { await iamAuthApi.changePassword({ oldPassword: currentPassword, newPassword, confirmPassword, }); setSuccess(true); setTimeout(() => handleClose(), 1500); } catch (err: any) { const msg = err.response?.data?.message || ''; if (err.response?.status === 401) { setError('Current password is incorrect.'); } else if (msg === 'new_password_same_as_old') { setError('New password must be different from the current password.'); } else if (msg === 'new_passwords_do_not_match') { setError('New passwords do not match.'); } else { setError(msg || 'Failed to change password. Please try again.'); } } finally { setLoading(false); } }; // Portal to with a high z-index: the modal is mounted inside the // sticky z-50 header, whose stacking context would otherwise let page // content (e.g. the trip search widget) render on top of it. return createPortal(

Change Password

{success && (

Password changed successfully.

)} {error && (
{error}
)}
{ setCurrentPassword(e.target.value); setError(''); }} className="input-field" autoComplete="current-password" required />
{ setNewPassword(e.target.value); setError(''); }} className="input-field" autoComplete="new-password" minLength={6} required />
{ setConfirmPassword(e.target.value); setError(''); }} className="input-field" autoComplete="new-password" minLength={6} required />
, document.body ); }