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

package.json

@@ -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",

resources/scripts/components/dashboard/forms/ConfigureTwoFactorForm.tsx

@@ -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 &&
+            {visible && (
-            <DisableTwoFactorModal
+                isEnabled ?
-                appear
+                    <DisableTwoFactorModal visible={visible} onModalDismissed={() => setVisible(false)}/>
-                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>
                     :
-        <div>
+                    <SetupTwoFactorModal visible={visible} onModalDismissed={() => setVisible(false)}/>
-            {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
+                {isEnabled ?
-                the button below to begin configuring it.
+                    '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
+                <Button color={'red'} isSecondary onClick={() => setVisible(true)}>
-                    color={'green'}
+                    {isEnabled ? 'Disable' : 'Enable'}
-                    isSecondary
-                    onClick={() => setVisible(true)}
-                >
-                    Begin Setup
                 </Button>
             </div>
         </div>
-    ;
+    );
 };

resources/scripts/components/dashboard/forms/DisableTwoFactorModal.tsx

@@ -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 }) => (
+            {({ isValid }) => (
-                <Modal {...props} dismissable={!isSubmitting} showSpinnerOverlay={isSubmitting}>
                 <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
+                        <Button color={'red'} disabled={!isValid}>
-                                color={'red'}
-                                disabled={!isValid}
-                            >
                             Disable Two-Factor
                         </Button>
                     </div>
                 </Form>
-                </Modal>
             )}
         </Formik>
     );
 };
+
+export default asModal()(DisableTwoFactorModal);

resources/scripts/components/dashboard/forms/SetupTwoFactorModal.tsx

@@ -1,5 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import React, { useContext, useEffect, useState } from 'react';
-import Modal, { RequiredModalProps } from '@/components/elements/Modal';
 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);

resources/scripts/components/elements/Spinner.tsx

@@ -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,
+    SMALL: 'small',
-    BASE: 'base' as SpinnerSize,
+    BASE: 'base',
-    LARGE: 'large' as SpinnerSize,
+    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;

resources/scripts/components/elements/SuspenseSpinner.tsx

@@ -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;

resources/scripts/components/server/ServerConsole.tsx

@@ -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/>

resources/scripts/components/server/users/EditSubuserModal.tsx

@@ -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) {

resources/scripts/context/ModalContext.ts

@@ -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';

resources/scripts/hoc/asModal.tsx

@@ -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
                 );
             }
         };

resources/scripts/routers/ServerRouter.tsx

@@ -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.*'}>

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"