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

Apply new eslint rules; default to prettier for styling

Browse source
This commit is contained in:
DaneEveritt 2022-06-26 15:13:52 -04:00
parent f22cce8881
commit dc84af9937
No known key found for this signature in database
GPG key ID: EEA66103B3D71F53
218 changed files with 3876 additions and 3564 deletions
Download patch file Download diff file Expand all files Collapse all files

78
resources/scripts/components/dashboard/forms/SetupTwoFactorModal.tsx
View file

@ -19,8 +19,8 @@ interface Values {
}
const SetupTwoFactorModal = () => {
const [ token, setToken ] = useState<TwoFactorTokenData | null>(null);
const [ recoveryTokens, setRecoveryTokens ] = useState<string[]>([]);
const [token, setToken] = useState<TwoFactorTokenData | null>(null);
const [recoveryTokens, setRecoveryTokens] = useState<string[]>([]);
const { dismiss, setPropOverrides } = useContext(ModalContext);
const updateUserData = useStoreActions((actions: Actions<ApplicationStore>) => actions.user.updateUserData);
@ -29,31 +29,31 @@ const SetupTwoFactorModal = () => {
useEffect(() => {
getTwoFactorTokenData()
.then(setToken)
.catch(error => {
.catch((error) => {
console.error(error);
clearAndAddHttpError({ error, key: 'account:two-factor' });
});
}, []);
const submit = ({ code }: Values, { setSubmitting }: FormikHelpers<Values>) => {
setPropOverrides(state => ({ ...state, showSpinnerOverlay: true }));
setPropOverrides((state) => ({ ...state, showSpinnerOverlay: true }));
enableAccountTwoFactor(code)
.then(tokens => {
.then((tokens) => {
setRecoveryTokens(tokens);
})
.catch(error => {
.catch((error) => {
console.error(error);
clearAndAddHttpError({ error, key: 'account:two-factor' });
})
.then(() => {
setSubmitting(false);
setPropOverrides(state => ({ ...state, showSpinnerOverlay: false }));
setPropOverrides((state) => ({ ...state, showSpinnerOverlay: false }));
});
};
useEffect(() => {
setPropOverrides(state => ({
setPropOverrides((state) => ({
...state,
closeOnEscape: !recoveryTokens.length,
closeOnBackground: !recoveryTokens.length,
@ -64,7 +64,7 @@ const SetupTwoFactorModal = () => {
updateUserData({ useTotp: true });
}
};
}, [ recoveryTokens ]);
}, [recoveryTokens]);
return (
<Formik
@ -76,20 +76,24 @@ const SetupTwoFactorModal = () => {
.matches(/^(\d){6}$/, 'Authenticator code must be 6 digits.'),
})}
>
{recoveryTokens.length > 0 ?
{recoveryTokens.length > 0 ? (
<>
<h2 css={tw`text-2xl mb-4`}>Two-factor authentication enabled</h2>
<p css={tw`text-neutral-300`}>
Two-factor authentication has been enabled on your account. Should you lose access to
your authenticator device, you&apos;ll need to use one of the codes displayed below in order to access your
account.
Two-factor authentication has been enabled on your account. Should you lose access to your
authenticator device, you&apos;ll need to use one of the codes displayed below in order to
access your account.
</p>
<p css={tw`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.
<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 css={tw`text-sm mt-4 rounded font-mono bg-neutral-900 p-4`}>
{recoveryTokens.map(token => <code key={token} css={tw`block mb-1`}>{token}</code>)}
{recoveryTokens.map((token) => (
<code key={token} css={tw`block mb-1`}>
{token}
</code>
))}
</pre>
<div css={tw`text-right`}>
<Button css={tw`mt-6`} onClick={dismiss}>
@ -97,24 +101,26 @@ const SetupTwoFactorModal = () => {
</Button>
</div>
</>
:
) : (
<Form css={tw`mb-0`}>
<FlashMessageRender css={tw`mb-6`} byKey={'account:two-factor'}/>
<FlashMessageRender css={tw`mb-6`} byKey={'account:two-factor'} />
<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 ? (
<img
src={'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII='}
src={
'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII='
}
css={tw`w-64 h-64 rounded`}
/>
:
) : (
<QRCode
renderAs={'svg'}
value={token.image_url_data}
css={tw`w-full h-full shadow-none rounded-none`}
/>
}
)}
</div>
</div>
<div css={tw`w-full mt-6 md:mt-0 md:flex-1 md:flex md:flex-col`}>
@ -124,20 +130,20 @@ const SetupTwoFactorModal = () => {
name={'code'}
type={'text'}
title={'Code From Authenticator'}
description={'Enter the code from your authenticator device after scanning the QR image.'}
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>
}
{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>
@ -145,7 +151,7 @@ const SetupTwoFactorModal = () => {
</div>
</div>
</Form>
}
)}
</Formik>
);
};