feat: self-service change password for all roles

- middleware.ts: add /account to isSharedRoute so all roles can reach it - components/account/change-password-form.tsx: re-auth with current password then updateUser({password}) with client-side validation (length, match, diff) - app/(protected)/account/page.tsx: dedicated account page, no role gate - sidebar.tsx: Account link (all roles) above Logout in desktop footer Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01CPf5Rc8QPx6V8KLEEgfKEQ
2026-07-12 22:17:51 +08:00
parent b2891a433d
commit 8061f804f7
4 changed files with 165 additions and 3 deletions
@@ -0,0 +1,131 @@
+'use client'
+
+import { useState } from 'react'
+import { createClient } from '@/lib/supabase/client'
+
+export default function ChangePasswordForm() {
+  const [current, setCurrent] = useState('')
+  const [newPass, setNewPass] = useState('')
+  const [confirm, setConfirm] = useState('')
+  const [loading, setLoading] = useState(false)
+  const [error, setError] = useState<string | null>(null)
+  const [success, setSuccess] = useState(false)
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault()
+    setError(null)
+    setSuccess(false)
+
+    // Client-side validation
+    if (!current || !newPass || !confirm) {
+      setError('All fields are required.')
+      return
+    }
+    if (newPass.length < 8) {
+      setError('Password must be at least 8 characters.')
+      return
+    }
+    if (newPass !== confirm) {
+      setError('Passwords do not match.')
+      return
+    }
+    if (newPass === current) {
+      setError('New password must differ from current password.')
+      return
+    }
+
+    setLoading(true)
+    const supabase = createClient()
+
+    // Get current user email for re-auth
+    const { data: { user } } = await supabase.auth.getUser()
+    if (!user?.email) {
+      setError('Session expired, please log in again.')
+      setLoading(false)
+      return
+    }
+
+    // Re-authenticate with current password
+    const { error: reauthError } = await supabase.auth.signInWithPassword({
+      email: user.email,
+      password: current,
+    })
+    if (reauthError) {
+      setError('Current password is incorrect.')
+      setLoading(false)
+      return
+    }
+
+    // Update to new password
+    const { error: updateError } = await supabase.auth.updateUser({ password: newPass })
+    if (updateError) {
+      setError(updateError.message)
+      setLoading(false)
+      return
+    }
+
+    setCurrent('')
+    setNewPass('')
+    setConfirm('')
+    setSuccess(true)
+    setLoading(false)
+  }
+
+  return (
+    <div className="bg-white rounded-xl shadow-sm p-5">
+      <h2 className="text-base font-semibold text-gray-900 mb-4">Change Password</h2>
+      <form onSubmit={handleSubmit} className="space-y-4">
+        <div>
+          <label className="block text-sm font-semibold text-gray-800 mb-1">
+            Current Password
+          </label>
+          <input
+            type="password"
+            value={current}
+            onChange={e => setCurrent(e.target.value)}
+            disabled={loading}
+            autoComplete="current-password"
+            className="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm focus:ring-2 focus:ring-blue-500 focus:border-transparent disabled:opacity-50"
+          />
+        </div>
+        <div>
+          <label className="block text-sm font-semibold text-gray-800 mb-1">
+            New Password
+          </label>
+          <input
+            type="password"
+            value={newPass}
+            onChange={e => setNewPass(e.target.value)}
+            disabled={loading}
+            autoComplete="new-password"
+            className="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm focus:ring-2 focus:ring-blue-500 focus:border-transparent disabled:opacity-50"
+          />
+        </div>
+        <div>
+          <label className="block text-sm font-semibold text-gray-800 mb-1">
+            Confirm New Password
+          </label>
+          <input
+            type="password"
+            value={confirm}
+            onChange={e => setConfirm(e.target.value)}
+            disabled={loading}
+            autoComplete="new-password"
+            className="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm focus:ring-2 focus:ring-blue-500 focus:border-transparent disabled:opacity-50"
+          />
+        </div>
+
+        {error && <p className="text-xs text-red-600 mt-1">{error}</p>}
+        {success && <p className="text-xs text-green-600 mt-1">Password changed successfully.</p>}
+
+        <button
+          type="submit"
+          disabled={loading}
+          className="bg-blue-600 text-white rounded-lg px-4 py-2 text-sm font-semibold disabled:opacity-50 hover:bg-blue-700"
+        >
+          {loading ? 'Saving…' : 'Update Password'}
+        </button>
+      </form>
+    </div>
+  )
+}