Cleanup logic powering totp enabling modal
This commit is contained in:
DaneEveritt
parent
a4feed24a8
commit
92926ca193
2 changed files with 76 additions and 87 deletions
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
|
|
|||
Loading…
Reference in a new issue