blob: 748ba478c874e14ca87504027b620c33119f8aa4 (
plain) (
blame)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
|
"use client"
import { useState } from "react"
import Link from "next/link"
import { createSupabaseBrowserClient } from "@/lib/supabase/client"
export default function ForgotPasswordPage() {
const [emailAddress, setEmailAddress] = useState("")
const [errorMessage, setErrorMessage] = useState<string | null>(null)
const [isSubmitting, setIsSubmitting] = useState(false)
const [isEmailSent, setIsEmailSent] = useState(false)
async function handleResetRequest(event: React.FormEvent) {
event.preventDefault()
setIsSubmitting(true)
setErrorMessage(null)
const supabaseClient = createSupabaseBrowserClient()
const { error } = await supabaseClient.auth.resetPasswordForEmail(
emailAddress,
{
redirectTo: `${window.location.origin}/auth/callback?next=/reset-password`,
},
)
if (error) {
setErrorMessage(error.message)
setIsSubmitting(false)
return
}
setIsEmailSent(true)
}
if (isEmailSent) {
return (
<>
<div className="space-y-2">
<h1 className="text-lg text-text-primary">check your email</h1>
<p className="text-text-secondary">
we sent a password reset link to {emailAddress}
</p>
</div>
<Link
href="/sign-in"
className="block text-text-secondary transition-colors hover:text-text-primary"
>
back to sign in
</Link>
</>
)
}
return (
<>
<div className="space-y-2">
<h1 className="text-lg text-text-primary">forgot password</h1>
<p className="text-text-secondary">
enter your email to receive a reset link
</p>
</div>
<form onSubmit={handleResetRequest} className="space-y-4">
<div className="space-y-2">
<label htmlFor="email" className="text-text-secondary">
email
</label>
<input
id="email"
type="email"
value={emailAddress}
onChange={(event) => setEmailAddress(event.target.value)}
required
className="w-full border border-border bg-background-secondary px-3 py-2 text-text-primary outline-none placeholder:text-text-dim focus:border-text-dim"
placeholder="[email protected]"
/>
</div>
{errorMessage && (
<p className="text-status-error">{errorMessage}</p>
)}
<button
type="submit"
disabled={isSubmitting}
className="w-full border border-border bg-background-tertiary px-4 py-2 text-text-primary transition-colors hover:bg-border disabled:opacity-50"
>
{isSubmitting ? "sending reset link..." : "send reset link"}
</button>
</form>
<Link
href="/sign-in"
className="block text-text-secondary transition-colors hover:text-text-primary"
>
back to sign in
</Link>
</>
)
}
|