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

Mobile improvements for two-factor form

Browse source
This commit is contained in:
Dane Everitt 2019-12-22 20:51:50 -08:00
parent 9a0ed6b291
commit 6ccac6e040
No known key found for this signature in database
GPG key ID: EEA66103B3D71F53
3 changed files with 21 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

16
resources/scripts/components/dashboard/forms/ConfigureTwoFactorForm.tsx
View file

@ -10,7 +10,13 @@ export default () => {
return user.useTotp ? return user.useTotp ?
<div> <div>
{visible && <DisableTwoFactorModal visible={visible} onDismissed={() => setVisible(false)}/>} {visible &&
<DisableTwoFactorModal
appear={true}
visible={visible}
onDismissed={() => setVisible(false)}
/>
}
<p className={'text-sm'}> <p className={'text-sm'}>
Two-factor authentication is currently enabled on your account. Two-factor authentication is currently enabled on your account.
</p> </p>
@ -25,7 +31,13 @@ export default () => {
</div> </div>
: :
<div> <div>
{visible && <SetupTwoFactorModal visible={visible} onDismissed={() => setVisible(false)}/>} {visible &&
<SetupTwoFactorModal
appear={true}
visible={visible}
onDismissed={() => setVisible(false)}
/>
}
<p className={'text-sm'}> <p className={'text-sm'}>
You do not currently have two-factor authentication enabled on your account. Click You do not currently have two-factor authentication enabled on your account. Click
the button below to begin configuring it. the button below to begin configuring it.

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

@ -63,9 +63,9 @@ export default ({ ...props }: RequiredModalProps) => {
> >
<Form className={'mb-0'}> <Form className={'mb-0'}>
<FlashMessageRender className={'mb-6'} byKey={'account:two-factor'}/> <FlashMessageRender className={'mb-6'} byKey={'account:two-factor'}/>
<div className={'flex'}> <div className={'flex flex-wrap'}>
<div className={'flex-1'}> <div className={'w-full md:flex-1'}>
<div className={'w-64 h-64 bg-neutral-600 p-2 rounded'}> <div className={'w-32 h-32 md:w-64 md:w-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='}
@ -80,7 +80,7 @@ export default ({ ...props }: RequiredModalProps) => {
} }
</div> </div>
</div> </div>
<div className={'flex-1 flex flex-col'}> <div className={'w-full mt-6 md:mt-0 md:flex-1 md:flex md:flex-col'}>
<div className={'flex-1'}> <div className={'flex-1'}>
<Field <Field
id={'code'} id={'code'}
@ -91,7 +91,7 @@ export default ({ ...props }: RequiredModalProps) => {
autoFocus={!loading} autoFocus={!loading}
/> />
</div> </div>
<div className={'text-right'}> <div className={'mt-6 md:mt-0 text-right'}>
<button className={'btn btn-primary btn-sm'} disabled={!isValid}> <button className={'btn btn-primary btn-sm'} disabled={!isValid}>
Setup Setup
</button> </button>

2
resources/scripts/components/elements/Modal.tsx
View file

@ -7,6 +7,7 @@ import Spinner from '@/components/elements/Spinner';
export interface RequiredModalProps { export interface RequiredModalProps {
visible: boolean; visible: boolean;
onDismissed: () => void; onDismissed: () => void;
appear?: boolean;
} }
type Props = RequiredModalProps & { type Props = RequiredModalProps & {
@ -38,6 +39,7 @@ export default (props: Props) => {
<CSSTransition <CSSTransition
timeout={250} timeout={250}
classNames={'fade'} classNames={'fade'}
appear={props.appear}
in={render} in={render}
unmountOnExit={true} unmountOnExit={true}
onExited={() => props.onDismissed()} onExited={() => props.onDismissed()}