diff --git a/app/soapbox/actions/mfa.js b/app/soapbox/actions/mfa.js index 171446053..d41c60f52 100644 --- a/app/soapbox/actions/mfa.js +++ b/app/soapbox/actions/mfa.js @@ -60,10 +60,12 @@ export function confirmMfa(method, code, password) { return (dispatch, getState) => { const params = { code, password }; dispatch({ type: MFA_CONFIRM_REQUEST, method, code }); - return api(getState).post(`/api/pleroma/accounts/mfa/confirm/${method}`, params).then(() => { + return api(getState).post(`/api/pleroma/accounts/mfa/confirm/${method}`, params).then(({ data }) => { dispatch({ type: MFA_CONFIRM_SUCCESS, method, code }); + return data; }).catch(error => { - dispatch({ type: MFA_CONFIRM_FAIL, method, code, error }); + dispatch({ type: MFA_CONFIRM_FAIL, method, code, error, skipAlert: true }); + throw error; }); }; } @@ -71,10 +73,12 @@ export function confirmMfa(method, code, password) { export function disableMfa(method, password) { return (dispatch, getState) => { dispatch({ type: MFA_DISABLE_REQUEST, method }); - return api(getState).delete(`/api/pleroma/accounts/mfa/${method}`, { data: { password } }).then(response => { + return api(getState).delete(`/api/pleroma/accounts/mfa/${method}`, { data: { password } }).then(({ data }) => { dispatch({ type: MFA_DISABLE_SUCCESS, method }); + return data; }).catch(error => { - dispatch({ type: MFA_DISABLE_FAIL, method }); + dispatch({ type: MFA_DISABLE_FAIL, method, skipAlert: true }); + throw error; }); }; } diff --git a/app/soapbox/features/security/mfa_form.js b/app/soapbox/features/security/mfa_form.js index edc2a2657..5e5adb04e 100644 --- a/app/soapbox/features/security/mfa_form.js +++ b/app/soapbox/features/security/mfa_form.js @@ -118,31 +118,36 @@ class DisableOtpForm extends ImmutablePureComponent { state = { password: '', + isLoading: false, } handleInputChange = e => { this.setState({ [e.target.name]: e.target.value }); } - handleOtpDisableClick = e => { + handleSubmit = e => { const { password } = this.state; const { dispatch, intl } = this.props; + this.setState({ isLoading: true }); + dispatch(disableMfa('totp', password)).then(() => { dispatch(snackbar.success(intl.formatMessage(messages.mfaDisableSuccess))); + this.context.router.history.push('../auth/edit'); }).catch(error => { dispatch(snackbar.error(intl.formatMessage(messages.disableFail))); + this.setState({ isLoading: false }); }); - this.context.router.history.push('../auth/edit'); e.preventDefault(); } render() { const { intl } = this.props; + const { isLoading, password } = this.state; return ( - +

@@ -150,10 +155,16 @@ class DisableOtpForm extends ImmutablePureComponent {
+

); @@ -255,7 +266,7 @@ class OtpConfirmForm extends ImmutablePureComponent { state = { password: '', - done: false, + isLoading: false, code: '', qrCodeURI: '', confirm_key: '', @@ -275,26 +286,29 @@ class OtpConfirmForm extends ImmutablePureComponent { this.setState({ [e.target.name]: e.target.value }); } - handleOtpConfirmClick = e => { - const { code, password } = this.state; + handleSubmit = e => { const { dispatch, intl } = this.props; + const { code, password } = this.state; + + this.setState({ isLoading: true }); dispatch(confirmMfa('totp', code, password)).then(() => { dispatch(snackbar.success(intl.formatMessage(messages.mfaConfirmSuccess))); + this.context.router.history.push('../auth/edit'); }).catch(error => { dispatch(snackbar.error(intl.formatMessage(messages.confirmFail))); + this.setState({ isLoading: false }); }); - this.context.router.history.push('../auth/edit'); e.preventDefault(); } render() { const { intl } = this.props; - const { qrCodeURI, confirm_key } = this.state; + const { isLoading, qrCodeURI, confirm_key, password, code } = this.state; return ( - +
@@ -319,19 +333,34 @@ class OtpConfirmForm extends ImmutablePureComponent { name='code' onChange={this.handleInputChange} autoComplete='off' + value={code} + disabled={isLoading} />
-
diff --git a/app/soapbox/reducers/security.js b/app/soapbox/reducers/security.js index 01e5686c7..443e80b49 100644 --- a/app/soapbox/reducers/security.js +++ b/app/soapbox/reducers/security.js @@ -3,9 +3,7 @@ import { Map as ImmutableMap, List as ImmutableList, fromJS } from 'immutable'; import { MFA_FETCH_SUCCESS, MFA_CONFIRM_SUCCESS, - MFA_DISABLE_REQUEST, MFA_DISABLE_SUCCESS, - MFA_DISABLE_FAIL, } from '../actions/mfa'; import { FETCH_TOKENS_SUCCESS, @@ -49,11 +47,8 @@ export default function security(state = initialState, action) { return importMfa(state, fromJS(action.data)); case MFA_CONFIRM_SUCCESS: return enableMfa(state, action.method); - case MFA_DISABLE_REQUEST: case MFA_DISABLE_SUCCESS: return disableMfa(state, action.method); - case MFA_DISABLE_FAIL: - return enableMfa(state, action.method); default: return state; }