blob: cb7432aa2093f72fc6dd521da7b3c173f61f7279 (
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
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
|
"use client"
import { useState } from "react"
import Link from "next/link"
import { useRouter } from "next/navigation"
import { createSupabaseBrowserClient } from "@/lib/supabase/client"
export default function ResetPasswordPage() {
const [newPassword, setNewPassword] = useState("")
const [confirmPassword, setConfirmPassword] = useState("")
const [errorMessage, setErrorMessage] = useState<string | null>(null)
const [isSubmitting, setIsSubmitting] = useState(false)
const [isPasswordUpdated, setIsPasswordUpdated] = useState(false)
const router = useRouter()
async function handlePasswordUpdate(event: React.FormEvent) {
event.preventDefault()
setErrorMessage(null)
if (newPassword !== confirmPassword) {
setErrorMessage("passwords do not match")
return
}
setIsSubmitting(true)
const supabaseClient = createSupabaseBrowserClient()
const { error } = await supabaseClient.auth.updateUser({
password: newPassword,
})
if (error) {
setErrorMessage(error.message)
setIsSubmitting(false)
return
}
setIsPasswordUpdated(true)
}
if (isPasswordUpdated) {
return (
<>
<div className="space-y-2">
<h1 className="text-lg text-text-primary">password updated</h1>
<p className="text-text-secondary">
your password has been changed successfully
</p>
</div>
<Link
href="/reader"
className="block text-text-secondary transition-colors hover:text-text-primary"
>
go to reader
</Link>
</>
)
}
return (
<>
<div className="space-y-2">
<h1 className="text-lg text-text-primary">reset password</h1>
<p className="text-text-secondary">enter your new password</p>
</div>
<form onSubmit={handlePasswordUpdate} className="space-y-4">
<div className="space-y-2">
<label htmlFor="new-password" className="text-text-secondary">
new password
</label>
<input
id="new-password"
type="password"
value={newPassword}
onChange={(event) => setNewPassword(event.target.value)}
required
minLength={8}
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"
/>
</div>
<div className="space-y-2">
<label htmlFor="confirm-password" className="text-text-secondary">
confirm password
</label>
<input
id="confirm-password"
type="password"
value={confirmPassword}
onChange={(event) => setConfirmPassword(event.target.value)}
required
minLength={8}
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"
/>
</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 ? "updating password..." : "update password"}
</button>
</form>
<Link
href="/sign-in"
className="block text-text-secondary transition-colors hover:text-text-primary"
>
back to sign in
</Link>
</>
)
}
|