bigbuffet/bigbuffet-rw
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

RegistrationForm: use ui form inputs

Browse source
This commit is contained in:
Alex Gleason 2022-05-06 17:13:00 -05:00
parent 90129818f2
commit 165ddc91bd
No known key found for this signature in database
GPG key ID: 7211D1F99744FBB7
2 changed files with 48 additions and 44 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
app/soapbox/components/ui/input/input.tsx
View file

@ -11,7 +11,7 @@ const messages = defineMessages({
hidePassword: { id: 'input.password.hide_password', defaultMessage: 'Hide password' }, hidePassword: { id: 'input.password.hide_password', defaultMessage: 'Hide password' },
}); });
interface IInput extends Pick<React.InputHTMLAttributes<HTMLInputElement>, 'maxLength' | 'onChange' | 'type' | 'autoComplete' | 'autoCorrect' | 'autoCapitalize' | 'required' | 'disabled' | 'onClick' | 'readOnly' | 'min' | 'pattern'> { interface IInput extends Pick<React.InputHTMLAttributes<HTMLInputElement>, 'maxLength' | 'onChange' | 'onBlur' | 'type' | 'autoComplete' | 'autoCorrect' | 'autoCapitalize' | 'required' | 'disabled' | 'onClick' | 'readOnly' | 'min' | 'pattern'> {
/** Put the cursor into the input on mount. */ /** Put the cursor into the input on mount. */
autoFocus?: boolean, autoFocus?: boolean,
/** The initial text in the input. */ /** The initial text in the input. */
@ -32,6 +32,8 @@ interface IInput extends Pick<React.InputHTMLAttributes<HTMLInputElement>, 'maxL
onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void, onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void,
/** HTML input type. */ /** HTML input type. */
type: 'text' | 'number' | 'email' | 'tel' | 'password', type: 'text' | 'number' | 'email' | 'tel' | 'password',
/** Whether to display the input in red. */
hasError?: boolean,
} }
/** Form input element. */ /** Form input element. */

88
app/soapbox/features/auth_login/components/registration_form.tsx
View file

@ -10,15 +10,9 @@ import { accountLookup } from 'soapbox/actions/accounts';
import { register, verifyCredentials } from 'soapbox/actions/auth'; import { register, verifyCredentials } from 'soapbox/actions/auth';
import { openModal } from 'soapbox/actions/modals'; import { openModal } from 'soapbox/actions/modals';
import BirthdayInput from 'soapbox/components/birthday_input'; import BirthdayInput from 'soapbox/components/birthday_input';
import ShowablePassword from 'soapbox/components/showable_password'; import { Form, FormGroup, Input, Textarea } from 'soapbox/components/ui';
import CaptchaField from 'soapbox/features/auth_login/components/captcha'; import CaptchaField from 'soapbox/features/auth_login/components/captcha';
import { import { Checkbox } from 'soapbox/features/forms';
SimpleForm,
SimpleInput,
TextInput,
SimpleTextarea,
Checkbox,
} from 'soapbox/features/forms';
import { useAppSelector, useAppDispatch, useSettings, useFeatures } from 'soapbox/hooks'; import { useAppSelector, useAppDispatch, useSettings, useFeatures } from 'soapbox/hooks';
const messages = defineMessages({ const messages = defineMessages({
@ -232,8 +226,8 @@ const RegistrationForm: React.FC<IRegistrationForm> = ({ inviteToken }) => {
const isLoading = captchaLoading || submissionLoading; const isLoading = captchaLoading || submissionLoading;
return ( return (
<SimpleForm onSubmit={onSubmit} data-testid='registrations-open'> <Form onSubmit={onSubmit} data-testid='registrations-open'>
<fieldset disabled={isLoading}> <fieldset disabled={isLoading} className='space-y-3'>
<div className='simple_form__overlay-area'> <div className='simple_form__overlay-area'>
<div className='fields-group'> <div className='fields-group'>
{usernameUnavailable && ( {usernameUnavailable && (
@ -241,23 +235,25 @@ const RegistrationForm: React.FC<IRegistrationForm> = ({ inviteToken }) => {
<FormattedMessage id='registration.username_unavailable' defaultMessage='Username is already taken.' /> <FormattedMessage id='registration.username_unavailable' defaultMessage='Username is already taken.' />
</div> </div>
)} )}
<TextInput <FormGroup hintText={intl.formatMessage(messages.username_hint)}>
placeholder={intl.formatMessage(messages.username)} <Input
name='username' type='text'
hint={intl.formatMessage(messages.username_hint)} name='username'
autoComplete='off' placeholder={intl.formatMessage(messages.username)}
autoCorrect='off' autoComplete='off'
autoCapitalize='off' autoCorrect='off'
pattern='^[a-zA-Z\d_-]+' autoCapitalize='off'
onChange={onUsernameChange} pattern='^[a-zA-Z\d_-]+'
value={params.get('username', '')} onChange={onUsernameChange}
error={usernameUnavailable} value={params.get('username', '')}
required hasError={usernameUnavailable}
/> required
<SimpleInput />
placeholder={intl.formatMessage(messages.email)} </FormGroup>
name='email' <Input
type='email' type='email'
name='email'
placeholder={intl.formatMessage(messages.email)}
autoComplete='off' autoComplete='off'
autoCorrect='off' autoCorrect='off'
autoCapitalize='off' autoCapitalize='off'
@ -270,27 +266,29 @@ const RegistrationForm: React.FC<IRegistrationForm> = ({ inviteToken }) => {
<FormattedMessage id='registration.password_mismatch' defaultMessage="Passwords don't match." /> <FormattedMessage id='registration.password_mismatch' defaultMessage="Passwords don't match." />
</div> </div>
)} )}
<ShowablePassword <Input
placeholder={intl.formatMessage(messages.password)} type='password'
name='password' name='password'
placeholder={intl.formatMessage(messages.password)}
autoComplete='off' autoComplete='off'
autoCorrect='off' autoCorrect='off'
autoCapitalize='off' autoCapitalize='off'
onChange={onPasswordChange} onChange={onPasswordChange}
value={params.get('password', '')} value={params.get('password', '')}
error={passwordMismatch === true} hasError={passwordMismatch === true}
required required
/> />
<ShowablePassword <Input
placeholder={intl.formatMessage(messages.confirm)} type='password'
name='password_confirmation' name='password_confirmation'
placeholder={intl.formatMessage(messages.confirm)}
autoComplete='off' autoComplete='off'
autoCorrect='off' autoCorrect='off'
autoCapitalize='off' autoCapitalize='off'
onChange={onPasswordConfirmChange} onChange={onPasswordConfirmChange}
onBlur={onPasswordConfirmBlur} onBlur={onPasswordConfirmBlur}
value={passwordConfirmation} value={passwordConfirmation}
error={passwordMismatch === true} hasError={passwordMismatch === true}
required required
/> />
{birthdayRequired && {birthdayRequired &&
@ -299,16 +297,20 @@ const RegistrationForm: React.FC<IRegistrationForm> = ({ inviteToken }) => {
onChange={onBirthdayChange} onChange={onBirthdayChange}
required required
/>} />}
{instance.get('approval_required') && {needsApproval && (
<SimpleTextarea <FormGroup
label={<FormattedMessage id='registration.reason' defaultMessage='Why do you want to join?' />} labelText={<FormattedMessage id='registration.reason' defaultMessage='Why do you want to join?' />}
hint={<FormattedMessage id='registration.reason_hint' defaultMessage='This will help us review your application' />} hintText={<FormattedMessage id='registration.reason_hint' defaultMessage='This will help us review your application' />}
name='reason' >
maxLength={500} <Textarea
onChange={onInputChange} name='reason'
value={params.get('reason', '')} maxLength={500}
required onChange={onInputChange}
/>} value={params.get('reason', '')}
required
/>
</FormGroup>
)}
</div> </div>
<CaptchaField <CaptchaField
onFetch={onFetchCaptcha} onFetch={onFetchCaptcha}
@ -341,7 +343,7 @@ const RegistrationForm: React.FC<IRegistrationForm> = ({ inviteToken }) => {
</div> </div>
</div> </div>
</fieldset> </fieldset>
</SimpleForm> </Form>
); );
}; };