feat(auth): add reset-password page and login success banner

2026-07-21 22:31:20 +08:00
parent 211117e61a
commit fa88d62375
2 changed files with 108 additions and 1 deletions
@@ -0,0 +1,97 @@
+'use client'
+
+import { useState } from 'react'
+import { useRouter } from 'next/navigation'
+import Link from 'next/link'
+import { createClient } from '@/lib/supabase/client'
+
+export default function ResetPasswordPage() {
+  const router = useRouter()
+  const [password, setPassword] = useState('')
+  const [confirm, setConfirm] = useState('')
+  const [loading, setLoading] = useState(false)
+  const [error, setError] = useState<string | null>(null)
+
+  async function handleSubmit(e: React.FormEvent) {
+    e.preventDefault()
+    setError(null)
+
+    if (password.length < 8) {
+      setError('Password must be at least 8 characters.')
+      return
+    }
+    if (password !== confirm) {
+      setError('Passwords do not match.')
+      return
+    }
+
+    setLoading(true)
+    const supabase = createClient()
+    const { error: updateError } = await supabase.auth.updateUser({ password })
+    setLoading(false)
+
+    if (updateError) {
+      if (
+        updateError.message.toLowerCase().includes('session') ||
+        updateError.message.toLowerCase().includes('expired')
+      ) {
+        setError('Reset link has expired. Request a new one.')
+      } else {
+        setError(updateError.message)
+      }
+      return
+    }
+
+    router.push('/login?message=password_reset')
+  }
+
+  return (
+    <div className="flex min-h-screen items-center justify-center bg-gray-50 px-4">
+      <form onSubmit={handleSubmit} className="flex flex-col gap-4 w-full max-w-sm">
+        <div className="text-center">
+          <h1 className="text-2xl font-bold">Set new password</h1>
+          <p className="text-sm text-gray-500 mt-1">Choose a strong password.</p>
+        </div>
+
+        {error && (
+          <p className="bg-red-50 border border-red-200 text-red-700 text-sm rounded px-3 py-2">
+            {error}{' '}
+            {error.includes('expired') && (
+              <Link href="/forgot-password" className="underline">
+                Request new link
+              </Link>
+            )}
+          </p>
+        )}
+
+        <input
+          type="password"
+          placeholder="New password"
+          value={password}
+          onChange={e => setPassword(e.target.value)}
+          required
+          minLength={8}
+          autoComplete="new-password"
+          className="border border-gray-300 rounded-md px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
+        />
+        <input
+          type="password"
+          placeholder="Confirm new password"
+          value={confirm}
+          onChange={e => setConfirm(e.target.value)}
+          required
+          autoComplete="new-password"
+          className="border border-gray-300 rounded-md px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
+        />
+
+        <button
+          type="submit"
+          disabled={loading}
+          className="bg-blue-600 hover:bg-blue-700 text-white font-medium py-2 rounded-md disabled:opacity-50 transition-colors"
+        >
+          {loading ? 'Saving…' : 'Set password'}
+        </button>
+      </form>
+    </div>
+  )
+}