mirror of
https://github.com/Unleash/unleash.git
synced 2025-09-15 17:50:48 +02:00
feat: make frontend aware that OIDC can be configured through env (#7597)
Co-authored-by: Nuno Góis <github@nunogois.com>
This commit is contained in:
parent
e43109a2cb
commit
7ed1d770a8
@ -23,12 +23,14 @@ interface IAutoCreateFormProps {
|
|||||||
value: string | boolean | number | undefined,
|
value: string | boolean | number | undefined,
|
||||||
) => void;
|
) => void;
|
||||||
onUpdateRole: (role: IRole | null) => void;
|
onUpdateRole: (role: IRole | null) => void;
|
||||||
|
disabled?: boolean;
|
||||||
}
|
}
|
||||||
|
|
||||||
export const AutoCreateForm = ({
|
export const AutoCreateForm = ({
|
||||||
data = { enabled: false, autoCreate: false },
|
data = { enabled: false, autoCreate: false },
|
||||||
setValue,
|
setValue,
|
||||||
onUpdateRole,
|
onUpdateRole,
|
||||||
|
disabled = false,
|
||||||
}: IAutoCreateFormProps) => {
|
}: IAutoCreateFormProps) => {
|
||||||
const { roles } = useRoles();
|
const { roles } = useRoles();
|
||||||
|
|
||||||
@ -69,7 +71,7 @@ export const AutoCreateForm = ({
|
|||||||
onChange={updateAutoCreate}
|
onChange={updateAutoCreate}
|
||||||
name='enabled'
|
name='enabled'
|
||||||
checked={data.autoCreate}
|
checked={data.autoCreate}
|
||||||
disabled={!data.enabled}
|
disabled={!data.enabled || disabled}
|
||||||
/>
|
/>
|
||||||
}
|
}
|
||||||
label='Auto-create users'
|
label='Auto-create users'
|
||||||
@ -90,7 +92,9 @@ export const AutoCreateForm = ({
|
|||||||
roles={roles}
|
roles={roles}
|
||||||
value={resolveRole(data)}
|
value={resolveRole(data)}
|
||||||
setValue={onUpdateRole}
|
setValue={onUpdateRole}
|
||||||
disabled={!data.autoCreate || !data.enabled}
|
disabled={
|
||||||
|
!data.autoCreate || !data.enabled || disabled
|
||||||
|
}
|
||||||
required
|
required
|
||||||
hideDescription
|
hideDescription
|
||||||
/>
|
/>
|
||||||
@ -110,7 +114,7 @@ export const AutoCreateForm = ({
|
|||||||
onChange={updateField}
|
onChange={updateField}
|
||||||
label='Email domains'
|
label='Email domains'
|
||||||
name='emailDomains'
|
name='emailDomains'
|
||||||
disabled={!data.autoCreate || !data.enabled}
|
disabled={!data.autoCreate || !data.enabled || disabled}
|
||||||
required={Boolean(data.autoCreate)}
|
required={Boolean(data.autoCreate)}
|
||||||
value={data.emailDomains || ''}
|
value={data.emailDomains || ''}
|
||||||
placeholder='@company.com, @anotherCompany.com'
|
placeholder='@company.com, @anotherCompany.com'
|
||||||
|
@ -21,6 +21,7 @@ import { formatUnknownError } from 'utils/formatUnknownError';
|
|||||||
import { removeEmptyStringFields } from 'utils/removeEmptyStringFields';
|
import { removeEmptyStringFields } from 'utils/removeEmptyStringFields';
|
||||||
import { SsoGroupSettings } from '../SsoGroupSettings';
|
import { SsoGroupSettings } from '../SsoGroupSettings';
|
||||||
import type { IRole } from 'interfaces/role';
|
import type { IRole } from 'interfaces/role';
|
||||||
|
import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
|
||||||
|
|
||||||
const initialState = {
|
const initialState = {
|
||||||
enabled: false,
|
enabled: false,
|
||||||
@ -45,6 +46,7 @@ type State = typeof initialState & {
|
|||||||
export const OidcAuth = () => {
|
export const OidcAuth = () => {
|
||||||
const { setToastData, setToastApiError } = useToast();
|
const { setToastData, setToastApiError } = useToast();
|
||||||
const { uiConfig } = useUiConfig();
|
const { uiConfig } = useUiConfig();
|
||||||
|
const { oidcConfiguredThroughEnv } = uiConfig;
|
||||||
const [data, setData] = useState<State>(initialState);
|
const [data, setData] = useState<State>(initialState);
|
||||||
const { config } = useAuthSettings('oidc');
|
const { config } = useAuthSettings('oidc');
|
||||||
const { updateSettings, errors, loading } = useAuthSettingsApi('oidc');
|
const { updateSettings, errors, loading } = useAuthSettingsApi('oidc');
|
||||||
@ -107,6 +109,24 @@ export const OidcAuth = () => {
|
|||||||
<>
|
<>
|
||||||
<Grid container sx={{ mb: 3 }}>
|
<Grid container sx={{ mb: 3 }}>
|
||||||
<Grid item md={12}>
|
<Grid item md={12}>
|
||||||
|
<ConditionallyRender
|
||||||
|
condition={Boolean(oidcConfiguredThroughEnv)}
|
||||||
|
show={
|
||||||
|
<Alert sx={{ mb: 2 }} severity='warning'>
|
||||||
|
OIDC setup is currently controlled via
|
||||||
|
environment variables. Please see the{' '}
|
||||||
|
<a
|
||||||
|
href='https://www.unleash-hosted.com/docs/enterprise-authentication'
|
||||||
|
target='_blank'
|
||||||
|
rel='noreferrer'
|
||||||
|
>
|
||||||
|
documentation
|
||||||
|
</a>{' '}
|
||||||
|
to learn how to set the correct environment
|
||||||
|
variables
|
||||||
|
</Alert>
|
||||||
|
}
|
||||||
|
/>
|
||||||
<Alert severity='info'>
|
<Alert severity='info'>
|
||||||
Please read the{' '}
|
Please read the{' '}
|
||||||
<a
|
<a
|
||||||
@ -140,6 +160,7 @@ export const OidcAuth = () => {
|
|||||||
/>
|
/>
|
||||||
}
|
}
|
||||||
label={data.enabled ? 'Enabled' : 'Disabled'}
|
label={data.enabled ? 'Enabled' : 'Disabled'}
|
||||||
|
disabled={oidcConfiguredThroughEnv}
|
||||||
/>
|
/>
|
||||||
</Grid>
|
</Grid>
|
||||||
</Grid>
|
</Grid>
|
||||||
@ -154,7 +175,7 @@ export const OidcAuth = () => {
|
|||||||
label='Discover URL'
|
label='Discover URL'
|
||||||
name='discoverUrl'
|
name='discoverUrl'
|
||||||
value={data.discoverUrl}
|
value={data.discoverUrl}
|
||||||
disabled={!data.enabled}
|
disabled={!data.enabled || oidcConfiguredThroughEnv}
|
||||||
style={{ width: '400px' }}
|
style={{ width: '400px' }}
|
||||||
variant='outlined'
|
variant='outlined'
|
||||||
size='small'
|
size='small'
|
||||||
@ -172,7 +193,7 @@ export const OidcAuth = () => {
|
|||||||
label='Client ID'
|
label='Client ID'
|
||||||
name='clientId'
|
name='clientId'
|
||||||
value={data.clientId}
|
value={data.clientId}
|
||||||
disabled={!data.enabled}
|
disabled={!data.enabled || oidcConfiguredThroughEnv}
|
||||||
style={{ width: '400px' }}
|
style={{ width: '400px' }}
|
||||||
variant='outlined'
|
variant='outlined'
|
||||||
size='small'
|
size='small'
|
||||||
@ -193,7 +214,7 @@ export const OidcAuth = () => {
|
|||||||
label='Client Secret'
|
label='Client Secret'
|
||||||
name='secret'
|
name='secret'
|
||||||
value={data.secret}
|
value={data.secret}
|
||||||
disabled={!data.enabled}
|
disabled={!data.enabled || oidcConfiguredThroughEnv}
|
||||||
style={{ width: '400px' }}
|
style={{ width: '400px' }}
|
||||||
variant='outlined'
|
variant='outlined'
|
||||||
size='small'
|
size='small'
|
||||||
@ -216,7 +237,10 @@ export const OidcAuth = () => {
|
|||||||
<Switch
|
<Switch
|
||||||
onChange={updateSingleSignOut}
|
onChange={updateSingleSignOut}
|
||||||
value={data.enableSingleSignOut}
|
value={data.enableSingleSignOut}
|
||||||
disabled={!data.enabled}
|
disabled={
|
||||||
|
!data.enabled ||
|
||||||
|
oidcConfiguredThroughEnv
|
||||||
|
}
|
||||||
name='enableSingleSignOut'
|
name='enableSingleSignOut'
|
||||||
checked={data.enableSingleSignOut}
|
checked={data.enableSingleSignOut}
|
||||||
/>
|
/>
|
||||||
@ -247,7 +271,7 @@ export const OidcAuth = () => {
|
|||||||
label='ACR Values'
|
label='ACR Values'
|
||||||
name='acrValues'
|
name='acrValues'
|
||||||
value={data.acrValues}
|
value={data.acrValues}
|
||||||
disabled={!data.enabled}
|
disabled={!data.enabled || oidcConfiguredThroughEnv}
|
||||||
style={{ width: '400px' }}
|
style={{ width: '400px' }}
|
||||||
variant='outlined'
|
variant='outlined'
|
||||||
size='small'
|
size='small'
|
||||||
@ -258,12 +282,14 @@ export const OidcAuth = () => {
|
|||||||
ssoType='OIDC'
|
ssoType='OIDC'
|
||||||
data={data}
|
data={data}
|
||||||
setValue={setValue}
|
setValue={setValue}
|
||||||
|
disabled={oidcConfiguredThroughEnv}
|
||||||
/>
|
/>
|
||||||
|
|
||||||
<AutoCreateForm
|
<AutoCreateForm
|
||||||
data={data}
|
data={data}
|
||||||
setValue={setValue}
|
setValue={setValue}
|
||||||
onUpdateRole={onUpdateRole}
|
onUpdateRole={onUpdateRole}
|
||||||
|
disabled={oidcConfiguredThroughEnv}
|
||||||
/>
|
/>
|
||||||
<Grid container spacing={3} mb={2}>
|
<Grid container spacing={3} mb={2}>
|
||||||
<Grid item md={5}>
|
<Grid item md={5}>
|
||||||
@ -292,6 +318,7 @@ export const OidcAuth = () => {
|
|||||||
e.target.value,
|
e.target.value,
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
disabled={oidcConfiguredThroughEnv}
|
||||||
>
|
>
|
||||||
{/*consider these from API or constants. */}
|
{/*consider these from API or constants. */}
|
||||||
<MenuItem value='RS256'>RS256</MenuItem>
|
<MenuItem value='RS256'>RS256</MenuItem>
|
||||||
@ -308,7 +335,7 @@ export const OidcAuth = () => {
|
|||||||
variant='contained'
|
variant='contained'
|
||||||
color='primary'
|
color='primary'
|
||||||
type='submit'
|
type='submit'
|
||||||
disabled={loading}
|
disabled={loading || oidcConfiguredThroughEnv}
|
||||||
>
|
>
|
||||||
Save
|
Save
|
||||||
</Button>{' '}
|
</Button>{' '}
|
||||||
|
@ -11,6 +11,7 @@ interface SsoGroupSettingsProps {
|
|||||||
addGroupsScope: boolean;
|
addGroupsScope: boolean;
|
||||||
};
|
};
|
||||||
setValue: (name: string, value: string | boolean) => void;
|
setValue: (name: string, value: string | boolean) => void;
|
||||||
|
disabled?: boolean;
|
||||||
}
|
}
|
||||||
|
|
||||||
export const SsoGroupSettings = ({
|
export const SsoGroupSettings = ({
|
||||||
@ -22,6 +23,7 @@ export const SsoGroupSettings = ({
|
|||||||
addGroupsScope: false,
|
addGroupsScope: false,
|
||||||
},
|
},
|
||||||
setValue,
|
setValue,
|
||||||
|
disabled = false,
|
||||||
}: SsoGroupSettingsProps) => {
|
}: SsoGroupSettingsProps) => {
|
||||||
const updateGroupSyncing = () => {
|
const updateGroupSyncing = () => {
|
||||||
setValue('enableGroupSyncing', !data.enableGroupSyncing);
|
setValue('enableGroupSyncing', !data.enableGroupSyncing);
|
||||||
@ -53,7 +55,7 @@ export const SsoGroupSettings = ({
|
|||||||
value={data.enableGroupSyncing}
|
value={data.enableGroupSyncing}
|
||||||
name='enableGroupSyncing'
|
name='enableGroupSyncing'
|
||||||
checked={data.enableGroupSyncing}
|
checked={data.enableGroupSyncing}
|
||||||
disabled={!data.enabled}
|
disabled={!data.enabled || disabled}
|
||||||
/>
|
/>
|
||||||
}
|
}
|
||||||
label={data.enableGroupSyncing ? 'Enabled' : 'Disabled'}
|
label={data.enableGroupSyncing ? 'Enabled' : 'Disabled'}
|
||||||
@ -74,7 +76,7 @@ export const SsoGroupSettings = ({
|
|||||||
label='Group JSON Path'
|
label='Group JSON Path'
|
||||||
name='groupJsonPath'
|
name='groupJsonPath'
|
||||||
value={data.groupJsonPath}
|
value={data.groupJsonPath}
|
||||||
disabled={!data.enableGroupSyncing}
|
disabled={!data.enableGroupSyncing || disabled}
|
||||||
style={{ width: '400px' }}
|
style={{ width: '400px' }}
|
||||||
variant='outlined'
|
variant='outlined'
|
||||||
size='small'
|
size='small'
|
||||||
@ -99,7 +101,9 @@ export const SsoGroupSettings = ({
|
|||||||
<Switch
|
<Switch
|
||||||
onChange={updateAddGroupScope}
|
onChange={updateAddGroupScope}
|
||||||
value={data.addGroupsScope}
|
value={data.addGroupsScope}
|
||||||
disabled={!data.enableGroupSyncing}
|
disabled={
|
||||||
|
!data.enableGroupSyncing || disabled
|
||||||
|
}
|
||||||
name='addGroupsScope'
|
name='addGroupsScope'
|
||||||
checked={data.addGroupsScope}
|
checked={data.addGroupsScope}
|
||||||
/>
|
/>
|
||||||
|
@ -30,6 +30,7 @@ export interface IUiConfig {
|
|||||||
strategySegmentsLimit?: number;
|
strategySegmentsLimit?: number;
|
||||||
frontendApiOrigins?: string[];
|
frontendApiOrigins?: string[];
|
||||||
resourceLimits: ResourceLimitsSchema;
|
resourceLimits: ResourceLimitsSchema;
|
||||||
|
oidcConfiguredThroughEnv?: boolean;
|
||||||
}
|
}
|
||||||
|
|
||||||
export interface IProclamationToast {
|
export interface IProclamationToast {
|
||||||
|
Loading…
Reference in New Issue
Block a user