feat: ( iam ) add forgot and change password to passenger backoffice

apps/edr-passenger-web/backoffice/src/components/layout/ChangePasswordModal.tsx

@@ -0,0 +1,141 @@
+'use client';
+
+import { useState } from 'react';
+import { useMutation } from '@tanstack/react-query';
+import { CheckCircle2 } from 'lucide-react';
+import Modal from '@/components/ui/Modal';
+import ActionButton from '@/components/ui/ActionButton';
+import { iamAuthApi } from '@/lib/api/auth';
+
+interface ChangePasswordModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+}
+
+export default function ChangePasswordModal({ isOpen, onClose }: ChangePasswordModalProps) {
+  const [oldPassword, setOldPassword]         = useState('');
+  const [newPassword, setNewPassword]         = useState('');
+  const [confirmPassword, setConfirmPassword] = useState('');
+  const [error, setError]                     = useState('');
+  const [success, setSuccess]                 = useState(false);
+
+  const changePasswordMutation = useMutation({
+    mutationFn: () => iamAuthApi.changePassword({ oldPassword, newPassword, confirmPassword }),
+    onSuccess: () => {
+      setSuccess(true);
+      setTimeout(() => handleClose(), 1500);
+    },
+    onError: (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.');
+      }
+    },
+  });
+
+  const handleClose = () => {
+    setOldPassword('');
+    setNewPassword('');
+    setConfirmPassword('');
+    setError('');
+    setSuccess(false);
+    onClose();
+  };
+
+  const handleSubmit = () => {
+    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 === oldPassword) {
+      setError('New password must be different from the current password.');
+      return;
+    }
+    changePasswordMutation.mutate();
+  };
+
+  return (
+    <Modal isOpen={isOpen} onClose={handleClose} title="Change Password">
+      <form
+        onSubmit={(e) => { e.preventDefault(); handleSubmit(); }}
+        className="space-y-4"
+      >
+        {success && (
+          <div className="flex items-start gap-3 rounded-lg bg-emerald-50 dark:bg-emerald-900/20 border border-emerald-200 dark:border-emerald-800 px-4 py-3">
+            <CheckCircle2 className="w-4 h-4 mt-0.5 text-emerald-600 dark:text-emerald-400 flex-shrink-0" />
+            <p className="text-sm text-emerald-700 dark:text-emerald-300">Password changed successfully.</p>
+          </div>
+        )}
+
+        {error && (
+          <div className="rounded-lg bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 px-4 py-3">
+            <p className="text-sm text-red-700 dark:text-red-300">{error}</p>
+          </div>
+        )}
+
+        <div>
+          <label className="label">Current Password *</label>
+          <input
+            type="password"
+            className="input"
+            value={oldPassword}
+            onChange={(e) => { setOldPassword(e.target.value); setError(''); }}
+            placeholder="Enter current password"
+            autoComplete="current-password"
+            required
+          />
+        </div>
+        <div>
+          <label className="label">New Password *</label>
+          <input
+            type="password"
+            className="input"
+            value={newPassword}
+            onChange={(e) => { setNewPassword(e.target.value); setError(''); }}
+            placeholder="Enter new password"
+            autoComplete="new-password"
+            minLength={6}
+            required
+          />
+        </div>
+        <div>
+          <label className="label">Confirm New Password *</label>
+          <input
+            type="password"
+            className="input"
+            value={confirmPassword}
+            onChange={(e) => { setConfirmPassword(e.target.value); setError(''); }}
+            placeholder="Re-enter new password"
+            autoComplete="new-password"
+            minLength={6}
+            required
+          />
+        </div>
+
+        <div className="flex justify-end gap-2 pt-4">
+          <ActionButton type="button" variant="secondary" onClick={handleClose}>
+            Cancel
+          </ActionButton>
+          <ActionButton
+            type="submit"
+            loading={changePasswordMutation.isPending}
+            disabled={success || !oldPassword || !newPassword || !confirmPassword}
+          >
+            Change Password
+          </ActionButton>
+        </div>
+      </form>
+    </Modal>
+  );
+}

apps/edr-passenger-web/backoffice/src/components/layout/Header.tsx

@@ -1,16 +1,18 @@
 'use client';
 
-import { Bell, LogOut, Moon, Sun, ChevronDown, HelpCircle } from 'lucide-react';
+import { Bell, LogOut, Moon, Sun, ChevronDown, HelpCircle, KeyRound } from 'lucide-react';
 import { useAuthStore } from '@/lib/auth-store';
 import { useTheme } from '@/lib/theme-store';
 import { useState } from 'react';
 import Link from 'next/link';
+import ChangePasswordModal from '@/components/layout/ChangePasswordModal';
 
 export default function Header() {
   const { user, logout } = useAuthStore();
   const { isDark, toggleTheme } = useTheme();
   const [showUserMenu, setShowUserMenu] = useState(false);
   const [showNotifications, setShowNotifications] = useState(false);
+  const [showChangePassword, setShowChangePassword] = useState(false);
 
   return (
     <header className="flex h-16 items-center justify-between border-b border-gray-200 dark:border-slate-700 bg-white dark:bg-slate-900 px-6 shadow-sm">
@@ -108,6 +110,16 @@ export default function Header() {
                 >
                   Settings
                 </Link>
+                <button
+                  onClick={() => {
+                    setShowUserMenu(false);
+                    setShowChangePassword(true);
+                  }}
+                  className="flex w-full items-center gap-2 rounded-lg px-3 py-2 text-sm text-foreground hover:bg-gray-100 dark:hover:bg-slate-800 transition-colors"
+                >
+                  <KeyRound className="h-4 w-4" />
+                  Change Password
+                </button>
                 <button
                   onClick={() => {
                     logout();
@@ -123,6 +135,11 @@ export default function Header() {
           )}
         </div>
       </div>
+
+      <ChangePasswordModal
+        isOpen={showChangePassword}
+        onClose={() => setShowChangePassword(false)}
+      />
     </header>
   );
 }