@@ -104,120 +104,111 @@ export function ParticipantFormPage() {
104104 Let's start by creating an account.
105105 </ Text >
106106 < form onSubmit = { handleSubmit } >
107- < Box mb = { 4 } >
108- < Field
109- label = {
110- < span
111- style = { {
112- color : fieldGray ,
113- fontWeight : 600 ,
114- fontSize : 14 ,
115- fontFamily : 'Open Sans, sans-serif' ,
116- } }
117- >
118- Email
119- </ span >
120- }
121- >
122- < InputGroup w = "100%" >
123- < Input
124- type = "email"
125- 126- required
127- autoComplete = "email"
128- w = "100%"
129- maxW = "518px"
130- fontFamily = "'Open Sans', sans-serif"
131- fontWeight = { 400 }
132- fontSize = { 14 }
133- color = { fieldGray }
134- bg = "white"
135- borderColor = "#D5D7DA"
136- _placeholder = { { color : '#A0AEC0' , fontWeight : 400 } }
137- value = { email }
138- onChange = { ( e ) => setEmail ( e . target . value ) }
139- />
140- </ InputGroup >
141- </ Field >
142- </ Box >
143- < Box mb = { 4 } >
144- < Field
145- label = {
146- < span
147- style = { {
148- color : fieldGray ,
149- fontWeight : 600 ,
150- fontSize : 14 ,
151- fontFamily : 'Open Sans, sans-serif' ,
152- } }
153- >
154- Password
155- </ span >
156- }
157- >
158- < InputGroup w = "100%" >
159- < Input
160- type = "password"
161- placeholder = ""
162- required
163- autoComplete = "new-password"
164- w = "100%"
165- maxW = "518px"
166- fontFamily = "'Open Sans', sans-serif"
167- fontWeight = { 400 }
168- fontSize = { 14 }
169- color = { fieldGray }
170- bg = "white"
171- borderColor = "#D5D7DA"
172- _placeholder = { { color : '#A0AEC0' , fontWeight : 400 } }
173- value = { password }
174- onChange = { ( e ) => {
175- setPassword ( e . target . value ) ;
176- // Clear password validation errors when user starts typing
177- if ( passwordValidationErrors . length > 0 ) {
178- setPasswordValidationErrors ( [ ] ) ;
179- }
180- } }
181- />
182- </ InputGroup >
183- </ Field >
184- </ Box >
185- < Box mb = { 4 } >
186- < Field
187- label = {
188- < span
189- style = { {
190- color : fieldGray ,
191- fontWeight : 600 ,
192- fontSize : 14 ,
193- fontFamily : 'Open Sans, sans-serif' ,
194- } }
195- >
196- Confirm Password
197- </ span >
198- }
199- >
200- < InputGroup w = "100%" >
201- < Input
202- type = "password"
203- placeholder = ""
204- required
205- autoComplete = "new-password"
206- w = "100%"
207- maxW = "518px"
208- fontFamily = "'Open Sans', sans-serif"
209- fontWeight = { 400 }
210- fontSize = { 14 }
211- color = { fieldGray }
212- bg = "white"
213- borderColor = "#D5D7DA"
214- _placeholder = { { color : '#A0AEC0' , fontWeight : 400 } }
215- value = { confirmPassword }
216- onChange = { ( e ) => setConfirmPassword ( e . target . value ) }
217- />
218- </ InputGroup >
219- </ Field >
220- </ Box >
107+ < Field
108+ label = {
109+ < span
110+ style = { {
111+ color : fieldGray ,
112+ fontWeight : 600 ,
113+ fontSize : 14 ,
114+ fontFamily : 'Open Sans, sans-serif' ,
115+ } }
116+ >
117+ Email
118+ </ span >
119+ }
120+ mb = { 4 }
121+ >
122+ < InputGroup w = "100%" >
123+ < Input
124+ type = "email"
125+ 126+ required
127+ autoComplete = "email"
128+ w = "100%"
129+ maxW = "518px"
130+ fontFamily = "'Open Sans', sans-serif"
131+ fontWeight = { 400 }
132+ fontSize = { 14 }
133+ color = { fieldGray }
134+ bg = "white"
135+ borderColor = "#D5D7DA"
136+ _placeholder = { { color : '#A0AEC0' , fontWeight : 400 } }
137+ value = { email }
138+ onChange = { ( e ) => setEmail ( e . target . value ) }
139+ />
140+ </ InputGroup >
141+ </ Field >
142+ < Field
143+ label = {
144+ < span
145+ style = { {
146+ color : fieldGray ,
147+ fontWeight : 600 ,
148+ fontSize : 14 ,
149+ fontFamily : 'Open Sans, sans-serif' ,
150+ } }
151+ >
152+ Password
153+ </ span >
154+ }
155+ mb = { 4 }
156+ >
157+ < InputGroup w = "100%" >
158+ < Input
159+ type = "password"
160+ placeholder = ""
161+ required
162+ autoComplete = "new-password"
163+ w = "100%"
164+ maxW = "518px"
165+ fontFamily = "'Open Sans', sans-serif"
166+ fontWeight = { 400 }
167+ fontSize = { 14 }
168+ color = { fieldGray }
169+ bg = "white"
170+ borderColor = "#D5D7DA"
171+ _placeholder = { { color : '#A0AEC0' , fontWeight : 400 } }
172+ value = { password }
173+ onChange = { ( e ) => setPassword ( e . target . value ) }
174+ />
175+ </ InputGroup >
176+ </ Field >
177+ < Field
178+ label = {
179+ < span
180+ style = { {
181+ color : fieldGray ,
182+ fontWeight : 600 ,
183+ fontSize : 14 ,
184+ fontFamily : 'Open Sans, sans-serif' ,
185+ } }
186+ >
187+ Confirm Password
188+ </ span >
189+ }
190+ mb = { 4 }
191+ >
192+ < InputGroup w = "100%" >
193+ < Input
194+ type = "password"
195+ placeholder = ""
196+ required
197+ autoComplete = "new-password"
198+ w = "100%"
199+ maxW = "518px"
200+ fontFamily = "'Open Sans', sans-serif"
201+ fontWeight = { 400 }
202+ fontSize = { 14 }
203+ color = { fieldGray }
204+ bg = "white"
205+ borderColor = "#D5D7DA"
206+ _placeholder = { { color : '#A0AEC0' , fontWeight : 400 } }
207+ value = { confirmPassword }
208+ onChange = { ( e ) => setConfirmPassword ( e . target . value ) }
209+ />
210+ </ InputGroup >
211+ </ Field >
221212
222213 { /* Password Requirements - Only show when there are validation errors */ }
223214 { passwordValidationErrors . length > 0 && (
0 commit comments