diff --git a/app/soapbox/actions/auth.js b/app/soapbox/actions/auth.js index f6f5275ae..a0bb9b9a2 100644 --- a/app/soapbox/actions/auth.js +++ b/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; diff --git a/app/soapbox/features/landing_page/components/registration_form.js b/app/soapbox/features/landing_page/components/registration_form.js index 3490e8a50..b520f6a9e 100644 --- a/app/soapbox/features/landing_page/components/registration_form.js +++ b/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 &&

+ {this.state.params.get('email')} }} + />

} + {needsApproval &&

+

} + ); + + 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(); }); diff --git a/app/soapbox/features/public_layout/index.js b/app/soapbox/features/public_layout/index.js index 3148dd478..46e1580c6 100644 --- a/app/soapbox/features/public_layout/index.js +++ b/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 {