2427 clarify keycloak only login visibility

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 ? (
 					<>
 						<Button
 							fullWidth
@@ -55,22 +57,22 @@ export default function LoginPanel() {
 							}}>
 							Connect with PLGrid
 						</Button>
-						{localUsersEnabled && (
+						{isPasswordLoginAvailable && (
 							<Link
 								color='textDisabled'
-								onClick={() => setNamePasswordLoginSelected(true)}
+								onClick={() => setIsPasswordLoginSelected(true)}
 								sx={{ cursor: 'pointer' }}>
 								use password login
 							</Link>
 						)}
 					</>
 				) : (
 					<>
-						{altAuth && (
+						{plgridAuthEnabled && (
 							<Box sx={{ width: '100%' }}>
 								<IconButton
 									size='small'
-									onClick={() => setNamePasswordLoginSelected(false)}>
+									onClick={() => setIsPasswordLoginSelected(false)}>
 									<ArrowBack />
 								</IconButton>
 							</Box>

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]);
 

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<number>();
 	const [isServerReachable, setIsServerReachable] = useState<boolean | null>(null);
-	const [localUsersEnabled, setLocalUsersEnabled] = useState(true);
+	const [localUsersAvailability, setLocalUsersAvailability] =
+		useState<LocalUsersAvailability>('unknown');
 	const { enqueueSnackbar } = useSnackbar();
 	const { open: openRejectKeycloakUserDialog } = useDialog('rejectKeycloak');
 	const { open: openRejectKeycloakRefreshUserDialog } = useDialog('rejectKeycloakRefresh');
@@ -155,7 +157,13 @@ const Auth = ({ children }: GenericContextProviderProps) => {
 			.get(``)
 			.json<ResponseRoot>()
 			.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,

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<KeycloakAuthContext>(useKeycloak);
 
 const KeycloakAuth = ({ children }: GenericContextProviderProps) => {
-	const { altAuth } = useConfig();
+	const { plgridAuthEnabled } = useConfig();
 	const proxyContextProvider = useCallback(
 		(children: ReactNode) => (
 			<KeycloakAuthContextProvider
@@ -50,7 +50,7 @@ const KeycloakAuth = ({ children }: GenericContextProviderProps) => {
 		[]
 	);
 
-	return altAuth ? (
+	return plgridAuthEnabled ? (
 		<KeycloakProvider
 			client={authInstance}
 			initOptions={initOptions}>
@@ -61,4 +61,4 @@ const KeycloakAuth = ({ children }: GenericContextProviderProps) => {
 	);
 };
 
-export { KeycloakAuth, useKeycloakAuth };
+export { KeycloakAuth, useKeycloakAuth };