Display modal in registration window when confirmations and/or approval are required

app/soapbox/actions/auth.js

@@ -1,6 +1,5 @@
 import api from '../api';
 import snackbar from 'soapbox/actions/snackbar';
-import { fetchMe } from 'soapbox/actions/me';
 
 export const AUTH_APP_CREATED    = 'AUTH_APP_CREATED';
 export const AUTH_APP_AUTHORIZED = 'AUTH_APP_AUTHORIZED';
@@ -164,8 +163,6 @@ 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']);
     params.fullname = params.username;
     dispatch({ type: AUTH_REGISTER_REQUEST });
     return dispatch(createAppAndToken()).then(() => {
@@ -173,13 +170,6 @@ export function register(params) {
     }).then(response => {
       dispatch({ type: AUTH_REGISTER_SUCCESS, token: response.data });
       dispatch(authLoggedIn(response.data));
-      if (needsConfirmation) {
-        return dispatch(snackbar.info('You must confirm your email.'));
-      } else if (needsApproval) {
-        return dispatch(snackbar.info('Your account is pending review by an admin.'));
-      } else {
-        return dispatch(fetchMe());
-      }
     }).catch(error => {
       dispatch({ type: AUTH_REGISTER_FAIL, error });
       throw error;

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

@@ -17,6 +17,8 @@ import CaptchaField from 'soapbox/features/auth_login/components/captcha';
 import { Map as ImmutableMap } from 'immutable';
 import { v4 as uuidv4 } from 'uuid';
 import { getSettings } from 'soapbox/actions/settings';
+import { fetchMe } from 'soapbox/actions/me';
+import { openModal } from 'soapbox/actions/modal';
 
 const messages = defineMessages({
   username: { id: 'registration.fields.username_placeholder', defaultMessage: 'Username' },
@@ -26,11 +28,14 @@ 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' },
+  close: { id: 'registration.confirmation_modal.close', defaultMessage: 'Close' },
 });
 
 const mapStateToProps = (state, props) => ({
   instance: state.get('instance'),
   locale: getSettings(state).get('locale'),
+  needsConfirmation: state.getIn(['instance', 'pleroma', 'metadata', 'account_activation_required']),
+  needsApproval: state.getIn(['instance', 'approval_required']),
 });
 
 export default @connect(mapStateToProps)
@@ -62,10 +67,48 @@ class RegistrationForm extends ImmutablePureComponent {
     this.setParams({ [e.target.name]: e.target.checked });
   }
 
+  launchModal = () => {
+    const { dispatch, intl, needsConfirmation, needsApproval } = this.props;
+
+    const message = (<>
+      {needsConfirmation && <p>
+        <FormattedMessage
+          id='confirmations.register.needs_confirmation'
+          defaultMessage='Please check your inbox at {email} for confirmation instructions. You will need to verify your email address to continue.'
+          values={{ email: <strong>{this.state.params.get('email')}</strong> }}
+        /></p>}
+      {needsApproval && <p>
+        <FormattedMessage
+          id='confirmations.register.needs_approval'
+          defaultMessage='Your account will be manually approved by an admin. Please be patient while we review your details.'
+        /></p>}
+    </>);
+
+    dispatch(openModal('CONFIRM', {
+      message,
+      confirm: intl.formatMessage(messages.close),
+    }));
+  }
+
+  postRegisterAction = () => {
+    const { dispatch, needsConfirmation, needsApproval } = this.props;
+
+    if (needsConfirmation || needsApproval) {
+      return this.launchModal();
+    } else {
+      return dispatch(fetchMe());
+    }
+  }
+
   onSubmit = e => {
+    const { dispatch } = this.props;
     const params = this.state.params.set('locale', this.props.locale);
+
     this.setState({ submissionLoading: true });
-    this.props.dispatch(register(params.toJS())).catch(error => {
+
+    dispatch(register(params.toJS())).then(() => {
+      this.postRegisterAction();
+    }).catch(error => {
       this.setState({ submissionLoading: false });
       this.refreshCaptcha();
     });

app/soapbox/features/public_layout/index.js

@@ -3,6 +3,7 @@ import { connect } from 'react-redux';
 import ImmutablePureComponent from 'react-immutable-pure-component';
 import { Switch, Route } from 'react-router-dom';
 import NotificationsContainer from 'soapbox/features/ui/containers/notifications_container';
+import ModalContainer from 'soapbox/features/ui/containers/modal_container';
 import Header from './components/header';
 import Footer from './components/footer';
 import LandingPage from '../landing_page';
@@ -40,6 +41,7 @@ class PublicLayout extends ImmutablePureComponent {
         </div>
         <Footer />
         <NotificationsContainer />
+        <ModalContainer />
       </div>
     );
   }

app/styles/components/modal.scss

@@ -860,3 +860,16 @@
     margin: 0 5px;
   }
 }
+
+.confirmation-modal p {
+  margin-bottom: 20px;
+  text-align: left;
+
+  strong {
+    font-weight: bold;
+  }
+
+  &:last-child {
+    margin-bottom: 0;
+  }
+}