Add ability to disable two factor authentication

resources/scripts/components/dashboard/forms/DisableTwoFactorModal.tsx

@@ -0,0 +1,67 @@
+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>
+    );
+};