80 lines
No EOL
2.8 KiB
TypeScript
80 lines
No EOL
2.8 KiB
TypeScript
import React, { useState, useCallback } from 'react';
|
|
import { useIntl, defineMessages, FormattedMessage } from 'react-intl';
|
|
import { useHistory } from 'react-router-dom';
|
|
|
|
import { disableMfa } from 'soapbox/actions/mfa';
|
|
import snackbar from 'soapbox/actions/snackbar';
|
|
import { Button, Form, FormGroup, Input, FormActions, Stack, Text } from 'soapbox/components/ui';
|
|
import { useAppDispatch } from 'soapbox/hooks';
|
|
|
|
const messages = defineMessages({
|
|
mfa_setup_disable_button: { id: 'column.mfa_disable_button', defaultMessage: 'Disable' },
|
|
disableFail: { id: 'security.disable.fail', defaultMessage: 'Incorrect password. Try again.' },
|
|
mfaDisableSuccess: { id: 'mfa.disable.success_message', defaultMessage: 'MFA disabled' },
|
|
passwordPlaceholder: { id: 'mfa.mfa_setup.password_placeholder', defaultMessage: 'Password' },
|
|
});
|
|
|
|
const DisableOtpForm: React.FC = () => {
|
|
const [isLoading, setIsLoading] = useState(false);
|
|
const [password, setPassword] = useState('');
|
|
|
|
const intl = useIntl();
|
|
const dispatch = useAppDispatch();
|
|
const history = useHistory();
|
|
|
|
const handleSubmit = useCallback(() => {
|
|
setIsLoading(true);
|
|
dispatch(disableMfa('totp', password)).then(() => {
|
|
dispatch(snackbar.success(intl.formatMessage(messages.mfaDisableSuccess)));
|
|
history.push('../auth/edit');
|
|
}).finally(() => {
|
|
setIsLoading(false);
|
|
}).catch(() => {
|
|
dispatch(snackbar.error(intl.formatMessage(messages.disableFail)));
|
|
});
|
|
}, [password, dispatch, intl]);
|
|
|
|
const handleInputChange = (event: React.ChangeEvent<HTMLInputElement>) => {
|
|
setPassword(event.target.value);
|
|
};
|
|
|
|
return (
|
|
<Form onSubmit={handleSubmit}>
|
|
<Stack>
|
|
<Text weight='medium'>
|
|
<FormattedMessage id='mfa.otp_enabled_title' defaultMessage='OTP Enabled' />
|
|
</Text>
|
|
|
|
<Text theme='muted'>
|
|
<FormattedMessage id='mfa.otp_enabled_description' defaultMessage='You have enabled two-factor authentication via OTP.' />
|
|
</Text>
|
|
</Stack>
|
|
|
|
<FormGroup
|
|
labelText={intl.formatMessage(messages.passwordPlaceholder)}
|
|
hintText={<FormattedMessage id='mfa.mfa_disable_enter_password' defaultMessage='Enter your current password to disable two-factor auth.' />}
|
|
>
|
|
<Input
|
|
type='password'
|
|
placeholder={intl.formatMessage(messages.passwordPlaceholder)}
|
|
name='password'
|
|
onChange={handleInputChange}
|
|
disabled={isLoading}
|
|
value={password}
|
|
required
|
|
/>
|
|
</FormGroup>
|
|
|
|
<FormActions>
|
|
<Button
|
|
disabled={isLoading}
|
|
theme='danger'
|
|
type='submit'
|
|
text={intl.formatMessage(messages.mfa_setup_disable_button)}
|
|
/>
|
|
</FormActions>
|
|
</Form>
|
|
);
|
|
};
|
|
|
|
export default DisableOtpForm; |