From 165ddc91bdb6c089098480ad458e63e363bac1bb Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Fri, 6 May 2022 17:13:00 -0500
Subject: [PATCH] RegistrationForm: use ui form inputs

---
 app/soapbox/components/ui/input/input.tsx     |  4 +-
 .../components/registration_form.tsx          | 88 ++++++++++---------
 2 files changed, 48 insertions(+), 44 deletions(-)

diff --git a/app/soapbox/components/ui/input/input.tsx b/app/soapbox/components/ui/input/input.tsx
index 75ab74601..20c7804ae 100644
--- a/app/soapbox/components/ui/input/input.tsx
+++ b/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. */
diff --git a/app/soapbox/features/auth_login/components/registration_form.tsx b/app/soapbox/features/auth_login/components/registration_form.tsx
index ccbd64c04..65c3c3e6d 100644
--- a/app/soapbox/features/auth_login/components/registration_form.tsx
+++ b/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 {
-  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>
   );
 };