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' },
});
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. */
autoFocus?: boolean,
/** The initial text in the input. */
@ -32,6 +32,8 @@ interface IInput extends Pick<React.InputHTMLAttributes<HTMLInputElement>, 'maxL
onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void,
/** HTML input type. */
type: 'text' | 'number' | 'email' | 'tel' | 'password',
/** Whether to display the input in red. */
hasError?: boolean,
}
/** 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 { openModal } from 'soapbox/actions/modals';
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 {
SimpleForm,
SimpleInput,
TextInput,
SimpleTextarea,
Checkbox,
} from 'soapbox/features/forms';
import { Checkbox } from 'soapbox/features/forms';
import { useAppSelector, useAppDispatch, useSettings, useFeatures } from 'soapbox/hooks';
const messages = defineMessages({
@ -232,8 +226,8 @@ const RegistrationForm: React.FC<IRegistrationForm> = ({ inviteToken }) => {
const isLoading = captchaLoading || submissionLoading;
return (
<SimpleForm onSubmit={onSubmit} data-testid='registrations-open'>
<fieldset disabled={isLoading}>
<Form onSubmit={onSubmit} data-testid='registrations-open'>
<fieldset disabled={isLoading} className='space-y-3'>
<div className='simple_form__overlay-area'>
<div className='fields-group'>
{usernameUnavailable && (
@ -241,23 +235,25 @@ const RegistrationForm: React.FC<IRegistrationForm> = ({ inviteToken }) => {
<FormattedMessage id='registration.username_unavailable' defaultMessage='Username is already taken.' />
</div>
)}
<TextInput
placeholder={intl.formatMessage(messages.username)}
name='username'
hint={intl.formatMessage(messages.username_hint)}
autoComplete='off'
autoCorrect='off'
autoCapitalize='off'
pattern='^[a-zA-Z\d_-]+'
onChange={onUsernameChange}
value={params.get('username', '')}
error={usernameUnavailable}
required
/>
<SimpleInput
placeholder={intl.formatMessage(messages.email)}
name='email'
<FormGroup hintText={intl.formatMessage(messages.username_hint)}>
<Input
type='text'
name='username'
placeholder={intl.formatMessage(messages.username)}
autoComplete='off'
autoCorrect='off'
autoCapitalize='off'
pattern='^[a-zA-Z\d_-]+'
onChange={onUsernameChange}
value={params.get('username', '')}
hasError={usernameUnavailable}
required
/>
</FormGroup>
<Input
type='email'
name='email'
placeholder={intl.formatMessage(messages.email)}
autoComplete='off'
autoCorrect='off'
autoCapitalize='off'
@ -270,27 +266,29 @@ const RegistrationForm: React.FC<IRegistrationForm> = ({ inviteToken }) => {
<FormattedMessage id='registration.password_mismatch' defaultMessage="Passwords don't match." />
</div>
)}
<ShowablePassword
placeholder={intl.formatMessage(messages.password)}
<Input
type='password'
name='password'
placeholder={intl.formatMessage(messages.password)}
autoComplete='off'
autoCorrect='off'
autoCapitalize='off'
onChange={onPasswordChange}
value={params.get('password', '')}
error={passwordMismatch === true}
hasError={passwordMismatch === true}
required
/>
<ShowablePassword
placeholder={intl.formatMessage(messages.confirm)}
<Input
type='password'
name='password_confirmation'
placeholder={intl.formatMessage(messages.confirm)}
autoComplete='off'
autoCorrect='off'
autoCapitalize='off'
onChange={onPasswordConfirmChange}
onBlur={onPasswordConfirmBlur}
value={passwordConfirmation}
error={passwordMismatch === true}
hasError={passwordMismatch === true}
required
/>
{birthdayRequired &&
@ -299,16 +297,20 @@ const RegistrationForm: React.FC<IRegistrationForm> = ({ inviteToken }) => {
onChange={onBirthdayChange}
required
/>}
{instance.get('approval_required') &&
<SimpleTextarea
label={<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' />}
name='reason'
maxLength={500}
onChange={onInputChange}
value={params.get('reason', '')}
required
/>}
{needsApproval && (
<FormGroup
labelText={<FormattedMessage id='registration.reason' defaultMessage='Why do you want to join?' />}
hintText={<FormattedMessage id='registration.reason_hint' defaultMessage='This will help us review your application' />}
>
<Textarea
name='reason'
maxLength={500}
onChange={onInputChange}
value={params.get('reason', '')}
required
/>
</FormGroup>
)}
</div>
<CaptchaField
onFetch={onFetchCaptcha}
@ -341,7 +343,7 @@ const RegistrationForm: React.FC<IRegistrationForm> = ({ inviteToken }) => {
</div>
</div>
</fieldset>
</SimpleForm>
</Form>
);
};