68 lines
2.7 KiB
TypeScript
68 lines
2.7 KiB
TypeScript
|
import React from 'react';
|
||
|
|
import { Form, Formik, FormikActions } from 'formik';
|
||
|
|
import Modal, { RequiredModalProps } from '@/components/elements/Modal';
|
||
|
|
import FlashMessageRender from '@/components/FlashMessageRender';
|
||
|
|
import Field from '@/components/elements/Field';
|
||
|
|
import { object, string } from 'yup';
|
||
|
|
import { Actions, useStoreActions } from 'easy-peasy';
|
||
|
|
import { ApplicationStore } from '@/state';
|
||
|
|
import disableAccountTwoFactor from '@/api/account/disableAccountTwoFactor';
|
||
|
|
import { httpErrorToHuman } from '@/api/http';
|
||
|
|
|
||
|
|
interface Values {
|
||
|
|
password: string;
|
||
|
|
}
|
||
|
|
|
||
|
|
export default ({ ...props }: RequiredModalProps) => {
|
||
|
|
const { addError, clearFlashes } = useStoreActions((actions: Actions<ApplicationStore>) => actions.flashes);
|
||
|
|
const updateUserData = useStoreActions((actions: Actions<ApplicationStore>) => actions.user.updateUserData);
|
||
|
|
|
||
|
|
const submit = ({ password }: Values, { setSubmitting }: FormikActions<Values>) => {
|
||
|
|
clearFlashes('account:two-factor');
|
||
|
|
disableAccountTwoFactor(password)
|
||
|
|
.then(() => {
|
||
|
|
updateUserData({ useTotp: false });
|
||
|
|
props.onDismissed();
|
||
|
|
})
|
||
|
|
.catch(error => {
|
||
|
|
console.error(error);
|
||
|
|
|
||
|
|
addError({ message: httpErrorToHuman(error), key: 'account:two-factor' });
|
||
|
|
setSubmitting(false);
|
||
|
|
});
|
||
|
|
};
|
||
|
|
|
||
|
|
return (
|
||
|
|
<Formik
|
||
|
|
onSubmit={submit}
|
||
|
|
initialValues={{
|
||
|
|
password: '',
|
||
|
|
}}
|
||
|
|
validationSchema={object().shape({
|
||
|
|
password: string().required('You must provider your current password in order to continue.'),
|
||
|
|
})}
|
||
|
|
>
|
||
|
|
{({ isSubmitting, isValid }) => (
|
||
|
|
<Modal {...props} dismissable={!isSubmitting} showSpinnerOverlay={isSubmitting}>
|
||
|
|
<Form className={'mb-0'}>
|
||
|
|
<FlashMessageRender className={'mb-6'} byKey={'account:two-factor'}/>
|
||
|
|
<Field
|
||
|
|
id={'password'}
|
||
|
|
name={'password'}
|
||
|
|
type={'password'}
|
||
|
|
label={'Current Password'}
|
||
|
|
description={'In order to disable two-factor authentication you will need to provide your account password.'}
|
||
|
|
autoFocus={true}
|
||
|
|
/>
|
||
|
|
<div className={'mt-6 text-right'}>
|
||
|
|
<button className={'btn btn-red btn-sm'} disabled={!isValid}>
|
||
|
|
Disable Two-Factor
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
</Form>
|
||
|
|
</Modal>
|
||
|
|
)}
|
||
|
|
</Formik>
|
||
|
|
);
|
||
|
|
};
|