windmill-components 1.46.3 → 1.55.0

package/components/ItemPicker.svelte

@@ -1,77 +1,136 @@
-<script>import Fuse from 'fuse.js';
-import { Drawer } from './common';
+<script>import { Drawer, Skeleton } from './common';
 import DrawerContent from './common/drawer/DrawerContent.svelte';
 import IconedResourceType from './IconedResourceType.svelte';
+import SearchItems from './SearchItems.svelte';
 export let pickCallback;
 export let loadItems;
-export let extraField;
+export let extraField = 'path';
+export let extraField2 = undefined;
 export let itemName;
 export let closeOnClick = true;
-export let noItemMessage = '';
+/** Displayed if the load function returns no items. */
+export let noItemMessage = 'There are no items in the list';
+/** Displayed if the search returns no items. */
+export let emptySearchMessage = 'No items found';
+export let buttons = {};
+let loading = false;
 let items = [];
 let filteredItems = [];
-let itemsFilter = '';
-const fuseOptions = {
-    includeScore: false,
-    keys: ['path', extraField]
-};
-const fuse = new Fuse(items, fuseOptions);
+let filter = '';
 export function openDrawer() {
+    loading = true;
     loadItems().then((v) => {
         items = v;
-        if (items) {
-            fuse.setCollection(items);
-        }
+        loading = false;
     });
-    drawer.openDrawer();
+    drawer.openDrawer?.();
 }
-$: filteredItems =
-    itemsFilter.length > 0 && items ? fuse.search(itemsFilter).map((value) => value.item) : items;
 let drawer;
 </script>
 
+<SearchItems
+	{filter}
+	{items}
+	bind:filteredItems
+	f={(x) =>
+		(extraField2 ? x[extraField2] + ' ' : '') +
+		(x[extraField] ?? '') +
+		' ' +
+		(x['path'] && x['path'] != x[extraField] ? '(' + x['path'] + ')' ?? '' : '') +
+		' ' +
+		(x['description'] != x[extraField] ? x['description'] ?? '' : '')}
+/>
+
 <Drawer bind:this={drawer} size="600px">
 	<DrawerContent title="Search a {itemName}" on:close={drawer.closeDrawer}>
 		<div>
-			{#if filteredItems}
-				<div class="w-12/12 pb-4">
-					<input
-						type="text"
-						placeholder="Search {itemName}"
-						bind:value={itemsFilter}
-						class="search-item"
-					/>
+			<div class="w-12/12 pb-4">
+				<input
+					type="text"
+					placeholder="Search {itemName}"
+					bind:value={filter}
+					class="search-item"
+				/>
+			</div>
+			{#if loading}
+				{#each new Array(6) as _}
+					<Skeleton layout={[[2], 0.7]} />
+				{/each}
+			{:else if !items?.length}
+				<div class="text-center text-sm text-gray-600 mt-2">
+					{@html noItemMessage}
 				</div>
+			{:else if filteredItems?.length}
 				<ul class="divide-y divide-gray-200">
 					{#each filteredItems as obj}
-						<li
-							class="py-4 px-1 gap-1 flex flex-col hover:bg-white hover:border text-black cursor-pointer"
-							on:click={() => {
-								if (closeOnClick) {
-									drawer.closeDrawer()
-								}
-								pickCallback(obj['path'], obj[extraField])
-							}}
-						>
-							<p class="text-sm font-semibold flex flex-row">
+						<li class="flex flex-row w-full">
+							<button
+								class="py-4 px-1 gap-1 flex flex-row grow border  border-gray-300 border-opacity-0 
+									hover:bg-white hover:border-opacity-100 text-black"
+								on:click={() => {
+									if (closeOnClick) {
+										drawer.closeDrawer()
+									}
+									pickCallback(obj['path'], obj[extraField])
+								}}
+							>
 								{#if `app` in obj}
-									<IconedResourceType silent={true} name={obj['app']} />
-									<span class="mr-2" />
+									<div class="mr-2 text-sm text-left truncate w-24">
+										<IconedResourceType after={true} silent={false} name={obj['app']} />
+									</div>
+								{/if}
+								{#if `resource_type` in obj}
+									<div class="mr-2 truncate text-left w-24 text-sm">
+										<IconedResourceType after={true} name={obj['resource_type']} />
+									</div>
 								{/if}
-								<span class="mr-2">{obj[extraField]}</span><span class="font-normal break-words"
-									>{obj['path'] ?? ''}</span
-								>
-							</p>
-							<p class="text-xs italic">{obj['description'] ?? ''}</p>
+								<div class="flex flex-col">
+									{#if obj.marked}
+										<div class="text-sm font-semibold">
+											{@html obj.marked}
+										</div>
+									{:else}
+										<div class="text-sm font-semibold flex flex-col">
+											<span class="mr-2 text-left">{obj[extraField] ?? ''}</span>
+											{#if extraField != 'path'}
+												<span class="font-normal text-xs text-left italic overflow-hidden"
+													>{obj['path'] ?? ''}</span
+												>
+											{/if}
+										</div>
+										{#if extraField != 'description'}
+											<div class="text-xs font-light italic text-left"
+												>{obj['description'] ?? ''}</div
+											>
+										{/if}
+									{/if}
+								</div>
+							</button>
+							{#if buttons}
+								<div class="flex flex-row">
+									{#each Object.entries(buttons) as [name, button]}
+										<button
+											class="py-4 px-1 gap-1 flex flex-row grow  text-black"
+											on:click={() => {
+												button(obj['path'] ?? '')
+											}}
+										>
+											{name}
+										</button>
+									{/each}
+								</div>
+							{/if}
 						</li>
 					{/each}
 				</ul>
 			{:else}
-				<span class="mt-2 text-sm text-red-400">{noItemMessage}</span>
+				<div class="text-center text-sm text-gray-600 mt-2">
+					{@html emptySearchMessage}
+				</div>
 			{/if}
 		</div>
-		<span slot="submission">
+		<svelte:fragment slot="actions">
 			<slot name="submission" />
-		</span>
+		</svelte:fragment>
 	</DrawerContent>
 </Drawer>

package/components/ItemPicker.svelte.d.ts

@@ -3,10 +3,13 @@ declare const __propDef: {
     props: {
         pickCallback: (path: string, f: string) => void;
         loadItems: () => Promise<Record<string, any>[] | undefined>;
-        extraField: string;
+        extraField?: string | undefined;
+        extraField2?: string | undefined;
         itemName: string;
         closeOnClick?: boolean | undefined;
-        noItemMessage?: string | undefined;
+        /** Displayed if the load function returns no items. */ noItemMessage?: string | undefined;
+        /** Displayed if the search returns no items. */ emptySearchMessage?: string | undefined;
+        buttons?: Record<string, (x: string) => void> | undefined;
         openDrawer?: (() => void) | undefined;
     };
     events: {
@@ -16,9 +19,9 @@ declare const __propDef: {
         submission: {};
     };
 };
-export declare type ItemPickerProps = typeof __propDef.props;
-export declare type ItemPickerEvents = typeof __propDef.events;
-export declare type ItemPickerSlots = typeof __propDef.slots;
+export type ItemPickerProps = typeof __propDef.props;
+export type ItemPickerEvents = typeof __propDef.events;
+export type ItemPickerSlots = typeof __propDef.slots;
 export default class ItemPicker extends SvelteComponentTyped<ItemPickerProps, ItemPickerEvents, ItemPickerSlots> {
     get openDrawer(): () => void;
 }

package/components/JobArgs.svelte

@@ -4,11 +4,11 @@ import TableCustom from './TableCustom.svelte';
 export let args;
 </script>
 
-<TableCustom class="px-10 py-2">
-	<tr slot="header-row"
-		><th>Argument</th>
-		<th>Value</th></tr
-	>
+<TableCustom class="py-2">
+	<tr slot="header-row">
+		<th>Argument</th>
+		<th>Value</th>
+	</tr>
 	<tbody slot="body">
 		{#if args && Object.keys(args).length > 0}
 			{#each Object.entries(args) as [arg, value]}

package/components/JobArgs.svelte.d.ts

@@ -8,9 +8,9 @@ declare const __propDef: {
     };
     slots: {};
 };
-export declare type JobArgsProps = typeof __propDef.props;
-export declare type JobArgsEvents = typeof __propDef.events;
-export declare type JobArgsSlots = typeof __propDef.slots;
+export type JobArgsProps = typeof __propDef.props;
+export type JobArgsEvents = typeof __propDef.events;
+export type JobArgsSlots = typeof __propDef.slots;
 export default class JobArgs extends SvelteComponentTyped<JobArgsProps, JobArgsEvents, JobArgsSlots> {
 }
 export {};

package/components/JobStatus.svelte

@@ -30,21 +30,27 @@ export let job;
 		</Badge>
 	</div>
 {:else if job && 'running' in job && job.running}
-	<Badge large color="yellow">
-		<Icon data={faCircle} scale={SMALL_ICON_SCALE} class="mr-2" />
-		Running {#if job.flow_status}({job.flow_status?.step ?? ''} of {job.raw_flow?.modules?.length ??
-				'?'}){/if}
-	</Badge>
+	<div>
+		<Badge large color="yellow">
+			<Icon data={faCircle} scale={SMALL_ICON_SCALE} class="mr-2" />
+			Running {#if job.flow_status}({job.flow_status?.step ?? ''} of {job.raw_flow?.modules
+					?.length ?? '?'}){/if}
+		</Badge>
+	</div>
 {:else if job && 'running' in job && 'scheduled_for' in job && job.scheduled_for && forLater(job.scheduled_for)}
-	<Badge>
-		<Icon data={faCalendar} scale={SMALL_ICON_SCALE} class="mr-2" />
-		Scheduled for {displayDate(job.scheduled_for)}
-	</Badge>
+	<div>
+		<Badge>
+			<Icon data={faCalendar} scale={SMALL_ICON_SCALE} class="mr-2" />
+			Scheduled for {displayDate(job.scheduled_for)}
+		</Badge>
+	</div>
 {:else if job && 'running' in job}
-	<Badge>
-		<Icon data={faClock} scale={SMALL_ICON_SCALE} class="mr-2" />
-		Queued
-	</Badge>
+	<div>
+		<Badge>
+			<Icon data={faClock} scale={SMALL_ICON_SCALE} class="mr-2" />
+			Queued
+		</Badge>
+	</div>
 {:else}
 	<Icon class="text-gray-200" data={faCircle} scale={SMALL_ICON_SCALE} />
 {/if}

package/components/JobStatus.svelte.d.ts

@@ -9,9 +9,9 @@ declare const __propDef: {
     };
     slots: {};
 };
-export declare type JobStatusProps = typeof __propDef.props;
-export declare type JobStatusEvents = typeof __propDef.events;
-export declare type JobStatusSlots = typeof __propDef.slots;
+export type JobStatusProps = typeof __propDef.props;
+export type JobStatusEvents = typeof __propDef.events;
+export type JobStatusSlots = typeof __propDef.slots;
 export default class JobStatus extends SvelteComponentTyped<JobStatusProps, JobStatusEvents, JobStatusSlots> {
 }
 export {};

package/components/LogViewer.svelte

@@ -1,5 +1,8 @@
-<script>export let content;
+<script>import { fade } from 'svelte/transition';
+import { Drawer, DrawerContent } from './common';
+export let content;
 export let isLoading;
+export let duration = undefined;
 let scroll = true;
 let div = null;
 $: if (content != undefined) {
@@ -9,20 +12,40 @@ $: content && scrollToBottom();
 export function scrollToBottom() {
     scroll && setTimeout(() => div?.scroll({ top: div?.scrollHeight, behavior: 'smooth' }), 100);
 }
+let logViewer;
 </script>
 
+<Drawer bind:this={logViewer} size="900px">
+	<DrawerContent title="Expanded Logs" on:close={logViewer.closeDrawer}>
+		<div>
+			<pre class="bg-gray-50 text-xs w-full p-2"
+				>{#if content}{content}{:else if isLoading}Waiting for job to start...{:else}No logs are available yet{/if}</pre
+			>
+		</div>
+	</DrawerContent>
+</Drawer>
+
 <div class="relative w-full h-full">
 	<div bind:this={div} class="w-full h-full overflow-auto bg-gray-50 relative">
 		<div
 			class="sticky top-0 right-0 w-full flex flex-row-reverse justify-between text-gray-500 text-sm bg-gray-50/20"
 		>
-			<div>
-				Auto scroll
-				<input type="checkbox" bind:checked={scroll} />
+			<div class="flex gap-1">
+				<button on:click={logViewer.openDrawer}>Expand</button>
+				<div class="py-2 pr-2 text-xs flex gap-2 items-center">
+					Auto scroll
+					<input type="checkbox" bind:checked={scroll} />
+				</div>
 			</div>
 		</div>
+		{#if duration}
+			<span class="absolute text-xs text-gray-500 top-2 left-2">took {duration}ms</span>
+		{/if}
+
 		<pre class="whitespace-pre-wrap break-words bg-gray-50 text-xs w-full p-2"
-			>{#if content}{content}{:else if isLoading}Waiting for job to start...{:else}No logs are available yet{/if}</pre
+			>{#if content}<span transition:fade={{ duration: 50 }}>{content}</span
+				>{:else if isLoading}{:else}<span class="text-gray-600">No logs are available yet</span
+				>{/if}</pre
 		>
 	</div>
 </div>

package/components/LogViewer.svelte.d.ts

@@ -3,6 +3,7 @@ declare const __propDef: {
     props: {
         content: string | undefined;
         isLoading: boolean;
+        duration?: number | undefined;
         scrollToBottom?: (() => void) | undefined;
     };
     events: {
@@ -10,9 +11,9 @@ declare const __propDef: {
     };
     slots: {};
 };
-export declare type LogViewerProps = typeof __propDef.props;
-export declare type LogViewerEvents = typeof __propDef.events;
-export declare type LogViewerSlots = typeof __propDef.slots;
+export type LogViewerProps = typeof __propDef.props;
+export type LogViewerEvents = typeof __propDef.events;
+export type LogViewerSlots = typeof __propDef.slots;
 export default class LogViewer extends SvelteComponentTyped<LogViewerProps, LogViewerEvents, LogViewerSlots> {
     get scrollToBottom(): () => void;
 }

package/components/Modal.svelte.d.ts

@@ -18,9 +18,9 @@ declare const __propDef: {
         submission: {};
     };
 };
-export declare type ModalProps = typeof __propDef.props;
-export declare type ModalEvents = typeof __propDef.events;
-export declare type ModalSlots = typeof __propDef.slots;
+export type ModalProps = typeof __propDef.props;
+export type ModalEvents = typeof __propDef.events;
+export type ModalSlots = typeof __propDef.slots;
 export default class Modal extends SvelteComponentTyped<ModalProps, ModalEvents, ModalSlots> {
     get closeDrawer(): () => void;
     get openDrawer(): () => void;

package/components/ModulePreview.svelte

@@ -7,6 +7,8 @@ import DisplayResult from './DisplayResult.svelte';
 import Button from './common/button/Button.svelte';
 import { faRotateRight } from '@fortawesome/free-solid-svg-icons';
 import { flowStateStore } from './flows/flowState';
+import { flowStore } from './flows/flowStore';
+import { Alert } from './common';
 let testJobLoader;
 // Test
 let testIsLoading = false;
@@ -46,6 +48,12 @@ function jobDone() {
 />
 <Splitpanes>
 	<Pane size={50} minSize={20} class="p-4">
+		{#if $flowStore.value.same_worker}
+			<div class="mb-1 bg-yellow-100 text-yellow-700 p-1 text-xs"
+				>The `./shared` folder is not passed across individual "Test this step"</div
+			>
+		{/if}
+
 		<RunForm
 			runnable={{ summary: mod.summary ?? '', schema, description: '' }}
 			runAction={(_, args) => runTest(args)}

package/components/ModulePreview.svelte.d.ts

@@ -13,9 +13,9 @@ declare const __propDef: {
     };
     slots: {};
 };
-export declare type ModulePreviewProps = typeof __propDef.props;
-export declare type ModulePreviewEvents = typeof __propDef.events;
-export declare type ModulePreviewSlots = typeof __propDef.slots;
+export type ModulePreviewProps = typeof __propDef.props;
+export type ModulePreviewEvents = typeof __propDef.events;
+export type ModulePreviewSlots = typeof __propDef.slots;
 export default class ModulePreview extends SvelteComponentTyped<ModulePreviewProps, ModulePreviewEvents, ModulePreviewSlots> {
     get runTestWithStepArgs(): () => void;
     get runTest(): (args: any) => Promise<void>;

package/components/ModuleStatus.svelte

@@ -0,0 +1,38 @@
+<script>import { FlowStatusModule } from '../gen';
+import { displayDate } from '../utils';
+import { faHourglassHalf } from '@fortawesome/free-solid-svg-icons';
+import { Icon } from 'svelte-awesome';
+import { Badge } from './common';
+export let type;
+export let scheduled_for;
+</script>
+
+{#if type == FlowStatusModule.type.WAITING_FOR_EVENTS}
+	<span class="italic text-waiting">
+		<Icon class=" mr-2" data={faHourglassHalf} />
+		Waiting to be resumed by resume events such as approvals
+	</span>
+{:else if type == FlowStatusModule.type.WAITING_FOR_PRIOR_STEPS}
+	<span class="italic text-gray-600">
+		<Icon data={faHourglassHalf} class="mr-2" />
+		Waiting for prior steps to complete
+	</span>
+{:else if type == FlowStatusModule.type.WAITING_FOR_EXECUTOR}
+	<span class="italic text-gray-600">
+		<Icon data={faHourglassHalf} class="mr-2" />
+		{#if scheduled_for}
+			Job has been {scheduled_for} and will be executed after that time
+		{:else}
+			Job is waiting to be executed
+		{/if}
+	</span>
+{:else if type == FlowStatusModule.type.SUCCESS}
+	<Badge color="green">Success</Badge>
+{:else if type == FlowStatusModule.type.FAILURE}
+	<Badge color="red">Failure</Badge>
+{/if}
+
+<style>
+	.text-waiting {
+		color: #c76bf2;
+	}</style>

package/components/ModuleStatus.svelte.d.ts

@@ -0,0 +1,18 @@
+import { SvelteComponentTyped } from "svelte";
+import { FlowStatusModule } from '../gen';
+declare const __propDef: {
+    props: {
+        type: FlowStatusModule.type;
+        scheduled_for: string | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type ModuleStatusProps = typeof __propDef.props;
+export type ModuleStatusEvents = typeof __propDef.events;
+export type ModuleStatusSlots = typeof __propDef.slots;
+export default class ModuleStatus extends SvelteComponentTyped<ModuleStatusProps, ModuleStatusEvents, ModuleStatusSlots> {
+}
+export {};

package/components/ObjectResourceInput.svelte

@@ -1,8 +1,6 @@
 <script>import { ResourceService } from '../gen';
 import { workspaceStore } from '../stores';
-import RadioButton from './RadioButton.svelte';
 import ResourcePicker from './ResourcePicker.svelte';
-import SchemaForm from './SchemaForm.svelte';
 export let format;
 export let value;
 function isString(value) {
@@ -11,16 +9,19 @@ function isString(value) {
 let path = '';
 let args = {};
 let schema = undefined;
-let isValid = true;
 let resourceTypeName = '';
-let option = isString(value) || value == undefined ? 'resource' : 'raw';
 $: format.startsWith('resource-') && loadSchema(format);
 async function loadSchema(format) {
     resourceTypeName = format.substring('resource-'.length);
-    schema = (await ResourceService.getResourceType({ workspace: $workspaceStore, path: resourceTypeName })).schema;
-}
-function argToValue() {
-    value = args;
+    try {
+        schema = (await ResourceService.getResourceType({
+            workspace: $workspaceStore,
+            path: resourceTypeName
+        })).schema;
+    }
+    catch (e) {
+        schema = undefined;
+    }
 }
 function resourceToValue() {
     value = `$res:${path}`;
@@ -35,47 +36,18 @@ function valueToPath() {
     if (isResource()) {
         path = value.substr('$res:'.length);
     }
-    else if (value !== undefined && value !== '') {
-        option = 'raw';
-    }
 }
 $: value && valueToPath();
 </script>
 
-<div class="flex flex-row w-full flex-wrap gap-x-2">
-	<div class="shrink">
-		<RadioButton
-			options={[
-				[`Resource (${resourceTypeName})`, 'resource'],
-				[`Raw object value`, 'raw']
-			]}
-			on:change={argToValue}
-			bind:value={option}
-		/>
-	</div>
-	<div class="grow">
-		{#if option == 'resource'}
-			<ResourcePicker
-				on:refresh={() => loadSchema(format)}
-				on:change={(e) => {
-					path = e.detail
-					resourceToValue()
-				}}
-				bind:value={path}
-				resourceType={format.split('-').length > 1
-					? format.substring('resource-'.length)
-					: undefined}
-			/>
-		{:else}
-			<div class="border rounded p-5 w-full">
-				<h2 class="mb-5">
-					Object of <a target="_blank" href="/resources">resource type</a>
-					{resourceTypeName}
-				</h2>
-				{#if !isString(args)}
-					<SchemaForm {schema} bind:isValid bind:args />
-				{/if}
-			</div>
-		{/if}
-	</div>
+<div class="flex flex-row w-full flex-wrap gap-x-2 gap-y-0.5">
+	<ResourcePicker
+		on:refresh={() => loadSchema(format)}
+		on:change={(e) => {
+			path = e.detail
+			resourceToValue()
+		}}
+		bind:value={path}
+		resourceType={format.split('-').length > 1 ? format.substring('resource-'.length) : undefined}
+	/>
 </div>

package/components/ObjectResourceInput.svelte.d.ts

@@ -9,9 +9,9 @@ declare const __propDef: {
     };
     slots: {};
 };
-export declare type ObjectResourceInputProps = typeof __propDef.props;
-export declare type ObjectResourceInputEvents = typeof __propDef.events;
-export declare type ObjectResourceInputSlots = typeof __propDef.slots;
+export type ObjectResourceInputProps = typeof __propDef.props;
+export type ObjectResourceInputEvents = typeof __propDef.events;
+export type ObjectResourceInputSlots = typeof __propDef.slots;
 export default class ObjectResourceInput extends SvelteComponentTyped<ObjectResourceInputProps, ObjectResourceInputEvents, ObjectResourceInputSlots> {
 }
 export {};

package/components/ObjectTypeNarrowing.svelte.d.ts

@@ -8,9 +8,9 @@ declare const __propDef: {
     };
     slots: {};
 };
-export declare type ObjectTypeNarrowingProps = typeof __propDef.props;
-export declare type ObjectTypeNarrowingEvents = typeof __propDef.events;
-export declare type ObjectTypeNarrowingSlots = typeof __propDef.slots;
+export type ObjectTypeNarrowingProps = typeof __propDef.props;
+export type ObjectTypeNarrowingEvents = typeof __propDef.events;
+export type ObjectTypeNarrowingSlots = typeof __propDef.slots;
 export default class ObjectTypeNarrowing extends SvelteComponentTyped<ObjectTypeNarrowingProps, ObjectTypeNarrowingEvents, ObjectTypeNarrowingSlots> {
 }
 export {};

package/components/PageHeader.svelte

@@ -7,14 +7,14 @@ export let primary = true;
 <div class="flex flex-row flex-wrap justify-between mt-4 mb-2 min-h-[48px]">
 	{#if primary}
 		<span class="flex items-center space-x-2">
-			<h1 class="mr-0.5">{title}</h1>
+			<h1>{title}</h1>
 			{#if tooltip}
 				<Tooltip>{tooltip}</Tooltip>
 			{/if}
 		</span>
 	{:else}
 		<span class="flex items-center space-x-2">
-			<h2 class="mr-0.5">{title}</h2>
+			<h2>{title}</h2>
 			{#if tooltip}
 				<Tooltip>{tooltip}</Tooltip>
 			{/if}

package/components/PageHeader.svelte.d.ts

@@ -12,9 +12,9 @@ declare const __propDef: {
         default: {};
     };
 };
-export declare type PageHeaderProps = typeof __propDef.props;
-export declare type PageHeaderEvents = typeof __propDef.events;
-export declare type PageHeaderSlots = typeof __propDef.slots;
+export type PageHeaderProps = typeof __propDef.props;
+export type PageHeaderEvents = typeof __propDef.events;
+export type PageHeaderSlots = typeof __propDef.slots;
 export default class PageHeader extends SvelteComponentTyped<PageHeaderProps, PageHeaderEvents, PageHeaderSlots> {
 }
 export {};

package/components/Password.svelte

@@ -1,8 +1,8 @@
 <script>// @ts-nocheck
 import { onMount } from 'svelte';
 export let password;
-export let label = 'password';
 export let placeholder = '******';
+export let disabled = false;
 onMount(() => {
     const passwordToggle = document.querySelector('.js-password-toggle');
     if (passwordToggle) {
@@ -25,7 +25,6 @@ onMount(() => {
 });
 </script>
 
-<label class="block text-gray-700" for="password"> {@html label} </label>
 <div class="relative w-full">
 	<div class="absolute inset-y-0 right-0 flex items-center px-2">
 		<input class="hidden js-password-toggle" id="toggle" type="checkbox" />
@@ -41,5 +40,6 @@ onMount(() => {
 		bind:value={password}
 		autocomplete="off"
 		{placeholder}
+		{disabled}
 	/>
 </div>