add reason field on registration when by approval mode is on

app/soapbox/__fixtures__/intlMessages.json

@@ -834,6 +834,7 @@
   "registration.lead": "With an account on {instance} you\"ll be able to follow people on any server in the fediverse.",
   "registration.sign_up": "Sign up",
   "registration.tos": "Terms of Service",
+  "registration.reason": "Reason for Joining",
   "relative_time.days": "{number}d",
   "relative_time.hours": "{number}h",
   "relative_time.just_now": "now",

app/soapbox/actions/auth.js

@@ -133,15 +133,20 @@ export function logOut() {
 export function register(params) {
   return (dispatch, getState) => {
     const needsConfirmation = getState().getIn(['instance', 'pleroma', 'metadata', 'account_activation_required']);
+    const needsApproval = getState().getIn(['instance', 'approval_required']);
     dispatch({ type: AUTH_REGISTER_REQUEST });
     return dispatch(createAppAndToken()).then(() => {
       return api(getState, 'app').post('/api/v1/accounts', params);
     }).then(response => {
       dispatch({ type: AUTH_REGISTER_SUCCESS, token: response.data });
       dispatch(authLoggedIn(response.data));
-      return needsConfirmation
-        ? dispatch(showAlert('', 'Check your email for further instructions.'))
-        : dispatch(fetchMe());
+      if (needsConfirmation) {
+        return dispatch(showAlert('', 'Check your email for further instructions.'));
+      } else if (needsApproval) {
+        return dispatch(showAlert('', 'Your account has been submitted for approval.'));
+      } else {
+        return dispatch(fetchMe());
+      }
     }).catch(error => {
       dispatch({ type: AUTH_REGISTER_FAIL, error });
       throw error;

app/soapbox/features/landing_page/components/registration_form.js

@@ -24,6 +24,7 @@ const messages = defineMessages({
   confirm: { id: 'registration.fields.confirm_placeholder', defaultMessage: 'Password (again)' },
   agreement: { id: 'registration.agreement', defaultMessage: 'I agree to the {tos}.' },
   tos: { id: 'registration.tos', defaultMessage: 'Terms of Service' },
+  reason: { id: 'registration.reason', defaultMessage: 'Reason for Joining' },
 });
 
 const mapStateToProps = (state, props) => ({
@@ -136,6 +137,15 @@ class RegistrationForm extends ImmutablePureComponent {
                 onChange={this.onInputChange}
                 required
               />
+              {instance.get('approval_required') &&
+                <TextInput
+                  placeholder={intl.formatMessage(messages.reason)}
+                  name='reason'
+                  maxLength={500}
+                  autoComplete='off'
+                  onChange={this.onInputChange}
+                  required
+                />}
             </div>
             <CaptchaField
               onFetch={this.onFetchCaptcha}