RegistrationForm: use ui form inputs

app/soapbox/components/ui/input/input.tsx

@@ -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. */

app/soapbox/features/auth_login/components/registration_form.tsx

@@ -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 {
+import { Checkbox } from 'soapbox/features/forms';
-  SimpleForm,
-  SimpleInput,
-  TextInput,
-  SimpleTextarea,
-  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'>
+    <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='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
+            <FormGroup hintText={intl.formatMessage(messages.username_hint)}>
-              placeholder={intl.formatMessage(messages.username)}
+              <Input
+                type='text'
                 name='username'
-              hint={intl.formatMessage(messages.username_hint)}
+                placeholder={intl.formatMessage(messages.username)}
                 autoComplete='off'
                 autoCorrect='off'
                 autoCapitalize='off'
                 pattern='^[a-zA-Z\d_-]+'
                 onChange={onUsernameChange}
                 value={params.get('username', '')}
-              error={usernameUnavailable}
+                hasError={usernameUnavailable}
                 required
               />
-            <SimpleInput
+            </FormGroup>
-              placeholder={intl.formatMessage(messages.email)}
+            <Input
-              name='email'
               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
+            <Input
-              placeholder={intl.formatMessage(messages.password)}
+              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
+            <Input
-              placeholder={intl.formatMessage(messages.confirm)}
+              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') &&
+            {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' />}
+              >
+                <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>
   );
 };