feat: change email and password in settings

src/lib/api.ts

@@ -95,6 +95,33 @@ class ApiClient {
     }
   }
 
+  // Account (email & password changes via Better Auth)
+  async changePassword(currentPassword: string, newPassword: string): Promise<void> {
+    const response = await fetch(`${AUTH_BASE}/api/auth/change-password`, {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json', ...this.authHeaders() },
+      credentials: 'include',
+      body: JSON.stringify({ currentPassword, newPassword }),
+    });
+    if (!response.ok) {
+      const error = await response.json().catch(() => ({ message: 'Failed to change password' }));
+      throw new Error(error.message || 'Failed to change password');
+    }
+  }
+
+  async changeEmail(newEmail: string): Promise<void> {
+    const response = await fetch(`${AUTH_BASE}/api/auth/change-email`, {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json', ...this.authHeaders() },
+      credentials: 'include',
+      body: JSON.stringify({ newEmail }),
+    });
+    if (!response.ok) {
+      const error = await response.json().catch(() => ({ message: 'Failed to change email' }));
+      throw new Error(error.message || 'Failed to change email');
+    }
+  }
+
   // Profile
   async getProfile(): Promise<Profile> {
     return this.fetch('/profile');

src/pages/SettingsPage.tsx

@@ -1,39 +1,107 @@
 import { useEffect, useState } from 'react';
 import { api } from '@/lib/api';
+import { useAuthStore } from '@/stores/auth';
 import type { Profile } from '@/types';
-import { Save, User } from 'lucide-react';
+import { Save, User, Lock, Mail, CheckCircle2, AlertCircle } from 'lucide-react';
 import LoadingSpinner, { PageLoader } from '@/components/LoadingSpinner';
 
+function StatusMessage({ type, message }: { type: 'success' | 'error'; message: string }) {
+  return (
+    <div className={`flex items-center gap-2 text-sm font-medium animate-fade-in ${type === 'success' ? 'text-emerald-600' : 'text-red-600'}`}>
+      {type === 'success' ? <CheckCircle2 className="w-4 h-4" /> : <AlertCircle className="w-4 h-4" />}
+      {message}
+    </div>
+  );
+}
+
 export default function SettingsPage() {
+  const { checkSession } = useAuthStore();
   const [profile, setProfile] = useState<Profile | null>(null);
   const [loading, setLoading] = useState(true);
   const [saving, setSaving] = useState(false);
-  const [success, setSuccess] = useState(false);
+  const [profileStatus, setProfileStatus] = useState<{ type: 'success' | 'error'; message: string } | null>(null);
+
+  // Email change
+  const [newEmail, setNewEmail] = useState('');
+  const [emailSaving, setEmailSaving] = useState(false);
+  const [emailStatus, setEmailStatus] = useState<{ type: 'success' | 'error'; message: string } | null>(null);
+
+  // Password change
+  const [currentPassword, setCurrentPassword] = useState('');
+  const [newPassword, setNewPassword] = useState('');
+  const [confirmPassword, setConfirmPassword] = useState('');
+  const [passwordSaving, setPasswordSaving] = useState(false);
+  const [passwordStatus, setPasswordStatus] = useState<{ type: 'success' | 'error'; message: string } | null>(null);
 
   useEffect(() => {
     api.getProfile().then((p) => {
       setProfile(p);
+      setNewEmail(p.email || '');
       setLoading(false);
     }).catch(() => setLoading(false));
   }, []);
 
-  const handleSave = async (e: React.FormEvent) => {
+  const handleSaveProfile = async (e: React.FormEvent) => {
     e.preventDefault();
     if (!profile) return;
     setSaving(true);
-    setSuccess(false);
+    setProfileStatus(null);
     try {
       const updated = await api.updateProfile(profile);
       setProfile(updated);
-      setSuccess(true);
-      setTimeout(() => setSuccess(false), 3000);
-    } catch (err) {
-      console.error(err);
+      setProfileStatus({ type: 'success', message: 'Profile saved' });
+      setTimeout(() => setProfileStatus(null), 3000);
+    } catch (err: any) {
+      setProfileStatus({ type: 'error', message: err.message || 'Failed to save' });
     } finally {
       setSaving(false);
     }
   };
 
+  const handleChangeEmail = async (e: React.FormEvent) => {
+    e.preventDefault();
+    if (!newEmail || newEmail === profile?.email) return;
+    setEmailSaving(true);
+    setEmailStatus(null);
+    try {
+      await api.changeEmail(newEmail);
+      await checkSession();
+      setProfile(prev => prev ? { ...prev, email: newEmail } : prev);
+      setEmailStatus({ type: 'success', message: 'Email updated' });
+      setTimeout(() => setEmailStatus(null), 3000);
+    } catch (err: any) {
+      setEmailStatus({ type: 'error', message: err.message || 'Failed to update email' });
+    } finally {
+      setEmailSaving(false);
+    }
+  };
+
+  const handleChangePassword = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setPasswordStatus(null);
+    if (newPassword !== confirmPassword) {
+      setPasswordStatus({ type: 'error', message: 'Passwords do not match' });
+      return;
+    }
+    if (newPassword.length < 8) {
+      setPasswordStatus({ type: 'error', message: 'Password must be at least 8 characters' });
+      return;
+    }
+    setPasswordSaving(true);
+    try {
+      await api.changePassword(currentPassword, newPassword);
+      setCurrentPassword('');
+      setNewPassword('');
+      setConfirmPassword('');
+      setPasswordStatus({ type: 'success', message: 'Password changed' });
+      setTimeout(() => setPasswordStatus(null), 3000);
+    } catch (err: any) {
+      setPasswordStatus({ type: 'error', message: err.message || 'Failed to change password' });
+    } finally {
+      setPasswordSaving(false);
+    }
+  };
+
   if (loading) return <PageLoader />;
 
   const inputClass = 'w-full px-3.5 py-2.5 border border-slate-300 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent';
@@ -43,11 +111,11 @@ export default function SettingsPage() {
     <div className="max-w-2xl mx-auto space-y-6 animate-fade-in">
       <div>
         <h1 className="text-2xl font-bold text-slate-900">Settings</h1>
-        <p className="text-slate-500 text-sm mt-1">Manage your profile and preferences</p>
+        <p className="text-slate-500 text-sm mt-1">Manage your profile, email, and password</p>
       </div>
 
-      <form onSubmit={handleSave} className="space-y-6">
-        {/* Profile section */}
+      {/* Profile Information */}
+      <form onSubmit={handleSaveProfile} className="space-y-6">
         <div className="bg-white border border-slate-200 rounded-xl p-6 space-y-5">
           <div className="flex items-center gap-3 pb-4 border-b border-slate-100">
             <div className="w-10 h-10 bg-blue-100 text-blue-700 rounded-lg flex items-center justify-center">
@@ -68,17 +136,6 @@ export default function SettingsPage() {
                 className={inputClass}
               />
             </div>
-            <div>
-              <label className={labelClass}>Email</label>
-              <input
-                value={profile?.email || ''}
-                disabled
-                className={`${inputClass} bg-slate-50 text-slate-500`}
-              />
-            </div>
-          </div>
-
-          <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
             <div>
               <label className={labelClass}>Title</label>
               <input
@@ -88,6 +145,9 @@ export default function SettingsPage() {
                 className={inputClass}
               />
             </div>
+          </div>
+
+          <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
             <div>
               <label className={labelClass}>Company</label>
               <input
@@ -96,51 +156,144 @@ export default function SettingsPage() {
                 className={inputClass}
               />
             </div>
+            <div>
+              <label className={labelClass}>Phone</label>
+              <input
+                value={profile?.phone || ''}
+                onChange={(e) => setProfile({ ...profile!, phone: e.target.value })}
+                className={inputClass}
+              />
+            </div>
+          </div>
+
+          {/* Signature */}
+          <div>
+            <label className={labelClass}>Email Signature</label>
+            <textarea
+              value={profile?.emailSignature || ''}
+              onChange={(e) => setProfile({ ...profile!, emailSignature: e.target.value })}
+              rows={4}
+              placeholder="Your email signature (supports plain text)..."
+              className={`${inputClass} font-mono`}
+            />
+          </div>
+
+          <div className="flex items-center gap-3">
+            <button
+              type="submit"
+              disabled={saving}
+              className="flex items-center gap-2 px-5 py-2.5 bg-blue-600 text-white rounded-lg text-sm font-medium hover:bg-blue-700 disabled:opacity-50 transition-colors"
+            >
+              {saving ? <LoadingSpinner size="sm" className="text-white" /> : <Save className="w-4 h-4" />}
+              Save Profile
+            </button>
+            {profileStatus && <StatusMessage {...profileStatus} />}
+          </div>
+        </div>
+      </form>
+
+      {/* Change Email */}
+      <form onSubmit={handleChangeEmail}>
+        <div className="bg-white border border-slate-200 rounded-xl p-6 space-y-5">
+          <div className="flex items-center gap-3 pb-4 border-b border-slate-100">
+            <div className="w-10 h-10 bg-amber-100 text-amber-700 rounded-lg flex items-center justify-center">
+              <Mail className="w-5 h-5" />
+            </div>
+            <div>
+              <h2 className="font-semibold text-slate-900">Change Email</h2>
+              <p className="text-xs text-slate-500">Update your login email address</p>
+            </div>
           </div>
 
           <div>
-            <label className={labelClass}>Phone</label>
+            <label className={labelClass}>New Email Address</label>
             <input
-              value={profile?.phone || ''}
-              onChange={(e) => setProfile({ ...profile!, phone: e.target.value })}
+              type="email"
+              value={newEmail}
+              onChange={(e) => setNewEmail(e.target.value)}
+              required
               className={inputClass}
+              placeholder="your-new-email@example.com"
             />
           </div>
-        </div>
 
-        {/* Signature */}
-        <div className="bg-white border border-slate-200 rounded-xl p-6 space-y-4">
-          <h2 className="font-semibold text-slate-900">Email Signature</h2>
-          <textarea
-            value={profile?.emailSignature || ''}
-            onChange={(e) => setProfile({ ...profile!, emailSignature: e.target.value })}
-            rows={6}
-            placeholder="Your email signature (supports plain text)..."
-            className={`${inputClass} font-mono`}
-          />
-          {profile?.emailSignature && (
-            <div>
-              <p className="text-xs font-medium text-slate-500 mb-2">Preview:</p>
-              <div className="p-4 bg-slate-50 rounded-lg text-sm whitespace-pre-wrap border border-slate-200">
-                {profile.emailSignature}
-              </div>
+          <div className="flex items-center gap-3">
+            <button
+              type="submit"
+              disabled={emailSaving || newEmail === profile?.email}
+              className="flex items-center gap-2 px-5 py-2.5 bg-amber-600 text-white rounded-lg text-sm font-medium hover:bg-amber-700 disabled:opacity-50 transition-colors"
+            >
+              {emailSaving ? <LoadingSpinner size="sm" className="text-white" /> : <Mail className="w-4 h-4" />}
+              Update Email
+            </button>
+            {emailStatus && <StatusMessage {...emailStatus} />}
+          </div>
+        </div>
+      </form>
+
+      {/* Change Password */}
+      <form onSubmit={handleChangePassword}>
+        <div className="bg-white border border-slate-200 rounded-xl p-6 space-y-5">
+          <div className="flex items-center gap-3 pb-4 border-b border-slate-100">
+            <div className="w-10 h-10 bg-emerald-100 text-emerald-700 rounded-lg flex items-center justify-center">
+              <Lock className="w-5 h-5" />
             </div>
-          )}
-        </div>
+            <div>
+              <h2 className="font-semibold text-slate-900">Change Password</h2>
+              <p className="text-xs text-slate-500">Update your account password</p>
+            </div>
+          </div>
 
-        {/* Save */}
-        <div className="flex items-center gap-3">
-          <button
-            type="submit"
-            disabled={saving}
-            className="flex items-center gap-2 px-5 py-2.5 bg-blue-600 text-white rounded-lg text-sm font-medium hover:bg-blue-700 disabled:opacity-50 transition-colors"
-          >
-            {saving ? <LoadingSpinner size="sm" className="text-white" /> : <Save className="w-4 h-4" />}
-            Save Changes
-          </button>
-          {success && (
-            <span className="text-sm text-emerald-600 font-medium animate-fade-in">✓ Saved successfully</span>
-          )}
+          <div>
+            <label className={labelClass}>Current Password</label>
+            <input
+              type="password"
+              value={currentPassword}
+              onChange={(e) => setCurrentPassword(e.target.value)}
+              required
+              className={inputClass}
+              placeholder="••••••••"
+            />
+          </div>
+
+          <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
+            <div>
+              <label className={labelClass}>New Password</label>
+              <input
+                type="password"
+                value={newPassword}
+                onChange={(e) => setNewPassword(e.target.value)}
+                required
+                minLength={8}
+                className={inputClass}
+                placeholder="••••••••"
+              />
+            </div>
+            <div>
+              <label className={labelClass}>Confirm New Password</label>
+              <input
+                type="password"
+                value={confirmPassword}
+                onChange={(e) => setConfirmPassword(e.target.value)}
+                required
+                minLength={8}
+                className={inputClass}
+                placeholder="••••••••"
+              />
+            </div>
+          </div>
+
+          <div className="flex items-center gap-3">
+            <button
+              type="submit"
+              disabled={passwordSaving || !currentPassword || !newPassword || !confirmPassword}
+              className="flex items-center gap-2 px-5 py-2.5 bg-emerald-600 text-white rounded-lg text-sm font-medium hover:bg-emerald-700 disabled:opacity-50 transition-colors"
+            >
+              {passwordSaving ? <LoadingSpinner size="sm" className="text-white" /> : <Lock className="w-4 h-4" />}
+              Change Password
+            </button>
+            {passwordStatus && <StatusMessage {...passwordStatus} />}
+          </div>
         </div>
       </form>
     </div>