Cleanup logic for asModal to make it a little easier to use dynamically
This commit is contained in:
Dane Everitt
parent
69ac2ca40b
commit
6b16b9bc2a
12 changed files with 210 additions and 203 deletions
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -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)}
|
||||
/>
|
||||
}
|
||||
{visible && (
|
||||
isEnabled ?
|
||||
<DisableTwoFactorModal visible={visible} onModalDismissed={() => setVisible(false)}/>
|
||||
:
|
||||
<SetupTwoFactorModal visible={visible} onModalDismissed={() => setVisible(false)}/>
|
||||
)}
|
||||
<p css={tw`text-sm`}>
|
||||
Two-factor authentication is currently enabled on your account.
|
||||
{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={'red'}
|
||||
isSecondary
|
||||
onClick={() => setVisible(true)}
|
||||
>
|
||||
Disable
|
||||
<Button color={'red'} isSecondary onClick={() => setVisible(true)}>
|
||||
{isEnabled ? 'Disable' : 'Enable'}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
:
|
||||
<div>
|
||||
{visible &&
|
||||
<SetupTwoFactorModal
|
||||
appear
|
||||
visible={visible}
|
||||
onDismissed={() => 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.
|
||||
</p>
|
||||
<div css={tw`mt-6`}>
|
||||
<Button
|
||||
color={'green'}
|
||||
isSecondary
|
||||
onClick={() => setVisible(true)}
|
||||
>
|
||||
Begin Setup
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
;
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -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,29 +46,26 @@ 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}>
|
||||
<Form className={'mb-0'}>
|
||||
<FlashMessageRender css={tw`mb-6`} byKey={'account:two-factor'}/>
|
||||
<Field
|
||||
id={'password'}
|
||||
name={'password'}
|
||||
type={'password'}
|
||||
label={'Current Password'}
|
||||
description={'In order to disable two-factor authentication you will need to provide your account password.'}
|
||||
autoFocus
|
||||
/>
|
||||
<div css={tw`mt-6 text-right`}>
|
||||
<Button
|
||||
color={'red'}
|
||||
disabled={!isValid}
|
||||
>
|
||||
Disable Two-Factor
|
||||
</Button>
|
||||
</div>
|
||||
</Form>
|
||||
</Modal>
|
||||
{({ isValid }) => (
|
||||
<Form className={'mb-0'}>
|
||||
<FlashMessageRender css={tw`mb-6`} byKey={'account:two-factor'}/>
|
||||
<Field
|
||||
id={'password'}
|
||||
name={'password'}
|
||||
type={'password'}
|
||||
label={'Current Password'}
|
||||
description={'In order to disable two-factor authentication you will need to provide your account password.'}
|
||||
autoFocus
|
||||
/>
|
||||
<div css={tw`mt-6 text-right`}>
|
||||
<Button color={'red'} disabled={!isValid}>
|
||||
Disable Two-Factor
|
||||
</Button>
|
||||
</div>
|
||||
</Form>
|
||||
)}
|
||||
</Formik>
|
||||
);
|
||||
};
|
||||
|
||||
export default asModal()(DisableTwoFactorModal);
|
||||
|
|
|
|||
|
|
@ -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 = () => {
|
||||
if (recoveryTokens.length > 0) {
|
||||
updateUserData({ useTotp: true });
|
||||
}
|
||||
useEffect(() => {
|
||||
setPropOverrides(state => ({
|
||||
...state,
|
||||
closeOnEscape: !recoveryTokens.length,
|
||||
closeOnBackground: !recoveryTokens.length,
|
||||
}));
|
||||
|
||||
onDismissed();
|
||||
};
|
||||
return () => {
|
||||
if (recoveryTokens.length > 0) {
|
||||
updateUserData({ useTotp: true });
|
||||
}
|
||||
};
|
||||
}, [ recoveryTokens ]);
|
||||
|
||||
return (
|
||||
<Formik
|
||||
|
|
@ -63,79 +75,69 @@ export default ({ onDismissed, ...props }: RequiredModalProps) => {
|
|||
.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 ?
|
||||
<>
|
||||
<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 loose access to
|
||||
this device you'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.
|
||||
</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>)}
|
||||
</pre>
|
||||
<div css={tw`text-right`}>
|
||||
<Button css={tw`mt-6`} onClick={dismiss}>
|
||||
Close
|
||||
{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 loose access to
|
||||
this device you'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.
|
||||
</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>)}
|
||||
</pre>
|
||||
<div css={tw`text-right`}>
|
||||
<Button css={tw`mt-6`} onClick={dismiss}>
|
||||
Close
|
||||
</Button>
|
||||
</div>
|
||||
</>
|
||||
:
|
||||
<Form css={tw`mb-0`}>
|
||||
<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.length ?
|
||||
<img
|
||||
src={'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII='}
|
||||
css={tw`w-64 h-64 rounded`}
|
||||
/>
|
||||
:
|
||||
<img
|
||||
src={`https://api.qrserver.com/v1/create-qr-code/?size=500x500&data=${token}`}
|
||||
onLoad={() => setLoading(false)}
|
||||
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`}>
|
||||
<div css={tw`flex-1`}>
|
||||
<Field
|
||||
id={'code'}
|
||||
name={'code'}
|
||||
type={'text'}
|
||||
title={'Code From Authenticator'}
|
||||
description={'Enter the code from your authenticator device after scanning the QR image.'}
|
||||
autoFocus={!loading}
|
||||
/>
|
||||
</div>
|
||||
<div css={tw`mt-6 md:mt-0 text-right`}>
|
||||
<Button>
|
||||
Setup
|
||||
</Button>
|
||||
</div>
|
||||
</>
|
||||
:
|
||||
<Form css={tw`mb-0`}>
|
||||
<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.length ?
|
||||
<img
|
||||
src={'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII='}
|
||||
css={tw`w-64 h-64 rounded`}
|
||||
/>
|
||||
:
|
||||
<img
|
||||
src={`https://api.qrserver.com/v1/create-qr-code/?size=500x500&data=${token}`}
|
||||
onLoad={() => setLoading(false)}
|
||||
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`}>
|
||||
<div css={tw`flex-1`}>
|
||||
<Field
|
||||
id={'code'}
|
||||
name={'code'}
|
||||
type={'text'}
|
||||
title={'Code From Authenticator'}
|
||||
description={'Enter the code from your authenticator device after scanning the QR image.'}
|
||||
autoFocus={!loading}
|
||||
/>
|
||||
</div>
|
||||
<div css={tw`mt-6 md:mt-0 text-right`}>
|
||||
<Button>
|
||||
Setup
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Form>
|
||||
}
|
||||
</Modal>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</Form>
|
||||
}
|
||||
</Formik>
|
||||
);
|
||||
};
|
||||
|
||||
export default asModal()(SetupTwoFactorModal);
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
@ -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/>
|
||||
|
|
|
|||
|
|
@ -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) {
|
||||
|
|
|
|||
|
|
@ -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';
|
||||
|
|
|
|||
|
|
@ -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}
|
||||
<PortaledModal
|
||||
appear
|
||||
onDismissed={() => this.setState({ render: false }, () => {
|
||||
if (typeof this.props.onModalDismissed === 'function') {
|
||||
this.props.onModalDismissed();
|
||||
}
|
||||
})}
|
||||
{...this.computedModalProps}
|
||||
>
|
||||
<ModalContext.Provider
|
||||
value={{
|
||||
dismiss: this.dismiss.bind(this),
|
||||
setPropOverrides: this.setPropOverrides.bind(this),
|
||||
}}
|
||||
>
|
||||
<ModalContext.Provider
|
||||
value={{
|
||||
dismiss: this.dismiss.bind(this),
|
||||
toggleSpinner: this.toggleSpinner.bind(this),
|
||||
}}
|
||||
>
|
||||
<Component {...this.props}/>
|
||||
</ModalContext.Provider>
|
||||
</PortaledModal>
|
||||
:
|
||||
null
|
||||
<Component {...this.props}/>
|
||||
</ModalContext.Provider>
|
||||
</PortaledModal>
|
||||
);
|
||||
}
|
||||
};
|
||||
|
|
|
|||
|
|
@ -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
16
yarn.lock
|
|
@ -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"
|
||||
|
|
|
|||
Loading…
Reference in a new issue