Choose a new password

1import { useEffect, useState, type FormEvent } from "react"
2import { WpAuthProvider, useWpAuth } from "@forgewp/auth"
3
4function NewPasswordFields() {
5  const { resetPassword, loading, error } = useWpAuth()
6  const [link, setLink] = useState<{ login: string; key: string } | null>(null)
7  const [password, setPassword] = useState("")
8  const [complete, setComplete] = useState(false)
9
10  useEffect(() => {
11    const params = new URLSearchParams(window.location.search)
12    setLink({ login: params.get("login") || "", key: params.get("key") || "" })
13  }, [])
14
15  async function handleSubmit(event: FormEvent<HTMLFormElement>) {
16    event.preventDefault()
17    if (!link?.login || !link.key || !password) return
18    if (await resetPassword(link.login, link.key, password)) {
19      setPassword("")
20      setComplete(true)
21    }
22  }
23
24  if (!link) return <p role="status">Reading your reset link…</p>
25  if (!link.login || !link.key) {
26    return (
27      <p role="alert">
28        Open the complete reset link from your email or request a new one.
29      </p>
30    )
31  }
32  if (complete)
33    return <p role="status">Reset completed. You can now sign in.</p>
34
35  return (
36    <form onSubmit={handleSubmit}>
37      <label>
38        New password
39        <input
40          type="password"
41          autoComplete="new-password"
42          required
43          value={password}
44          onChange={(event) => setPassword(event.target.value)}
45        />
46      </label>
47      <button type="submit" disabled={loading}>
48        {loading ? "Resetting…" : "Save new password"}
49      </button>
50      {error && <p role="alert">{error}</p>}
51    </form>
52  )
53}
54
55export default function NewPassword() {
56  return (
57    <WpAuthProvider>
58      <NewPasswordFields />
59    </WpAuthProvider>
60  )
61}