Cleanup logic for asModal to make it a little easier to use dynamically

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

@@ -1,6 +1,5 @@
-import React from 'react';
+import React, { useContext } from 'react';
 import { Form, Formik, FormikHelpers } 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';
@@ -9,26 +8,31 @@ import { ApplicationStore } from '@/state';
 import disableAccountTwoFactor from '@/api/account/disableAccountTwoFactor';
 import tw from 'twin.macro';
 import Button from '@/components/elements/Button';
+import asModal from '@/hoc/asModal';
+import ModalContext from '@/context/ModalContext';
 
 interface Values {
     password: string;
 }
 
-export default ({ ...props }: RequiredModalProps) => {
+const DisableTwoFactorModal = () => {
+    const { dismiss, setPropOverrides } = useContext(ModalContext);
     const { clearAndAddHttpError } = useStoreActions((actions: Actions<ApplicationStore>) => actions.flashes);
     const updateUserData = useStoreActions((actions: Actions<ApplicationStore>) => actions.user.updateUserData);
 
     const submit = ({ password }: Values, { setSubmitting }: FormikHelpers<Values>) => {
+        setPropOverrides({ showSpinnerOverlay: true, dismissable: false });
         disableAccountTwoFactor(password)
             .then(() => {
                 updateUserData({ useTotp: false });
-                props.onDismissed();
+                dismiss();
             })
             .catch(error => {
                 console.error(error);
 
                 clearAndAddHttpError({ error, key: 'account:two-factor' });
                 setSubmitting(false);
+                setPropOverrides(null);
             });
     };
 
@@ -42,29 +46,26 @@ export default ({ ...props }: RequiredModalProps) => {
                 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 css={tw`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
-                        />
-                        <div css={tw`mt-6 text-right`}>
-                            <Button
-                                color={'red'}
-                                disabled={!isValid}
-                            >
-                                Disable Two-Factor
-                            </Button>
-                        </div>
-                    </Form>
-                </Modal>
+            {({ isValid }) => (
+                <Form className={'mb-0'}>
+                    <FlashMessageRender css={tw`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
+                    />
+                    <div css={tw`mt-6 text-right`}>
+                        <Button color={'red'} disabled={!isValid}>
+                            Disable Two-Factor
+                        </Button>
+                    </div>
+                </Form>
             )}
         </Formik>
     );
 };
+
+export default asModal()(DisableTwoFactorModal);