Files
windmill/frontend/src/lib/components/KeycloakSetting.svelte
Guilhem 210b8285d4 fix(frontend): settings redesign (#7406)
* improve collapsible link

* do not show superadmin ws link when already in it

* improve OAuth UI

* sso/oauth instance settings ui

* refactor instance settings alerts WIP

* Indexer and Oauth to brand guidelines

* refactor ws error handler page

* Create a tab SMTP in the Instance Settings

* Ractivity isssue fix for tabs

* nit

* Add smtp settings status in Error handler

* Add smtp configuration status

* Display teams connection status for instance alerts

* nit

* Add critical alerts description

* nit

* nit

* improve ee display

* nit

* nit

* fix typo

* nit

* restore vit config

---------

Co-authored-by: Alexander Petric <alex@windmill.dev>
2025-12-19 20:33:03 +00:00

81 lines
2.3 KiB
Svelte

<script lang="ts">
import IconedResourceType from './IconedResourceType.svelte'
import TextInput from './text_input/TextInput.svelte'
import Toggle from './Toggle.svelte'
export let value: any
$: enabled = value != undefined
let org = ''
$: changeOrg(org)
function changeOrg(org) {
if (value) {
value = {
...value,
connect_config: {
auth_url: `${org}/protocol/openid-connect/auth`,
token_url: `${org}/protocol/openid-connect/token`,
scopes: ['openid', 'offline_access']
},
login_config: {
auth_url: `${org}/protocol/openid-connect/auth`,
token_url: `${org}/protocol/openid-connect/token`,
userinfo_url: `${org}/protocol/openid-connect/userinfo`,
scopes: ['openid', 'offline_access']
}
}
}
}
</script>
<div class="flex flex-col gap-1">
<!-- svelte-ignore a11y-label-has-associated-control -->
<label class="text-xs font-semibold text-emphasis flex gap-4 items-center"
><div class="w-[120px]"><IconedResourceType name={'keycloak'} after={true} /></div><Toggle
checked={enabled}
on:change={(e) => {
if (e.detail) {
value = { id: '', secret: '' }
} else {
value = undefined
}
}}
/></label
>
{#if enabled}
<div class="border rounded p-4 flex flex-col gap-6">
<label class="flex flex-col gap-1">
<span class="text-emphasis font-semibold text-xs">Realm Url </span>
<span class="text-secondary font-normal text-xs"
>{'REALM_URL/protocol/openid-connect/auth'}</span
>
<TextInput inputProps={{ type: 'text', placeholder: 'yourorg' }} bind:value={org} />
</label>
<label class="flex flex-col gap-1">
<span class="text-emphasis font-semibold text-xs">Custom Name</span>
<TextInput
inputProps={{ type: 'text', placeholder: 'Custom Name' }}
bind:value={value['display_name']}
/>
</label>
<label class="flex flex-col gap-1">
<span class="text-emphasis font-semibold text-xs">Client Id</span>
<TextInput
inputProps={{ type: 'text', placeholder: 'Client Id' }}
bind:value={value['id']}
/>
</label>
<label class="flex flex-col gap-1">
<span class="text-emphasis font-semibold text-xs">Client Secret </span>
<TextInput
inputProps={{ type: 'text', placeholder: 'Client Secret' }}
bind:value={value['secret']}
/>
</label>
</div>
{/if}
</div>