diff --git a/src/WrapperApp/components/Login/LoginPanel.tsx b/src/WrapperApp/components/Login/LoginPanel.tsx index 31416ce64..2c5f2f6bf 100644 --- a/src/WrapperApp/components/Login/LoginPanel.tsx +++ b/src/WrapperApp/components/Login/LoginPanel.tsx @@ -9,12 +9,14 @@ import NamePasswordLoginPanel from './NamePasswordLoginPanel'; export default function LoginPanel() { const theme = useTheme(); - const { altAuth } = useConfig(); - const { localUsersEnabled } = useAuth(); + const { plgridAuthEnabled } = useConfig(); + const { localUsersAvailability } = useAuth(); const { keycloak, initialized } = useKeycloakAuth(); - const [namePasswordLoginSelected, setNamePasswordLoginSelected] = useState(!altAuth); + const [isPasswordLoginSelected, setIsPasswordLoginSelected] = useState(!plgridAuthEnabled); // on Keycloak-only deployments the backend rejects local users, so do not offer password login - const namePasswordLogin = namePasswordLoginSelected && (localUsersEnabled || !altAuth); + const isPasswordLoginAvailable = !plgridAuthEnabled || localUsersAvailability === 'enabled'; + + const showPasswordLoginForm = isPasswordLoginSelected && isPasswordLoginAvailable; const keycloakLogin = useCallback(() => { if (initialized && !keycloak.authenticated) keycloak.login(); @@ -39,7 +41,7 @@ export default function LoginPanel() { backgroundColor: theme.palette.accordion.main, gap: theme.spacing(1) }}> - {altAuth && !namePasswordLogin ? ( + {plgridAuthEnabled && !showPasswordLoginForm ? ( <> - {localUsersEnabled && ( + {isPasswordLoginAvailable && ( setNamePasswordLoginSelected(true)} + onClick={() => setIsPasswordLoginSelected(true)} sx={{ cursor: 'pointer' }}> use password login @@ -66,11 +68,11 @@ export default function LoginPanel() { ) : ( <> - {altAuth && ( + {plgridAuthEnabled && ( setNamePasswordLoginSelected(false)}> + onClick={() => setIsPasswordLoginSelected(false)}> diff --git a/src/config/ConfigService.tsx b/src/config/ConfigService.tsx index dd9b291ee..3d6268e2b 100644 --- a/src/config/ConfigService.tsx +++ b/src/config/ConfigService.tsx @@ -6,7 +6,7 @@ import { snakeToCamelCase } from '../util/Notation/Notation'; const BACKEND_URL = process.env.REACT_APP_BACKEND_URL ?? 'http://localhost:5000'; const DEMO_MODE = process.env.REACT_APP_TARGET === 'demo'; -const ALT_AUTH = process.env.REACT_APP_ALT_AUTH === 'plg'; +const PLGRID_AUTH_ENABLED = process.env.REACT_APP_ALT_AUTH === 'plg'; export const DEPLOYMENT = (process.env.REACT_APP_DEPLOYMENT as ConfigDeployment) ?? 'prod'; export type ConfigDeployment = 'dev' | 'prod' | undefined; @@ -17,7 +17,7 @@ interface Config { backendUrl: string; deployment: ConfigDeployment; demoMode: boolean; - altAuth: boolean; + plgridAuthEnabled: boolean; } declare global { @@ -36,7 +36,7 @@ const ConfigProvider = ({ children }: { children?: ReactNode }) => { backendUrl: BACKEND_URL, deployment: DEPLOYMENT, demoMode: DEMO_MODE, - altAuth: ALT_AUTH + plgridAuthEnabled: PLGRID_AUTH_ENABLED }); window.BACKEND_URL ??= BACKEND_URL; @@ -74,7 +74,7 @@ const ConfigProvider = ({ children }: { children?: ReactNode }) => { defineProperty('BACKEND_URL'); defineProperty('DEPLOYMENT', true); defineProperty('DEMO_MODE'); - defineProperty('ALT_AUTH'); + defineProperty('PLGRID_AUTH_ENABLED'); } }, [config]); diff --git a/src/services/AuthService.tsx b/src/services/AuthService.tsx index ccc4b7966..eeba53b62 100644 --- a/src/services/AuthService.tsx +++ b/src/services/AuthService.tsx @@ -62,12 +62,13 @@ const getRefreshDelay = (exp: number) => Math.max((exp - new Date().getTime()) / enum StorageKey { USER = 'editor.user' } +export type LocalUsersAvailability = 'unknown' | 'enabled' | 'disabled'; export interface AuthContext { user: AuthUser | null; isAuthorized: boolean; isServerReachable: boolean; - localUsersEnabled: boolean; + localUsersAvailability: LocalUsersAvailability; login: (...args: RequestAuthLogin) => void; logout: (...args: RequestAuthLogout) => void; refresh: (...args: RequestAuthRefresh) => void; @@ -85,7 +86,8 @@ const Auth = ({ children }: GenericContextProviderProps) => { const { keycloak, initialized } = useKeycloakAuth(); const [keyCloakInterval, setKeyCloakInterval] = useState(); const [isServerReachable, setIsServerReachable] = useState(null); - const [localUsersEnabled, setLocalUsersEnabled] = useState(true); + const [localUsersAvailability, setLocalUsersAvailability] = + useState('unknown'); const { enqueueSnackbar } = useSnackbar(); const { open: openRejectKeycloakUserDialog } = useDialog('rejectKeycloak'); const { open: openRejectKeycloakRefreshUserDialog } = useDialog('rejectKeycloakRefresh'); @@ -155,7 +157,13 @@ const Auth = ({ children }: GenericContextProviderProps) => { .get(``) .json() .then(r => { - setLocalUsersEnabled(r.localUsersEnabled ?? true); + setLocalUsersAvailability( + r.localUsersEnabled === undefined + ? 'enabled' + : r.localUsersEnabled + ? 'enabled' + : 'disabled' + ); return !!r.message; }) @@ -367,7 +375,7 @@ const Auth = ({ children }: GenericContextProviderProps) => { user, isAuthorized, isServerReachable: Boolean(isServerReachable), - localUsersEnabled, + localUsersAvailability, login, logout, authKy, diff --git a/src/services/KeycloakAuthService.tsx b/src/services/KeycloakAuthService.tsx index 9fe182b14..b8f0ad235 100644 --- a/src/services/KeycloakAuthService.tsx +++ b/src/services/KeycloakAuthService.tsx @@ -1,9 +1,9 @@ import Keycloak, { KeycloakInitOptions } from 'keycloak-js'; import React, { ReactNode, useCallback } from 'react'; -import KeycloakProvider from '../util/keycloak/KeycloakProvider'; -import { useKeycloak } from '../util/keycloak/useKeycloak'; import { useConfig } from '../config/ConfigService'; +import KeycloakProvider from '../util/keycloak/KeycloakProvider'; +import { useKeycloak } from '../util/keycloak/useKeycloak'; import { createSubstituteContext, GenericContextProviderProps } from './GenericContext'; const keycloakParams = { @@ -37,7 +37,7 @@ const [useKeycloakAuth, KeycloakAuthContextProvider] = createSubstituteContext(useKeycloak); const KeycloakAuth = ({ children }: GenericContextProviderProps) => { - const { altAuth } = useConfig(); + const { plgridAuthEnabled } = useConfig(); const proxyContextProvider = useCallback( (children: ReactNode) => ( { [] ); - return altAuth ? ( + return plgridAuthEnabled ? ( @@ -61,4 +61,4 @@ const KeycloakAuth = ({ children }: GenericContextProviderProps) => { ); }; -export { KeycloakAuth, useKeycloakAuth }; \ No newline at end of file +export { KeycloakAuth, useKeycloakAuth };