windmill-components 1.623.2 → 1.655.0

package/package/components/AuthSettings.svelte

@@ -13,6 +13,7 @@ import ZitadelSetting from './ZitadelSetting.svelte';
 import NextcloudSetting from './NextcloudSetting.svelte';
 import CustomOauth from './CustomOauth.svelte';
 import { capitalize } from '../utils';
+import ClipboardPanel from './details/ClipboardPanel.svelte';
 import Toggle from './Toggle.svelte';
 import DropdownV2 from './DropdownV2.svelte';
 import { APP_TO_ICON_COMPONENT } from './icons';
@@ -21,7 +22,8 @@ import AzureOauthSettings from './AzureOauthSettings.svelte';
 import Tooltip from './Tooltip.svelte';
 import { tick } from 'svelte';
 import { Popover } from './meltComponents';
-let { snowflakeAccountIdentifier = $bindable(), oauths = $bindable(), requirePreexistingUserForOauth = $bindable(), baseUrl, scim } = $props();
+import SettingsPageHeader from './settings/SettingsPageHeader.svelte';
+let { snowflakeAccountIdentifier = $bindable(), oauths = $bindable(), requirePreexistingUserForOauth = $bindable(), baseUrl, scim, tab = $bindable('sso'), hideTabs = false } = $props();
 $effect(() => {
     if (snowflakeAccountIdentifier == undefined) {
         snowflakeAccountIdentifier = '';
@@ -65,7 +67,6 @@ let dropdownOpen = $state(false);
 let ssoPopoverOpen = $state(false);
 let ssoClientName = $state('');
 let ssoNameInput = $state();
-let tab = $state('sso');
 function createOAuthClient(name) {
     if (oauths && name) {
         // Create a new object to ensure the new item is added at the end
@@ -177,34 +178,30 @@ function generateOAuthDropdownItems() {
 }
 </script>
 
-<div>
-	<Tabs bind:selected={tab} class="mb-4">
-		<Tab value="sso" label="SSO" />
-		<Tab value="oauth" label="OAuth" />
-		<Tab value="scim" label="SCIM/SAML" />
-	</Tabs>
-</div>
+{#if !hideTabs}
+	<div>
+		<Tabs bind:selected={tab} class="mb-4">
+			<Tab value="sso" label="SSO" />
+			<Tab value="oauth" label="OAuth" />
+			<Tab value="scim" label="SCIM/SAML" />
+		</Tabs>
+	</div>
+{/if}
 
 <div class="mb-6">
 	{#if oauths}
 		{#if tab === 'sso'}
+			<SettingsPageHeader
+				title="Single Sign-On"
+				description="Configure SSO providers to let users authenticate using their existing identity provider credentials. To test SSO, save the settings and try to login in an incognito window."
+				link="https://www.windmill.dev/docs/misc/setup_oauth#sso"
+			/>
 			{#if !$enterpriseLicense || $enterpriseLicense.endsWith('_pro')}
-				<Alert type="warning" title="Limited to 10 SSO users">
+				<Alert type="info" title="Limited to 10 SSO users">
 					Without EE, the number of SSO users is limited to 10. SCIM/SAML is available on EE
 				</Alert>
 				<div class="mb-2"></div>
 			{/if}
-
-			<div class="mb-2">
-				<div class="text-primary text-xs"
-					>When at least one of the below options is set, users will be able to login to Windmill
-					via their third-party account.
-					<br /> To test SSO, the recommended workflow is to to save the settings and try to login
-					in an incognito window.
-					<a target="_blank" href="https://www.windmill.dev/docs/misc/setup_oauth#sso">Learn more</a
-					>
-				</div>
-			</div>
 			<div class="flex gap-2 py-4">
 				<Toggle
 					options={{
@@ -249,8 +246,8 @@ function generateOAuthDropdownItems() {
 										}}
 									/>
 								</div>
-								<div class="p-4 border rounded">
-									<label class="block pb-2">
+								<div class="p-4 rounded bg-surface-tertiary shadow-sm">
+									<label class="block pb-6">
 										<span class="text-primary font-semibold text-xs">Custom Name</span>
 										<input
 											type="text"
@@ -258,11 +255,11 @@ function generateOAuthDropdownItems() {
 											bind:value={oauths[k]['display_name']}
 										/>
 									</label>
-									<label class="block pb-2">
+									<label class="block pb-6">
 										<span class="text-primary font-semibold text-xs">Client Id</span>
 										<input type="text" placeholder="Client Id" bind:value={oauths[k]['id']} />
 									</label>
-									<label class="block pb-2">
+									<label class="block pb-6">
 										<span class="text-primary font-semibold text-xs">Client Secret</span>
 										<input
 											type="text"
@@ -319,20 +316,11 @@ function generateOAuthDropdownItems() {
 				</Popover>
 			</div>
 		{:else if tab === 'oauth'}
-			<div class="mb-2">
-				<div class="text-primary text-xs"
-					>Connect third-party services like Slack, Teams or Google to let users authenticate
-					directly from Windmill and automatically obtain access tokens. Once configured, users can
-					create resources of the corresponding type (e.g. a 'github' resource) and authenticate via
-					OAuth without manually handling credentials.
-					<a
-						target="_blank"
-						href="https://www.windmill.dev/docs/misc/setup_oauth#oauth"
-						class="inline-flex items-center whitespace-nowrap"
-						>Learn more&nbsp;<ExternalLink size={12} /></a
-					></div
-				>
-			</div>
+			<SettingsPageHeader
+				title="OAuth"
+				description="Connect third-party services like Slack, Teams or Google to let users authenticate directly from Windmill and automatically obtain access tokens."
+				link="https://www.windmill.dev/docs/misc/setup_oauth#oauth"
+			/>
 			<div class="h-1"></div>
 			<OAuthSetting login={false} name="slack" bind:value={oauths['slack']} />
 			<div class="h-6"></div>
@@ -436,6 +424,42 @@ function generateOAuthDropdownItems() {
 										/>
 									</label>
 								{/if}
+								{#if k === 'gworkspace'}
+									<div>
+										<Toggle
+											options={{
+												right:
+													'Allow workspace admins to setup Google native triggers using these credentials'
+											}}
+											checked={oauths[k]?.share_with_workspaces ?? false}
+											on:change={(e) => {
+												if (oauths && oauths[k]) {
+													oauths[k] = { ...oauths[k], share_with_workspaces: e.detail }
+												}
+											}}
+										/>
+										{#if oauths[k]?.share_with_workspaces}
+											<p class="text-xs text-tertiary mt-1">
+												Workspace admins will be able to connect Google native triggers without
+												configuring their own OAuth client. The credentials are not exposed to them.
+											</p>
+											<p class="text-xs text-tertiary mt-2">
+												Add the following redirect URI to
+												<a
+													href="https://console.cloud.google.com/apis/credentials"
+													target="_blank"
+													class="underline">Google Cloud Console</a
+												>:
+											</p>
+											<div class="mt-1">
+												<ClipboardPanel
+													content="{baseUrl}/workspace_settings?tab=native_triggers&service=google"
+													size="sm"
+												/>
+											</div>
+										{/if}
+									</div>
+								{/if}
 							</div>
 						</div>
 					{/if}
@@ -509,6 +533,11 @@ function generateOAuthDropdownItems() {
 				</div>
 			{/if}
 		{:else if tab == 'scim'}
+			<SettingsPageHeader
+				title="SCIM/SAML"
+				description="Set up SAML and SCIM to authenticate users using your identity provider."
+				link="https://www.windmill.dev/docs/misc/saml_and_scim"
+			/>
 			{@render scim?.()}
 		{/if}
 	{/if}

package/package/components/AuthSettings.svelte.d.ts

@@ -4,7 +4,9 @@ interface Props {
     requirePreexistingUserForOauth?: boolean;
     baseUrl?: string;
     scim?: import('svelte').Snippet;
+    tab?: 'sso' | 'oauth' | 'scim';
+    hideTabs?: boolean;
 }
-declare const AuthSettings: import("svelte").Component<Props, {}, "snowflakeAccountIdentifier" | "oauths" | "requirePreexistingUserForOauth">;
+declare const AuthSettings: import("svelte").Component<Props, {}, "tab" | "snowflakeAccountIdentifier" | "oauths" | "requirePreexistingUserForOauth">;
 type AuthSettings = ReturnType<typeof AuthSettings>;
 export default AuthSettings;

package/package/components/AutheliaSetting.svelte

@@ -1,10 +1,10 @@
-<script lang="ts">import IconedResourceType from './IconedResourceType.svelte';
+<script lang="ts">import { run } from 'svelte/legacy';
+import IconedResourceType from './IconedResourceType.svelte';
 import TextInput from './text_input/TextInput.svelte';
 import Toggle from './Toggle.svelte';
-export let value;
-$: enabled = value != undefined;
-let org = '';
-$: changeOrg(org);
+import SettingCard from './instanceSettings/SettingCard.svelte';
+let { value = $bindable() } = $props();
+let org = $state('');
 function changeOrg(org) {
     if (value) {
         value = {
@@ -23,10 +23,14 @@ function changeOrg(org) {
         };
     }
 }
+let enabled = $derived(value != undefined);
+run(() => {
+    changeOrg(org);
+});
 </script>
 
 <div class="flex flex-col gap-1">
-	<!-- svelte-ignore a11y-label-has-associated-control -->
+	<!-- 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}
@@ -40,7 +44,7 @@ function changeOrg(org) {
 		/></label
 	>
 	{#if enabled}
-		<div class="border rounded p-4 flex flex-col gap-6">
+		<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"
@@ -69,6 +73,6 @@ function changeOrg(org) {
 					bind:value={value['secret']}
 				/>
 			</label>
-		</div>
+		</SettingCard>
 	{/if}
 </div>

package/package/components/AutheliaSetting.svelte.d.ts

@@ -1,20 +1,6 @@
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: Props & {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
-declare const AutheliaSetting: $$__sveltets_2_IsomorphicComponent<{
+interface Props {
     value: any;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type AutheliaSetting = InstanceType<typeof AutheliaSetting>;
+}
+declare const AutheliaSetting: import("svelte").Component<Props, {}, "value">;
+type AutheliaSetting = ReturnType<typeof AutheliaSetting>;
 export default AutheliaSetting;

package/package/components/AuthentikSetting.svelte

@@ -1,10 +1,8 @@
-<script lang="ts">import IconedResourceType from './IconedResourceType.svelte';
+<script lang="ts">import { run } from 'svelte/legacy';
+import IconedResourceType from './IconedResourceType.svelte';
 import Toggle from './Toggle.svelte';
-export let value;
-$: enabled = value != undefined;
-// Initialize org from existing auth_url
-$: org = value?.connect_config?.auth_url?.replace('/application/o/authorize/', '') ?? '';
-$: changeOrg(org);
+import SettingCard from './instanceSettings/SettingCard.svelte';
+let { value = $bindable() } = $props();
 function changeOrg(org) {
     if (value && org) {
         value = {
@@ -23,10 +21,16 @@ function changeOrg(org) {
         };
     }
 }
+let enabled = $derived(value != undefined);
+// Initialize org from existing auth_url
+let org = $derived(value?.connect_config?.auth_url?.replace('/application/o/authorize/', '') ?? '');
+run(() => {
+    changeOrg(org);
+});
 </script>
 
 <div class="flex flex-col gap-1">
-	<!-- svelte-ignore a11y-label-has-associated-control -->
+	<!-- 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={'authentik'} after={true} /></div><Toggle
 			checked={enabled}
@@ -40,7 +44,7 @@ function changeOrg(org) {
 		/></label
 	>
 	{#if enabled}
-		<div class="border rounded p-4 flex flex-col gap-6">
+		<SettingCard class="flex flex-col gap-6">
 			<label>
 				<span class="text-emphasis font-semibold text-xs">Authentik Url</span>
 				<span class="text-secondary font-normal text-xs"
@@ -60,6 +64,6 @@ function changeOrg(org) {
 				<span class="text-emphasis font-semibold text-xs">Client Secret </span>
 				<input type="text" placeholder="Client Secret" bind:value={value['secret']} />
 			</label>
-		</div>
+		</SettingCard>
 	{/if}
 </div>

package/package/components/AuthentikSetting.svelte.d.ts

@@ -1,20 +1,6 @@
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: Props & {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
-declare const AuthentikSetting: $$__sveltets_2_IsomorphicComponent<{
+interface Props {
     value: any;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type AuthentikSetting = InstanceType<typeof AuthentikSetting>;
+}
+declare const AuthentikSetting: import("svelte").Component<Props, {}, "value">;
+type AuthentikSetting = ReturnType<typeof AuthentikSetting>;
 export default AuthentikSetting;

package/package/components/AutoscalingConfigEditor.svelte

@@ -13,7 +13,7 @@ import { ConfigService } from '../gen';
 import Select from './select/Select.svelte';
 import ScriptPicker from './ScriptPicker.svelte';
 import Badge from './common/badge/Badge.svelte';
-let { config = $bindable(), worker_tags, disabled } = $props();
+let { config = $bindable(), worker_tags, disabled, eeOnly = false } = $props();
 let test_input = $state(3);
 let healthCheckLoading = $state(false);
 let healthCheckResult = $state(null);
@@ -51,6 +51,7 @@ let collapsed = $state(true);
 	class="flex flex-col gap-6"
 	bind:collapsed
 	description="Autoscaling automatically adjusts the number of workers based on your workload demands."
+	{eeOnly}
 >
 	{#snippet labelExtra()}
 		<Badge color="gray">Beta</Badge>

package/package/components/AutoscalingConfigEditor.svelte.d.ts

@@ -3,6 +3,7 @@ interface Props {
     config: AutoscalingConfig | undefined;
     worker_tags: string[] | undefined;
     disabled: boolean;
+    eeOnly?: boolean;
 }
 declare const AutoscalingConfigEditor: import("svelte").Component<Props, {}, "config">;
 type AutoscalingConfigEditor = ReturnType<typeof AutoscalingConfigEditor>;

package/package/components/AzureOauthSettings.svelte

@@ -1,29 +1,28 @@
-<script lang="ts">import { ExternalLink } from 'lucide-svelte';
+<script lang="ts">import { run } from 'svelte/legacy';
+import { ExternalLink } from 'lucide-svelte';
 import OauthScopes from './OauthScopes.svelte';
-export let connect_config = {
-    scopes: ['offline_access'],
-    auth_url: '',
-    token_url: '',
-    req_body_auth: true,
-    extra_params: { tenant_id: '' },
-    extra_params_callback: {}
-};
-$: if (!connect_config) {
-    connect_config = {
-        scopes: ['offline_access'],
-        auth_url: '',
-        token_url: '',
-        req_body_auth: true,
-        extra_params: { tenant_id: '' },
-        extra_params_callback: {}
-    };
-}
-$: if (connect_config.extra_params.tenant_id) {
-    connect_config.auth_url = `https://login.microsoftonline.com/${connect_config.extra_params.tenant_id}/oauth2/v2.0/authorize`;
-    connect_config.token_url = `https://login.microsoftonline.com/${connect_config.extra_params.tenant_id}/oauth2/v2.0/token`;
-}
+let { connect_config = $bindable() } = $props();
+run(() => {
+    if (!connect_config) {
+        connect_config = {
+            scopes: ['offline_access'],
+            auth_url: '',
+            token_url: '',
+            req_body_auth: true,
+            extra_params: { tenant_id: '' },
+            extra_params_callback: {}
+        };
+    }
+});
+run(() => {
+    if (connect_config?.extra_params?.tenant_id) {
+        connect_config.auth_url = `https://login.microsoftonline.com/${connect_config.extra_params.tenant_id}/oauth2/v2.0/authorize`;
+        connect_config.token_url = `https://login.microsoftonline.com/${connect_config.extra_params.tenant_id}/oauth2/v2.0/token`;
+    }
+});
 </script>
 
+{#if connect_config}
 <label class="flex flex-col gap-1" for="tenant-id">
 	<span class="text-primary font-semibold text-xs flex gap-2 items-center"> Azure tenant id </span>
 	<span class="text-secondary font-normal text-xs">
@@ -52,3 +51,4 @@ $: if (connect_config.extra_params.tenant_id) {
 		<OauthScopes bind:scopes={connect_config.scopes} />
 	</div>
 </label>
+{/if}

package/package/components/AzureOauthSettings.svelte.d.ts

@@ -1,17 +1,4 @@
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: Props & {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
-declare const AzureOauthSettings: $$__sveltets_2_IsomorphicComponent<{
+interface Props {
     connect_config?: {
         scopes: string[];
         auth_url: string;
@@ -22,8 +9,7 @@ declare const AzureOauthSettings: $$__sveltets_2_IsomorphicComponent<{
         };
         extra_params_callback: Record<string, any>;
     };
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type AzureOauthSettings = InstanceType<typeof AzureOauthSettings>;
+}
+declare const AzureOauthSettings: import("svelte").Component<Props, {}, "connect_config">;
+type AzureOauthSettings = ReturnType<typeof AzureOauthSettings>;
 export default AzureOauthSettings;

package/package/components/Badge.svelte

@@ -1,11 +1,9 @@
 <script lang="ts">import Tooltip from './Tooltip.svelte';
-export let twBgColor = 'bg-blue-200';
-export let twTextColor = 'text-secondary';
-export let tooltip = undefined;
+let { twBgColor = 'bg-blue-200', twTextColor = 'text-secondary', tooltip = undefined, children } = $props();
 </script>
 
 <span class="{twBgColor} {twTextColor} text-2xs rounded px-1 whitespace-nowrap">
-	<slot />
+	{@render children?.()}
 	{#if tooltip && tooltip != ''}
 		<Tooltip>{tooltip}</Tooltip>
 	{/if}

package/package/components/Badge.svelte.d.ts

@@ -1,31 +1,9 @@
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: Props & {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
-type $$__sveltets_2_PropsWithChildren<Props, Slots> = Props & (Slots extends {
-    default: any;
-} ? Props extends Record<string, never> ? any : {
-    children?: any;
-} : {});
-declare const Badge: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
+interface Props {
     twBgColor?: string;
     twTextColor?: string;
     tooltip?: string | undefined;
-}, {
-    default: {};
-}>, {
-    [evt: string]: CustomEvent<any>;
-}, {
-    default: {};
-}, {}, string>;
-type Badge = InstanceType<typeof Badge>;
+    children?: import('svelte').Snippet;
+}
+declare const Badge: import("svelte").Component<Props, {}, "">;
+type Badge = ReturnType<typeof Badge>;
 export default Badge;

package/package/components/CenteredModal.svelte

@@ -3,18 +3,26 @@ import { enterpriseLicense, whitelabelNameStore } from '../stores';
 import { twMerge } from 'tailwind-merge';
 import WindmillIcon from './icons/WindmillIcon.svelte';
 import LoginPageHeader from './LoginPageHeader.svelte';
-let { subtitle = undefined, title = 'Windmill', disableLogo = false, large = false, centerVertically = true, loading = false, children } = $props();
+let { subtitle = undefined, title = 'Windmill', disableLogo = false, large = false, centerVertically = true, loading = false, containOverflow = false, children } = $props();
 setLicense();
 let height = $state(0);
 </script>
 
 <div
-	class="flex justify-center h-screen p-4 relative bg-surface-secondary overflow-auto"
+	class="flex justify-center h-screen p-4 relative bg-surface-secondary {containOverflow
+		? 'overflow-hidden'
+		: 'overflow-auto'}"
 	class:items-center={centerVertically}
 	style="scrollbar-gutter: stable both-edges;"
 	bind:clientHeight={height}
 >
-	<div class={twMerge("flex flex-col gap-2 items-center w-full pb-8  h-fit", height > 1080 ? 'pt-28' : 'pt-12')} >
+	<div
+		class={twMerge(
+			'flex flex-col gap-2 items-center w-full pb-8',
+			containOverflow ? 'min-h-0' : 'h-fit',
+			containOverflow ? '' : height > 1080 ? 'pt-28' : 'pt-12'
+		)}
+	>
 		{#if (!disableLogo && !$enterpriseLicense) || !$whitelabelNameStore}
 			<div class="hidden lg:block">
 				<div>
@@ -40,7 +48,9 @@ let height = $state(0);
 			<div
 				class="rounded-md bg-surface w-full {large
 					? 'max-w-5xl'
-					: 'max-w-[640px]'} p-4 sm:py-8 sm:px-10 z-10"
+					: 'max-w-[640px]'} p-4 sm:py-8 sm:px-10 z-10 {containOverflow
+					? 'flex-1 min-h-0 flex flex-col'
+					: ''}"
 			>
 				{@render children()}
 			</div>

package/package/components/CenteredModal.svelte.d.ts

@@ -5,6 +5,7 @@ interface Props {
     large?: boolean;
     centerVertically?: boolean;
     loading?: boolean;
+    containOverflow?: boolean;
     children?: import('svelte').Snippet;
 }
 declare const CenteredModal: import("svelte").Component<Props, {}, "">;

package/package/components/ChangeInstanceUsernameInner.svelte

@@ -3,12 +3,9 @@ import { Button } from './common';
 import { sendUserToast } from '../toast';
 import Alert from './common/alert/Alert.svelte';
 import { createEventDispatcher } from 'svelte';
-export let email;
-export let username;
-export let isConflict = false;
-export let noPadding = false;
-let loading = false;
-let usernameInfo = undefined;
+let { email, username = $bindable(), isConflict = false, noPadding = false } = $props();
+let loading = $state(false);
+let usernameInfo = $state(undefined);
 function handleKeyUp(event) {
     const key = event.key;
     if (key === 'Enter') {
@@ -29,7 +26,7 @@ const dispatch = createEventDispatcher();
 async function renameUser() {
     loading = true;
     try {
-        const automateUsernameCreation = (await SettingService.getGlobal({ key: 'automate_username_creation' })) ?? false;
+        const automateUsernameCreation = (await SettingService.getGlobal({ key: 'automate_username_creation' })) ?? true;
         if (!automateUsernameCreation) {
             sendUserToast('Modifying the username is only possible when the creation of usernames is automated and defined at instance level..');
             return;
@@ -60,7 +57,7 @@ async function renameUser() {
 	<input
 		type="text"
 		class="mb-4"
-		on:keyup={handleKeyUp}
+		onkeyup={handleKeyUp}
 		bind:value={username}
 		disabled={isConflict}
 	/>

package/package/components/ChangeInstanceUsernameInner.svelte.d.ts

@@ -1,3 +1,9 @@
+interface Props {
+    email: string;
+    username: string;
+    isConflict?: boolean;
+    noPadding?: boolean;
+}
 interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
     new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
         $$bindings?: Bindings;
@@ -11,16 +17,11 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
     };
     z_$$bindings?: Bindings;
 }
-declare const ChangeInstanceUsernameInner: $$__sveltets_2_IsomorphicComponent<{
-    email: string;
-    username: string;
-    isConflict?: boolean;
-    noPadding?: boolean;
-}, {
+declare const ChangeInstanceUsernameInner: $$__sveltets_2_IsomorphicComponent<Props, {
     close: CustomEvent<any>;
     renamed: CustomEvent<any>;
 } & {
     [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
+}, {}, {}, "username">;
 type ChangeInstanceUsernameInner = InstanceType<typeof ChangeInstanceUsernameInner>;
 export default ChangeInstanceUsernameInner;