Files
windmill/frontend/src/lib/components/KeycloakSetting.svelte
T
Diego ImbertandClaude Opus 4.6 5d79f33590 Final Svelte 5 migration (#8211)
* Remove $$props.field usage

* Rename slots to ensure no hyphen

* _props

* _trigger

* OnSelectedIteration type correct capitalization

* rename _content

* Remove afterUpdate

* Migrate everything to svelte 5

* array bind

* Fix popover

* type never

* nit fixes

* Fixed many trivial errors

* onClick

* Fix errors

* use let:

* nit typing

* fix: wrap state_referenced_locally vars with untrack()

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

* Add untrack import

* Fix all syntax errors due to untrack migration

* Fix undefined errors

* Fix more undefined errors

* untrack(() => initialOpen)

* svelte-ignore

* Fix state_descriptors_fixed error in Chart.svelte

Use $state.snapshot() to pass plain copies of data/options to Chart.js
instead of $state proxies. Chart.js's listenArrayEvents tries to define
property descriptors on data arrays, which Svelte 5 proxies reject.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

* nit typing

* Merge issue

* Fix "path is not set" error in resource picker / editor

* Fix InputTransformForm error when rerunning some flows

* fix npm run check

---------

Co-authored-by: Claude Opus 4.5 <noreply@anthropic.com>
2026-03-05 18:11:40 +01:00

95 lines
2.7 KiB
Svelte

<script lang="ts">
import { untrack } from 'svelte'
import IconedResourceType from './IconedResourceType.svelte'
import TextInput from './text_input/TextInput.svelte'
import Toggle from './Toggle.svelte'
import SettingCard from './instanceSettings/SettingCard.svelte'
interface Props {
value: any
}
let { value = $bindable() }: Props = $props()
let lastOrg: string | undefined = undefined
function changeOrg(org: string | undefined) {
if (value && org) {
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']
}
}
}
}
let enabled = $derived(value != undefined)
$effect.pre(() => {
if (value?.['org'] != lastOrg) {
lastOrg = value?.['org']
untrack(() => changeOrg(value?.['org']))
}
})
</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: '', org: '' }
} else {
value = undefined
}
}}
/></label
>
{#if enabled}
<SettingCard class="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={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>
</SettingCard>
{/if}
</div>