windmill-components 1.695.1 → 1.699.0

package/package/components/instanceSettings/SecretBackendConfig.svelte

@@ -42,7 +42,8 @@ let vaultDisabled = $derived(!$enterpriseLicense);
 function setBackendType(type) {
     if (!type)
         return;
-    if ((type === 'HashiCorpVault' || type === 'AzureKeyVault' || type === 'AwsSecretsManager') && vaultDisabled)
+    if ((type === 'HashiCorpVault' || type === 'AzureKeyVault' || type === 'AwsSecretsManager') &&
+        vaultDisabled)
         return;
     if (type === 'Database') {
         $values['secret_backend'] = { type: 'Database' };
@@ -53,6 +54,7 @@ function setBackendType(type) {
             address: $values['secret_backend']?.address ?? '',
             mount_path: $values['secret_backend']?.mount_path ?? 'windmill',
             jwt_role: $values['secret_backend']?.jwt_role ?? 'windmill-secrets',
+            jwt_mount_path: $values['secret_backend']?.jwt_mount_path ?? null,
             namespace: $values['secret_backend']?.namespace ?? null,
             token: $values['secret_backend']?.token ?? null,
             skip_ssl_verify: $values['secret_backend']?.skip_ssl_verify ?? false
@@ -80,13 +82,23 @@ function setBackendType(type) {
     }
 }
 function setAuthMethod(method) {
-    if (!method || !$values['secret_backend'] || $values['secret_backend'].type !== 'HashiCorpVault')
+    if (!method ||
+        !$values['secret_backend'] ||
+        $values['secret_backend'].type !== 'HashiCorpVault')
         return;
     if (method === 'token') {
-        $values['secret_backend'] = { ...$values['secret_backend'], jwt_role: null, token: $values['secret_backend'].token ?? '' };
+        $values['secret_backend'] = {
+            ...$values['secret_backend'],
+            jwt_role: null,
+            token: $values['secret_backend'].token ?? ''
+        };
     }
     else if (method === 'jwt') {
-        $values['secret_backend'] = { ...$values['secret_backend'], token: null, jwt_role: $values['secret_backend'].jwt_role ?? 'windmill-secrets' };
+        $values['secret_backend'] = {
+            ...$values['secret_backend'],
+            token: null,
+            jwt_role: $values['secret_backend'].jwt_role ?? 'windmill-secrets'
+        };
     }
 }
 function getVaultSettings() {
@@ -94,6 +106,7 @@ function getVaultSettings() {
         address: $values['secret_backend'].address,
         mount_path: $values['secret_backend'].mount_path,
         jwt_role: $values['secret_backend'].jwt_role,
+        jwt_mount_path: $values['secret_backend'].jwt_mount_path || undefined,
         namespace: $values['secret_backend'].namespace || undefined,
         token: $values['secret_backend'].token || undefined,
         skip_ssl_verify: $values['secret_backend'].skip_ssl_verify || undefined
@@ -138,7 +151,9 @@ async function migrateSecretsToDatabase() {
         return;
     migratingToDatabase = true;
     try {
-        const report = await SettingService.migrateSecretsToDatabase({ requestBody: getVaultSettings() });
+        const report = await SettingService.migrateSecretsToDatabase({
+            requestBody: getVaultSettings()
+        });
         if (report.failed_count > 0)
             sendUserToast(`Migration: ${report.migrated_count}/${report.total_secrets} migrated, ${report.failed_count} failed`, true);
         else
@@ -190,7 +205,9 @@ async function migrateSecretsToAzureKv() {
         return;
     migratingToAzureKv = true;
     try {
-        const report = await SettingService.migrateSecretsToAzureKv({ requestBody: getAzureKvSettings() });
+        const report = await SettingService.migrateSecretsToAzureKv({
+            requestBody: getAzureKvSettings()
+        });
         if (report.failed_count > 0)
             sendUserToast(`Migration: ${report.migrated_count}/${report.total_secrets} migrated, ${report.failed_count} failed`, true);
         else
@@ -209,7 +226,9 @@ async function migrateSecretsFromAzureKv() {
         return;
     migratingFromAzureKv = true;
     try {
-        const report = await SettingService.migrateSecretsFromAzureKv({ requestBody: getAzureKvSettings() });
+        const report = await SettingService.migrateSecretsFromAzureKv({
+            requestBody: getAzureKvSettings()
+        });
         if (report.failed_count > 0)
             sendUserToast(`Migration: ${report.migrated_count}/${report.total_secrets} migrated, ${report.failed_count} failed`, true);
         else
@@ -228,8 +247,7 @@ function isAzureKvConfigValid() {
         return false;
     return ($values['secret_backend'].vault_url?.trim() !== '' &&
         $values['secret_backend'].tenant_id?.trim() !== '' &&
-        $values['secret_backend'].client_id?.trim() !== '' &&
-        (!!$values['secret_backend'].client_secret?.trim() || !!$values['secret_backend'].token?.trim()));
+        $values['secret_backend'].client_id?.trim() !== '');
 }
 function getAwsSmSettings() {
     return {
@@ -279,7 +297,9 @@ async function migrateSecretsFromAwsSm() {
         return;
     migratingFromAwsSm = true;
     try {
-        const report = await SettingService.migrateSecretsFromAwsSm({ requestBody: getAwsSmSettings() });
+        const report = await SettingService.migrateSecretsFromAwsSm({
+            requestBody: getAwsSmSettings()
+        });
         if (report.failed_count > 0)
             sendUserToast(`Migration: ${report.migrated_count}/${report.total_secrets} migrated, ${report.failed_count} failed`, true);
         else
@@ -299,16 +319,47 @@ function isAwsSmConfigValid() {
     return $values['secret_backend'].region?.trim() !== '';
 }
 let baseUrl = $derived($values['base_url'] ?? 'https://your-windmill-instance.com');
+let jwtMount = $derived(($values['secret_backend']?.jwt_mount_path?.trim() || 'jwt'));
+let vaultAudience = $derived(($values['secret_backend']?.address?.trim() || 'https://vault.example.com:8200'));
 </script>
 
 <div class="space-y-6">
 	<div class="flex flex-col gap-2 mt-1">
 		<ToggleButtonGroup selected={selectedType} onSelected={(v) => setBackendType(v)}>
 			{#snippet children({ item: toggleButton })}
-				<ToggleButton value="Database" label="Database" tooltip="Store secrets encrypted in the database (default)" item={toggleButton} />
-				<ToggleButton value="HashiCorpVault" label="HashiCorp Vault (Beta)" tooltip={vaultDisabled ? 'Requires Enterprise Edition' : 'Store secrets in HashiCorp Vault'} item={toggleButton} disabled={vaultDisabled} />
-				<ToggleButton value="AzureKeyVault" label="Azure Key Vault" tooltip={vaultDisabled ? 'Requires Enterprise Edition' : 'Store secrets in Azure Key Vault'} item={toggleButton} disabled={vaultDisabled} />
-				<ToggleButton value="AwsSecretsManager" label="AWS Secrets Manager (Beta)" tooltip={vaultDisabled ? 'Requires Enterprise Edition' : 'Store secrets in AWS Secrets Manager'} item={toggleButton} disabled={vaultDisabled} />
+				<ToggleButton
+					value="Database"
+					label="Database"
+					tooltip="Store secrets encrypted in the database (default)"
+					item={toggleButton}
+				/>
+				<ToggleButton
+					value="HashiCorpVault"
+					label="HashiCorp Vault (Beta)"
+					tooltip={vaultDisabled
+						? 'Requires Enterprise Edition'
+						: 'Store secrets in HashiCorp Vault'}
+					item={toggleButton}
+					disabled={vaultDisabled}
+				/>
+				<ToggleButton
+					value="AzureKeyVault"
+					label="Azure Key Vault"
+					tooltip={vaultDisabled
+						? 'Requires Enterprise Edition'
+						: 'Store secrets in Azure Key Vault'}
+					item={toggleButton}
+					disabled={vaultDisabled}
+				/>
+				<ToggleButton
+					value="AwsSecretsManager"
+					label="AWS Secrets Manager (Beta)"
+					tooltip={vaultDisabled
+						? 'Requires Enterprise Edition'
+						: 'Store secrets in AWS Secrets Manager'}
+					item={toggleButton}
+					disabled={vaultDisabled}
+				/>
 			{/snippet}
 		</ToggleButtonGroup>
 		{#if vaultDisabled}
@@ -323,7 +374,10 @@ let baseUrl = $derived($values['base_url'] ?? 'https://your-windmill-instance.co
 			<Database class="text-primary" size={20} />
 			<div>
 				<p class="text-sm font-medium text-emphasis">Database Storage (Default)</p>
-				<p class="text-xs text-secondary">Secrets are encrypted using workspace-specific keys and stored in the PostgreSQL database.</p>
+				<p class="text-xs text-secondary"
+					>Secrets are encrypted using workspace-specific keys and stored in the PostgreSQL
+					database.</p
+				>
 			</div>
 		</div>
 	{:else if selectedType === 'HashiCorpVault'}
@@ -331,100 +385,221 @@ let baseUrl = $derived($values['base_url'] ?? 'https://your-windmill-instance.co
 			<div class="flex items-center gap-2 mb-4">
 				<Lock class="text-primary" size={20} />
 				<div>
-					<p class="text-sm font-medium text-emphasis">HashiCorp Vault Configuration <span class="ml-2 px-1.5 py-0.5 text-2xs font-medium bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-200 rounded">Beta</span></p>
-					<p class="text-xs text-secondary">Store secrets in an external HashiCorp Vault instance.</p>
+					<p class="text-sm font-medium text-emphasis"
+						>HashiCorp Vault Configuration <span
+							class="ml-2 px-1.5 py-0.5 text-2xs font-medium bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-200 rounded"
+							>Beta</span
+						></p
+					>
+					<p class="text-xs text-secondary"
+						>Store secrets in an external HashiCorp Vault instance.</p
+					>
 				</div>
 			</div>
 			<div class="grid grid-cols-1 gap-4">
 				<div class="flex flex-col gap-1">
-					<label for="vault_address" class="block text-xs font-semibold text-emphasis">Vault Address</label>
-					<TextInput inputProps={{ type: 'text', id: 'vault_address', placeholder: 'https://vault.company.com:8200', disabled }} bind:value={$values['secret_backend'].address} />
+					<label for="vault_address" class="block text-xs font-semibold text-emphasis"
+						>Vault Address</label
+					>
+					<TextInput
+						inputProps={{
+							type: 'text',
+							id: 'vault_address',
+							placeholder: 'https://vault.company.com:8200',
+							disabled
+						}}
+						bind:value={$values['secret_backend'].address}
+					/>
 				</div>
 				<div class="flex flex-col gap-1">
-					<label for="vault_mount_path" class="block text-xs font-semibold text-emphasis">KV Mount Path</label>
+					<label for="vault_mount_path" class="block text-xs font-semibold text-emphasis"
+						>KV Mount Path</label
+					>
 					<span class="text-2xs text-secondary">The KV v2 secrets engine mount path in Vault</span>
-					<TextInput inputProps={{ type: 'text', id: 'vault_mount_path', placeholder: 'windmill', disabled }} bind:value={$values['secret_backend'].mount_path} />
+					<TextInput
+						inputProps={{ type: 'text', id: 'vault_mount_path', placeholder: 'windmill', disabled }}
+						bind:value={$values['secret_backend'].mount_path}
+					/>
 				</div>
 				<div class="flex flex-col gap-2">
 					<span class="block text-xs font-semibold text-emphasis">Authentication Method</span>
 					<ToggleButtonGroup selected={authMethod} onSelected={(v) => setAuthMethod(v)}>
 						{#snippet children({ item: toggleButton })}
-							<ToggleButton value="jwt" label="JWT Auth" tooltip="Authenticate using Windmill-signed JWTs" item={toggleButton} {disabled} />
-							<ToggleButton value="token" label="Static Token" tooltip="Use a static Vault token" item={toggleButton} {disabled} />
+							<ToggleButton
+								value="jwt"
+								label="JWT Auth"
+								tooltip="Authenticate using Windmill-signed JWTs"
+								item={toggleButton}
+								{disabled}
+							/>
+							<ToggleButton
+								value="token"
+								label="Static Token"
+								tooltip="Use a static Vault token"
+								item={toggleButton}
+								{disabled}
+							/>
 						{/snippet}
 					</ToggleButtonGroup>
 				</div>
 				{#if authMethod === 'token'}
 					<div class="flex flex-col gap-1 p-3 bg-surface-secondary rounded-lg">
-						<label for="vault_token" class="block text-xs font-semibold text-emphasis">Vault Token</label>
-						<span class="text-2xs text-secondary">Static token. Recommended only for testing/development.</span>
+						<label for="vault_token" class="block text-xs font-semibold text-emphasis"
+							>Vault Token</label
+						>
+						<span class="text-2xs text-secondary"
+							>Static token. Recommended only for testing/development.</span
+						>
 						<Password bind:password={$values['secret_backend'].token} small {disabled} />
 					</div>
 				{:else}
 					<div class="flex flex-col gap-2 p-3 bg-surface-secondary rounded-lg">
-						<label for="vault_jwt_role" class="block text-xs font-semibold text-emphasis">JWT Auth Role</label>
-						<span class="text-2xs text-secondary">The JWT authentication role configured in Vault.</span>
-						<TextInput inputProps={{ type: 'text', id: 'vault_jwt_role', placeholder: 'windmill-secrets', disabled }} bind:value={$values['secret_backend'].jwt_role} />
+						<label for="vault_jwt_role" class="block text-xs font-semibold text-emphasis"
+							>JWT Auth Role</label
+						>
+						<span class="text-2xs text-secondary"
+							>The JWT authentication role configured in Vault.</span
+						>
+						<TextInput
+							inputProps={{
+								type: 'text',
+								id: 'vault_jwt_role',
+								placeholder: 'windmill-secrets',
+								disabled
+							}}
+							bind:value={$values['secret_backend'].jwt_role}
+						/>
+						<label for="vault_jwt_mount_path" class="block text-xs font-semibold text-emphasis"
+							>JWT Auth Mount Path (optional)</label
+						>
+						<span class="text-2xs text-secondary"
+							>Mount path of the JWT auth method in Vault. Defaults to <code>jwt</code>. Set this
+							only if you mounted the JWT auth method at a non-default path (<code
+								>vault auth enable -path=&lt;mount&gt; jwt</code
+							>).</span
+						>
+						<TextInput
+							inputProps={{
+								type: 'text',
+								id: 'vault_jwt_mount_path',
+								placeholder: 'jwt',
+								disabled
+							}}
+							bind:value={$values['secret_backend'].jwt_mount_path}
+						/>
 						<details class="mt-2">
-							<summary class="text-xs font-medium text-secondary cursor-pointer hover:text-primary">Vault JWT Setup Instructions</summary>
+							<summary class="text-xs font-medium text-secondary cursor-pointer hover:text-primary"
+								>Vault JWT Setup Instructions</summary
+							>
 							<div class="mt-2 p-2 bg-surface rounded text-2xs text-secondary space-y-2">
 								<p>Configure Vault to accept JWTs from Windmill:</p>
-								<div class="bg-gray-100 dark:bg-gray-800 p-2 rounded font-mono text-2xs overflow-x-auto">
-									<pre># Enable JWT auth method
-vault auth enable jwt
+								<div
+									class="bg-gray-100 dark:bg-gray-800 p-2 rounded font-mono text-2xs overflow-x-auto"
+								>
+									<pre
+										># Enable JWT auth method{jwtMount === 'jwt'
+											? ''
+											: ` at custom mount '${jwtMount}'`}
+vault auth enable {jwtMount === 'jwt' ? 'jwt' : `-path=${jwtMount} jwt`}
 
 # Configure JWT auth with Windmill's JWKS endpoint
-vault write auth/jwt/config \
-  jwks_url="{baseUrl}/.well-known/jwks.json" \
-  bound_issuer="{baseUrl}"
+vault write auth/{jwtMount}/config \
+  jwks_url="{baseUrl}/api/oidc/jwks" \
+  bound_issuer="{baseUrl}/api/oidc/"
 
 # Create a policy for Windmill secrets
 vault policy write windmill-secrets - &lt;&lt;EOF
-path "windmill/data/*" &#123;
+path "{$values['secret_backend']?.mount_path ?? 'windmill'}/data/*" &#123;
   capabilities = ["create", "read", "update", "delete"]
 &#125;
-path "windmill/metadata/*" &#123;
+path "{$values['secret_backend']?.mount_path ?? 'windmill'}/metadata/*" &#123;
   capabilities = ["list", "delete"]
 &#125;
 EOF
 
-# Create the JWT role
-vault write auth/jwt/role/windmill-secrets \
+# Create the JWT role. bound_audiences must match the Vault server
+# address — Windmill signs the JWT with `aud` = your Vault address.
+vault write auth/{jwtMount}/role/{$values['secret_backend']?.jwt_role || 'windmill-secrets'} \
   role_type="jwt" \
-  bound_audiences="{baseUrl}" \
-  user_claim="email" \
+  bound_audiences="{vaultAudience}" \
+  user_claim="sub" \
   policies="windmill-secrets" \
-  ttl="1h"</pre>
+  ttl="1h"</pre
+									>
 								</div>
 							</div>
 						</details>
 					</div>
 				{/if}
 				<div class="flex flex-col gap-1">
-					<label for="vault_namespace" class="block text-xs font-semibold text-emphasis">Namespace (optional)</label>
+					<label for="vault_namespace" class="block text-xs font-semibold text-emphasis"
+						>Namespace (optional)</label
+					>
 					<span class="text-2xs text-secondary">Vault Enterprise namespace</span>
-					<TextInput inputProps={{ type: 'text', id: 'vault_namespace', placeholder: 'admin/my-namespace', disabled }} bind:value={$values['secret_backend'].namespace} />
+					<TextInput
+						inputProps={{
+							type: 'text',
+							id: 'vault_namespace',
+							placeholder: 'admin/my-namespace',
+							disabled
+						}}
+						bind:value={$values['secret_backend'].namespace}
+					/>
 				</div>
 				<div class="flex flex-col gap-1">
-					<Toggle id="vault_skip_ssl_verify" {disabled} bind:checked={$values['secret_backend'].skip_ssl_verify} size="xs" options={{ right: 'Skip TLS certificate verification' }} />
-					<span class="text-2xs text-secondary">Disables TLS verification when connecting to Vault. Only enable for self-signed certificates in development.</span>
+					<Toggle
+						id="vault_skip_ssl_verify"
+						{disabled}
+						bind:checked={$values['secret_backend'].skip_ssl_verify}
+						size="xs"
+						options={{ right: 'Skip TLS certificate verification' }}
+					/>
+					<span class="text-2xs text-secondary"
+						>Disables TLS verification when connecting to Vault. Only enable for self-signed
+						certificates in development.</span
+					>
 				</div>
 			</div>
 			<div class="flex flex-col gap-4 pt-4 border-t">
-				<Button unifiedSize="md" variant="accent" onclick={testVaultConnection} disabled={disabled || !isVaultConfigValid() || testingConnection} loading={testingConnection} startIcon={{ icon: Server }}>Test Connection</Button>
+				<Button
+					unifiedSize="md"
+					variant="accent"
+					onclick={testVaultConnection}
+					disabled={disabled || !isVaultConfigValid() || testingConnection}
+					loading={testingConnection}
+					startIcon={{ icon: Server }}>Test Connection</Button
+				>
 				<div class="flex flex-col gap-4 pt-4 border-t">
 					<span class="block text-xs font-semibold text-emphasis">Secret Migration</span>
-					<span class="text-2xs text-secondary">Original values are NOT deleted to allow for rollback.</span>
+					<span class="text-2xs text-secondary"
+						>Original values are NOT deleted to allow for rollback.</span
+					>
 					<div class="flex gap-4">
 						<div class="flex-1 p-3 border rounded-lg">
-							<div class="flex items-center gap-2 mb-2"><Database size={16} /><ArrowRight size={16} /><Lock size={16} /></div>
+							<div class="flex items-center gap-2 mb-2"
+								><Database size={16} /><ArrowRight size={16} /><Lock size={16} /></div
+							>
 							<p class="text-xs font-medium mb-2">Database → Vault</p>
-							<Button unifiedSize="sm" variant="default" onclick={() => (migrateToVaultModalOpen = true)} disabled={disabled || !isVaultConfigValid() || migratingToVault} startIcon={{ icon: ArrowRight }}>Migrate to Vault</Button>
+							<Button
+								unifiedSize="sm"
+								variant="default"
+								onclick={() => (migrateToVaultModalOpen = true)}
+								disabled={disabled || !isVaultConfigValid() || migratingToVault}
+								startIcon={{ icon: ArrowRight }}>Migrate to Vault</Button
+							>
 						</div>
 						<div class="flex-1 p-3 border rounded-lg">
-							<div class="flex items-center gap-2 mb-2"><Lock size={16} /><ArrowLeft size={16} /><Database size={16} /></div>
+							<div class="flex items-center gap-2 mb-2"
+								><Lock size={16} /><ArrowLeft size={16} /><Database size={16} /></div
+							>
 							<p class="text-xs font-medium mb-2">Vault → Database</p>
-							<Button unifiedSize="sm" variant="default" onclick={() => (migrateToDatabaseModalOpen = true)} disabled={disabled || !isVaultConfigValid() || migratingToDatabase} startIcon={{ icon: ArrowLeft }}>Migrate to Database</Button>
+							<Button
+								unifiedSize="sm"
+								variant="default"
+								onclick={() => (migrateToDatabaseModalOpen = true)}
+								disabled={disabled || !isVaultConfigValid() || migratingToDatabase}
+								startIcon={{ icon: ArrowLeft }}>Migrate to Database</Button
+							>
 						</div>
 					</div>
 				</div>
@@ -441,42 +616,109 @@ vault write auth/jwt/role/windmill-secrets \
 			</div>
 			<div class="grid grid-cols-1 gap-4">
 				<div class="flex flex-col gap-1">
-					<label for="azure_vault_url" class="block text-xs font-semibold text-emphasis">Vault URL</label>
-					<TextInput inputProps={{ type: 'text', id: 'azure_vault_url', placeholder: 'https://my-vault.vault.azure.net', disabled }} bind:value={$values['secret_backend'].vault_url} />
+					<label for="azure_vault_url" class="block text-xs font-semibold text-emphasis"
+						>Vault URL</label
+					>
+					<TextInput
+						inputProps={{
+							type: 'text',
+							id: 'azure_vault_url',
+							placeholder: 'https://my-vault.vault.azure.net',
+							disabled
+						}}
+						bind:value={$values['secret_backend'].vault_url}
+					/>
 				</div>
 				<div class="flex flex-col gap-1">
-					<label for="azure_tenant_id" class="block text-xs font-semibold text-emphasis">Tenant ID</label>
-					<TextInput inputProps={{ type: 'text', id: 'azure_tenant_id', placeholder: '00000000-0000-0000-0000-000000000000', disabled }} bind:value={$values['secret_backend'].tenant_id} />
+					<label for="azure_tenant_id" class="block text-xs font-semibold text-emphasis"
+						>Tenant ID</label
+					>
+					<TextInput
+						inputProps={{
+							type: 'text',
+							id: 'azure_tenant_id',
+							placeholder: '00000000-0000-0000-0000-000000000000',
+							disabled
+						}}
+						bind:value={$values['secret_backend'].tenant_id}
+					/>
 				</div>
 				<div class="flex flex-col gap-1">
-					<label for="azure_client_id" class="block text-xs font-semibold text-emphasis">Client ID</label>
-					<TextInput inputProps={{ type: 'text', id: 'azure_client_id', placeholder: '00000000-0000-0000-0000-000000000000', disabled }} bind:value={$values['secret_backend'].client_id} />
+					<label for="azure_client_id" class="block text-xs font-semibold text-emphasis"
+						>Client ID</label
+					>
+					<TextInput
+						inputProps={{
+							type: 'text',
+							id: 'azure_client_id',
+							placeholder: '00000000-0000-0000-0000-000000000000',
+							disabled
+						}}
+						bind:value={$values['secret_backend'].client_id}
+					/>
 				</div>
 				<div class="flex flex-col gap-1 p-3 bg-surface-secondary rounded-lg">
-					<label for="azure_client_secret" class="block text-xs font-semibold text-emphasis">Client Secret</label>
+					<label for="azure_client_secret" class="block text-xs font-semibold text-emphasis"
+						>Client Secret <span class="text-2xs font-normal text-secondary">(optional)</span
+						></label
+					>
+					<span class="text-2xs text-secondary"
+						>Leave blank to use Azure Workload Identity. Requires
+						<code>AZURE_FEDERATED_TOKEN_FILE</code> on the Windmill process (auto-injected on AKS by
+						the workload-identity webhook; set manually on other Kubernetes clusters).</span
+					>
 					<Password bind:password={$values['secret_backend'].client_secret} small {disabled} />
 				</div>
 				<div class="flex flex-col gap-1 p-3 bg-surface-secondary rounded-lg">
-					<label for="azure_token" class="block text-xs font-semibold text-emphasis">Token (optional)</label>
-					<span class="text-2xs text-secondary">Static Bearer token for testing. If provided, OAuth2 is skipped.</span>
+					<label for="azure_token" class="block text-xs font-semibold text-emphasis"
+						>Token (optional)</label
+					>
+					<span class="text-2xs text-secondary"
+						>Static Bearer token for testing. If provided, OAuth2 is skipped.</span
+					>
 					<Password bind:password={$values['secret_backend'].token} small {disabled} />
 				</div>
 			</div>
 			<div class="flex flex-col gap-4 pt-4 border-t">
-				<Button unifiedSize="md" variant="accent" onclick={testAzureKvConnection} disabled={disabled || !isAzureKvConfigValid() || testingAzureKvConnection} loading={testingAzureKvConnection} startIcon={{ icon: Server }}>Test Connection</Button>
+				<Button
+					unifiedSize="md"
+					variant="accent"
+					onclick={testAzureKvConnection}
+					disabled={disabled || !isAzureKvConfigValid() || testingAzureKvConnection}
+					loading={testingAzureKvConnection}
+					startIcon={{ icon: Server }}>Test Connection</Button
+				>
 				<div class="flex flex-col gap-4 pt-4 border-t">
 					<span class="block text-xs font-semibold text-emphasis">Secret Migration</span>
-					<span class="text-2xs text-secondary">Original values are NOT deleted to allow for rollback.</span>
+					<span class="text-2xs text-secondary"
+						>Original values are NOT deleted to allow for rollback.</span
+					>
 					<div class="flex gap-4">
 						<div class="flex-1 p-3 border rounded-lg">
-							<div class="flex items-center gap-2 mb-2"><Database size={16} /><ArrowRight size={16} /><Cloud size={16} /></div>
+							<div class="flex items-center gap-2 mb-2"
+								><Database size={16} /><ArrowRight size={16} /><Cloud size={16} /></div
+							>
 							<p class="text-xs font-medium mb-2">Database → Azure Key Vault</p>
-							<Button unifiedSize="sm" variant="default" onclick={() => (migrateToAzureKvModalOpen = true)} disabled={disabled || !isAzureKvConfigValid() || migratingToAzureKv} startIcon={{ icon: ArrowRight }}>Migrate to Azure KV</Button>
+							<Button
+								unifiedSize="sm"
+								variant="default"
+								onclick={() => (migrateToAzureKvModalOpen = true)}
+								disabled={disabled || !isAzureKvConfigValid() || migratingToAzureKv}
+								startIcon={{ icon: ArrowRight }}>Migrate to Azure KV</Button
+							>
 						</div>
 						<div class="flex-1 p-3 border rounded-lg">
-							<div class="flex items-center gap-2 mb-2"><Cloud size={16} /><ArrowLeft size={16} /><Database size={16} /></div>
+							<div class="flex items-center gap-2 mb-2"
+								><Cloud size={16} /><ArrowLeft size={16} /><Database size={16} /></div
+							>
 							<p class="text-xs font-medium mb-2">Azure Key Vault → Database</p>
-							<Button unifiedSize="sm" variant="default" onclick={() => (migrateFromAzureKvModalOpen = true)} disabled={disabled || !isAzureKvConfigValid() || migratingFromAzureKv} startIcon={{ icon: ArrowLeft }}>Migrate to Database</Button>
+							<Button
+								unifiedSize="sm"
+								variant="default"
+								onclick={() => (migrateFromAzureKvModalOpen = true)}
+								disabled={disabled || !isAzureKvConfigValid() || migratingFromAzureKv}
+								startIcon={{ icon: ArrowLeft }}>Migrate to Database</Button
+							>
 						</div>
 					</div>
 				</div>
@@ -487,50 +729,118 @@ vault write auth/jwt/role/windmill-secrets \
 			<div class="flex items-center gap-2 mb-4">
 				<Cloud class="text-primary" size={20} />
 				<div>
-					<p class="text-sm font-medium text-emphasis">AWS Secrets Manager Configuration <span class="ml-2 px-1.5 py-0.5 text-2xs font-medium bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-200 rounded">Beta</span></p>
+					<p class="text-sm font-medium text-emphasis"
+						>AWS Secrets Manager Configuration <span
+							class="ml-2 px-1.5 py-0.5 text-2xs font-medium bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-200 rounded"
+							>Beta</span
+						></p
+					>
 					<p class="text-xs text-secondary">Store secrets in AWS Secrets Manager.</p>
 				</div>
 			</div>
 			<div class="grid grid-cols-1 gap-4">
 				<div class="flex flex-col gap-1">
-					<label for="aws_sm_region" class="block text-xs font-semibold text-emphasis">Region</label>
-					<TextInput inputProps={{ type: 'text', id: 'aws_sm_region', placeholder: 'us-east-1', disabled }} bind:value={$values['secret_backend'].region} />
+					<label for="aws_sm_region" class="block text-xs font-semibold text-emphasis">Region</label
+					>
+					<TextInput
+						inputProps={{ type: 'text', id: 'aws_sm_region', placeholder: 'us-east-1', disabled }}
+						bind:value={$values['secret_backend'].region}
+					/>
 				</div>
 				<div class="flex flex-col gap-1">
-					<label for="aws_sm_access_key_id" class="block text-xs font-semibold text-emphasis">Access Key ID (optional)</label>
-					<span class="text-2xs text-secondary">If not provided, the default AWS credential chain is used (env vars, instance profile, EKS pod identity)</span>
-					<TextInput inputProps={{ type: 'text', id: 'aws_sm_access_key_id', placeholder: 'AKIA...', disabled }} bind:value={$values['secret_backend'].access_key_id} />
+					<label for="aws_sm_access_key_id" class="block text-xs font-semibold text-emphasis"
+						>Access Key ID (optional)</label
+					>
+					<span class="text-2xs text-secondary"
+						>If not provided, the default AWS credential chain is used (env vars, instance profile,
+						EKS pod identity)</span
+					>
+					<TextInput
+						inputProps={{
+							type: 'text',
+							id: 'aws_sm_access_key_id',
+							placeholder: 'AKIA...',
+							disabled
+						}}
+						bind:value={$values['secret_backend'].access_key_id}
+					/>
 				</div>
 				<div class="flex flex-col gap-1 p-3 bg-surface-secondary rounded-lg">
-					<label for="aws_sm_secret_access_key" class="block text-xs font-semibold text-emphasis">Secret Access Key (optional)</label>
+					<label for="aws_sm_secret_access_key" class="block text-xs font-semibold text-emphasis"
+						>Secret Access Key (optional)</label
+					>
 					<Password bind:password={$values['secret_backend'].secret_access_key} small {disabled} />
 				</div>
 				<div class="flex flex-col gap-1">
-					<label for="aws_sm_prefix" class="block text-xs font-semibold text-emphasis">Secret Name Prefix (optional)</label>
-					<span class="text-2xs text-secondary">Prefix for secret names in AWS Secrets Manager (default: windmill/)</span>
-					<TextInput inputProps={{ type: 'text', id: 'aws_sm_prefix', placeholder: 'windmill/', disabled }} bind:value={$values['secret_backend'].prefix} />
+					<label for="aws_sm_prefix" class="block text-xs font-semibold text-emphasis"
+						>Secret Name Prefix (optional)</label
+					>
+					<span class="text-2xs text-secondary"
+						>Prefix for secret names in AWS Secrets Manager (default: windmill/)</span
+					>
+					<TextInput
+						inputProps={{ type: 'text', id: 'aws_sm_prefix', placeholder: 'windmill/', disabled }}
+						bind:value={$values['secret_backend'].prefix}
+					/>
 				</div>
 				<div class="flex flex-col gap-1">
-					<label for="aws_sm_endpoint_url" class="block text-xs font-semibold text-emphasis">Endpoint URL (optional)</label>
-					<span class="text-2xs text-secondary">Custom endpoint for LocalStack or other compatible services</span>
-					<TextInput inputProps={{ type: 'text', id: 'aws_sm_endpoint_url', placeholder: 'http://localhost:4566', disabled }} bind:value={$values['secret_backend'].endpoint_url} />
+					<label for="aws_sm_endpoint_url" class="block text-xs font-semibold text-emphasis"
+						>Endpoint URL (optional)</label
+					>
+					<span class="text-2xs text-secondary"
+						>Custom endpoint for LocalStack or other compatible services</span
+					>
+					<TextInput
+						inputProps={{
+							type: 'text',
+							id: 'aws_sm_endpoint_url',
+							placeholder: 'http://localhost:4566',
+							disabled
+						}}
+						bind:value={$values['secret_backend'].endpoint_url}
+					/>
 				</div>
 			</div>
 			<div class="flex flex-col gap-4 pt-4 border-t">
-				<Button unifiedSize="md" variant="accent" onclick={testAwsSmConnection} disabled={disabled || !isAwsSmConfigValid() || testingAwsSmConnection} loading={testingAwsSmConnection} startIcon={{ icon: Server }}>Test Connection</Button>
+				<Button
+					unifiedSize="md"
+					variant="accent"
+					onclick={testAwsSmConnection}
+					disabled={disabled || !isAwsSmConfigValid() || testingAwsSmConnection}
+					loading={testingAwsSmConnection}
+					startIcon={{ icon: Server }}>Test Connection</Button
+				>
 				<div class="flex flex-col gap-4 pt-4 border-t">
 					<span class="block text-xs font-semibold text-emphasis">Secret Migration</span>
-					<span class="text-2xs text-secondary">Original values are NOT deleted to allow for rollback.</span>
+					<span class="text-2xs text-secondary"
+						>Original values are NOT deleted to allow for rollback.</span
+					>
 					<div class="flex gap-4">
 						<div class="flex-1 p-3 border rounded-lg">
-							<div class="flex items-center gap-2 mb-2"><Database size={16} /><ArrowRight size={16} /><Cloud size={16} /></div>
+							<div class="flex items-center gap-2 mb-2"
+								><Database size={16} /><ArrowRight size={16} /><Cloud size={16} /></div
+							>
 							<p class="text-xs font-medium mb-2">Database → AWS Secrets Manager</p>
-							<Button unifiedSize="sm" variant="default" onclick={() => (migrateToAwsSmModalOpen = true)} disabled={disabled || !isAwsSmConfigValid() || migratingToAwsSm} startIcon={{ icon: ArrowRight }}>Migrate to AWS SM</Button>
+							<Button
+								unifiedSize="sm"
+								variant="default"
+								onclick={() => (migrateToAwsSmModalOpen = true)}
+								disabled={disabled || !isAwsSmConfigValid() || migratingToAwsSm}
+								startIcon={{ icon: ArrowRight }}>Migrate to AWS SM</Button
+							>
 						</div>
 						<div class="flex-1 p-3 border rounded-lg">
-							<div class="flex items-center gap-2 mb-2"><Cloud size={16} /><ArrowLeft size={16} /><Database size={16} /></div>
+							<div class="flex items-center gap-2 mb-2"
+								><Cloud size={16} /><ArrowLeft size={16} /><Database size={16} /></div
+							>
 							<p class="text-xs font-medium mb-2">AWS Secrets Manager → Database</p>
-							<Button unifiedSize="sm" variant="default" onclick={() => (migrateFromAwsSmModalOpen = true)} disabled={disabled || !isAwsSmConfigValid() || migratingFromAwsSm} startIcon={{ icon: ArrowLeft }}>Migrate to Database</Button>
+							<Button
+								unifiedSize="sm"
+								variant="default"
+								onclick={() => (migrateFromAwsSmModalOpen = true)}
+								disabled={disabled || !isAwsSmConfigValid() || migratingFromAwsSm}
+								startIcon={{ icon: ArrowLeft }}>Migrate to Database</Button
+							>
 						</div>
 					</div>
 				</div>
@@ -539,21 +849,105 @@ vault write auth/jwt/role/windmill-secrets \
 	{/if}
 </div>
 
-<ConfirmationModal title="Migrate to AWS Secrets Manager" confirmationText="Migrate" open={migrateToAwsSmModalOpen} loading={migratingToAwsSm} type="reload" onCanceled={() => { migrateToAwsSmModalOpen = false }} onConfirmed={migrateSecretsToAwsSm}>
-	{#snippet children()}<div class="flex flex-col gap-2"><p>This will copy all secrets from the database to AWS Secrets Manager.</p><p class="text-yellow-600 dark:text-yellow-400 text-sm">Database values are NOT deleted automatically.</p></div>{/snippet}
+<ConfirmationModal
+	title="Migrate to AWS Secrets Manager"
+	confirmationText="Migrate"
+	open={migrateToAwsSmModalOpen}
+	loading={migratingToAwsSm}
+	type="reload"
+	onCanceled={() => {
+		migrateToAwsSmModalOpen = false
+	}}
+	onConfirmed={migrateSecretsToAwsSm}
+>
+	{#snippet children()}<div class="flex flex-col gap-2"
+			><p>This will copy all secrets from the database to AWS Secrets Manager.</p><p
+				class="text-yellow-600 dark:text-yellow-400 text-sm"
+				>Database values are NOT deleted automatically.</p
+			></div
+		>{/snippet}
 </ConfirmationModal>
-<ConfirmationModal title="Migrate to Database" confirmationText="Migrate" open={migrateFromAwsSmModalOpen} loading={migratingFromAwsSm} type="reload" onCanceled={() => { migrateFromAwsSmModalOpen = false }} onConfirmed={migrateSecretsFromAwsSm}>
-	{#snippet children()}<div class="flex flex-col gap-2"><p>This will copy all secrets from AWS Secrets Manager back to the database.</p><p class="text-yellow-600 dark:text-yellow-400 text-sm">AWS Secrets Manager values are NOT deleted automatically.</p></div>{/snippet}
+<ConfirmationModal
+	title="Migrate to Database"
+	confirmationText="Migrate"
+	open={migrateFromAwsSmModalOpen}
+	loading={migratingFromAwsSm}
+	type="reload"
+	onCanceled={() => {
+		migrateFromAwsSmModalOpen = false
+	}}
+	onConfirmed={migrateSecretsFromAwsSm}
+>
+	{#snippet children()}<div class="flex flex-col gap-2"
+			><p>This will copy all secrets from AWS Secrets Manager back to the database.</p><p
+				class="text-yellow-600 dark:text-yellow-400 text-sm"
+				>AWS Secrets Manager values are NOT deleted automatically.</p
+			></div
+		>{/snippet}
 </ConfirmationModal>
-<ConfirmationModal title="Migrate to Azure Key Vault" confirmationText="Migrate" open={migrateToAzureKvModalOpen} loading={migratingToAzureKv} type="reload" onCanceled={() => { migrateToAzureKvModalOpen = false }} onConfirmed={migrateSecretsToAzureKv}>
-	{#snippet children()}<div class="flex flex-col gap-2"><p>This will copy all secrets to Azure Key Vault.</p><p class="text-yellow-600 dark:text-yellow-400 text-sm">Database values are NOT deleted automatically.</p></div>{/snippet}
+<ConfirmationModal
+	title="Migrate to Azure Key Vault"
+	confirmationText="Migrate"
+	open={migrateToAzureKvModalOpen}
+	loading={migratingToAzureKv}
+	type="reload"
+	onCanceled={() => {
+		migrateToAzureKvModalOpen = false
+	}}
+	onConfirmed={migrateSecretsToAzureKv}
+>
+	{#snippet children()}<div class="flex flex-col gap-2"
+			><p>This will copy all secrets to Azure Key Vault.</p><p
+				class="text-yellow-600 dark:text-yellow-400 text-sm"
+				>Database values are NOT deleted automatically.</p
+			></div
+		>{/snippet}
 </ConfirmationModal>
-<ConfirmationModal title="Migrate to Database" confirmationText="Migrate" open={migrateFromAzureKvModalOpen} loading={migratingFromAzureKv} type="reload" onCanceled={() => { migrateFromAzureKvModalOpen = false }} onConfirmed={migrateSecretsFromAzureKv}>
-	{#snippet children()}<div class="flex flex-col gap-2"><p>This will copy all secrets from Azure Key Vault back to the database.</p></div>{/snippet}
+<ConfirmationModal
+	title="Migrate to Database"
+	confirmationText="Migrate"
+	open={migrateFromAzureKvModalOpen}
+	loading={migratingFromAzureKv}
+	type="reload"
+	onCanceled={() => {
+		migrateFromAzureKvModalOpen = false
+	}}
+	onConfirmed={migrateSecretsFromAzureKv}
+>
+	{#snippet children()}<div class="flex flex-col gap-2"
+			><p>This will copy all secrets from Azure Key Vault back to the database.</p></div
+		>{/snippet}
 </ConfirmationModal>
-<ConfirmationModal title="Migrate to Vault" confirmationText="Migrate" open={migrateToVaultModalOpen} loading={migratingToVault} type="reload" onCanceled={() => { migrateToVaultModalOpen = false }} onConfirmed={migrateSecretsToVault}>
-	{#snippet children()}<div class="flex flex-col gap-2"><p>This will copy all secrets to HashiCorp Vault.</p><p class="text-yellow-600 dark:text-yellow-400 text-sm">Database values are NOT deleted automatically.</p></div>{/snippet}
+<ConfirmationModal
+	title="Migrate to Vault"
+	confirmationText="Migrate"
+	open={migrateToVaultModalOpen}
+	loading={migratingToVault}
+	type="reload"
+	onCanceled={() => {
+		migrateToVaultModalOpen = false
+	}}
+	onConfirmed={migrateSecretsToVault}
+>
+	{#snippet children()}<div class="flex flex-col gap-2"
+			><p>This will copy all secrets to HashiCorp Vault.</p><p
+				class="text-yellow-600 dark:text-yellow-400 text-sm"
+				>Database values are NOT deleted automatically.</p
+			></div
+		>{/snippet}
 </ConfirmationModal>
-<ConfirmationModal title="Migrate to Database" confirmationText="Migrate" open={migrateToDatabaseModalOpen} loading={migratingToDatabase} type="reload" onCanceled={() => { migrateToDatabaseModalOpen = false }} onConfirmed={migrateSecretsToDatabase}>
-	{#snippet children()}<div class="flex flex-col gap-2"><p>This will copy all secrets from Vault back to the database.</p></div>{/snippet}
+<ConfirmationModal
+	title="Migrate to Database"
+	confirmationText="Migrate"
+	open={migrateToDatabaseModalOpen}
+	loading={migratingToDatabase}
+	type="reload"
+	onCanceled={() => {
+		migrateToDatabaseModalOpen = false
+	}}
+	onConfirmed={migrateSecretsToDatabase}
+>
+	{#snippet children()}<div class="flex flex-col gap-2"
+			><p>This will copy all secrets from Vault back to the database.</p></div
+		>{/snippet}
 </ConfirmationModal>