moon
/
soapbox
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

RegistrationForm: use FormGroup errors instead of passing hasError directly

This commit is contained in:
Alex Gleason 2022-05-09 12:00:27 -05:00
parent d4ebfe474f
commit 7226e0d871
No known key found for this signature in database
GPG Key ID: 7211D1F99744FBB7
1 changed files with 22 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

49
app/soapbox/features/auth_login/components/registration_form.tsx
View File

@ -18,8 +18,10 @@ import { useAppSelector, useAppDispatch, useSettings, useFeatures } from 'soapbo
const messages = defineMessages({ const messages = defineMessages({
username: { id: 'registration.fields.username_placeholder', defaultMessage: 'Username' }, username: { id: 'registration.fields.username_placeholder', defaultMessage: 'Username' },
username_hint: { id: 'registration.fields.username_hint', defaultMessage: 'Only letters, numbers, and underscores are allowed.' }, username_hint: { id: 'registration.fields.username_hint', defaultMessage: 'Only letters, numbers, and underscores are allowed.' },
usernameUnavailable: { id: 'registration.username_unavailable', defaultMessage: 'Username is already taken.' },
email: { id: 'registration.fields.email_placeholder', defaultMessage: 'E-Mail address' }, email: { id: 'registration.fields.email_placeholder', defaultMessage: 'E-Mail address' },
password: { id: 'registration.fields.password_placeholder', defaultMessage: 'Password' }, password: { id: 'registration.fields.password_placeholder', defaultMessage: 'Password' },
passwordMismatch: { id: 'registration.password_mismatch', defaultMessage: "Passwords don't match." },
confirm: { id: 'registration.fields.confirm_placeholder', defaultMessage: 'Password (again)' }, confirm: { id: 'registration.fields.confirm_placeholder', defaultMessage: 'Password (again)' },
agreement: { id: 'registration.agreement', defaultMessage: 'I agree to the {tos}.' }, agreement: { id: 'registration.agreement', defaultMessage: 'I agree to the {tos}.' },
tos: { id: 'registration.tos', defaultMessage: 'Terms of Service' }, tos: { id: 'registration.tos', defaultMessage: 'Terms of Service' },
@ -228,13 +230,10 @@ const RegistrationForm: React.FC<IRegistrationForm> = ({ inviteToken }) => {
return ( return (
<Form onSubmit={onSubmit} data-testid='registrations-open'> <Form onSubmit={onSubmit} data-testid='registrations-open'>
<fieldset disabled={isLoading} className='space-y-3'> <fieldset disabled={isLoading} className='space-y-3'>
{usernameUnavailable && ( <FormGroup
<Text size='sm' theme='danger'> hintText={intl.formatMessage(messages.username_hint)}
<FormattedMessage id='registration.username_unavailable' defaultMessage='Username is already taken.' /> errors={usernameUnavailable ? [intl.formatMessage(messages.usernameUnavailable)] : undefined}
</Text> >
)}
<FormGroup hintText={intl.formatMessage(messages.username_hint)}>
<Input <Input
type='text' type='text'
name='username' name='username'
@ -262,12 +261,6 @@ const RegistrationForm: React.FC<IRegistrationForm> = ({ inviteToken }) => {
required required
/> />
{passwordMismatch && (
<div className='error'>
<FormattedMessage id='registration.password_mismatch' defaultMessage="Passwords don't match." />
</div>
)}
<Input <Input
type='password' type='password'
name='password' name='password'
@ -277,23 +270,25 @@ const RegistrationForm: React.FC<IRegistrationForm> = ({ inviteToken }) => {
autoCapitalize='off' autoCapitalize='off'
onChange={onPasswordChange} onChange={onPasswordChange}
value={params.get('password', '')} value={params.get('password', '')}
hasError={passwordMismatch === true}
required required
/> />
<Input <FormGroup
type='password' errors={passwordMismatch ? [intl.formatMessage(messages.passwordMismatch)] : undefined}
name='password_confirmation' >
placeholder={intl.formatMessage(messages.confirm)} <Input
autoComplete='off' type='password'
autoCorrect='off' name='password_confirmation'
autoCapitalize='off' placeholder={intl.formatMessage(messages.confirm)}
onChange={onPasswordConfirmChange} autoComplete='off'
onBlur={onPasswordConfirmBlur} autoCorrect='off'
value={passwordConfirmation} autoCapitalize='off'
hasError={passwordMismatch === true} onChange={onPasswordConfirmChange}
required onBlur={onPasswordConfirmBlur}
/> value={passwordConfirmation}
required
/>
</FormGroup>
{birthdayRequired && ( {birthdayRequired && (
<BirthdayInput <BirthdayInput