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

Cleanup logic for asModal to make it a little easier to use dynamically

Browse source
This commit is contained in:
Dane Everitt 2021-05-16 12:35:49 -07:00
parent 69ac2ca40b
commit 6b16b9bc2a
No known key found for this signature in database
GPG key ID: EEA66103B3D71F53
12 changed files with 210 additions and 203 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
package.json
View file

@ -18,6 +18,7 @@
"i18next-chained-backend": "^2.0.0",
"i18next-localstorage-backend": "^3.0.0",
"i18next-xhr-backend": "^3.2.2",
"qrcode.react": "^1.0.1",
"query-string": "^6.7.0",
"react": "^16.13.1",
"react-copy-to-clipboard": "^5.0.2",

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

@ -7,53 +7,29 @@ import tw from 'twin.macro';
import Button from '@/components/elements/Button';
export default () => {
const user = useStoreState((state: ApplicationStore) => state.user.data!);
const [ visible, setVisible ] = useState(false);
const isEnabled = useStoreState((state: ApplicationStore) => state.user.data!.useTotp);
return user.useTotp ?
return (
<div>
{visible &&
<DisableTwoFactorModal
appear
visible={visible}
onDismissed={() => setVisible(false)}
/>
}
<p css={tw`text-sm`}>
Two-factor authentication is currently enabled on your account.
</p>
<div css={tw`mt-6`}>
<Button
color={'red'}
isSecondary
onClick={() => setVisible(true)}
>
Disable
</Button>
</div>
</div>
{visible && (
isEnabled ?
<DisableTwoFactorModal visible={visible} onModalDismissed={() => setVisible(false)}/>
:
<div>
{visible &&
<SetupTwoFactorModal
appear
visible={visible}
onDismissed={() => setVisible(false)}
/>
}
<SetupTwoFactorModal visible={visible} onModalDismissed={() => setVisible(false)}/>
)}
<p css={tw`text-sm`}>
You do not currently have two-factor authentication enabled on your account. Click
the button below to begin configuring it.
{isEnabled ?
'Two-factor authentication is currently enabled on your account.'
:
'You do not currently have two-factor authentication enabled on your account. Click the button below to begin configuring it.'
}
</p>
<div css={tw`mt-6`}>
<Button
color={'green'}
isSecondary
onClick={() => setVisible(true)}
>
Begin Setup
<Button color={'red'} isSecondary onClick={() => setVisible(true)}>
{isEnabled ? 'Disable' : 'Enable'}
</Button>
</div>
</div>
;
);
};

23
resources/scripts/components/dashboard/forms/DisableTwoFactorModal.tsx
View file

@ -1,6 +1,5 @@
import React from 'react';
import React, { useContext } from 'react';
import { Form, Formik, FormikHelpers } from 'formik';
import Modal, { RequiredModalProps } from '@/components/elements/Modal';
import FlashMessageRender from '@/components/FlashMessageRender';
import Field from '@/components/elements/Field';
import { object, string } from 'yup';
@ -9,26 +8,31 @@ import { ApplicationStore } from '@/state';
import disableAccountTwoFactor from '@/api/account/disableAccountTwoFactor';
import tw from 'twin.macro';
import Button from '@/components/elements/Button';
import asModal from '@/hoc/asModal';
import ModalContext from '@/context/ModalContext';
interface Values {
password: string;
}
export default ({ ...props }: RequiredModalProps) => {
const DisableTwoFactorModal = () => {
const { dismiss, setPropOverrides } = useContext(ModalContext);
const { clearAndAddHttpError } = useStoreActions((actions: Actions<ApplicationStore>) => actions.flashes);
const updateUserData = useStoreActions((actions: Actions<ApplicationStore>) => actions.user.updateUserData);
const submit = ({ password }: Values, { setSubmitting }: FormikHelpers<Values>) => {
setPropOverrides({ showSpinnerOverlay: true, dismissable: false });
disableAccountTwoFactor(password)
.then(() => {
updateUserData({ useTotp: false });
props.onDismissed();
dismiss();
})
.catch(error => {
console.error(error);
clearAndAddHttpError({ error, key: 'account:two-factor' });
setSubmitting(false);
setPropOverrides(null);
});
};
@ -42,8 +46,7 @@ export default ({ ...props }: RequiredModalProps) => {
password: string().required('You must provider your current password in order to continue.'),
})}
>
{({ isSubmitting, isValid }) => (
<Modal {...props} dismissable={!isSubmitting} showSpinnerOverlay={isSubmitting}>
{({ isValid }) => (
<Form className={'mb-0'}>
<FlashMessageRender css={tw`mb-6`} byKey={'account:two-factor'}/>
<Field
@ -55,16 +58,14 @@ export default ({ ...props }: RequiredModalProps) => {
autoFocus
/>
<div css={tw`mt-6 text-right`}>
<Button
color={'red'}
disabled={!isValid}
>
<Button color={'red'} disabled={!isValid}>
Disable Two-Factor
</Button>
</div>
</Form>
</Modal>
)}
</Formik>
);
};
export default asModal()(DisableTwoFactorModal);

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

@ -1,5 +1,4 @@
import React, { useEffect, useState } from 'react';
import Modal, { RequiredModalProps } from '@/components/elements/Modal';
import React, { useContext, useEffect, useState } from 'react';
import { Form, Formik, FormikHelpers } from 'formik';
import { object, string } from 'yup';
import getTwoFactorTokenUrl from '@/api/account/getTwoFactorTokenUrl';
@ -10,16 +9,19 @@ import FlashMessageRender from '@/components/FlashMessageRender';
import Field from '@/components/elements/Field';
import tw from 'twin.macro';
import Button from '@/components/elements/Button';
import asModal from '@/hoc/asModal';
import ModalContext from '@/context/ModalContext';
interface Values {
code: string;
}
export default ({ onDismissed, ...props }: RequiredModalProps) => {
const SetupTwoFactorModal = () => {
const [ token, setToken ] = useState('');
const [ loading, setLoading ] = useState(true);
const [ recoveryTokens, setRecoveryTokens ] = useState<string[]>([]);
const { dismiss, setPropOverrides } = useContext(ModalContext);
const updateUserData = useStoreActions((actions: Actions<ApplicationStore>) => actions.user.updateUserData);
const { clearAndAddHttpError } = useStoreActions((actions: Actions<ApplicationStore>) => actions.flashes);
@ -33,6 +35,7 @@ export default ({ onDismissed, ...props }: RequiredModalProps) => {
}, []);
const submit = ({ code }: Values, { setSubmitting }: FormikHelpers<Values>) => {
setPropOverrides(state => ({ ...state, showSpinnerOverlay: true }));
enableAccountTwoFactor(code)
.then(tokens => {
setRecoveryTokens(tokens);
@ -42,16 +45,25 @@ export default ({ onDismissed, ...props }: RequiredModalProps) => {
clearAndAddHttpError({ error, key: 'account:two-factor' });
})
.then(() => setSubmitting(false));
.then(() => {
setSubmitting(false);
setPropOverrides(state => ({ ...state, showSpinnerOverlay: false }));
});
};
const dismiss = () => {
useEffect(() => {
setPropOverrides(state => ({
...state,
closeOnEscape: !recoveryTokens.length,
closeOnBackground: !recoveryTokens.length,
}));
return () => {
if (recoveryTokens.length > 0) {
updateUserData({ useTotp: true });
}
onDismissed();
};
}, [ recoveryTokens ]);
return (
<Formik
@ -62,16 +74,6 @@ export default ({ onDismissed, ...props }: RequiredModalProps) => {
.required('You must provide an authentication code to continue.')
.matches(/^(\d){6}$/, 'Authenticator code must be 6 digits.'),
})}
>
{({ isSubmitting }) => (
<Modal
{...props}
top={false}
onDismissed={dismiss}
dismissable={!isSubmitting}
showSpinnerOverlay={loading || isSubmitting}
closeOnEscape={!recoveryTokens}
closeOnBackground={!recoveryTokens}
>
{recoveryTokens.length > 0 ?
<>
@ -134,8 +136,8 @@ export default ({ onDismissed, ...props }: RequiredModalProps) => {
</div>
</Form>
}
</Modal>
)}
</Formik>
);
};
export default asModal()(SetupTwoFactorModal);

24
resources/scripts/components/elements/Spinner.tsx
View file

@ -1,4 +1,4 @@
import React from 'react';
import React, { Suspense } from 'react';
import styled, { css, keyframes } from 'styled-components/macro';
import tw from 'twin.macro';
@ -10,6 +10,11 @@ interface Props {
isBlue?: boolean;
}
interface Spinner extends React.FC<Props> {
Size: Record<'SMALL' | 'BASE' | 'LARGE', SpinnerSize>;
Suspense: React.FC<Props>;
}
const spin = keyframes`
to { transform: rotate(360deg); }
`;
@ -30,7 +35,7 @@ const SpinnerComponent = styled.div<Props>`
border-top-color: ${props => !props.isBlue ? 'rgb(255, 255, 255)' : 'hsl(212, 92%, 43%)'};
`;
const Spinner = ({ centered, ...props }: Props) => (
const Spinner: Spinner = ({ centered, ...props }) => (
centered ?
<div
css={[
@ -43,12 +48,19 @@ const Spinner = ({ centered, ...props }: Props) => (
:
<SpinnerComponent {...props}/>
);
Spinner.DisplayName = 'Spinner';
Spinner.displayName = 'Spinner';
Spinner.Size = {
SMALL: 'small' as SpinnerSize,
BASE: 'base' as SpinnerSize,
LARGE: 'large' as SpinnerSize,
SMALL: 'small',
BASE: 'base',
LARGE: 'large',
};
Spinner.Suspense = ({ children, centered = true, size = Spinner.Size.LARGE, ...props }) => (
<Suspense fallback={<Spinner centered={centered} size={size} {...props}/>}>
{children}
</Suspense>
);
Spinner.Suspense.displayName = 'Spinner.Suspense';
export default Spinner;

10
resources/scripts/components/elements/SuspenseSpinner.tsx
View file

@ -1,10 +0,0 @@
import React, { Suspense } from 'react';
import Spinner from '@/components/elements/Spinner';
const SuspenseSpinner: React.FC = ({ children }) => (
<Suspense fallback={<Spinner size={'large'} centered/>}>
{children}
</Suspense>
);
export default SuspenseSpinner;

6
resources/scripts/components/server/ServerConsole.tsx
View file

@ -1,6 +1,5 @@
import React, { lazy, memo } from 'react';
import { ServerContext } from '@/state/server';
import SuspenseSpinner from '@/components/elements/SuspenseSpinner';
import Can from '@/components/elements/Can';
import ContentContainer from '@/components/elements/ContentContainer';
import tw from 'twin.macro';
@ -10,6 +9,7 @@ import isEqual from 'react-fast-compare';
import PowerControls from '@/components/server/PowerControls';
import { EulaModalFeature } from '@feature/index';
import ErrorBoundary from '@/components/elements/ErrorBoundary';
import Spinner from '@/components/elements/Spinner';
export type PowerAction = 'start' | 'stop' | 'restart' | 'kill';
@ -51,12 +51,12 @@ const ServerConsole = () => {
}
</div>
<div css={tw`w-full lg:w-3/4 mt-4 lg:mt-0 lg:pl-4`}>
<SuspenseSpinner>
<Spinner.Suspense>
<ErrorBoundary>
<ChunkedConsole/>
</ErrorBoundary>
<ChunkedStatGraphs/>
</SuspenseSpinner>
</Spinner.Suspense>
{eggFeatures.includes('eula') &&
<React.Suspense fallback={null}>
<EulaModalFeature/>

6
resources/scripts/components/server/users/EditSubuserModal.tsx
View file

@ -32,7 +32,7 @@ const EditSubuserModal = ({ subuser }: Props) => {
const uuid = ServerContext.useStoreState(state => state.server.data!.uuid);
const appendSubuser = ServerContext.useStoreActions(actions => actions.subusers.appendSubuser);
const { clearFlashes, clearAndAddHttpError } = useStoreActions((actions: Actions<ApplicationStore>) => actions.flashes);
const { dismiss, toggleSpinner } = useContext(ModalContext);
const { dismiss, setPropOverrides } = useContext(ModalContext);
const isRootAdmin = useStoreState(state => state.user.data!.rootAdmin);
const permissions = useStoreState(state => state.permissions.data);
@ -56,7 +56,7 @@ const EditSubuserModal = ({ subuser }: Props) => {
}, [ isRootAdmin, permissions, loggedInPermissions ]);
const submit = (values: Values) => {
toggleSpinner(true);
setPropOverrides({ showSpinnerOverlay: true });
clearFlashes('user:edit');
createOrUpdateSubuser(uuid, values, subuser)
@ -66,7 +66,7 @@ const EditSubuserModal = ({ subuser }: Props) => {
})
.catch(error => {
console.error(error);
toggleSpinner(false);
setPropOverrides(null);
clearAndAddHttpError({ key: 'user:edit', error });
if (ref.current) {

5
resources/scripts/context/ModalContext.ts
View file

@ -1,13 +1,14 @@
import React from 'react';
import { SettableModalProps } from '@/hoc/asModal';
export interface ModalContextValues {
dismiss: () => void;
toggleSpinner: (visible?: boolean) => void;
setPropOverrides: (value: ((current: Readonly<Partial<SettableModalProps>>) => Partial<SettableModalProps>) | Partial<SettableModalProps> | null) => void;
}
const ModalContext = React.createContext<ModalContextValues>({
dismiss: () => null,
toggleSpinner: () => null,
setPropOverrides: () => null,
});
ModalContext.displayName = 'ModalContext';

37
resources/scripts/hoc/asModal.tsx
View file

@ -1,24 +1,25 @@
import React from 'react';
import PortaledModal, { ModalProps } from '@/components/elements/Modal';
import ModalContext from '@/context/ModalContext';
import ModalContext, { ModalContextValues } from '@/context/ModalContext';
export interface AsModalProps {
visible: boolean;
onModalDismissed?: () => void;
}
type ExtendedModalProps = Omit<ModalProps, 'appear' | 'visible' | 'onDismissed'>;
export type SettableModalProps = Omit<ModalProps, 'appear' | 'visible' | 'onDismissed'>;
interface State {
render: boolean;
visible: boolean;
showSpinnerOverlay?: boolean;
propOverrides: Partial<SettableModalProps>;
}
type ExtendedComponentType<T> = (C: React.ComponentType<T>) => React.ComponentType<T & AsModalProps>;
// eslint-disable-next-line @typescript-eslint/ban-types
function asModal<P extends object> (modalProps?: ExtendedModalProps | ((props: P) => ExtendedModalProps)): ExtendedComponentType<P> {
function asModal<P extends {}> (modalProps?: SettableModalProps | ((props: P) => SettableModalProps)): ExtendedComponentType<P> {
return function (Component) {
return class extends React.PureComponent <P & AsModalProps, State> {
static displayName = `asModal(${Component.displayName})`;
@ -30,54 +31,64 @@ function asModal<P extends object> (modalProps?: ExtendedModalProps | ((props: P
render: props.visible,
visible: props.visible,
showSpinnerOverlay: undefined,
propOverrides: {},
};
}
get modalProps () {
get computedModalProps (): Readonly<SettableModalProps & { visible: boolean }> {
return {
...(typeof modalProps === 'function' ? modalProps(this.props) : modalProps),
showSpinnerOverlay: this.state.showSpinnerOverlay,
...this.state.propOverrides,
visible: this.state.visible,
};
}
/**
* @this {React.PureComponent<P & AsModalProps, State>}
*/
componentDidUpdate (prevProps: Readonly<P & AsModalProps>) {
if (prevProps.visible && !this.props.visible) {
// noinspection JSPotentiallyInvalidUsageOfThis
this.setState({ visible: false, showSpinnerOverlay: false });
} else if (!prevProps.visible && this.props.visible) {
// noinspection JSPotentiallyInvalidUsageOfThis
this.setState({ render: true, visible: true });
}
if (!this.state.render) {
this.setState({ propOverrides: {} });
}
}
dismiss = () => this.setState({ visible: false });
toggleSpinner = (value?: boolean) => this.setState({ showSpinnerOverlay: value });
setPropOverrides: ModalContextValues['setPropOverrides'] = value => this.setState(state => ({
propOverrides: !value ? {} : (typeof value === 'function' ? value(state.propOverrides) : value),
}));
/**
* @this {React.PureComponent<P & AsModalProps, State>}
*/
render () {
if (!this.state.render) return null;
return (
this.state.render ?
<PortaledModal
appear
visible={this.state.visible}
onDismissed={() => this.setState({ render: false }, () => {
if (typeof this.props.onModalDismissed === 'function') {
this.props.onModalDismissed();
}
})}
{...this.modalProps}
{...this.computedModalProps}
>
<ModalContext.Provider
value={{
dismiss: this.dismiss.bind(this),
toggleSpinner: this.toggleSpinner.bind(this),
setPropOverrides: this.setPropOverrides.bind(this),
}}
>
<Component {...this.props}/>
</ModalContext.Provider>
</PortaledModal>
:
null
);
}
};

5
resources/scripts/routers/ServerRouter.tsx
View file

@ -9,7 +9,6 @@ import { ServerContext } from '@/state/server';
import DatabasesContainer from '@/components/server/databases/DatabasesContainer';
import FileManagerContainer from '@/components/server/files/FileManagerContainer';
import { CSSTransition } from 'react-transition-group';
import SuspenseSpinner from '@/components/elements/SuspenseSpinner';
import FileEditContainer from '@/components/server/files/FileEditContainer';
import SettingsContainer from '@/components/server/settings/SettingsContainer';
import ScheduleContainer from '@/components/server/schedules/ScheduleContainer';
@ -151,9 +150,9 @@ const ServerRouter = ({ match, location }: RouteComponentProps<{ id: string }>)
</RequireServerPermission>
</Route>
<Route path={`${match.path}/files/:action(edit|new)`} exact>
<SuspenseSpinner>
<Spinner.Suspense>
<FileEditContainer/>
</SuspenseSpinner>
</Spinner.Suspense>
</Route>
<Route path={`${match.path}/databases`} exact>
<RequireServerPermission permissions={'database.*'}>

16
yarn.lock
View file

@ -5810,7 +5810,7 @@ promise-inflight@^1.0.1:
version "1.0.1"
resolved "https://registry.yarnpkg.com/promise-inflight/-/promise-inflight-1.0.1.tgz#98472870bf228132fcbdd868129bad12c3c029e3"
prop-types@^15.5.0, prop-types@^15.5.8, prop-types@^15.6.1, prop-types@^15.6.2, prop-types@^15.7.2:
prop-types@^15.5.0, prop-types@^15.5.8, prop-types@^15.6.0, prop-types@^15.6.1, prop-types@^15.6.2, prop-types@^15.7.2:
version "15.7.2"
resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.7.2.tgz#52c41e75b8c87e72b9d9360e0206b99dcbffa6c5"
integrity sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ==
@ -5889,6 +5889,20 @@ purgecss@^3.1.3:
postcss "^8.2.1"
postcss-selector-parser "^6.0.2"
qr.js@0.0.0:
version "0.0.0"
resolved "https://registry.yarnpkg.com/qr.js/-/qr.js-0.0.0.tgz#cace86386f59a0db8050fa90d9b6b0e88a1e364f"
integrity sha1-ys6GOG9ZoNuAUPqQ2baw6IoeNk8=
qrcode.react@^1.0.1:
version "1.0.1"
resolved "https://registry.yarnpkg.com/qrcode.react/-/qrcode.react-1.0.1.tgz#2834bb50e5e275ffe5af6906eff15391fe9e38a5"
integrity sha512-8d3Tackk8IRLXTo67Y+c1rpaiXjoz/Dd2HpcMdW//62/x8J1Nbho14Kh8x974t9prsLHN6XqVgcnRiBGFptQmg==
dependencies:
loose-envify "^1.4.0"
prop-types "^15.6.0"
qr.js "0.0.0"
qs@6.7.0:
version "6.7.0"
resolved "https://registry.yarnpkg.com/qs/-/qs-6.7.0.tgz#41dc1a015e3d581f1621776be31afb2876a9b1bc"