[UI] Display the 2FA token, show spinner on load (#3367)

Co-authored-by: Dane Everitt <dane@daneeveritt.com>

app/Http/Controllers/Api/Client/TwoFactorController.php

@@ -61,9 +61,7 @@ class TwoFactorController extends ClientApiController
         }
 
         return new JsonResponse([
-            'data' => [
+            'data' => $this->setupService->handle($request->user()),
-                'image_url_data' => $this->setupService->handle($request->user()),
-            ],
         ]);
     }
 

app/Services/Users/TwoFactorSetupService.php

@@ -49,7 +49,7 @@ class TwoFactorSetupService
      * @throws \Pterodactyl\Exceptions\Model\DataValidationException
      * @throws \Pterodactyl\Exceptions\Repository\RecordNotFoundException
      */
-    public function handle(User $user): string
+    public function handle(User $user): array
     {
         $secret = '';
         try {
@@ -66,11 +66,14 @@ class TwoFactorSetupService
 
         $company = urlencode(preg_replace('/\s/', '', $this->config->get('app.name')));
 
-        return sprintf(
+        return [
-            'otpauth://totp/%1$s:%2$s?secret=%3$s&issuer=%1$s',
+            'image_url_data' => sprintf(
-            rawurlencode($company),
+                'otpauth://totp/%1$s:%2$s?secret=%3$s&issuer=%1$s',
-            rawurlencode($user->email),
+                rawurlencode($company),
-            rawurlencode($secret)
+                rawurlencode($user->email),
-        );
+                rawurlencode($secret),
+            ),
+            'secret' => $secret,
+        ];
     }
 }

resources/scripts/api/account/getTwoFactorTokenData.ts

@@ -0,0 +1,15 @@
+import http from '@/api/http';
+
+export interface TwoFactorTokenData {
+    // eslint-disable-next-line camelcase
+    image_url_data: string;
+    secret: string;
+}
+
+export default (): Promise<TwoFactorTokenData> => {
+    return new Promise((resolve, reject) => {
+        http.get('/api/client/account/two-factor')
+            .then(({ data }) => resolve(data.data))
+            .catch(reject);
+    });
+};

resources/scripts/api/account/getTwoFactorTokenUrl.ts

@@ -1,9 +0,0 @@
-import http from '@/api/http';
-
-export default (): Promise<string> => {
-    return new Promise((resolve, reject) => {
-        http.get('/api/client/account/two-factor')
-            .then(({ data }) => resolve(data.data.image_url_data))
-            .catch(reject);
-    });
-};

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

@@ -1,7 +1,7 @@
 import React, { useContext, useEffect, useState } from 'react';
 import { Form, Formik, FormikHelpers } from 'formik';
 import { object, string } from 'yup';
-import getTwoFactorTokenUrl from '@/api/account/getTwoFactorTokenUrl';
+import getTwoFactorTokenData, { TwoFactorTokenData } from '@/api/account/getTwoFactorTokenData';
 import enableAccountTwoFactor from '@/api/account/enableAccountTwoFactor';
 import { Actions, useStoreActions } from 'easy-peasy';
 import { ApplicationStore } from '@/state';
@@ -12,13 +12,14 @@ import Button from '@/components/elements/Button';
 import asModal from '@/hoc/asModal';
 import ModalContext from '@/context/ModalContext';
 import QRCode from 'qrcode.react';
+import CopyOnClick from '@/components/elements/CopyOnClick';
 
 interface Values {
     code: string;
 }
 
 const SetupTwoFactorModal = () => {
-    const [ token, setToken ] = useState('');
+    const [ token, setToken ] = useState<TwoFactorTokenData | null>(null);
     const [ recoveryTokens, setRecoveryTokens ] = useState<string[]>([]);
 
     const { dismiss, setPropOverrides } = useContext(ModalContext);
@@ -26,7 +27,7 @@ const SetupTwoFactorModal = () => {
     const { clearAndAddHttpError } = useStoreActions((actions: Actions<ApplicationStore>) => actions.flashes);
 
     useEffect(() => {
-        getTwoFactorTokenUrl()
+        getTwoFactorTokenData()
             .then(setToken)
             .catch(error => {
                 console.error(error);
@@ -102,13 +103,17 @@ const SetupTwoFactorModal = () => {
                     <div css={tw`flex flex-wrap`}>
                         <div css={tw`w-full md:flex-1`}>
                             <div css={tw`w-32 h-32 md:w-64 md:h-64 bg-neutral-600 p-2 rounded mx-auto`}>
-                                {!token || !token.length ?
+                                {!token ?
                                     <img
                                         src={'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII='}
                                         css={tw`w-64 h-64 rounded`}
                                     />
                                     :
-                                    <QRCode renderAs={'svg'} value={token} css={tw`w-full h-full shadow-none rounded-none`}/>
+                                    <QRCode
+                                        renderAs={'svg'}
+                                        value={token.image_url_data}
+                                        css={tw`w-full h-full shadow-none rounded-none`}
+                                    />
                                 }
                             </div>
                         </div>
@@ -121,11 +126,21 @@ const SetupTwoFactorModal = () => {
                                     title={'Code From Authenticator'}
                                     description={'Enter the code from your authenticator device after scanning the QR image.'}
                                 />
+                                {token &&
+                                <div css={tw`mt-4 pt-4 border-t border-neutral-500 text-neutral-200`}>
+                                    Alternatively, enter the following token into your authenticator application:
+                                    <CopyOnClick text={token.secret}>
+                                        <div css={tw`text-sm bg-neutral-900 rounded mt-2 py-2 px-4 font-mono`}>
+                                            <code css={tw`font-mono`}>
+                                                {token.secret}
+                                            </code>
+                                        </div>
+                                    </CopyOnClick>
+                                </div>
+                                }
                             </div>
                             <div css={tw`mt-6 md:mt-0 text-right`}>
-                                <Button>
+                                <Button>Setup</Button>
-                                    Setup
-                                </Button>
                             </div>
                         </div>
                     </div>