windmill-components 1.698.0 → 1.700.1

package/package/components/Auth0Setting.svelte

@@ -6,6 +6,7 @@ import Tooltip from './Tooltip.svelte';
 import ToggleButton from './common/toggleButton-v2/ToggleButton.svelte';
 import ToggleButtonGroup from './common/toggleButton-v2/ToggleButtonGroup.svelte';
 import TextInput from './text_input/TextInput.svelte';
+import Password from './Password.svelte';
 import SettingCard from './instanceSettings/SettingCard.svelte';
 let { value = $bindable() } = $props();
 function changeDomain(domain, custom) {
@@ -96,14 +97,15 @@ $effect.pre(() => {
 					class="max-w-lg"
 				/>
 			</label>
-			<label class="flex flex-col gap-1">
+			<label for="auth0_client_secret" class="flex flex-col gap-1">
 				<span class="text-emphasis font-semibold text-xs"
 					>Client Secret <Tooltip>Client Secret of the auth0 service configuration</Tooltip></span
 				>
-				<TextInput
-					inputProps={{ type: 'text', placeholder: 'Client Secret' }}
-					bind:value={value['secret']}
-					class="max-w-lg"
+				<Password
+					id="auth0_client_secret"
+					small
+					placeholder="Client Secret"
+					bind:password={value['secret']}
 				/>
 			</label>
 			<CollapseLink text="Instructions">

package/package/components/AuthSettings.svelte

@@ -12,6 +12,7 @@ import KanidmSetting from './KanidmSetting.svelte';
 import ZitadelSetting from './ZitadelSetting.svelte';
 import NextcloudSetting from './NextcloudSetting.svelte';
 import CustomOauth from './CustomOauth.svelte';
+import Password from './Password.svelte';
 import { capitalize } from '../utils';
 import ClipboardPanel from './details/ClipboardPanel.svelte';
 import Toggle from './Toggle.svelte';
@@ -259,12 +260,12 @@ function generateOAuthDropdownItems() {
 										<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-6">
+									<label for="{k}_client_secret_sso" class="block pb-6">
 										<span class="text-primary font-semibold text-xs">Client Secret</span>
-										<input
-											type="text"
+										<Password
+											id="{k}_client_secret_sso"
 											placeholder="Client Secret"
-											bind:value={oauths[k]['secret']}
+											bind:password={oauths[k]['secret']}
 										/>
 									</label>
 									{#if !windmillBuiltins.includes(k) && k != 'slack'}
@@ -356,9 +357,13 @@ function generateOAuthDropdownItems() {
 									<span class="text-primary font-semibold text-xs">Client Id</span>
 									<input type="text" placeholder="Client Id" bind:value={oauths[k]['id']} />
 								</label>
-								<label>
+								<label for="{k}_client_secret_oauth">
 									<span class="text-primary font-semibold text-xs">Client Secret</span>
-									<input type="text" placeholder="Client Secret" bind:value={oauths[k]['secret']} />
+									<Password
+										id="{k}_client_secret_oauth"
+										placeholder="Client Secret"
+										bind:password={oauths[k]['secret']}
+									/>
 								</label>
 								{#if k === 'visma' || !windmillBuiltins.includes(k)}
 									<div class="mb-8">

package/package/components/AutheliaSetting.svelte

@@ -1,6 +1,7 @@
 <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';
 let { value = $bindable() } = $props();
@@ -66,11 +67,12 @@ run(() => {
 					bind:value={value['id']}
 				/>
 			</label>
-			<label class="flex flex-col gap-1">
+			<label for="authelia_client_secret" class="flex flex-col gap-1">
 				<span class="text-emphasis font-semibold text-xs">Client Secret </span>
-				<TextInput
-					inputProps={{ type: 'text', placeholder: 'Client Secret' }}
-					bind:value={value['secret']}
+				<Password
+					id="authelia_client_secret"
+					placeholder="Client Secret"
+					bind:password={value['secret']}
 				/>
 			</label>
 		</SettingCard>

package/package/components/AuthentikSetting.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">import { run } from 'svelte/legacy';
 import IconedResourceType from './IconedResourceType.svelte';
+import Password from './Password.svelte';
 import Toggle from './Toggle.svelte';
 import SettingCard from './instanceSettings/SettingCard.svelte';
 let { value = $bindable() } = $props();
@@ -60,9 +61,13 @@ run(() => {
 				<span class="text-emphasis font-semibold text-xs">Client Id</span>
 				<input type="text" placeholder="Client Id" bind:value={value['id']} />
 			</label>
-			<label>
+			<label for="authentik_client_secret">
 				<span class="text-emphasis font-semibold text-xs">Client Secret </span>
-				<input type="text" placeholder="Client Secret" bind:value={value['secret']} />
+				<Password
+					id="authentik_client_secret"
+					placeholder="Client Secret"
+					bind:password={value['secret']}
+				/>
 			</label>
 		</SettingCard>
 	{/if}

package/package/components/DisplayResult.svelte

@@ -3,6 +3,7 @@ import { Highlight } from 'svelte-highlight';
 import { json } from 'svelte-highlight/languages';
 import { copyToClipboard, parseS3Object, roughSizeOfObject } from '../utils';
 import { base } from '../base';
+import { downloadViaClient, shouldDownloadViaClient } from '../utils/downloadFile';
 import { Button, Drawer, DrawerContent } from './common';
 import { ClipboardCopy, Download, PanelRightOpen, Table2, Braces, Highlighter, ArrowDownFromLine, Loader2 } from 'lucide-svelte';
 import Portal from './Portal.svelte';
@@ -72,6 +73,15 @@ function isTableRowObjectInner(json, hasHeaders) {
         }));
 }
 let largeObject = $state(undefined);
+let resultApiPath = $derived(workspaceId && jobId
+    ? nodeId
+        ? `/w/${workspaceId}/jobs/result_by_id/${jobId}/${nodeId}`
+        : `/w/${workspaceId}/jobs_u/completed/get_result/${jobId}`
+    : undefined);
+let resultDownloadHref = $derived(resultApiPath
+    ? `${base}/api${resultApiPath}`
+    : `data:text/json;charset=utf-8,${encodeURIComponent(toJsonStr(result))}`);
+let resultDownloadName = $derived(`${filename ?? 'result'}.json`);
 function checkIfS3(result, keys) {
     return keys.includes('s3') && typeof result.s3 === 'string';
 }
@@ -859,16 +869,17 @@ $effect(() => {
 					{:else}
 						{#if largeObject}
 							<div class="text-xs text-emphasis"
-								><a
-									download="{filename ?? 'result'}.json"
-									href={workspaceId && jobId
-										? nodeId
-											? `${base}/api/w/${workspaceId}/jobs/result_by_id/${jobId}/${nodeId}`
-											: `${base}/api/w/${workspaceId}/jobs_u/completed/get_result/${jobId}`
-										: `data:text/json;charset=utf-8,${encodeURIComponent(toJsonStr(result))}`}
-								>
-									Download {filename ? '' : 'as JSON'}
-								</a>
+								>{#if resultApiPath && shouldDownloadViaClient()}
+									<button
+										onclick={() => downloadViaClient(resultApiPath!, resultDownloadName)}
+									>
+										Download {filename ? '' : 'as JSON'}
+									</button>
+								{:else}
+									<a download={resultDownloadName} href={resultDownloadHref}>
+										Download {filename ? '' : 'as JSON'}
+									</a>
+								{/if}
 								{#if download_as_csv}
 									<DownloadCsv
 										getContent={() => convertJsonToCsv(result)}
@@ -933,19 +944,26 @@ $effect(() => {
 			<DrawerContent title="Expanded Result" on:close={jsonViewer.closeDrawer}>
 				{#snippet actions()}
 					{#if customUi?.disableDownload !== true}
-						<Button
-							download="{filename ?? 'result'}.json"
-							href={workspaceId && jobId
-								? nodeId
-									? `${base}/api/w/${workspaceId}/jobs/result_by_id/${jobId}/${nodeId}`
-									: `${base}/api/w/${workspaceId}/jobs_u/completed/get_result/${jobId}`
-								: `data:text/json;charset=utf-8,${encodeURIComponent(toJsonStr(result))}`}
-							startIcon={{ icon: Download }}
-							variant="subtle"
-							unifiedSize="md"
-						>
-							Download
-						</Button>
+						{#if resultApiPath && shouldDownloadViaClient()}
+							<Button
+								on:click={() => downloadViaClient(resultApiPath!, resultDownloadName)}
+								startIcon={{ icon: Download }}
+								variant="subtle"
+								unifiedSize="md"
+							>
+								Download
+							</Button>
+						{:else}
+							<Button
+								download={resultDownloadName}
+								href={resultDownloadHref}
+								startIcon={{ icon: Download }}
+								variant="subtle"
+								unifiedSize="md"
+							>
+								Download
+							</Button>
+						{/if}
 					{/if}
 					<Button
 						on:click={() => copyToClipboard(toJsonStr(result))}

package/package/components/FlowStatusViewerInner.svelte

@@ -12,6 +12,7 @@ import Tabs from './common/tabs/Tabs.svelte';
 import {} from './graph';
 import ModuleStatus from './ModuleStatus.svelte';
 import { clone, isScriptPreview, msToSec, readFieldsRecursively, truncateRev } from '../utils';
+import { downloadViaClient, shouldDownloadViaClient } from '../utils/downloadFile';
 import JobArgs from './JobArgs.svelte';
 import { ChevronDown, Download, ExternalLink, Hourglass } from 'lucide-svelte';
 import { deepEqual } from 'fast-equals';
@@ -1481,16 +1482,29 @@ let totalEventsWaiting = $derived(Object.values(suspendStatus?.val ?? {}).reduce
 				style="min-height: {minTabHeight}px"
 			>
 				{#if !hideDownloadLogs && !isReplay && job?.id}
+					{@const logsApiPath = `/w/${workspace}/jobs_u/get_flow_all_logs/${job.id}`}
+					{@const logsName = `windmill_flow_logs_${job.id}.txt`}
 					<div class="flex justify-end p-1">
-						<Button
-							href="{base}/api/w/{workspace}/jobs_u/get_flow_all_logs/{job.id}"
-							download="windmill_flow_logs_{job.id}.txt"
-							color="light"
-							size="xs"
-							startIcon={{ icon: Download }}
-						>
-							Download all logs
-						</Button>
+						{#if shouldDownloadViaClient()}
+							<Button
+								on:click={() => downloadViaClient(logsApiPath, logsName)}
+								color="light"
+								size="xs"
+								startIcon={{ icon: Download }}
+							>
+								Download all logs
+							</Button>
+						{:else}
+							<Button
+								href="{base}/api{logsApiPath}"
+								download={logsName}
+								color="light"
+								size="xs"
+								startIcon={{ icon: Download }}
+							>
+								Download all logs
+							</Button>
+						{/if}
 					</div>
 				{/if}
 				<FlowLogViewerWrapper

package/package/components/HistoricInputs.svelte

@@ -81,7 +81,8 @@ let jobsLoader = useJobsLoader(() => ({
     syncQueuedRunsCount: false,
     refreshRate: 10000,
     currentWorkspace: $workspaceStore ?? '',
-    skip: !runnableId
+    skip: !runnableId,
+    excludesEntrypointOverride: true
 }));
 let jobs = $derived(jobsLoader?.jobs ?? []);
 </script>

package/package/components/InstanceSetting.svelte

@@ -29,6 +29,7 @@ import SettingCard from './instanceSettings/SettingCard.svelte';
 let { setting, version, values, loading = true, openSmtpSettings, oauths, warning } = $props();
 const dispatch = createEventDispatcher();
 let latestKeyRenewalAttempt = $state(null);
+let offlineCapStatus = $state(null);
 function showSetting(setting, values) {
     if (setting == 'dev_instance') {
         if (values['license_key'] == undefined) {
@@ -42,6 +43,14 @@ let opening = $state(false);
 async function reloadKeyrenewalAttemptInfo() {
     latestKeyRenewalAttempt = await SettingService.getLatestKeyRenewalAttempt();
 }
+async function reloadLicenseStatus() {
+    try {
+        offlineCapStatus = (await SettingService.getOfflineLicenseStatus());
+    }
+    catch {
+        offlineCapStatus = null;
+    }
+}
 async function reloadLicenseKey() {
     $values['license_key'] = await SettingService.getGlobal({
         key: 'license_key'
@@ -49,7 +58,10 @@ async function reloadLicenseKey() {
 }
 $effect(() => {
     if (setting.key == 'license_key') {
-        untrack(() => reloadKeyrenewalAttemptInfo());
+        untrack(() => {
+            reloadKeyrenewalAttemptInfo();
+            reloadLicenseStatus();
+        });
     }
 });
 export async function renewLicenseKey() {
@@ -393,7 +405,7 @@ $effect(() => {
 								</div>
 							{/if}
 						{/if}
-						{#if latestKeyRenewalAttempt}
+						{#if latestKeyRenewalAttempt && !offlineCapStatus}
 							{@const attemptedAt = new Date(latestKeyRenewalAttempt.attempted_at).toLocaleString()}
 							{@const isTrial = latestKeyRenewalAttempt.result.startsWith('error: trial:')}
 							<div class="relative">
@@ -463,11 +475,41 @@ $effect(() => {
 							</div>
 						{/if}
 
+						{#if offlineCapStatus}
+							{@const cap = offlineCapStatus}
+							{@const seatsOver = cap.seats_used > cap.seats_cap}
+							{@const cuOver = cap.cu_over_cap}
+							<div class="mt-1 flex flex-row items-center gap-2 text-xs">
+								<div class="flex flex-row items-center gap-1">
+									{#if seatsOver}
+										<BadgeX class="text-red-600" size={12} />
+									{:else}
+										<BadgeCheck class="text-green-600" size={12} />
+									{/if}
+									<span class={seatsOver ? 'text-red-600' : 'text-green-600'}>
+										Seats: {cap.seats_used.toFixed(1)} / {cap.seats_cap}
+									</span>
+								</div>
+								<div class="flex flex-row items-center gap-1">
+									{#if cuOver}
+										<BadgeX class="text-red-600" size={12} />
+									{:else}
+										<BadgeCheck class="text-green-600" size={12} />
+									{/if}
+									<span class={cuOver ? 'text-red-600' : 'text-green-600'}>
+										CUs: {cap.current_cu.toFixed(2)} / {cap.cu_cap.toFixed(2)}
+									</span>
+								</div>
+							</div>
+						{/if}
+
 						{#if valid || expiration}
 							<div class="flex flex-row gap-2 mt-1">
-								<Button on:click={renewLicenseKey} loading={renewing} size="xs" variant="accent"
-									>Renew key
-								</Button>
+								{#if !offlineCapStatus}
+									<Button on:click={renewLicenseKey} loading={renewing} size="xs" variant="accent"
+										>Renew key
+									</Button>
+								{/if}
 								<Button variant="accent" size="xs" loading={opening} on:click={openCustomerPortal}>
 									Open customer portal
 								</Button>

package/package/components/KanidmSetting.svelte

@@ -1,6 +1,7 @@
 <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';
 let { value = $bindable() } = $props();
@@ -72,11 +73,12 @@ run(() => {
 					bind:value={value['id']}
 				/>
 			</label>
-			<label class="flex flex-col gap-1">
+			<label for="kanidm_client_secret" class="flex flex-col gap-1">
 				<span class="text-emphasis font-semibold text-xs">Client Secret </span>
-				<TextInput
-					inputProps={{ type: 'text', placeholder: 'Client Secret' }}
-					bind:value={value['secret']}
+				<Password
+					id="kanidm_client_secret"
+					placeholder="Client Secret"
+					bind:password={value['secret']}
 				/>
 			</label>
 		</SettingCard>

package/package/components/KeycloakSetting.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">import { untrack } from 'svelte';
 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';
 let { value = $bindable() } = $props();
@@ -72,11 +73,12 @@ $effect.pre(() => {
 					bind:value={value['id']}
 				/>
 			</label>
-			<label class="flex flex-col gap-1">
+			<label for="keycloak_client_secret" class="flex flex-col gap-1">
 				<span class="text-emphasis font-semibold text-xs">Client Secret </span>
-				<TextInput
-					inputProps={{ type: 'text', placeholder: 'Client Secret' }}
-					bind:value={value['secret']}
+				<Password
+					id="keycloak_client_secret"
+					placeholder="Client Secret"
+					bind:password={value['secret']}
 				/>
 			</label>
 		</SettingCard>

package/package/components/LogViewer.svelte

@@ -8,11 +8,12 @@ const s3LogPrefixes = [
 const S3_LOG_SEARCH_LIMIT = 2000;
 </script>
 
-<script lang="ts">import { ClipboardCopy, Download, Expand, Loader2 } from 'lucide-svelte';
+<script lang="ts">import { ClipboardCopy, Download, Expand, Loader2, Timer, Cpu } from 'lucide-svelte';
 import { Button, Drawer, DrawerContent } from './common';
 import { copyToClipboard } from '../utils';
 import { base } from '../base';
 import { withExternalDomain } from '../externalDomain';
+import { downloadViaClient, shouldDownloadViaClient } from '../utils/downloadFile';
 import { workspaceStore } from '../stores';
 import { AnsiUp } from 'ansi_up';
 import NoWorkerWithTagWarning from './runs/NoWorkerWithTagWarning.svelte';
@@ -96,8 +97,7 @@ function truncateContent(jobContent, loadedFromObjectStore, limit) {
     return content;
 }
 export function scrollToBottom() {
-    scroll &&
-        setTimeout(() => preEl?.scroll({ top: preEl?.scrollHeight, behavior: 'smooth' }), 100);
+    scroll && setTimeout(() => preEl?.scroll({ top: preEl?.scrollHeight, behavior: 'smooth' }), 100);
 }
 let logViewer = $state();
 async function getStoreLogs() {
@@ -133,7 +133,9 @@ $effect.pre(() => {
         scroll = true;
     }
 });
-let downloadHref = $derived(withExternalDomain(`${base}/api/w/${$workspaceStore}/jobs_u/get_logs/${jobId}`));
+let logsApiPath = $derived(`/w/${$workspaceStore}/jobs_u/get_logs/${jobId}`);
+let downloadHref = $derived(withExternalDomain(`${base}/api${logsApiPath}`));
+let downloadName = $derived(`windmill_logs_${jobId}.txt`);
 let truncatedContent = $derived(truncateContent(content, loadedFromObjectStore, LOG_LIMIT));
 let prefixInfo = $derived(findPrefixInfo(truncatedContent));
 let downloadStartUrl = $derived(findStartUrl(truncatedContent, prefixInfo));
@@ -171,17 +173,30 @@ let html = $derived.by(() => {
 	<DrawerContent title="Expanded Logs" on:close={logViewer.closeDrawer}>
 		{#snippet actions()}
 			{#if jobId && download}
-				<Button
-					href={downloadHref}
-					download="windmill_logs_{jobId}.txt"
-					color="light"
-					size="xs"
-					startIcon={{
-						icon: Download
-					}}
-				>
-					Download
-				</Button>
+				{#if shouldDownloadViaClient()}
+					<Button
+						on:click={() => downloadViaClient(logsApiPath, downloadName)}
+						color="light"
+						size="xs"
+						startIcon={{
+							icon: Download
+						}}
+					>
+						Download
+					</Button>
+				{:else}
+					<Button
+						href={downloadHref}
+						download={downloadName}
+						color="light"
+						size="xs"
+						startIcon={{
+							icon: Download
+						}}
+					>
+						Download
+					</Button>
+				{/if}
 			{/if}
 
 			<Button
@@ -220,7 +235,9 @@ let html = $derived.by(() => {
 			class="w-full h-full bg-surface-secondary flex flex-col {noMaxH ? '' : 'max-h-screen'}"
 			data-nav-id={navigationId}
 		>
-			<div class="flex gap-2 ml-2 {small ? 'py-1' : 'py-2'} border-b">
+			<div
+				class="flex gap-2 ml-2 {small ? 'py-1' : 'py-2'} border-b overflow-x-auto overflow-y-hidden"
+			>
 				{#if isLoading}
 					<div class="flex gap-2 items-center">
 						<Loader2 class="animate-spin" />
@@ -236,31 +253,54 @@ let html = $derived.by(() => {
 					</div>
 				{:else if duration}
 					<span
-						class={twMerge('text-secondary dark:text-gray-400', small ? '!text-2xs' : '!text-xs')}
-						>took {duration}ms</span
+						class={twMerge(
+							'flex items-center gap-1 text-secondary dark:text-gray-400',
+							small ? '!text-2xs' : '!text-xs'
+						)}
+						title="Duration"
 					>
+						<Timer size={small ? 10 : 12} />
+						{duration}ms
+					</span>
 				{/if}
 				{#if mem}
-					<span class="{small ? '!text-2xs' : '!text-xs'} text-secondary dark:text-gray-400"
-						>mem peak: {(mem / 1024).toPrecision(4)}MB</span
+					<span
+						class={twMerge(
+							'flex items-center gap-1 text-secondary dark:text-gray-400',
+							small ? '!text-2xs' : '!text-xs'
+						)}
+						title="Memory peak"
 					>
+						<Cpu size={small ? 10 : 12} />
+						{(mem / 1024).toPrecision(4)}MB
+					</span>
 				{/if}
 				<div class="flex gap-2 justify-end flex-1">
 					{#if jobId && download}
 						<div class="flex items-center">
-							<a
-								class="text-primary pb-0.5"
-								target="_blank"
-								href={downloadHref}
-								download="windmill_logs_{jobId}.txt"
-								><Download size="14" />
-							</a>
+							{#if shouldDownloadViaClient()}
+								<button
+									class="text-primary pb-0.5"
+									onclick={() => downloadViaClient(logsApiPath, downloadName)}
+									><Download size="14" />
+								</button>
+							{:else}
+								<a
+									class="text-primary pb-0.5"
+									target="_blank"
+									href={downloadHref}
+									download={downloadName}
+									><Download size="14" />
+								</a>
+							{/if}
 						</div>
 					{/if}
 					<button onclick={logViewer.openDrawer}><Expand size="12" /></button>
 					{#if !noAutoScroll}
-						<label class="pr-2 text-2xs flex gap-2 font-normal text-primary items-center">
-							Auto scroll
+						<label
+							class="pr-2 text-2xs flex gap-2 font-normal text-primary items-center whitespace-nowrap"
+						>
+							auto-scroll
 							<input class="windmillapp" type="checkbox" bind:checked={scroll} />
 						</label>
 					{/if}

package/package/components/NextcloudSetting.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">import CollapseLink from './CollapseLink.svelte';
 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';
 let { value = $bindable(), baseUrl } = $props();
@@ -76,14 +77,15 @@ $effect(() => {
 					bind:value={value['id']}
 				/>
 			</label>
-			<label class="flex flex-col gap-1">
+			<label for="nextcloud_client_secret" class="flex flex-col gap-1">
 				<span class="text-emphasis font-semibold text-xs">Client Secret </span>
 				<span class="text-secondary font-normal text-xs"
 					>Client Secret from your Nextcloud OAuth2 app configuration</span
 				>
-				<TextInput
-					inputProps={{ type: 'password', placeholder: 'Client Secret' }}
-					bind:value={value['secret']}
+				<Password
+					id="nextcloud_client_secret"
+					placeholder="Client Secret"
+					bind:password={value['secret']}
 				/>
 			</label>
 			<CollapseLink text="Instructions">

package/package/components/OAuthSetting.svelte

@@ -6,6 +6,7 @@ import { untrack } from 'svelte';
 import { enterpriseLicense } from '../stores';
 import Button from './common/button/Button.svelte';
 import TextInput from './text_input/TextInput.svelte';
+import Password from './Password.svelte';
 import SettingCard from './instanceSettings/SettingCard.svelte';
 let { name, value = $bindable(), login = true, eeOnly = false } = $props();
 // For Microsoft SSO, tenant is embedded in the login_config URLs, so we need
@@ -110,11 +111,12 @@ let enabled = $derived(value != undefined && !(eeOnly && !$enterpriseLicense));
 					bind:value={value['id']}
 				/>
 			</label>
-			<label class="flex flex-col gap-1">
+			<label for="{name}_client_secret" class="flex flex-col gap-1">
 				<span class="text-emphasis font-semibold text-xs">Client Secret</span>
-				<TextInput
-					inputProps={{ type: 'text', placeholder: 'Client Secret' }}
-					bind:value={value['secret']}
+				<Password
+					id="{name}_client_secret"
+					placeholder="Client Secret"
+					bind:password={value['secret']}
 				/>
 			</label>
 			{#if name == 'microsoft' || name == 'teams'}

package/package/components/OktaSetting.svelte

@@ -4,6 +4,7 @@ import IconedResourceType from './IconedResourceType.svelte';
 import Toggle from './Toggle.svelte';
 import ToggleButton from './common/toggleButton-v2/ToggleButton.svelte';
 import ToggleButtonGroup from './common/toggleButton-v2/ToggleButtonGroup.svelte';
+import Password from './Password.svelte';
 import SettingCard from './instanceSettings/SettingCard.svelte';
 let { value = $bindable() } = $props();
 let lastValues = { domain: undefined, custom: undefined };
@@ -87,12 +88,16 @@ $effect.pre(() => {
 				>
 				<input type="text" placeholder="Client Id" bind:value={value['id']} />
 			</label>
-			<label class="flex flex-col gap-1">
+			<label for="okta_client_secret" class="flex flex-col gap-1">
 				<span class="text-emphasis font-semibold text-xs">Client Secret </span>
 				<span class="text-secondary font-normal text-xs"
 					>from the CLIENT SECRETS section of the okta service configuration</span
 				>
-				<input type="text" placeholder="Client Secret" bind:value={value['secret']} />
+				<Password
+					id="okta_client_secret"
+					placeholder="Client Secret"
+					bind:password={value['secret']}
+				/>
 			</label>
 			<CollapseLink text="Instructions">
 				<div class="text-xs text-primary border rounded-md p-4 space-y-3">