Merge branch 'approval-mode-fe-3' into 'develop'

Approval mode fe 3

See merge request soapbox-pub/soapbox-fe!117

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/forms/index.js

@@ -68,6 +68,17 @@ LabelInput.propTypes = {
   dispatch: PropTypes.func,
 };
 
+export const LabelTextarea = ({ label, dispatch, ...props }) => (
+  <LabelInputContainer label={label}>
+    <textarea {...props} />
+  </LabelInputContainer>
+);
+
+LabelTextarea.propTypes = {
+  label: FormPropTypes.label.isRequired,
+  dispatch: PropTypes.func,
+};
+
 export class SimpleInput extends ImmutablePureComponent {
 
   static propTypes = {
@@ -88,6 +99,26 @@ export class SimpleInput extends ImmutablePureComponent {
 
 }
 
+export class SimpleTextarea extends ImmutablePureComponent {
+
+  static propTypes = {
+    label: FormPropTypes.label,
+    hint: PropTypes.node,
+  }
+
+  render() {
+    const { hint, ...props } = this.props;
+    const Input = this.props.label ? LabelTextarea : 'textarea';
+
+    return (
+      <InputContainer {...this.props}>
+        <Input {...props} />
+      </InputContainer>
+    );
+  }
+
+}
+
 export class SimpleForm extends ImmutablePureComponent {
 
   static propTypes = {

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

@@ -9,6 +9,7 @@ import {
   SimpleForm,
   SimpleInput,
   TextInput,
+  SimpleTextarea,
   Checkbox,
 } from 'soapbox/features/forms';
 import { register } from 'soapbox/actions/auth';
@@ -136,6 +137,16 @@ class RegistrationForm extends ImmutablePureComponent {
                 onChange={this.onInputChange}
                 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}
+                  autoComplete='off'
+                  onChange={this.onInputChange}
+                  required
+                />}
             </div>
             <CaptchaField
               onFetch={this.onFetchCaptcha}