Skynet/misc_pterodactyl-panel
7
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Fix styling on 2fa codes modal

Browse source
This commit is contained in:
Dane Everitt 2020-07-04 15:05:44 -07:00
parent 1c97dd4e24
commit 82cf070c06
No known key found for this signature in database
GPG key ID: EEA66103B3D71F53
2 changed files with 33 additions and 29 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -9,6 +9,8 @@ import { ApplicationStore } from '@/state';
import { httpErrorToHuman } from '@/api/http'; import { httpErrorToHuman } from '@/api/http';
import FlashMessageRender from '@/components/FlashMessageRender'; import FlashMessageRender from '@/components/FlashMessageRender';
import Field from '@/components/elements/Field'; import Field from '@/components/elements/Field';
import tw from 'twin.macro';
import Button from '@/components/elements/Button';
interface Values { interface Values {
code: string; code: string;
@ -64,7 +66,7 @@ export default ({ onDismissed, ...props }: RequiredModalProps) => {
.matches(/^(\d){6}$/, 'Authenticator code must be 6 digits.'), .matches(/^(\d){6}$/, 'Authenticator code must be 6 digits.'),
})} })}
> >
{({ isSubmitting, isValid }) => ( {({ isSubmitting }) => (
<Modal <Modal
{...props} {...props}
onDismissed={dismiss} onDismissed={dismiss}
@ -75,47 +77,47 @@ export default ({ onDismissed, ...props }: RequiredModalProps) => {
> >
{recoveryTokens.length > 0 ? {recoveryTokens.length > 0 ?
<> <>
<h2 className={'mb-4'}>Two-factor authentication enabled</h2> <h2 css={tw`text-2xl mb-4`}>Two-factor authentication enabled</h2>
<p className={'text-neutral-300'}> <p css={tw`text-neutral-300`}>
Two-factor authentication has been enabled on your account. Should you loose access to 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 this device you&apos;ll need to use on of the codes displayed below in order to access your
account. account.
</p> </p>
<p className={'text-neutral-300 mt-4'}> <p css={tw`text-neutral-300 mt-4`}>
<strong>These codes will not be displayed again.</strong> Please take note of them now <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. by storing them in a secure repository such as a password manager.
</p> </p>
<pre className={'mt-4 rounded font-mono bg-neutral-900 p-4'}> <pre css={tw`text-sm mt-4 rounded font-mono bg-neutral-900 p-4`}>
{recoveryTokens.map(token => <code key={token} className={'block mb-1'}>{token}</code>)} {recoveryTokens.map(token => <code key={token} css={tw`block mb-1`}>{token}</code>)}
</pre> </pre>
<div className={'text-right'}> <div css={tw`text-right`}>
<button className={'mt-6 btn btn-lg btn-primary'} onClick={dismiss}> <Button css={tw`mt-6`} size={'large'} onClick={dismiss}>
Close Close
</button> </Button>
</div> </div>
</> </>
: :
<Form className={'mb-0'}> <Form css={tw`mb-0`}>
<FlashMessageRender className={'mb-6'} byKey={'account:two-factor'}/> <FlashMessageRender css={tw`mb-6`} byKey={'account:two-factor'}/>
<div className={'flex flex-wrap'}> <div css={tw`flex flex-wrap`}>
<div className={'w-full md:flex-1'}> <div css={tw`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'}> <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 || !token.length ?
<img <img
src={'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII='} src={'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII='}
className={'w-64 h-64 rounded'} css={tw`w-64 h-64 rounded`}
/> />
: :
<img <img
src={`https://api.qrserver.com/v1/create-qr-code/?size=500x500&data=${token}`} src={`https://api.qrserver.com/v1/create-qr-code/?size=500x500&data=${token}`}
onLoad={() => setLoading(false)} onLoad={() => setLoading(false)}
className={'w-full h-full shadow-none rounded-0'} css={tw`w-full h-full shadow-none rounded-none`}
/> />
} }
</div> </div>
</div> </div>
<div className={'w-full mt-6 md:mt-0 md:flex-1 md:flex md:flex-col'}> <div css={tw`w-full mt-6 md:mt-0 md:flex-1 md:flex md:flex-col`}>
<div className={'flex-1'}> <div css={tw`flex-1`}>
<Field <Field
id={'code'} id={'code'}
name={'code'} name={'code'}
@ -125,10 +127,10 @@ export default ({ onDismissed, ...props }: RequiredModalProps) => {
autoFocus={!loading} autoFocus={!loading}
/> />
</div> </div>
<div className={'mt-6 md:mt-0 text-right'}> <div css={tw`mt-6 md:mt-0 text-right`}>
<button className={'btn btn-primary btn-sm'} disabled={!isValid}> <Button>
Setup Setup
</button> </Button>
</div> </div>
</div> </div>
</div> </div>

16
resources/scripts/components/elements/ConfirmationModal.tsx
View file

@ -1,5 +1,7 @@
import React from 'react'; import React from 'react';
import Modal, { RequiredModalProps } from '@/components/elements/Modal'; import Modal, { RequiredModalProps } from '@/components/elements/Modal';
import tw from 'twin.macro';
import Button from '@/components/elements/Button';
type Props = { type Props = {
title: string; title: string;
@ -16,15 +18,15 @@ const ConfirmationModal = ({ title, appear, children, visible, buttonText, onCon
showSpinnerOverlay={showSpinnerOverlay} showSpinnerOverlay={showSpinnerOverlay}
onDismissed={() => onDismissed()} onDismissed={() => onDismissed()}
> >
<h3 className={'mb-6'}>{title}</h3> <h3 css={tw`mb-6`}>{title}</h3>
<p className={'text-sm'}>{children}</p> <p css={tw`text-sm`}>{children}</p>
<div className={'flex items-center justify-end mt-8'}> <div css={tw`flex items-center justify-end mt-8`}>
<button className={'btn btn-secondary btn-sm'} onClick={() => onDismissed()}> <Button isSecondary onClick={() => onDismissed()}>
Cancel Cancel
</button> </Button>
<button className={'btn btn-red btn-sm ml-4'} onClick={() => onConfirmed()}> <Button color={'red'} css={tw`ml-4`} onClick={() => onConfirmed()}>
{buttonText} {buttonText}
</button> </Button>
</div> </div>
</Modal> </Modal>
); );