feat: [US-010] - Password reset - set new password page

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

src/app/login/page.tsx

@@ -1,17 +1,24 @@
 'use client'
 
 import { useState } from 'react'
-import { useRouter } from 'next/navigation'
+import { useRouter, useSearchParams } from 'next/navigation'
 import Link from 'next/link'
 import { createClient } from '@/lib/supabase/client'
 
 export default function LoginPage() {
   const router = useRouter()
+  const searchParams = useSearchParams()
   const [email, setEmail] = useState('')
   const [password, setPassword] = useState('')
   const [error, setError] = useState<string | null>(null)
   const [loading, setLoading] = useState(false)
 
+  // Check for success message from password reset
+  const message = searchParams.get('message')
+  const successMessage = message === 'password_reset_success'
+    ? 'Your password has been reset successfully. Please sign in with your new password.'
+    : null
+
   async function handleSubmit(e: React.FormEvent) {
     e.preventDefault()
     setError(null)
@@ -46,6 +53,12 @@ export default function LoginPage() {
         </div>
 
         <form onSubmit={handleSubmit} className="mt-8 space-y-6">
+          {successMessage && (
+            <div className="rounded-md bg-green-50 p-4 dark:bg-green-900/20">
+              <p className="text-sm text-green-700 dark:text-green-400">{successMessage}</p>
+            </div>
+          )}
+
           {error && (
             <div className="rounded-md bg-red-50 p-4 dark:bg-red-900/20">
               <p className="text-sm text-red-700 dark:text-red-400">{error}</p>

src/app/reset-password/page.tsx

@@ -0,0 +1,218 @@
+'use client'
+
+import { useState, useEffect } 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 [confirmPassword, setConfirmPassword] = useState('')
+  const [error, setError] = useState<string | null>(null)
+  const [loading, setLoading] = useState(false)
+  const [tokenValid, setTokenValid] = useState<boolean | null>(null)
+
+  useEffect(() => {
+    // Handle recovery token from URL hash
+    // Supabase adds tokens to the URL hash after redirect from reset email
+    const handleTokenFromUrl = async () => {
+      const hash = window.location.hash
+      if (hash) {
+        const params = new URLSearchParams(hash.substring(1))
+        const accessToken = params.get('access_token')
+        const refreshToken = params.get('refresh_token')
+        const type = params.get('type')
+
+        if (accessToken && refreshToken && type === 'recovery') {
+          const supabase = createClient()
+          const { error } = await supabase.auth.setSession({
+            access_token: accessToken,
+            refresh_token: refreshToken,
+          })
+
+          if (error) {
+            setError('Invalid or expired reset link. Please request a new password reset.')
+            setTokenValid(false)
+            return
+          }
+
+          setTokenValid(true)
+        } else {
+          setError('Invalid or expired reset link. Please request a new password reset.')
+          setTokenValid(false)
+        }
+      } else {
+        // No hash in URL - check if user already has a session from a previous recovery
+        const supabase = createClient()
+        const { data: { session } } = await supabase.auth.getSession()
+
+        if (session) {
+          setTokenValid(true)
+        } else {
+          setError('Invalid or expired reset link. Please request a new password reset.')
+          setTokenValid(false)
+        }
+      }
+    }
+
+    handleTokenFromUrl()
+  }, [])
+
+  async function handleSubmit(e: React.FormEvent) {
+    e.preventDefault()
+    setError(null)
+
+    // Validate passwords match
+    if (password !== confirmPassword) {
+      setError('Passwords do not match')
+      return
+    }
+
+    // Validate password length
+    if (password.length < 6) {
+      setError('Password must be at least 6 characters')
+      return
+    }
+
+    setLoading(true)
+
+    const supabase = createClient()
+
+    const { error: updateError } = await supabase.auth.updateUser({
+      password,
+    })
+
+    if (updateError) {
+      setError(updateError.message)
+      setLoading(false)
+      return
+    }
+
+    // Sign out after password reset so user can sign in with new password
+    await supabase.auth.signOut()
+
+    // Redirect to login with success message
+    router.push('/login?message=password_reset_success')
+  }
+
+  // Show loading state while checking token
+  if (tokenValid === null) {
+    return (
+      <div className="flex min-h-screen items-center justify-center bg-zinc-50 px-4 dark:bg-zinc-950">
+        <div className="w-full max-w-md text-center">
+          <p className="text-zinc-600 dark:text-zinc-400">Verifying reset link...</p>
+        </div>
+      </div>
+    )
+  }
+
+  // Show error state if token is invalid
+  if (tokenValid === false) {
+    return (
+      <div className="flex min-h-screen items-center justify-center bg-zinc-50 px-4 dark:bg-zinc-950">
+        <div className="w-full max-w-md space-y-8">
+          <div className="text-center">
+            <h1 className="text-3xl font-bold tracking-tight text-zinc-900 dark:text-zinc-50">
+              Reset link expired
+            </h1>
+            <p className="mt-4 text-sm text-zinc-600 dark:text-zinc-400">
+              {error}
+            </p>
+          </div>
+
+          <div className="mt-6 text-center">
+            <Link
+              href="/forgot-password"
+              className="text-sm font-medium text-blue-600 hover:text-blue-500 dark:text-blue-400 dark:hover:text-blue-300"
+            >
+              Request a new reset link
+            </Link>
+          </div>
+        </div>
+      </div>
+    )
+  }
+
+  return (
+    <div className="flex min-h-screen items-center justify-center bg-zinc-50 px-4 dark:bg-zinc-950">
+      <div className="w-full max-w-md space-y-8">
+        <div className="text-center">
+          <h1 className="text-3xl font-bold tracking-tight text-zinc-900 dark:text-zinc-50">
+            Set new password
+          </h1>
+          <p className="mt-2 text-sm text-zinc-600 dark:text-zinc-400">
+            Enter your new password below.
+          </p>
+        </div>
+
+        <form onSubmit={handleSubmit} className="mt-8 space-y-6">
+          {error && (
+            <div className="rounded-md bg-red-50 p-4 dark:bg-red-900/20">
+              <p className="text-sm text-red-700 dark:text-red-400">{error}</p>
+            </div>
+          )}
+
+          <div className="space-y-4">
+            <div>
+              <label
+                htmlFor="password"
+                className="block text-sm font-medium text-zinc-700 dark:text-zinc-300"
+              >
+                New password
+              </label>
+              <input
+                id="password"
+                name="password"
+                type="password"
+                autoComplete="new-password"
+                required
+                value={password}
+                onChange={(e) => setPassword(e.target.value)}
+                className="mt-1 block w-full rounded-md border border-zinc-300 bg-white px-3 py-2 text-zinc-900 placeholder-zinc-400 shadow-sm focus:border-blue-500 focus:outline-none focus:ring-1 focus:ring-blue-500 dark:border-zinc-700 dark:bg-zinc-800 dark:text-zinc-50 dark:placeholder-zinc-500"
+                placeholder="••••••••"
+              />
+            </div>
+
+            <div>
+              <label
+                htmlFor="confirmPassword"
+                className="block text-sm font-medium text-zinc-700 dark:text-zinc-300"
+              >
+                Confirm new password
+              </label>
+              <input
+                id="confirmPassword"
+                name="confirmPassword"
+                type="password"
+                autoComplete="new-password"
+                required
+                value={confirmPassword}
+                onChange={(e) => setConfirmPassword(e.target.value)}
+                className="mt-1 block w-full rounded-md border border-zinc-300 bg-white px-3 py-2 text-zinc-900 placeholder-zinc-400 shadow-sm focus:border-blue-500 focus:outline-none focus:ring-1 focus:ring-blue-500 dark:border-zinc-700 dark:bg-zinc-800 dark:text-zinc-50 dark:placeholder-zinc-500"
+                placeholder="••••••••"
+              />
+            </div>
+          </div>
+
+          <button
+            type="submit"
+            disabled={loading}
+            className="flex w-full justify-center rounded-md bg-blue-600 px-4 py-2 text-sm font-semibold text-white shadow-sm hover:bg-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 dark:focus:ring-offset-zinc-950"
+          >
+            {loading ? 'Updating password...' : 'Update password'}
+          </button>
+
+          <div className="text-center">
+            <Link
+              href="/login"
+              className="text-sm font-medium text-blue-600 hover:text-blue-500 dark:text-blue-400 dark:hover:text-blue-300"
+            >
+              Back to sign in
+            </Link>
+          </div>
+        </form>
+      </div>
+    </div>
+  )
+}