StarMC/Astral-nook
StarMC/Astral-nook
Archived
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Update totp disable modal; require password for enable operation

Browse source
This commit is contained in:
DaneEveritt 2022-07-03 14:27:37 -04:00
parent 92926ca193
commit 2d836156d2
No known key found for this signature in database
GPG key ID: EEA66103B3D71F53
10 changed files with 182 additions and 121 deletions
Download patch file Download diff file Expand all files Collapse all files

108
resources/scripts/components/dashboard/forms/SetupTOTPModal.tsx
View file

@ -1,108 +0,0 @@
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';
import QRCode from 'qrcode.react';
import { Button } from '@/components/elements/button/index';
import Spinner from '@/components/elements/Spinner';
import { Input } from '@/components/elements/inputs';
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 { Actions, useStoreActions } from 'easy-peasy';
import { ApplicationStore } from '@/state';
import asDialog from '@/hoc/asDialog';
interface Props {
onTokens: (tokens: string[]) => void;
}
const ConfigureTwoFactorForm = ({ onTokens }: Props) => {
const [submitting, setSubmitting] = useState(false);
const [value, setValue] = useState('');
const [token, setToken] = useState<TwoFactorTokenData | null>(null);
const { clearAndAddHttpError } = useFlashKey('account:two-step');
const updateUserData = useStoreActions((actions: Actions<ApplicationStore>) => actions.user.updateUserData);
const { close } = useContext(DialogWrapperContext);
useEffect(() => {
getTwoFactorTokenData()
.then(setToken)
.catch((error) => clearAndAddHttpError(error));
}, []);
const submit = () => {
if (submitting) return;
setSubmitting(true);
clearAndAddHttpError();
enableAccountTwoFactor(value)
.then((tokens) => {
updateUserData({ useTotp: true });
onTokens(tokens);
})
.catch((error) => {
clearAndAddHttpError(error);
setSubmitting(false);
});
};
return (
<>
<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}
>
<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);