feat: implement email change functionality with verification modal in profile settings

src/components/settings/ProfileSettingsForm.tsx

@@ -6,6 +6,7 @@ import { useSession, signIn } from 'next-auth/react';
 import { uploadService } from '@/services/upload.service';
 import { agentsService } from '@/services/agents.service';
 import { usersService } from '@/services/users.service';
+import { authService, AuthService } from '@/services/auth.service';
 
 interface ProfileSettingsFormProps {
   initialData?: {
@@ -50,6 +51,32 @@ export function ProfileSettingsForm({
   const [isSaving, setIsSaving] = useState(false);
   const [error, setError] = useState<string | null>(null);
   const [successMessage, setSuccessMessage] = useState<string | null>(null);
+  const [isEmailModalOpen, setIsEmailModalOpen] = useState(false);
+  const [emailModalData, setEmailModalData] = useState({ newEmail: '', password: '' });
+  const [emailModalError, setEmailModalError] = useState<string | null>(null);
+  const [emailModalSubmitting, setEmailModalSubmitting] = useState(false);
+
+  const handleRequestEmailChange = async () => {
+    setEmailModalError(null);
+    if (!emailModalData.newEmail.trim() || !emailModalData.password) {
+      setEmailModalError('Please enter a new email and your current password');
+      return;
+    }
+    setEmailModalSubmitting(true);
+    try {
+      const res = await authService.requestEmailChange({
+        newEmail: emailModalData.newEmail.trim(),
+        password: emailModalData.password,
+      });
+      setSuccessMessage(res.data?.message || 'Verification email sent. Please check your new inbox.');
+      setIsEmailModalOpen(false);
+      setEmailModalData({ newEmail: '', password: '' });
+    } catch (err) {
+      setEmailModalError(AuthService.getErrorMessage(err));
+    } finally {
+      setEmailModalSubmitting(false);
+    }
+  };
   // Reset avatar loaded state when URL changes (e.g., after upload)
   useEffect(() => {
     setAvatarLoaded(false);
@@ -462,12 +489,25 @@ export function ProfileSettingsForm({
             <label className="block text-[12px] font-bold text-[#00293D] font-serif mb-2">
               Email Address
             </label>
+            <div className="relative">
               <input
                 type="email"
                 value={formData.email}
                 disabled
-              className="w-full h-[44px] px-4 border border-[#00293D]/20 rounded-[10px] text-[14px] font-serif text-[#00293D]/60 bg-gray-50 cursor-not-allowed"
+                className="w-full h-[44px] pl-4 pr-[88px] border border-[#00293D]/20 rounded-[10px] text-[14px] font-serif text-[#00293D]/60 bg-gray-50 cursor-not-allowed"
               />
+              <button
+                type="button"
+                onClick={() => {
+                  setEmailModalError(null);
+                  setEmailModalData({ newEmail: '', password: '' });
+                  setIsEmailModalOpen(true);
+                }}
+                className="absolute right-2 top-1/2 -translate-y-1/2 px-3 py-1.5 text-[12px] font-serif font-semibold text-[#e58625] hover:bg-[#e58625]/10 rounded-[6px] transition-colors"
+              >
+                Change
+              </button>
+            </div>
           </div>
           <div>
             <label className="block text-[12px] font-bold text-[#00293D] font-serif mb-2">
@@ -501,6 +541,77 @@ export function ProfileSettingsForm({
           {isSaving ? 'Saving...' : 'Save Changes'}
         </button>
       </div>
+
+      {/* Change Email Modal */}
+      {isEmailModalOpen && (
+        <div className="fixed inset-0 z-50 flex items-center justify-center p-4">
+          <div
+            className="absolute inset-0 bg-black/30"
+            onClick={() => !emailModalSubmitting && setIsEmailModalOpen(false)}
+          />
+          <div className="relative bg-white rounded-[20px] w-full max-w-[480px] shadow-xl flex flex-col">
+            <div className="px-6 py-4 border-b border-[#d9d9d9] flex items-center justify-between">
+              <h2 className="font-fractul font-bold text-[18px] text-[#00293d]">Change Email Address</h2>
+              <button
+                onClick={() => !emailModalSubmitting && setIsEmailModalOpen(false)}
+                className="text-[#00293d] hover:opacity-70"
+              >
+                <svg width="18" height="18" viewBox="0 0 24 24" fill="none">
+                  <path d="M18 6L6 18M6 6L18 18" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
+                </svg>
+              </button>
+            </div>
+            <div className="px-6 py-5 space-y-4">
+              <p className="font-serif text-[13px] text-[#00293d]/70">
+                A verification link will be sent to your new email. Your email changes only after you click the link.
+              </p>
+              <div>
+                <label className="block text-[12px] font-bold text-[#00293D] font-serif mb-2">New Email</label>
+                <input
+                  type="email"
+                  value={emailModalData.newEmail}
+                  onChange={(e) => setEmailModalData({ ...emailModalData, newEmail: e.target.value })}
+                  placeholder="new@example.com"
+                  autoComplete="off"
+                  className="w-full h-[44px] px-4 border border-[#00293D]/20 rounded-[10px] text-[14px] font-serif text-[#00293D] focus:outline-none focus:border-[#E58625]"
+                />
+              </div>
+              <div>
+                <label className="block text-[12px] font-bold text-[#00293D] font-serif mb-2">Current Password</label>
+                <input
+                  type="password"
+                  value={emailModalData.password}
+                  onChange={(e) => setEmailModalData({ ...emailModalData, password: e.target.value })}
+                  placeholder="Enter your current password"
+                  autoComplete="current-password"
+                  className="w-full h-[44px] px-4 border border-[#00293D]/20 rounded-[10px] text-[14px] font-serif text-[#00293D] focus:outline-none focus:border-[#E58625]"
+                />
+              </div>
+              {emailModalError && (
+                <div className="p-3 bg-red-50 border border-red-200 rounded-[10px]">
+                  <p className="text-red-700 text-[13px] font-serif">{emailModalError}</p>
+                </div>
+              )}
+            </div>
+            <div className="px-6 py-4 border-t border-[#d9d9d9] flex items-center justify-end gap-3">
+              <button
+                onClick={() => setIsEmailModalOpen(false)}
+                disabled={emailModalSubmitting}
+                className="px-5 py-2.5 border border-[#00293D]/30 text-[#00293D] rounded-[10px] font-serif font-medium text-[13px] hover:bg-[#00293d]/5 transition-colors disabled:opacity-50"
+              >
+                Cancel
+              </button>
+              <button
+                onClick={handleRequestEmailChange}
+                disabled={emailModalSubmitting}
+                className="px-5 py-2.5 bg-[#e58625] text-white rounded-[10px] font-serif font-medium text-[13px] hover:bg-[#d47920] transition-colors disabled:opacity-50"
+              >
+                {emailModalSubmitting ? 'Sending...' : 'Send Verification Link'}
+              </button>
+            </div>
+          </div>
+        </div>
+      )}
     </div>
   );
 }

src/services/auth.service.ts

@@ -44,6 +44,11 @@ export interface VerifyEmailRequest {
   token: string;
 }
 
+export interface ChangeEmailRequest {
+  newEmail: string;
+  password: string;
+}
+
 export interface MessageResponse {
   message: string;
 }
@@ -99,6 +104,14 @@ class AuthService {
     return response.data;
   }
 
+  async requestEmailChange(data: ChangeEmailRequest): Promise<ApiResponse<MessageResponse>> {
+    const response = await api.post<ApiResponse<MessageResponse>>(
+      `${this.basePath}/change-email`,
+      data
+    );
+    return response.data;
+  }
+
   async getCurrentUser(): Promise<ApiResponse<AuthUser>> {
     const response = await api.get<ApiResponse<AuthUser>>(`${this.basePath}/me`);
     return response.data;