forked from Alex/Pterodactyl-Panel
Display generated recovery tokens when enabling two factor
This commit is contained in:
Dane Everitt
parent
c522935403
commit
795e045950
@ -1,9 +1,7 @@
|
||||
import http from '@/api/http';
|
||||
|
||||
export default (code: string): Promise<void> => {
|
||||
return new Promise((resolve, reject) => {
|
||||
http.post('/api/client/account/two-factor', { code })
|
||||
.then(() => resolve())
|
||||
.catch(reject);
|
||||
});
|
||||
export default async (code: string): Promise<string[]> => {
|
||||
const { data } = await http.post('/api/client/account/two-factor', { code });
|
||||
|
||||
return data.attributes.tokens;
|
||||
};
|
||||
|
||||
@ -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(() => {
|
||||
updateUserData({ useTotp: true });
|
||||
props.onDismissed();
|
||||
.then(tokens => {
|
||||
setRecoveryTokens(tokens);
|
||||
})
|
||||
.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,47 +67,73 @@ export default ({ ...props }: RequiredModalProps) => {
|
||||
{({ isSubmitting, isValid }) => (
|
||||
<Modal
|
||||
{...props}
|
||||
onDismissed={dismiss}
|
||||
dismissable={!isSubmitting}
|
||||
showSpinnerOverlay={loading || isSubmitting}
|
||||
closeOnEscape={!recoveryTokens}
|
||||
closeOnBackground={!recoveryTokens}
|
||||
>
|
||||
<Form className={'mb-0'}>
|
||||
<FlashMessageRender className={'mb-6'} byKey={'account:two-factor'}/>
|
||||
<div className={'flex flex-wrap'}>
|
||||
<div className={'w-full md:flex-1'}>
|
||||
<div className={'w-32 h-32 md:w-64 md:h-64 bg-neutral-600 p-2 rounded mx-auto'}>
|
||||
{!token || !token.length ?
|
||||
<img
|
||||
src={'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII='}
|
||||
className={'w-64 h-64 rounded'}
|
||||
{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'}>
|
||||
<div className={'w-full md:flex-1'}>
|
||||
<div className={'w-32 h-32 md:w-64 md:h-64 bg-neutral-600 p-2 rounded mx-auto'}>
|
||||
{!token || !token.length ?
|
||||
<img
|
||||
src={'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII='}
|
||||
className={'w-64 h-64 rounded'}
|
||||
/>
|
||||
:
|
||||
<img
|
||||
src={`https://api.qrserver.com/v1/create-qr-code/?size=500x500&data=${token}`}
|
||||
onLoad={() => setLoading(false)}
|
||||
className={'w-full h-full shadow-none rounded-0'}
|
||||
/>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
<div className={'w-full mt-6 md:mt-0 md:flex-1 md:flex md:flex-col'}>
|
||||
<div className={'flex-1'}>
|
||||
<Field
|
||||
id={'code'}
|
||||
name={'code'}
|
||||
type={'text'}
|
||||
title={'Code From Authenticator'}
|
||||
description={'Enter the code from your authenticator device after scanning the QR image.'}
|
||||
autoFocus={!loading}
|
||||
/>
|
||||
:
|
||||
<img
|
||||
src={`https://api.qrserver.com/v1/create-qr-code/?size=500x500&data=${token}`}
|
||||
onLoad={() => setLoading(false)}
|
||||
className={'w-full h-full shadow-none rounded-0'}
|
||||
/>
|
||||
}
|
||||
</div>
|
||||
<div className={'mt-6 md:mt-0 text-right'}>
|
||||
<button className={'btn btn-primary btn-sm'} disabled={!isValid}>
|
||||
Setup
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className={'w-full mt-6 md:mt-0 md:flex-1 md:flex md:flex-col'}>
|
||||
<div className={'flex-1'}>
|
||||
<Field
|
||||
id={'code'}
|
||||
name={'code'}
|
||||
type={'text'}
|
||||
title={'Code From Authenticator'}
|
||||
description={'Enter the code from your authenticator device after scanning the QR image.'}
|
||||
autoFocus={!loading}
|
||||
/>
|
||||
</div>
|
||||
<div className={'mt-6 md:mt-0 text-right'}>
|
||||
<button className={'btn btn-primary btn-sm'} disabled={!isValid}>
|
||||
Setup
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Form>
|
||||
</Form>
|
||||
}
|
||||
</Modal>
|
||||
)}
|
||||
</Formik>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user