mirror of
https://github.com/Tria-plc/edr-platform.git
synced 2026-08-29 21:08:12 +00:00
159 lines
5.7 KiB
TypeScript
159 lines
5.7 KiB
TypeScript
'use client';
|
|
|
|
import { useState } from 'react';
|
|
import { createPortal } from 'react-dom';
|
|
import { X, CheckCircle } from 'lucide-react';
|
|
import { iamAuthApi } from '@/lib/api/auth';
|
|
import { isStrongPassword, PASSWORD_RULE } from '@/lib/password';
|
|
|
|
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 (!isStrongPassword(newPassword)) {
|
|
setError(PASSWORD_RULE);
|
|
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 <body> 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(
|
|
<div className="fixed inset-0 bg-black/50 backdrop-blur-sm flex items-center justify-center z-[100] p-4">
|
|
<div className="bg-white dark:bg-gray-800 rounded-2xl shadow-2xl max-w-md w-full">
|
|
<div className="sticky top-0 bg-white dark:bg-gray-800 border-b dark:border-gray-700 px-6 py-4 flex items-center justify-between rounded-t-2xl">
|
|
<h3 className="text-xl font-semibold text-gray-900 dark:text-gray-100">Change Password</h3>
|
|
<button
|
|
onClick={handleClose}
|
|
className="p-2 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg transition-colors"
|
|
>
|
|
<X className="w-5 h-5 text-gray-500" />
|
|
</button>
|
|
</div>
|
|
<form onSubmit={handleSubmit} className="p-6 space-y-4">
|
|
{success && (
|
|
<div className="flex items-start gap-3 bg-emerald-50 dark:bg-emerald-900/30 border border-emerald-200 dark:border-emerald-800 text-emerald-700 dark:text-emerald-300 px-4 py-3 rounded">
|
|
<CheckCircle className="w-5 h-5 flex-shrink-0 mt-0.5" />
|
|
<p className="text-sm">Password changed successfully.</p>
|
|
</div>
|
|
)}
|
|
|
|
{error && (
|
|
<div className="bg-red-50 dark:bg-red-900/30 border border-red-200 dark:border-red-800 text-red-700 dark:text-red-300 px-4 py-3 rounded">
|
|
{error}
|
|
</div>
|
|
)}
|
|
|
|
<div>
|
|
<label className="block text-sm font-medium mb-2 text-gray-700 dark:text-gray-300">Current Password</label>
|
|
<input
|
|
type="password"
|
|
value={currentPassword}
|
|
onChange={(e) => { setCurrentPassword(e.target.value); setError(''); }}
|
|
className="input-field"
|
|
autoComplete="current-password"
|
|
required
|
|
/>
|
|
</div>
|
|
<div>
|
|
<label className="block text-sm font-medium mb-2 text-gray-700 dark:text-gray-300">New Password</label>
|
|
<input
|
|
type="password"
|
|
value={newPassword}
|
|
onChange={(e) => { setNewPassword(e.target.value); setError(''); }}
|
|
className="input-field"
|
|
autoComplete="new-password"
|
|
minLength={6}
|
|
required
|
|
/>
|
|
</div>
|
|
<div>
|
|
<label className="block text-sm font-medium mb-2 text-gray-700 dark:text-gray-300">Confirm New Password</label>
|
|
<input
|
|
type="password"
|
|
value={confirmPassword}
|
|
onChange={(e) => { setConfirmPassword(e.target.value); setError(''); }}
|
|
className="input-field"
|
|
autoComplete="new-password"
|
|
minLength={6}
|
|
required
|
|
/>
|
|
</div>
|
|
<div className="flex gap-3 pt-4">
|
|
<button
|
|
type="button"
|
|
onClick={handleClose}
|
|
className="btn-secondary flex-1"
|
|
>
|
|
Cancel
|
|
</button>
|
|
<button
|
|
type="submit"
|
|
className="btn-primary flex-1"
|
|
disabled={loading || success || !currentPassword || !newPassword || !confirmPassword}
|
|
>
|
|
{loading ? 'Changing...' : 'Change Password'}
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>,
|
|
document.body
|
|
);
|
|
}
|