[UI] Display the 2FA token, show spinner on load (#3367)
Co-authored-by: Dane Everitt <dane@daneeveritt.com>
This commit is contained in:
Mia
GitHub
parent
924f00ac9a
commit
bda1ff50ab
5 changed files with 49 additions and 27 deletions
|
|
@ -61,9 +61,7 @@ class TwoFactorController extends ClientApiController
|
|||
}
|
||||
|
||||
return new JsonResponse([
|
||||
'data' => [
|
||||
'image_url_data' => $this->setupService->handle($request->user()),
|
||||
],
|
||||
'data' => $this->setupService->handle($request->user()),
|
||||
]);
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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 [
|
||||
'image_url_data' => sprintf(
|
||||
'otpauth://totp/%1$s:%2$s?secret=%3$s&issuer=%1$s',
|
||||
rawurlencode($company),
|
||||
rawurlencode($user->email),
|
||||
rawurlencode($secret)
|
||||
);
|
||||
rawurlencode($secret),
|
||||
),
|
||||
'secret' => $secret,
|
||||
];
|
||||
}
|
||||
}
|
||||
|
|
|
|||
15
resources/scripts/api/account/getTwoFactorTokenData.ts
Normal file
15
resources/scripts/api/account/getTwoFactorTokenData.ts
Normal file
|
|
@ -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);
|
||||
});
|
||||
};
|
||||
|
|
@ -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);
|
||||
});
|
||||
};
|
||||
|
|
@ -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>
|
||||
Setup
|
||||
</Button>
|
||||
<Button>Setup</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Reference in a new issue