feat: allow enterprise to disable password based login (#629)

Co-authored-by: Fredrik Strand Oseberg <fredrik.no@gmail.com>

frontend/src/component/admin/auth/PasswordAuthSettings.tsx

@@ -0,0 +1,107 @@
+import React, { useState, useContext, useEffect } from 'react';
+import {
+    Button,
+    FormControlLabel,
+    Grid,
+    Switch,
+} from '@material-ui/core';
+import { Alert } from '@material-ui/lab';
+import PageContent from '../../common/PageContent/PageContent';
+import AccessContext from '../../../contexts/AccessContext';
+import { ADMIN } from '../../providers/AccessProvider/permissions';
+import useAuthSettings from '../../../hooks/api/getters/useAuthSettings/useAuthSettings';
+import useAuthSettingsApi, {ISimpleAuthSettings } from '../../../hooks/api/actions/useAuthSettingsApi/useAuthSettingsApi';
+import useToast from '../../../hooks/useToast';
+
+const PasswordAuthSettings = () => {
+
+    const { setToastData } = useToast();
+    const { config } = useAuthSettings('simple');
+    const [disablePasswordAuth, setDisablePasswordAuth] = useState<boolean>(false);
+    const { updateSettings, errors, loading } = useAuthSettingsApi<ISimpleAuthSettings>('simple')
+    const { hasAccess } = useContext(AccessContext);
+
+
+    useEffect(() => {
+        setDisablePasswordAuth(!!config.disabled);
+    }, [ config.disabled ]);
+
+    if (!hasAccess(ADMIN)) {
+        return (
+            <Alert severity="error">
+                You need to be a root admin to access this section.
+            </Alert>
+        );
+    }
+
+    const updateDisabled = () => {
+        setDisablePasswordAuth(!disablePasswordAuth);
+    };
+
+    
+    const onSubmit = async evt => {
+        evt.preventDefault();
+        
+        try {
+            const settings: ISimpleAuthSettings = { disabled: disablePasswordAuth };
+            await updateSettings(settings);
+            setToastData({
+                title: 'Successfully saved',
+                text: 'Password authentication settings stored.',
+                autoHideDuration: 4000,
+                type: 'success',
+                show: true,
+            });
+        } catch (err: any) {
+            setToastData({
+                title: 'Could not store settings',
+                text: err?.message,
+                autoHideDuration: 4000,
+                type: 'error',
+                show: true,
+            });
+            setDisablePasswordAuth(config.disabled)
+        }
+        
+    };
+    return (
+        <PageContent headerContent=''>
+            <form onSubmit={onSubmit}>
+                <Grid container spacing={3}>
+                    <Grid item md={5}>
+                        <strong>Password based login</strong>
+                        <p>Allow users to login with username & password</p>
+                    </Grid>
+                    <Grid item md={6} style={{ padding: '20px' }}>
+                        <FormControlLabel
+                            control={
+                                <Switch
+                                    onChange={updateDisabled}
+                                    value={!disablePasswordAuth}
+                                    name="disabled"
+                                    checked={!disablePasswordAuth}
+                                />
+                            }
+                            label={!disablePasswordAuth ? 'Enabled' : 'Disabled'}
+                        />
+                    </Grid>
+                </Grid>
+                <Grid container spacing={3}>
+                    <Grid item md={12}>
+                        <Button
+                            variant="contained"
+                            color="primary"
+                            type="submit"
+                            disabled={loading}
+                        >
+                            Save
+                        </Button>{' '}
+                        <p><small style={{ color: 'red' }}>{errors?.message}</small></p>
+                    </Grid>
+                </Grid>
+            </form>
+        </PageContent>
+    );
+}
+
+export default PasswordAuthSettings;

frontend/src/component/admin/auth/authentication.jsx

@@ -5,6 +5,7 @@ import { Alert } from '@material-ui/lab';
 import GoogleAuth from './google-auth-container';
 import SamlAuth from './saml-auth-container';
 import OidcAuth from './oidc-auth-container';
+import PasswordAuthSettings from './PasswordAuthSettings';
 import TabNav from '../../common/TabNav/TabNav';
 import PageContent from '../../common/PageContent/PageContent';
 import ConditionallyRender from '../../common/ConditionallyRender/ConditionallyRender';
@@ -19,6 +20,10 @@ function AdminAuthPage({ authenticationType, history }) {
             label: 'SAML 2.0',
             component: <SamlAuth />,
         },
+        {
+            label: 'Password',
+            component: <PasswordAuthSettings />
+        },
         {
             label: 'Google',
             component: <GoogleAuth />,

frontend/src/component/user/Authentication/Authentication.tsx

@@ -47,7 +47,7 @@ const Authentication = ({
                     history={history}
                 />
                 <ConditionallyRender
-                    condition={!authDetails.disableDefault}
+                    condition={!authDetails.defaultHidden}
                     show={<SecondaryLoginActions />}
                 />
             </>
@@ -77,7 +77,7 @@ const Authentication = ({
                     history={history}
                 />
                 <ConditionallyRender
-                    condition={!authDetails.disableDefault}
+                    condition={!authDetails.defaultHidden}
                     show={<SecondaryLoginActions />}
                 />
             </>

frontend/src/component/user/HostedAuth/HostedAuth.jsx

@@ -84,7 +84,7 @@ const HostedAuth = ({ authDetails, passwordLogin }) => {
             />
 
             <ConditionallyRender
-                condition={!authDetails.disableDefault}
+                condition={!authDetails.defaultHidden}
                 show={
                     <form onSubmit={handleSubmit} action={authDetails.path}>
                         <Typography

frontend/src/component/user/PasswordAuth/PasswordAuth.jsx

@@ -83,7 +83,7 @@ const PasswordAuth = ({ authDetails, passwordLogin }) => {
 
         return (
             <ConditionallyRender
-                condition={!authDetails.disableDefault}
+                condition={!authDetails.defaultHidden}
                 show={
                     <form onSubmit={handleSubmit} action={authDetails.path}>
                         <ConditionallyRender
@@ -146,7 +146,10 @@ const PasswordAuth = ({ authDetails, passwordLogin }) => {
     const renderWithOptions = options => (
         <>
             <AuthOptions options={options} />
-            <DividerText text="Or signin with username" />
+            <ConditionallyRender
+                condition={!authDetails.defaultHidden}
+                show={<DividerText text="Or sign in with username" />}
+            />
             {renderLoginForm()}
         </>
     );

frontend/src/component/user/UserProfile/UserProfileContent/UserProfileContent.jsx

@@ -16,6 +16,7 @@ import { Alert } from '@material-ui/lab';
 import EditProfile from '../EditProfile/EditProfile';
 import legacyStyles from '../../user.module.scss';
 import { getBasePath } from '../../../../utils/format-path';
+import useUiConfig from '../../../../hooks/api/getters/useUiConfig/useUiConfig';
 
 const UserProfileContent = ({
     showProfile,
@@ -27,6 +28,7 @@ const UserProfileContent = ({
     setCurrentLocale,
 }) => {
     const commonStyles = useCommonStyles();
+    const { uiConfig } = useUiConfig();
     const [updatedPassword, setUpdatedPassword] = useState(false);
     const [edititingProfile, setEditingProfile] = useState(false);
     const styles = useStyles();
@@ -81,12 +83,14 @@ const UserProfileContent = ({
                         condition={!edititingProfile}
                         show={
                             <>
+                                <ConditionallyRender condition={!uiConfig.disablePasswordAuth} show={
                                     <Button
                                         variant="contained"
                                         onClick={() => setEditingProfile(true)}
                                     >
                                         Update password
                                     </Button>
+                                } />
                                 <div className={commonStyles.divider} />
                                 <div className={legacyStyles.showUserSettings}>
                                     <FormControl

frontend/src/hooks/api/actions/useAuthSettingsApi/useAuthSettingsApi.ts

@@ -0,0 +1,46 @@
+import { Dispatch, SetStateAction } from 'react';
+import useAPI from '../useApi/useApi';
+
+export interface ISimpleAuthSettings {
+    disabled: boolean;
+}
+
+export const handleBadRequest = async (
+    setErrors?: Dispatch<SetStateAction<{}>>,
+    res?: Response,
+) => {
+    if (!setErrors) return;
+    if (res) {
+        const data = await res.json();
+
+        setErrors({message: data.message});
+        throw new Error(data.message);
+    }
+
+    throw new Error();
+};
+
+const useAuthSettingsApi = <T>(id: string) => {
+    const { makeRequest, createRequest, errors, loading } = useAPI({
+        propagateErrors: true,
+        handleBadRequest,
+    });
+
+    const updateSettings = async (settings: T): Promise<void> => {
+        const path = `api/admin/auth/${id}/settings`;
+        const req = createRequest(path, {
+            method: 'POST',
+            body: JSON.stringify(settings),
+        });
+
+        try {
+            await makeRequest(req.caller, req.id);
+        } catch (e) {
+            throw e;
+        }
+    };
+
+    return { updateSettings, errors, loading };
+};
+
+export default useAuthSettingsApi;

frontend/src/hooks/api/getters/useAuthSettings/useAuthSettings.ts

@@ -0,0 +1,36 @@
+import useSWR, { mutate, SWRConfiguration } from 'swr';
+import { useState, useEffect } from 'react';
+import { formatApiPath } from '../../../../utils/format-path';
+import handleErrorResponses from '../httpErrorResponseHandler';
+
+const useAuthSettings = (id: string, options: SWRConfiguration = {}) => {
+    const fetcher = async () => {
+        const path = formatApiPath(`api/admin/auth/${id}/settings`);
+        const res = await fetch(path, {
+            method: 'GET',
+        }).then(handleErrorResponses('Auth settings'));
+        return res.json();
+    };
+
+    const KEY = `api/admin/auth/${id}/settings`;
+
+    const { data, error } = useSWR(KEY, fetcher, options);
+    const [loading, setLoading] = useState(!error && !data);
+
+    const refetch = () => {
+        mutate(KEY);
+    };
+
+    useEffect(() => {
+        setLoading(!error && !data);
+    }, [data, error]);
+
+    return {
+        config: data || {},
+        error,
+        loading,
+        refetch,
+    };
+};
+
+export default useAuthSettings;