Display generated recovery tokens when enabling two factor

resources/scripts/api/account/enableAccountTwoFactor.ts

@@ -1,9 +1,7 @@
 import http from '@/api/http';
 
-export default (code: string): Promise<void> => {
+export default async (code: string): Promise<string[]> => {
-    return new Promise((resolve, reject) => {
+    const { data } = await http.post('/api/client/account/two-factor', { code });
-        http.post('/api/client/account/two-factor', { code })
+
-            .then(() => resolve())
+    return data.attributes.tokens;
-            .catch(reject);
-    });
 };

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

@@ -2,21 +2,22 @@ import React, { useEffect, useState } from 'react';
 import Modal, { RequiredModalProps } from '@/components/elements/Modal';
 import { Form, Formik, FormikHelpers } from 'formik';
 import { object, string } from 'yup';
-import Field from '@/components/elements/Field';
 import getTwoFactorTokenUrl from '@/api/account/getTwoFactorTokenUrl';
 import enableAccountTwoFactor from '@/api/account/enableAccountTwoFactor';
-import FlashMessageRender from '@/components/FlashMessageRender';
 import { Actions, useStoreActions } from 'easy-peasy';
 import { ApplicationStore } from '@/state';
 import { httpErrorToHuman } from '@/api/http';
+import FlashMessageRender from '@/components/FlashMessageRender';
+import Field from '@/components/elements/Field';
 
 interface Values {
     code: string;
 }
 
-export default ({ ...props }: RequiredModalProps) => {
+export default ({ onDismissed, ...props }: RequiredModalProps) => {
     const [ token, setToken ] = useState('');
     const [ loading, setLoading ] = useState(true);
+    const [ recoveryTokens, setRecoveryTokens ] = useState<string[]>([]);
 
     const updateUserData = useStoreActions((actions: Actions<ApplicationStore>) => actions.user.updateUserData);
     const { addError, clearFlashes } = useStoreActions((actions: Actions<ApplicationStore>) => actions.flashes);
@@ -27,22 +28,30 @@ export default ({ ...props }: RequiredModalProps) => {
             .then(setToken)
             .catch(error => {
                 console.error(error);
+                addError({ message: httpErrorToHuman(error), key: 'account:two-factor' });
             });
     }, []);
 
     const submit = ({ code }: Values, { setSubmitting }: FormikHelpers<Values>) => {
         clearFlashes('account:two-factor');
         enableAccountTwoFactor(code)
-            .then(() => {
+            .then(tokens => {
-                updateUserData({ useTotp: true });
+                setRecoveryTokens(tokens);
-                props.onDismissed();
             })
             .catch(error => {
                 console.error(error);
 
                 addError({ message: httpErrorToHuman(error), key: 'account:two-factor' });
-                setSubmitting(false);
+            })
-            });
+            .then(() => setSubmitting(false));
+    };
+
+    const dismiss = () => {
+        if (recoveryTokens.length > 0) {
+            updateUserData({ useTotp: true });
+        }
+
+        onDismissed();
     };
 
     return (
@@ -58,9 +67,34 @@ export default ({ ...props }: RequiredModalProps) => {
             {({ isSubmitting, isValid }) => (
                 <Modal
                     {...props}
+                    onDismissed={dismiss}
                     dismissable={!isSubmitting}
                     showSpinnerOverlay={loading || isSubmitting}
+                    closeOnEscape={!recoveryTokens}
+                    closeOnBackground={!recoveryTokens}
                 >
+                    {recoveryTokens.length > 0 ?
+                        <>
+                            <h2 className={'mb-4'}>Two-factor authentication enabled</h2>
+                            <p className={'text-neutral-300'}>
+                                Two-factor authentication has been enabled on your account. Should you loose access to
+                                this device you'll need to use on of the codes displayed below in order to access your
+                                account.
+                            </p>
+                            <p className={'text-neutral-300 mt-4'}>
+                                <strong>These codes will not be displayed again.</strong> Please take note of them now
+                                by storing them in a secure repository such as a password manager.
+                            </p>
+                            <pre className={'mt-4 rounded font-mono bg-neutral-900 p-4'}>
+                                {recoveryTokens.map(token => <code key={token} className={'block mb-1'}>{token}</code>)}
+                            </pre>
+                            <div className={'text-right'}>
+                                <button className={'mt-6 btn btn-lg btn-primary'} onClick={dismiss}>
+                                    Close
+                                </button>
+                            </div>
+                        </>
+                        :
                         <Form className={'mb-0'}>
                             <FlashMessageRender className={'mb-6'} byKey={'account:two-factor'}/>
                             <div className={'flex flex-wrap'}>
@@ -99,6 +133,7 @@ export default ({ ...props }: RequiredModalProps) => {
                                 </div>
                             </div>
                         </Form>
+                    }
                 </Modal>
             )}
         </Formik>