| 1 | "use client"; |
| 2 | |
| 3 | import Link from "next/link"; |
| 4 | import { useRouter } from "next/navigation"; |
| 5 | import { FormEvent, useState } from "react"; |
| 6 | import { authApi } from "../lib/portfolio-api"; |
| 7 | |
| 8 | export default function ResetPasswordPage() { |
| 9 | const router = useRouter(); |
| 10 | const [password, setPassword] = useState(""); |
| 11 | const [confirmPassword, setConfirmPassword] = useState(""); |
| 12 | const [message, setMessage] = useState(""); |
| 13 | const [visible, setVisible] = useState(false); |
| 14 | |
| 15 | async function submit(event: FormEvent<HTMLFormElement>) { |
| 16 | event.preventDefault(); |
| 17 | if (password !== confirmPassword) { setMessage("Passwords do not match."); return; } |
| 18 | const token = new URLSearchParams(window.location.search).get("token"); |
| 19 | if (!token) { setMessage("This reset link is invalid or expired."); return; } |
| 20 | try { |
| 21 | await authApi.confirmPasswordReset(token, password); |
| 22 | setMessage("Password reset successfully. Redirecting you to sign in..."); |
| 23 | window.setTimeout(() => router.push("/"), 1500); |
| 24 | } catch { setMessage("This reset link is invalid or expired."); } |
| 25 | } |
| 26 | |
| 27 | return <main className="signin-shell"><section className="signin-panel"><h1>Reset password</h1><p>{message || "Choose a new password."}</p><form className="signin-actions" onSubmit={submit}> |
| 28 | <label>Password<span className="password-input"><input value={password} onChange={(e) => setPassword(e.target.value)} type={visible ? "text" : "password"} minLength={12} required /><button className="password-toggle" type="button" aria-label={visible ? "Hide password" : "Show password"} onClick={() => setVisible(!visible)}>{visible ? "◉" : "◌"}</button></span></label> |
| 29 | <label>Confirm password<span className="password-input"><input value={confirmPassword} onChange={(e) => setConfirmPassword(e.target.value)} type={visible ? "text" : "password"} minLength={12} required /><button className="password-toggle" type="button" aria-label={visible ? "Hide password" : "Show password"} onClick={() => setVisible(!visible)}>{visible ? "◉" : "◌"}</button></span></label> |
| 30 | <button type="submit">Reset password</button> |
| 31 | </form><Link href="/">Back to sign in</Link></section></main>; |
| 32 | } |