blob: 9b78d90d50d80c7fd2fcc850c457b738c3502d5f (
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
|
"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 SignUpPage() {
const [emailAddress, setEmailAddress] = useState("")
const [password, setPassword] = useState("")
const [errorMessage, setErrorMessage] = useState<string | null>(null)
const [isSubmitting, setIsSubmitting] = useState(false)
const [isComplete, setIsComplete] = useState(false)
const router = useRouter()
async function handleSignUp(event: React.FormEvent) {
event.preventDefault()
setIsSubmitting(true)
setErrorMessage(null)
const supabaseClient = createSupabaseBrowserClient()
const { error } = await supabaseClient.auth.signUp({
email: emailAddress,
password,
})
if (error) {
setErrorMessage(error.message)
setIsSubmitting(false)
return
}
setIsComplete(true)
}
if (isComplete) {
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 confirmation 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">sign up</h1>
<p className="text-text-secondary">create your asa.news account</p>
</div>
<form onSubmit={handleSignUp} 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>
<div className="space-y-2">
<label htmlFor="password" className="text-text-secondary">
password
</label>
<input
id="password"
type="password"
value={password}
onChange={(event) => setPassword(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 ? "creating account..." : "sign up"}
</button>
</form>
<Link
href="/sign-in"
className="block text-text-secondary transition-colors hover:text-text-primary"
>
already have an account? sign in
</Link>
</>
)
}
|