From 7ed1d770a8a0b6b5dfcc4276f9cba9aeac6af7b3 Mon Sep 17 00:00:00 2001 From: Christopher Kolstad Date: Tue, 16 Jul 2024 13:53:30 +0200 Subject: [PATCH] feat: make frontend aware that OIDC can be configured through env (#7597) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: Nuno Góis --- .../auth/AutoCreateForm/AutoCreateForm.tsx | 10 +++-- .../admin/auth/OidcAuth/OidcAuth.tsx | 39 ++++++++++++++++--- .../component/admin/auth/SsoGroupSettings.tsx | 10 +++-- frontend/src/interfaces/uiConfig.ts | 1 + 4 files changed, 48 insertions(+), 12 deletions(-) diff --git a/frontend/src/component/admin/auth/AutoCreateForm/AutoCreateForm.tsx b/frontend/src/component/admin/auth/AutoCreateForm/AutoCreateForm.tsx index 302d7df852..076804f5f5 100644 --- a/frontend/src/component/admin/auth/AutoCreateForm/AutoCreateForm.tsx +++ b/frontend/src/component/admin/auth/AutoCreateForm/AutoCreateForm.tsx @@ -23,12 +23,14 @@ interface IAutoCreateFormProps { value: string | boolean | number | undefined, ) => void; onUpdateRole: (role: IRole | null) => void; + disabled?: boolean; } export const AutoCreateForm = ({ data = { enabled: false, autoCreate: false }, setValue, onUpdateRole, + disabled = false, }: IAutoCreateFormProps) => { const { roles } = useRoles(); @@ -69,7 +71,7 @@ export const AutoCreateForm = ({ onChange={updateAutoCreate} name='enabled' checked={data.autoCreate} - disabled={!data.enabled} + disabled={!data.enabled || disabled} /> } label='Auto-create users' @@ -90,7 +92,9 @@ export const AutoCreateForm = ({ roles={roles} value={resolveRole(data)} setValue={onUpdateRole} - disabled={!data.autoCreate || !data.enabled} + disabled={ + !data.autoCreate || !data.enabled || disabled + } required hideDescription /> @@ -110,7 +114,7 @@ export const AutoCreateForm = ({ onChange={updateField} label='Email domains' name='emailDomains' - disabled={!data.autoCreate || !data.enabled} + disabled={!data.autoCreate || !data.enabled || disabled} required={Boolean(data.autoCreate)} value={data.emailDomains || ''} placeholder='@company.com, @anotherCompany.com' diff --git a/frontend/src/component/admin/auth/OidcAuth/OidcAuth.tsx b/frontend/src/component/admin/auth/OidcAuth/OidcAuth.tsx index de810d4afd..6ee0562356 100644 --- a/frontend/src/component/admin/auth/OidcAuth/OidcAuth.tsx +++ b/frontend/src/component/admin/auth/OidcAuth/OidcAuth.tsx @@ -21,6 +21,7 @@ import { formatUnknownError } from 'utils/formatUnknownError'; import { removeEmptyStringFields } from 'utils/removeEmptyStringFields'; import { SsoGroupSettings } from '../SsoGroupSettings'; import type { IRole } from 'interfaces/role'; +import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender'; const initialState = { enabled: false, @@ -45,6 +46,7 @@ type State = typeof initialState & { export const OidcAuth = () => { const { setToastData, setToastApiError } = useToast(); const { uiConfig } = useUiConfig(); + const { oidcConfiguredThroughEnv } = uiConfig; const [data, setData] = useState(initialState); const { config } = useAuthSettings('oidc'); const { updateSettings, errors, loading } = useAuthSettingsApi('oidc'); @@ -107,6 +109,24 @@ export const OidcAuth = () => { <> + + OIDC setup is currently controlled via + environment variables. Please see the{' '} + + documentation + {' '} + to learn how to set the correct environment + variables + + } + /> Please read the{' '} { /> } label={data.enabled ? 'Enabled' : 'Disabled'} + disabled={oidcConfiguredThroughEnv} /> @@ -154,7 +175,7 @@ export const OidcAuth = () => { label='Discover URL' name='discoverUrl' value={data.discoverUrl} - disabled={!data.enabled} + disabled={!data.enabled || oidcConfiguredThroughEnv} style={{ width: '400px' }} variant='outlined' size='small' @@ -172,7 +193,7 @@ export const OidcAuth = () => { label='Client ID' name='clientId' value={data.clientId} - disabled={!data.enabled} + disabled={!data.enabled || oidcConfiguredThroughEnv} style={{ width: '400px' }} variant='outlined' size='small' @@ -193,7 +214,7 @@ export const OidcAuth = () => { label='Client Secret' name='secret' value={data.secret} - disabled={!data.enabled} + disabled={!data.enabled || oidcConfiguredThroughEnv} style={{ width: '400px' }} variant='outlined' size='small' @@ -216,7 +237,10 @@ export const OidcAuth = () => { @@ -247,7 +271,7 @@ export const OidcAuth = () => { label='ACR Values' name='acrValues' value={data.acrValues} - disabled={!data.enabled} + disabled={!data.enabled || oidcConfiguredThroughEnv} style={{ width: '400px' }} variant='outlined' size='small' @@ -258,12 +282,14 @@ export const OidcAuth = () => { ssoType='OIDC' data={data} setValue={setValue} + disabled={oidcConfiguredThroughEnv} /> @@ -292,6 +318,7 @@ export const OidcAuth = () => { e.target.value, ) } + disabled={oidcConfiguredThroughEnv} > {/*consider these from API or constants. */} RS256 @@ -308,7 +335,7 @@ export const OidcAuth = () => { variant='contained' color='primary' type='submit' - disabled={loading} + disabled={loading || oidcConfiguredThroughEnv} > Save {' '} diff --git a/frontend/src/component/admin/auth/SsoGroupSettings.tsx b/frontend/src/component/admin/auth/SsoGroupSettings.tsx index daab6f6a28..140ee0fe41 100644 --- a/frontend/src/component/admin/auth/SsoGroupSettings.tsx +++ b/frontend/src/component/admin/auth/SsoGroupSettings.tsx @@ -11,6 +11,7 @@ interface SsoGroupSettingsProps { addGroupsScope: boolean; }; setValue: (name: string, value: string | boolean) => void; + disabled?: boolean; } export const SsoGroupSettings = ({ @@ -22,6 +23,7 @@ export const SsoGroupSettings = ({ addGroupsScope: false, }, setValue, + disabled = false, }: SsoGroupSettingsProps) => { const updateGroupSyncing = () => { setValue('enableGroupSyncing', !data.enableGroupSyncing); @@ -53,7 +55,7 @@ export const SsoGroupSettings = ({ value={data.enableGroupSyncing} name='enableGroupSyncing' checked={data.enableGroupSyncing} - disabled={!data.enabled} + disabled={!data.enabled || disabled} /> } label={data.enableGroupSyncing ? 'Enabled' : 'Disabled'} @@ -74,7 +76,7 @@ export const SsoGroupSettings = ({ label='Group JSON Path' name='groupJsonPath' value={data.groupJsonPath} - disabled={!data.enableGroupSyncing} + disabled={!data.enableGroupSyncing || disabled} style={{ width: '400px' }} variant='outlined' size='small' @@ -99,7 +101,9 @@ export const SsoGroupSettings = ({ diff --git a/frontend/src/interfaces/uiConfig.ts b/frontend/src/interfaces/uiConfig.ts index f3154381bf..4c91256200 100644 --- a/frontend/src/interfaces/uiConfig.ts +++ b/frontend/src/interfaces/uiConfig.ts @@ -30,6 +30,7 @@ export interface IUiConfig { strategySegmentsLimit?: number; frontendApiOrigins?: string[]; resourceLimits: ResourceLimitsSchema; + oidcConfiguredThroughEnv?: boolean; } export interface IProclamationToast {