Cleanup logic powering totp enabling modal

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

@@ -3,16 +3,24 @@ import { useStoreState } from 'easy-peasy';
 import { ApplicationStore } from '@/state';
 import tw from 'twin.macro';
 import { Button } from '@/components/elements/button/index';
-import SetupTOTPModal from '@/components/dashboard/forms/SetupTOTPModal';
 import DisableTwoFactorModal from '@/components/dashboard/forms/DisableTwoFactorModal';
+import SetupTOTPModal from '@/components/dashboard/forms/SetupTOTPModal';
+import RecoveryTokensDialog from '@/components/dashboard/forms/RecoveryTokensDialog';
 
 export default () => {
+    const [tokens, setTokens] = useState<string[]>([]);
     const [visible, setVisible] = useState<'enable' | 'disable' | null>(null);
     const isEnabled = useStoreState((state: ApplicationStore) => state.user.data!.useTotp);
 
+    const onTokens = (tokens: string[]) => {
+        setTokens(tokens);
+        setVisible(null);
+    };
+
     return (
         <div>
-            <SetupTOTPModal open={visible === 'enable'} onClose={() => setVisible(null)} />
+            <SetupTOTPModal open={visible === 'enable'} onClose={() => setVisible(null)} onTokens={onTokens} />
+            <RecoveryTokensDialog tokens={tokens} open={tokens.length > 0} onClose={() => setTokens([])} />
             <DisableTwoFactorModal visible={visible === 'disable'} onModalDismissed={() => setVisible(null)} />
             <p css={tw`text-sm`}>
                 {isEnabled

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

@@ -1,5 +1,5 @@
-import React, { useEffect, useState } from 'react';
-import { Dialog, DialogProps } from '@/components/elements/dialog';
+import React, { useContext, useEffect, useState } from 'react';
+import { Dialog, DialogWrapperContext } from '@/components/elements/dialog';
 import getTwoFactorTokenData, { TwoFactorTokenData } from '@/api/account/getTwoFactorTokenData';
 import { useFlashKey } from '@/plugins/useFlash';
 import tw from 'twin.macro';
@@ -11,39 +11,28 @@ import CopyOnClick from '@/components/elements/CopyOnClick';
 import Tooltip from '@/components/elements/tooltip/Tooltip';
 import enableAccountTwoFactor from '@/api/account/enableAccountTwoFactor';
 import FlashMessageRender from '@/components/FlashMessageRender';
-import RecoveryTokensDialog from '@/components/dashboard/forms/RecoveryTokensDialog';
 import { Actions, useStoreActions } from 'easy-peasy';
 import { ApplicationStore } from '@/state';
+import asDialog from '@/hoc/asDialog';
 
-type SetupTOTPModalProps = DialogProps;
+interface Props {
+    onTokens: (tokens: string[]) => void;
+}
 
-export default ({ open, onClose }: SetupTOTPModalProps) => {
+const ConfigureTwoFactorForm = ({ onTokens }: Props) => {
     const [submitting, setSubmitting] = useState(false);
     const [value, setValue] = useState('');
-    const [tokens, setTokens] = useState<string[]>([]);
     const [token, setToken] = useState<TwoFactorTokenData | null>(null);
     const { clearAndAddHttpError } = useFlashKey('account:two-step');
     const updateUserData = useStoreActions((actions: Actions<ApplicationStore>) => actions.user.updateUserData);
 
-    useEffect(() => {
-        if (!open) return;
+    const { close } = useContext(DialogWrapperContext);
 
+    useEffect(() => {
         getTwoFactorTokenData()
             .then(setToken)
-            .then(() => updateUserData({ useTotp: true }))
             .catch((error) => clearAndAddHttpError(error));
-    }, [open]);
-
-    useEffect(() => {
-        if (!open) return;
-
-        return () => {
-            setToken(null);
-            setValue('');
-            setSubmitting(false);
-            clearAndAddHttpError(undefined);
-        };
-    }, [open]);
+    }, []);
 
     const submit = () => {
         if (submitting) return;
@@ -52,76 +41,68 @@ export default ({ open, onClose }: SetupTOTPModalProps) => {
         clearAndAddHttpError();
 
         enableAccountTwoFactor(value)
-            .then(setTokens)
-            .catch(clearAndAddHttpError)
-            .then(() => setSubmitting(false));
+            .then((tokens) => {
+                updateUserData({ useTotp: true });
+                onTokens(tokens);
+            })
+            .catch((error) => {
+                clearAndAddHttpError(error);
+                setSubmitting(false);
+            });
     };
 
     return (
         <>
-            <RecoveryTokensDialog tokens={tokens} open={open && tokens.length > 0} onClose={onClose} />
-            <Dialog
-                open={open && !tokens.length}
-                onClose={onClose}
-                title={'Enable Two-Step Verification'}
-                preventExternalClose={submitting}
-                description={
-                    "Help protect your account from unauthorized access. You'll be prompted for a verification code each time you sign in."
-                }
+            <FlashMessageRender byKey={'account:two-step'} className={'mt-4'} />
+            <div
+                className={'flex items-center justify-center w-56 h-56 p-2 bg-gray-800 rounded-lg shadow mx-auto mt-6'}
             >
-                <FlashMessageRender byKey={'account:two-step'} className={'mt-4'} />
-                <div
-                    className={
-                        'flex items-center justify-center w-56 h-56 p-2 bg-gray-800 rounded-lg shadow mx-auto mt-6'
-                    }
+                {!token ? (
+                    <Spinner />
+                ) : (
+                    <QRCode renderAs={'svg'} value={token.image_url_data} css={tw`w-full h-full shadow-none rounded`} />
+                )}
+            </div>
+            <CopyOnClick text={token?.secret}>
+                <p className={'font-mono text-sm text-gray-100 text-center mt-2'}>
+                    {token?.secret.match(/.{1,4}/g)!.join(' ') || 'Loading...'}
+                </p>
+            </CopyOnClick>
+            <div className={'mt-6'}>
+                <p>
+                    Scan the QR code above using the two-step authentication app of your choice. Then, enter the 6-digit
+                    code generated into the field below.
+                </p>
+            </div>
+            <Input.Text
+                variant={Input.Text.Variants.Loose}
+                value={value}
+                onChange={(e) => setValue(e.currentTarget.value)}
+                className={'mt-4'}
+                placeholder={'000000'}
+                type={'text'}
+                inputMode={'numeric'}
+                autoComplete={'one-time-code'}
+                pattern={'\\d{6}'}
+            />
+            <Dialog.Footer>
+                <Button.Text onClick={close}>Cancel</Button.Text>
+                <Tooltip
+                    disabled={value.length === 6}
+                    content={!token ? 'Waiting for QR code to load...' : 'You must enter the 6-digit code to continue.'}
+                    delay={100}
                 >
-                    {!token ? (
-                        <Spinner />
-                    ) : (
-                        <QRCode
-                            renderAs={'svg'}
-                            value={token.image_url_data}
-                            css={tw`w-full h-full shadow-none rounded`}
-                        />
-                    )}
-                </div>
-                <CopyOnClick text={token?.secret}>
-                    <p className={'font-mono text-sm text-gray-100 text-center mt-2'}>
-                        {token?.secret.match(/.{1,4}/g)!.join(' ') || 'Loading...'}
-                    </p>
-                </CopyOnClick>
-                <div className={'mt-6'}>
-                    <p>
-                        Scan the QR code above using the two-step authentication app of your choice. Then, enter the
-                        6-digit code generated into the field below.
-                    </p>
-                </div>
-                <Input.Text
-                    variant={Input.Text.Variants.Loose}
-                    value={value}
-                    onChange={(e) => setValue(e.currentTarget.value)}
-                    className={'mt-4'}
-                    placeholder={'000000'}
-                    type={'text'}
-                    inputMode={'numeric'}
-                    autoComplete={'one-time-code'}
-                    pattern={'\\d{6}'}
-                />
-                <Dialog.Footer>
-                    <Button.Text onClick={onClose}>Cancel</Button.Text>
-                    <Tooltip
-                        disabled={value.length === 6}
-                        content={
-                            !token ? 'Waiting for QR code to load...' : 'You must enter the 6-digit code to continue.'
-                        }
-                        delay={100}
-                    >
-                        <Button disabled={!token || value.length !== 6} onClick={submit}>
-                            Enable
-                        </Button>
-                    </Tooltip>
-                </Dialog.Footer>
-            </Dialog>
+                    <Button disabled={!token || value.length !== 6} onClick={submit}>
+                        Enable
+                    </Button>
+                </Tooltip>
+            </Dialog.Footer>
         </>
     );
 };
+
+export default asDialog({
+    title: 'Enable Two-Step Verification',
+    description:
+        "Help protect your account from unauthorized access. You'll be prompted for a verification code each time you sign in.",
+})(ConfigureTwoFactorForm);