windmill-components 1.665.1 → 1.677.1

package/package/components/FlowStatusWaitingForEvents.svelte

@@ -2,7 +2,7 @@
 import { JobService } from '../gen';
 import { workspaceStore } from '../stores';
 import { sendUserToast } from '../toast';
-import { X } from 'lucide-svelte';
+import { ExternalLink, X } from 'lucide-svelte';
 import DisplayResult from './DisplayResult.svelte';
 import Tooltip from './Tooltip.svelte';
 import { Button } from './common';
@@ -13,6 +13,7 @@ let { isOwner: _isOwner, workspaceId, job, light = false } = $props();
 let default_payload = $state({});
 let description = $state(undefined);
 let hide_cancel = $state(false);
+let approvalPageUrl = $state(undefined);
 let defaultValues = $state({});
 let schema = $state({});
 let lastJobId = undefined;
@@ -33,10 +34,13 @@ async function getDefaultArgs() {
     description = job_result?.description;
     defaultValues = JSON.parse(JSON.stringify(args));
     default_payload = args;
+    approvalPageUrl = job_result?.['approvalPage'];
+    actionTaken = false;
     hide_cancel = job?.raw_flow?.modules?.[approvalStep]?.suspend?.hide_cancel ?? false;
     schema = mergeSchema(job?.raw_flow?.modules?.[approvalStep]?.suspend?.resume_form?.schema ?? {}, job_result?.enums ?? {});
 }
 let loading = $state(false);
+let actionTaken = $state(false);
 async function continu(approve) {
     loading = true;
     try {
@@ -48,6 +52,7 @@ async function continu(approve) {
                 approved: approve
             }
         });
+        actionTaken = true;
     }
     catch (e) {
         sendUserToast(e?.body ?? e?.message ?? 'Failed', true);
@@ -68,7 +73,7 @@ $effect(() => {
 		<div class="mt-2"></div>
 	{/if}
 	<div>
-		<div class={twMerge('flex gap-2', light ? 'flex-col' : 'flex-row ')}>
+		<div class={twMerge('flex gap-2 items-center', light ? 'flex-col' : 'flex-row ')}>
 			{#if !hide_cancel}
 				<div>
 					<Button
@@ -76,7 +81,7 @@ $effect(() => {
 						iconOnly
 						startIcon={{ icon: X }}
 						variant="default"
-						disabled={loading}
+						disabled={loading || actionTaken}
 						destructive
 						unifiedSize="md"
 						on:click={() => continu(false)}
@@ -84,12 +89,28 @@ $effect(() => {
 				</div>
 			{/if}
 			<div>
-				<Button variant="accent" onClick={() => continu(true)} disabled={loading} unifiedSize="md">
+				<Button
+					variant="accent"
+					onClick={() => continu(true)}
+					disabled={loading || actionTaken}
+					unifiedSize="md"
+				>
 					Resume
 					<Tooltip class="text-white">Resume or approve this suspended step</Tooltip>
 				</Button>
 			</div>
 
+			{#if approvalPageUrl}
+				<a
+					href={approvalPageUrl}
+					target="_blank"
+					rel="noreferrer"
+					class="text-accent flex items-center gap-1 whitespace-nowrap"
+				>
+					Approval page <ExternalLink size={12} />
+				</a>
+			{/if}
+
 			{#if job?.raw_flow?.modules?.[approvalStep]?.suspend?.resume_form?.schema}
 				<div
 					class={twMerge(

package/package/components/HighlightCode.svelte

@@ -13,6 +13,7 @@ import csharp from 'svelte-highlight/languages/csharp';
 import yaml from 'svelte-highlight/languages/yaml';
 import java from 'svelte-highlight/languages/java';
 import ruby from 'svelte-highlight/languages/ruby';
+import r from 'svelte-highlight/languages/r';
 import { Button } from './common';
 import { copyToClipboard } from '../utils';
 import { ClipboardCopy } from 'lucide-svelte';
@@ -67,6 +68,8 @@ function getLang(lang) {
             return java;
         case 'ruby':
             return ruby;
+        case 'rlang':
+            return r;
         case 'json':
             return json;
         // for related places search: ADD_NEW_LANG

package/package/components/InstanceSetting.svelte

@@ -565,32 +565,16 @@ $effect(() => {
 									for="OTEL_EXPORTER_OTLP_PROTOCOL"
 									class="block text-xs font-semibold text-emphasis">Protocol</label
 								>
-								<span class="text-primary font-normal text-xs">gRPC</span>
+								<select
+									id="OTEL_EXPORTER_OTLP_PROTOCOL"
+									class="!text-xs"
+									disabled={!$enterpriseLicense}
+									bind:value={$values[setting.key].otel_exporter_otlp_protocol}
+								>
+									<option value={undefined}>grpc (default)</option>
+									<option value="http/protobuf">http/protobuf</option>
+								</select>
 							</div>
-							<!-- <div>
-							<label for="OTEL_EXPORTER_OTLP_PROTOCOL" class="block text-sm font-semibold"
-								>Protocol<span class="text-2xs text-primary ml-4"
-									>grpc, http/protobuf, http/json</span
-								></label
-							>
-							<input
-								type="text"
-								id="OTEL_EXPORTER_OTLP_PROTOCOL"
-								placeholder="grpc"
-								bind:value={$values[setting.key].otel_exporter_otlp_protocol}
-							/>
-						</div>
-						<div>
-							<label for="OTEL_EXPORTER_OTLP_COMPRESSION" class="block text-sm font-semibold"
-								>Compression <span class="text-2xs text-primary ml-4">none, gzip</span></label
-							>
-							<input
-								type="text"
-								id="OTEL_EXPORTER_OTLP_COMPRESSION"
-								placeholder="none"
-								bind:value={$values[setting.key].otel_exporter_otlp_compression}
-							/>
-						</div> -->
 						{/if}
 					</div>
 				{:else if setting.fieldType == 'otel_tracing_proxy'}

package/package/components/InstanceSettings.svelte

@@ -16,6 +16,7 @@ import Toggle from './Toggle.svelte';
 import SettingsFooter from './workspaceSettings/SettingsFooter.svelte';
 import SettingsPageHeader from './settings/SettingsPageHeader.svelte';
 import WorkspaceRegistries from './instanceSettings/WorkspaceRegistries.svelte';
+import DbHealth from './instanceSettings/DbHealth.svelte';
 let { tab = $bindable('Core'), hideTabs = false, closeDrawer = () => { }, authSubTab = $bindable('sso'), onNavigateToTab, quickSetup = false, yamlMode = $bindable(false), hasUnsavedChanges = $bindable(false), hasAnyInvalid = $bindable(false) } = $props();
 let values = writable({});
 let initialOauths = $state({});
@@ -34,6 +35,15 @@ export function getLicenseKey() {
 }
 loadSettings();
 loadVersion();
+// When the user enables object storage for the first time, default
+// `monitor_logs_on_s3` to true so S3 log files get cleaned up with their
+// jobs. Backend still defaults to false for backwards compat with
+// operators who never touched the setting.
+$effect(() => {
+    if ($values['object_store_cache_config'] && $values['monitor_logs_on_s3'] === undefined) {
+        values.update((v) => ({ ...v, monitor_logs_on_s3: true }));
+    }
+});
 const dispatch = createEventDispatcher();
 async function loadVersion() {
     version = await SettingsService.backendVersion();
@@ -920,6 +930,12 @@ $effect(() => {
 				title="GitHub Enterprise App"
 				description="Configure a self-managed GitHub App for GitHub Enterprise Server git sync."
 			/>
+		{:else if category == 'DB Health'}
+			<SettingsPageHeader
+				title="DB Health"
+				description="On-demand database diagnostics. Analyze table sizes, job retention, connection pool health, vacuum status, and more."
+			/>
+			<DbHealth />
 		{:else if category == 'Auth/OAuth/SAML'}
 			<AuthSettings
 				bind:oauths

package/package/components/LabelsInput.svelte

@@ -0,0 +1,149 @@
+<script lang="ts">import Badge from './common/badge/Badge.svelte';
+import { Plus, Tag, X } from 'lucide-svelte';
+import { workspaceStore } from '../stores';
+let { labels = $bindable(), onchange, class: clazz = '' } = $props();
+let adding = $state(false);
+let inputValue = $state('');
+let inputEl = $state();
+let existingLabels = $state([]);
+let selectedIdx = $state(-1);
+let suggestions = $derived(existingLabels
+    .filter((l) => (!inputValue || l.toLowerCase().includes(inputValue.toLowerCase())) &&
+    !(labels ?? []).includes(l))
+    .slice(0, 8));
+let trimmedInput = $derived(inputValue.trim());
+let showCreateNew = $derived(trimmedInput.length > 0 &&
+    !suggestions.some((s) => s.toLowerCase() === trimmedInput.toLowerCase()) &&
+    !(labels ?? []).includes(trimmedInput));
+async function loadExistingLabels() {
+    try {
+        const resp = await fetch(`/api/w/${$workspaceStore}/labels/list`);
+        if (resp.ok)
+            existingLabels = await resp.json();
+    }
+    catch { }
+}
+function startAdding() {
+    adding = true;
+    inputValue = '';
+    selectedIdx = -1;
+    loadExistingLabels();
+    setTimeout(() => inputEl?.focus(), 0);
+}
+function addLabel(value) {
+    const v = (value ?? inputValue).trim().slice(0, 50);
+    if (!v) {
+        adding = false;
+        return;
+    }
+    if (!labels) {
+        labels = [];
+    }
+    if (!labels.includes(v)) {
+        labels = [...labels, v];
+        onchange?.();
+    }
+    inputValue = '';
+    adding = false;
+}
+function removeLabel(label) {
+    if (labels) {
+        labels = labels.filter((l) => l !== label);
+        onchange?.();
+    }
+}
+function onKeydown(e) {
+    if (e.key === 'Enter') {
+        e.preventDefault();
+        if (selectedIdx >= 0 && selectedIdx < suggestions.length) {
+            addLabel(suggestions[selectedIdx]);
+        }
+        else {
+            addLabel(); // either "Create new" selected or free text
+        }
+    }
+    else if (e.key === 'Escape') {
+        inputValue = '';
+        adding = false;
+    }
+    else if (e.key === 'ArrowDown') {
+        e.preventDefault();
+        const maxIdx = suggestions.length + (showCreateNew ? 1 : 0) - 1;
+        selectedIdx = Math.min(selectedIdx + 1, maxIdx);
+    }
+    else if (e.key === 'ArrowUp') {
+        e.preventDefault();
+        selectedIdx = Math.max(selectedIdx - 1, -1);
+    }
+}
+function onBlur() {
+    // Delay to allow click on suggestion
+    setTimeout(() => {
+        if (adding)
+            addLabel();
+    }, 150);
+}
+</script>
+
+<div class="inline-flex items-center gap-1 ml-0.5 h-5 {clazz}">
+	{#each labels ?? [] as label (label)}
+		<Badge color="blue" small>
+			{label}
+			<button class="ml-0.5 hover:text-red-500" onclick={() => removeLabel(label)}>
+				<X size={10} />
+			</button>
+		</Badge>
+	{/each}
+	{#if adding}
+		<div class="relative">
+			<input
+				bind:this={inputEl}
+				bind:value={inputValue}
+				onkeydown={onKeydown}
+				onblur={onBlur}
+				class="text-2xs border border-blue-300 rounded px-1.5 py-0 h-5 max-w-32 outline-none focus:ring-1 focus:ring-blue-400"
+				placeholder="label"
+			/>
+			{#if suggestions.length > 0 || showCreateNew}
+				<div
+					class="absolute top-6 left-0 z-50 bg-surface border border-light rounded shadow-md max-h-32 overflow-y-auto min-w-32"
+				>
+					{#each suggestions as suggestion, i}
+						<button
+							class="w-full text-left text-2xs px-2 py-1 hover:bg-surface-hover {i === selectedIdx
+								? 'bg-surface-hover'
+								: ''}"
+							onmousedown={(e) => {
+								e.preventDefault()
+								addLabel(suggestion)
+							}}
+						>
+							{suggestion}
+						</button>
+					{/each}
+					{#if showCreateNew}
+						<button
+							class="w-full text-left text-2xs px-2 py-1 hover:bg-surface-hover text-blue-600 {selectedIdx ===
+							suggestions.length
+								? 'bg-surface-hover'
+								: ''}"
+							onmousedown={(e) => {
+								e.preventDefault()
+								addLabel()
+							}}
+						>
+							+ Create "{trimmedInput}"
+						</button>
+					{/if}
+				</div>
+			{/if}
+		</div>
+	{:else}
+		<button
+			class="text-tertiary hover:text-secondary text-2xs flex items-center gap-0.5"
+			onclick={startAdding}
+		>
+			<Tag size={12} /><Plus size={8} />
+		</button>
+	{/if}
+</div>

package/package/components/LabelsInput.svelte.d.ts

@@ -0,0 +1,8 @@
+interface Props {
+    labels: string[] | undefined;
+    onchange?: () => void;
+    class?: string;
+}
+declare const LabelsInput: import("svelte").Component<Props, {}, "labels">;
+type LabelsInput = ReturnType<typeof LabelsInput>;
+export default LabelsInput;

package/package/components/Login.svelte

@@ -19,6 +19,7 @@ import { onDestroy, onMount } from 'svelte';
 import Skeleton from './common/skeleton/Skeleton.svelte';
 import Button from './common/button/Button.svelte';
 import { sameTopDomainOrigin } from '../cookies';
+import { isValidLogoutRedirect } from '../logoutRedirect';
 let { rd = undefined, email = $bindable(undefined), password = $bindable(undefined), error = undefined, popup = false, firstTime = false, onLoginSuccess = undefined } = $props();
 const providers = [
     {
@@ -99,7 +100,11 @@ async function login() {
 }
 async function redirectUser() {
     if (rd?.startsWith('http')) {
-        window.location.href = rd;
+        if (isValidLogoutRedirect(rd)) {
+            window.location.href = rd;
+            return;
+        }
+        goto('/');
         return;
     }
     if ($workspaceStore) {

package/package/components/ObjectStoreConfigSettings.svelte

@@ -1,10 +1,12 @@
-<script lang="ts">import { Database, Loader2 } from 'lucide-svelte';
+<script lang="ts">import { Database, HardDrive, Loader2, Trash2 } from 'lucide-svelte';
+import { onDestroy } from 'svelte';
 import Toggle from './Toggle.svelte';
 import { Button, Tab, Tabs } from './common';
 import { SettingService } from '../gen';
 import { sendUserToast } from '../toast';
 import TestConnection from './TestConnection.svelte';
 import { enterpriseLicense } from '../stores';
+import { displaySize } from '../utils';
 import SimpleEditor from './SimpleEditor.svelte';
 import Label from './Label.svelte';
 import TextInput from './text_input/TextInput.svelte';
@@ -28,6 +30,126 @@ async function testConnection() {
         loading = false;
     }
 }
+let usageStatus = $state(undefined);
+let usageStarting = $state(false);
+let usagePollHandle = undefined;
+async function fetchUsageStatus() {
+    try {
+        usageStatus = (await SettingService.getObjectStorageUsage()) ?? null;
+    }
+    catch (e) {
+        // Silent — polling errors shouldn't spam toasts.
+        console.warn('failed to fetch storage usage status', e);
+    }
+}
+function startUsagePolling() {
+    if (usagePollHandle !== undefined)
+        return;
+    usagePollHandle = setInterval(async () => {
+        await fetchUsageStatus();
+        if (usageStatus && !usageStatus.running) {
+            stopUsagePolling();
+        }
+    }, 1500);
+}
+function stopUsagePolling() {
+    if (usagePollHandle !== undefined) {
+        clearInterval(usagePollHandle);
+        usagePollHandle = undefined;
+    }
+}
+async function startUsage() {
+    usageStarting = true;
+    try {
+        await SettingService.computeObjectStorageUsage();
+        await fetchUsageStatus();
+        startUsagePolling();
+    }
+    catch (e) {
+        sendUserToast(e?.body ?? e?.message ?? 'Failed to start storage usage computation', true);
+    }
+    finally {
+        usageStarting = false;
+    }
+}
+let cleanupStatus = $state(undefined);
+let cleanupStarting = $state(false);
+let cleanupPollHandle = undefined;
+let cleanupProgress = $derived.by(() => {
+    if (!cleanupStatus)
+        return 0;
+    const total = cleanupStatus.total_service + cleanupStatus.total_jobs;
+    const processed = cleanupStatus.processed_service + cleanupStatus.processed_jobs;
+    return total > 0 ? Math.min(100, Math.round((processed / total) * 100)) : 0;
+});
+async function fetchCleanupStatus() {
+    try {
+        cleanupStatus = (await SettingService.getLogCleanupStatus()) ?? null;
+    }
+    catch (e) {
+        // Silent — polling errors shouldn't spam toasts.
+        console.warn('failed to fetch log cleanup status', e);
+    }
+}
+function startPolling() {
+    if (cleanupPollHandle !== undefined)
+        return;
+    cleanupPollHandle = setInterval(async () => {
+        await fetchCleanupStatus();
+        if (cleanupStatus && !cleanupStatus.running) {
+            stopPolling();
+        }
+    }, 1000);
+}
+function stopPolling() {
+    if (cleanupPollHandle !== undefined) {
+        clearInterval(cleanupPollHandle);
+        cleanupPollHandle = undefined;
+    }
+}
+async function startCleanup() {
+    cleanupStarting = true;
+    try {
+        await SettingService.runLogCleanup();
+        await fetchCleanupStatus();
+        startPolling();
+    }
+    catch (e) {
+        sendUserToast(e?.body ?? e?.message ?? 'Failed to start cleanup', true);
+    }
+    finally {
+        cleanupStarting = false;
+    }
+}
+let hasConfig = $derived(Boolean(bucket_config));
+$effect(() => {
+    if (hasConfig) {
+        let cancelled = false;
+        fetchCleanupStatus().then(() => {
+            if (!cancelled && cleanupStatus?.running) {
+                startPolling();
+            }
+        });
+        fetchUsageStatus().then(() => {
+            if (!cancelled && usageStatus?.running) {
+                startUsagePolling();
+            }
+        });
+        return () => {
+            cancelled = true;
+        };
+    }
+    else {
+        stopPolling();
+        stopUsagePolling();
+        cleanupStatus = undefined;
+        usageStatus = undefined;
+    }
+});
+onDestroy(() => {
+    stopPolling();
+    stopUsagePolling();
+});
 let simpleEditor = $state(undefined);
 let serviceAccountKeyCode = $state(bucket_config?.type === 'Gcs'
     ? JSON.stringify(bucket_config.serviceAccountKey, null, '\t')
@@ -93,6 +215,156 @@ $effect(() => {
 			/>
 		</div>
 
+		<div class="border rounded-md p-3 my-2">
+			<div class="flex items-center justify-between gap-2">
+				<div class="flex flex-col">
+					<span class="text-xs font-semibold text-emphasis">Storage usage by folder</span>
+					<span class="text-tertiary text-2xs">
+						Runs in the background — large buckets can take several minutes.
+					</span>
+				</div>
+				<Button
+					spacingSize="sm"
+					size="xs"
+					btnClasses="h-8"
+					variant="border"
+					disabled={usageStarting || usageStatus?.running}
+					on:click={startUsage}
+				>
+					{#if usageStarting || usageStatus?.running}
+						<Loader2 class="animate-spin mr-2 !h-4 !w-4" />
+					{:else}
+						<HardDrive class="mr-2 !h-4 !w-4" />
+					{/if}
+					{usageStatus?.running
+						? 'Running…'
+						: usageStatus && usageStatus.folders.length > 0
+							? 'Refresh'
+							: 'Show usage'}
+				</Button>
+			</div>
+
+			{#if usageStatus}
+				<div class="mt-2 flex flex-col gap-1">
+					{#if usageStatus.running}
+						<div class="text-2xs text-tertiary">
+							Scanning…
+							{usageStatus.scanned_objects.toLocaleString()} objects inspected
+							{#if usageStatus.current_prefix}
+								— currently under
+								<span class="font-mono">{usageStatus.current_prefix}</span>
+							{/if}
+						</div>
+					{:else if usageStatus.finished_at}
+						<div class="text-2xs text-tertiary">
+							Scanned {usageStatus.scanned_objects.toLocaleString()} objects · finished at {new Date(
+								usageStatus.finished_at
+							).toLocaleString()}
+						</div>
+					{/if}
+					{#if usageStatus.error}
+						<div class="text-red-500 text-2xs">Error: {usageStatus.error}</div>
+					{/if}
+					{#if usageStatus.folders.length > 0}
+						<div class="flex flex-col gap-0.5 mt-1">
+							{#each usageStatus.folders as item (item.prefix)}
+								<div
+									class="flex justify-between items-center text-xs py-1 px-2 rounded hover:bg-surface-hover"
+									title={item.partial
+										? 'Listing errored mid-stream; size is a lower bound, not the true total.'
+										: undefined}
+								>
+									<span class="font-mono text-secondary">{item.prefix}</span>
+									<span class="text-tertiary font-semibold">
+										{displaySize(item.size) ?? '0 B'}{item.partial ? ' (partial)' : ''}
+									</span>
+								</div>
+							{/each}
+							<div
+								class="flex justify-between items-center text-xs py-1 px-2 border-t mt-1 pt-2 font-semibold"
+							>
+								<span>Total{usageStatus.running ? ' (partial)' : ''}</span>
+								<span
+									>{displaySize(usageStatus.folders.reduce((acc, item) => acc + item.size, 0)) ??
+										'0 B'}</span
+								>
+							</div>
+						</div>
+					{:else if !usageStatus.running && usageStatus.finished_at}
+						<div class="text-tertiary text-xs">No objects found in the bucket.</div>
+					{/if}
+				</div>
+			{/if}
+		</div>
+
+		<div class="border rounded-md p-3 my-2">
+			<div class="flex items-center justify-between gap-2">
+				<div class="flex flex-col">
+					<span class="text-xs font-semibold text-emphasis">Clean up expired logs</span>
+					<span class="text-tertiary text-2xs">
+						Delete expired service &amp; job logs from object storage and disk now, then scan the
+						bucket for orphan log files left behind by previously deleted jobs. Uses batched deletes
+						(up to 1000 objects per request).
+					</span>
+				</div>
+				<Button
+					spacingSize="sm"
+					size="xs"
+					btnClasses="h-8"
+					variant="border"
+					disabled={cleanupStarting || cleanupStatus?.running}
+					on:click={startCleanup}
+				>
+					{#if cleanupStarting || cleanupStatus?.running}
+						<Loader2 class="animate-spin mr-2 !h-4 !w-4" />
+					{:else}
+						<Trash2 class="mr-2 !h-4 !w-4" />
+					{/if}
+					{cleanupStatus?.running ? 'Running…' : 'Run cleanup'}
+				</Button>
+			</div>
+
+			{#if cleanupStatus}
+				{@const total = cleanupStatus.total_service + cleanupStatus.total_jobs}
+				{@const processed = cleanupStatus.processed_service + cleanupStatus.processed_jobs}
+				<div class="mt-3 flex flex-col gap-1">
+					<div class="w-full h-2 bg-surface-secondary rounded overflow-hidden">
+						<div class="h-full bg-blue-500 transition-all" style:width="{cleanupProgress}%"></div>
+					</div>
+					<div class="flex justify-between text-2xs text-tertiary">
+						<span>
+							Phase: <span class="font-semibold">{cleanupStatus.phase}</span>
+						</span>
+						<span>
+							S3 deleted: {cleanupStatus.s3_deleted.toLocaleString()}
+							{#if cleanupStatus.errors > 0}
+								&middot; errors: {cleanupStatus.errors.toLocaleString()}
+							{/if}
+						</span>
+					</div>
+					<div class="text-2xs text-tertiary">
+						DB: {processed.toLocaleString()} / {total.toLocaleString()} rows deleted ({cleanupProgress}%)
+						&middot; service {cleanupStatus.processed_service.toLocaleString()}/{cleanupStatus.total_service.toLocaleString()},
+						job {cleanupStatus.processed_jobs.toLocaleString()}/{cleanupStatus.total_jobs.toLocaleString()}
+					</div>
+					<div class="text-2xs text-tertiary">
+						Orphan scan: {cleanupStatus.orphans_scanned.toLocaleString()} scanned,
+						{cleanupStatus.orphans_deleted.toLocaleString()} deleted
+					</div>
+					{#if !cleanupStatus.running && cleanupStatus.finished_at}
+						<div class="text-2xs text-tertiary">
+							Finished at {new Date(cleanupStatus.finished_at).toLocaleString()}
+						</div>
+					{/if}
+					{#if cleanupStatus.last_error}
+						<div class="text-red-500 text-2xs mt-1">
+							Last error: {cleanupStatus.last_error}
+						</div>
+					{/if}
+				</div>
+			{/if}
+		</div>
+
 		<Tabs
 			selected={bucket_config?.type ?? 'S3'}
 			on:selected={(e) => {

package/package/components/OktaSetting.svelte

@@ -10,17 +10,18 @@ let lastValues = { domain: undefined, custom: undefined };
 function changeDomain(domain, custom) {
     if (value) {
         let baseUrl = custom ? `https://${domain}` : `https://${domain}.okta.com`;
+        let authPath = custom ? '/v1' : '/oauth2/v1';
         value = {
             ...value,
             login_config: {
-                auth_url: `${baseUrl}/oauth2/v1/authorize`,
-                token_url: `${baseUrl}/oauth2/v1/token`,
-                userinfo_url: `${baseUrl}/oauth2/v1/userinfo`,
+                auth_url: `${baseUrl}${authPath}/authorize`,
+                token_url: `${baseUrl}${authPath}/token`,
+                userinfo_url: `${baseUrl}${authPath}/userinfo`,
                 scopes: ['openid', 'profile', 'email']
             },
             connect_config: {
-                auth_url: `${baseUrl}/oauth2/v1/authorize`,
-                token_url: `${baseUrl}/oauth2/v1/token`,
+                auth_url: `${baseUrl}${authPath}/authorize`,
+                token_url: `${baseUrl}${authPath}/token`,
                 scopes: ['openid', 'profile', 'email']
             }
         };