@@ -16,8 +16,8 @@ import {
1616import { Link as RouterLink , createFileRoute } from "@tanstack/react-router"
1717import { type SubmitHandler , useForm } from "react-hook-form"
1818import { FaEnvelope , FaKey , FaUser } from "react-icons/fa"
19-
2019import { useState } from "react"
20+
2121import type { UserRegister } from "../client"
2222import AuthOptions from "../components/Auth/AuthOptions"
2323import BackgroundPanel from "../components/Auth/BackgroundPanel"
@@ -69,133 +69,133 @@ function SignUp() {
6969 { emailSent ? (
7070 < EmailSent email = { userEmail } />
7171 ) : (
72- < Container
73- as = "form"
74- onSubmit = { handleSubmit ( onSubmit ) }
75- maxW = { { base : "xs" , md : "md" } }
76- flexDir = "column"
77- alignItems = "stretch"
78- justifyContent = "center"
79- centerContent
80- gap = { 4 }
81- >
82- < Box >
83- < Text fontWeight = "bolder" fontSize = "2xl" >
84- Sign Up
85- </ Text >
86- < Text fontSize = "md" color = "gray.500" >
87- Create your account
88- </ Text >
89- </ Box >
90- < FormControl id = "full_name" isInvalid = { ! ! errors . email } >
91- < FormLabel htmlFor = "full_name" srOnly >
92- Full Name
93- </ FormLabel >
94- < InputGroup >
95- < InputLeftElement pointerEvents = "none" >
96- < Icon as = { FaUser } color = "ui.dim" />
97- </ InputLeftElement >
98- < Input
99- id = "full_name"
100- { ...register ( "full_name" , {
101- required : "Name is required" ,
102- pattern : namePattern ,
103- } ) }
104- placeholder = "Full Name"
105- type = "text"
106- />
107- </ InputGroup >
108- { errors . full_name && (
109- < FormErrorMessage > { errors . full_name . message } </ FormErrorMessage >
110- ) }
111- </ FormControl >
112- < FormControl id = "email" isInvalid = { ! ! errors . email } >
113- < FormLabel htmlFor = "username" srOnly >
114- Email
115- </ FormLabel >
116- < InputGroup >
117- < InputLeftElement pointerEvents = "none" >
118- < Icon as = { FaEnvelope } color = "ui.dim" />
119- </ InputLeftElement >
120- < Input
121- id = "email"
122- { ...register ( "email" , {
123- required : "Email is required" ,
124- pattern : emailPattern ,
125- } ) }
126- placeholder = "Email"
127- type = "email"
128- />
129- </ InputGroup >
130- { errors . email && (
131- < FormErrorMessage > { errors . email . message } </ FormErrorMessage >
132- ) }
133- </ FormControl >
134- < FormControl id = "password" isInvalid = { ! ! errors . password } >
135- < FormLabel htmlFor = "password" srOnly >
136- Password
137- </ FormLabel >
138- < InputGroup >
139- < InputLeftElement pointerEvents = "none" >
140- < Icon as = { FaKey } color = "ui.dim" />
141- </ InputLeftElement >
142- < Input
143- id = "password"
144- { ...register ( "password" , passwordRules ( ) ) }
145- placeholder = "Password"
146- type = "password"
147- />
148- </ InputGroup >
149- { errors . password && (
150- < FormErrorMessage > { errors . password . message } </ FormErrorMessage >
151- ) }
152- </ FormControl >
153- < FormControl
154- id = "confirm_password"
155- isInvalid = { ! ! errors . confirm_password }
72+ < Container
73+ as = "form"
74+ onSubmit = { handleSubmit ( onSubmit ) }
75+ maxW = { { base : "xs" , md : "md" } }
76+ flexDir = "column"
77+ alignItems = "stretch"
78+ justifyContent = "center"
79+ centerContent
80+ gap = { 4 }
15681 >
157- < FormLabel htmlFor = "confirm_password" srOnly >
158- Confirm Password
159- </ FormLabel >
82+ < Box >
83+ < Text fontWeight = "bolder" fontSize = "2xl" >
84+ Sign Up
85+ </ Text >
86+ < Text fontSize = "md" color = "gray.500" >
87+ Create your account
88+ </ Text >
89+ </ Box >
90+ < FormControl id = "full_name" isInvalid = { ! ! errors . email } >
91+ < FormLabel htmlFor = "full_name" srOnly >
92+ Full Name
93+ </ FormLabel >
94+ < InputGroup >
95+ < InputLeftElement pointerEvents = "none" >
96+ < Icon as = { FaUser } color = "ui.dim" />
97+ </ InputLeftElement >
98+ < Input
99+ id = "full_name"
100+ { ...register ( "full_name" , {
101+ required : "Name is required" ,
102+ pattern : namePattern ,
103+ } ) }
104+ placeholder = "Full Name"
105+ type = "text"
106+ />
107+ </ InputGroup >
108+ { errors . full_name && (
109+ < FormErrorMessage > { errors . full_name . message } </ FormErrorMessage >
110+ ) }
111+ </ FormControl >
112+ < FormControl id = "email" isInvalid = { ! ! errors . email } >
113+ < FormLabel htmlFor = "username" srOnly >
114+ Email
115+ </ FormLabel >
116+ < InputGroup >
117+ < InputLeftElement pointerEvents = "none" >
118+ < Icon as = { FaEnvelope } color = "ui.dim" />
119+ </ InputLeftElement >
120+ < Input
121+ id = "email"
122+ { ...register ( "email" , {
123+ required : "Email is required" ,
124+ pattern : emailPattern ,
125+ } ) }
126+ placeholder = "Email"
127+ type = "email"
128+ />
129+ </ InputGroup >
130+ { errors . email && (
131+ < FormErrorMessage > { errors . email . message } </ FormErrorMessage >
132+ ) }
133+ </ FormControl >
134+ < FormControl id = "password" isInvalid = { ! ! errors . password } >
135+ < FormLabel htmlFor = "password" srOnly >
136+ Password
137+ </ FormLabel >
138+ < InputGroup >
139+ < InputLeftElement pointerEvents = "none" >
140+ < Icon as = { FaKey } color = "ui.dim" />
141+ </ InputLeftElement >
142+ < Input
143+ id = "password"
144+ { ...register ( "password" , passwordRules ( ) ) }
145+ placeholder = "Password"
146+ type = "password"
147+ />
148+ </ InputGroup >
149+ { errors . password && (
150+ < FormErrorMessage > { errors . password . message } </ FormErrorMessage >
151+ ) }
152+ </ FormControl >
153+ < FormControl
154+ id = "confirm_password"
155+ isInvalid = { ! ! errors . confirm_password }
156+ >
157+ < FormLabel htmlFor = "confirm_password" srOnly >
158+ Confirm Password
159+ </ FormLabel >
160160
161- < InputGroup >
162- < InputLeftElement pointerEvents = "none" >
163- < Icon as = { FaKey } color = "ui.dim" />
164- </ InputLeftElement >
165- < Input
166- id = "confirm_password"
167- { ...register (
168- "confirm_password" ,
169- confirmPasswordRules ( getValues ) ,
170- ) }
171- placeholder = "Repeat Password"
172- type = "password"
173- />
174- </ InputGroup >
175- { errors . confirm_password && (
176- < FormErrorMessage >
177- { errors . confirm_password . message }
178- </ FormErrorMessage >
179- ) }
180- </ FormControl >
181- < Text >
182- { "By signing up, you agree to our " }
183- < Link as = { RouterLink } to = "/" color = "ui.main" >
184- Terms
185- </ Link >
186- { " and " }
187- < Link as = { RouterLink } to = "/" color = "ui.main" >
188- Privacy Policy.
189- </ Link >
190- </ Text >
191- < Button variant = "primary" type = "submit" isLoading = { isSubmitting } >
192- Sign Up
193- </ Button >
194- < AuthOptions
195- description = { "Already have an account?" }
196- path = { "/login" }
197- />
198- </ Container >
161+ < InputGroup >
162+ < InputLeftElement pointerEvents = "none" >
163+ < Icon as = { FaKey } color = "ui.dim" />
164+ </ InputLeftElement >
165+ < Input
166+ id = "confirm_password"
167+ { ...register (
168+ "confirm_password" ,
169+ confirmPasswordRules ( getValues ) ,
170+ ) }
171+ placeholder = "Repeat Password"
172+ type = "password"
173+ />
174+ </ InputGroup >
175+ { errors . confirm_password && (
176+ < FormErrorMessage >
177+ { errors . confirm_password . message }
178+ </ FormErrorMessage >
179+ ) }
180+ </ FormControl >
181+ < Text >
182+ { "By signing up, you agree to our " }
183+ < Link as = { RouterLink } to = "/" color = "ui.main" >
184+ Terms
185+ </ Link >
186+ { " and " }
187+ < Link as = { RouterLink } to = "/" color = "ui.main" >
188+ Privacy Policy.
189+ </ Link >
190+ </ Text >
191+ < Button variant = "primary" type = "submit" isLoading = { isSubmitting } >
192+ Sign Up
193+ </ Button >
194+ < AuthOptions
195+ description = { "Already have an account?" }
196+ path = { "/login" }
197+ />
198+ </ Container >
199199 ) }
200200 </ Flex >
201201 </ >
0 commit comments