Files
windmill/frontend/src/lib/components/AutheliaSetting.svelte
T
Ruben Fiszel ac3c155541 fix: mask oauth client secret in instance settings (#9112)
* feat: mask oauth client secret in instance settings

* fix: address ci review - migrate nextcloud + use Password small prop

* fix: associate client secret labels with input via for/id
2026-05-11 22:30:15 +00:00

90 lines
2.5 KiB
Svelte

<script lang="ts">
import { run } from 'svelte/legacy'
import IconedResourceType from './IconedResourceType.svelte'
import TextInput from './text_input/TextInput.svelte'
import Password from './Password.svelte'
import Toggle from './Toggle.svelte'
import SettingCard from './instanceSettings/SettingCard.svelte'
interface Props {
value: any
}
let { value = $bindable() }: Props = $props()
let org = $state('')
function changeOrg(org) {
if (value) {
value = {
...value,
connect_config: {
auth_url: `${org}/api/oidc/authorization`,
token_url: `${org}/api/oidc/token`,
scopes: ['openid', 'profile', 'email', 'groups']
},
login_config: {
auth_url: `${org}/api/oidc/authorization`,
token_url: `${org}/api/oidc/token`,
userinfo_url: `${org}/api/oidc/userinfo`,
scopes: ['openid', 'profile', 'email', 'groups']
}
}
}
}
let enabled = $derived(value != undefined)
run(() => {
changeOrg(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={'authelia'} after={true} /></div><Toggle
checked={enabled}
on:change={(e) => {
if (e.detail) {
value = { id: '', secret: '' }
} 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">Authelia Url</span>
<span class="text-secondary font-normal text-xs"
>{'AUTHELIA_URL/api/oidc/authorization'}</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 for="authelia_client_secret" class="flex flex-col gap-1">
<span class="text-emphasis font-semibold text-xs">Client Secret </span>
<Password
id="authelia_client_secret"
placeholder="Client Secret"
bind:password={value['secret']}
/>
</label>
</SettingCard>
{/if}
</div>