fix: improve password input for resources editor

frontend/src/lib/components/ArgInput.svelte

@@ -816,7 +816,9 @@
 				<div class="flex flex-col w-full">
 					<div class="flex flex-row w-full items-center justify-between relative">
 						{#if password || extra?.['password'] == true}
-							{#if onlyMaskPassword}
+							{#if value && typeof value == 'string' && value?.startsWith('$var:')}
+								<input type="text" bind:value />
+							{:else if onlyMaskPassword}
 								<Password
 									{disabled}
 									bind:password={value}

frontend/src/lib/components/Password.svelte

@@ -7,51 +7,46 @@
 	export let required = false
 	export let small = false
 
-	onMount(() => {
-		const passwordToggle = document.querySelector('.js-password-toggle')
-		if (passwordToggle) {
-			passwordToggle.addEventListener('change', function () {
-				const password = document.querySelector('.js-password'),
-					passwordLabel = document.querySelector('.js-password-label')
-
-				if (password.type === 'password') {
-					password.type = 'text'
-					passwordLabel.innerHTML = 'hide'
-				} else {
-					password.type = 'password'
-					passwordLabel.innerHTML = 'show'
-				}
-
-				password.focus()
-			})
-		} else {
-			throw Error('Password component is undefined')
-		}
-	})
-
 	$: red = required && (password == '' || password == undefined)
+
+	let hideValue = true
+
+	let randomId = (Math.random() * 10e15).toString(16)
 </script>
 
 <div class="relative w-full {small ? 'max-w-lg' : ''}">
 	<div class="absolute inset-y-0 right-0 flex items-center px-2">
-		<input class="!hidden js-password-toggle" id="toggle" type="checkbox" />
+		<input bind:checked={hideValue} class="!hidden" id={randomId} type="checkbox" />
 		<label
-			class="bg-surface-secondary hover:bg-gray-400 rounded px-2 py-1 text-sm text-tertiary font-mono cursor-pointer js-password-label"
-			for="toggle">show</label
+			class="bg-surface-secondary hover:bg-gray-400 rounded px-2 py-1 text-sm text-tertiary font-mono cursor-pointer"
+			for={randomId}>{hideValue ? 'show' : 'hide'}</label
 		>
 	</div>
-	<input
-		class="block {small ? '!text-2xs' : 'w-full'} px-2 py-1 {red
-			? '!border-red-500'
-			: ''} text-sm js-password h-9"
-		id="password"
-		type="password"
-		bind:value={password}
-		on:keydown
-		autocomplete="new-password"
-		{placeholder}
-		{disabled}
-	/>
+	{#if hideValue}
+		<input
+			class="block {small ? '!text-2xs' : 'w-full'} px-2 py-1 {red
+				? '!border-red-500'
+				: ''} text-sm h-9"
+			type="password"
+			bind:value={password}
+			on:keydown
+			autocomplete="new-password"
+			{placeholder}
+			{disabled}
+		/>
+	{:else}
+		<input
+			class="block {small ? '!text-2xs' : 'w-full'} px-2 py-1 {red
+				? '!border-red-500'
+				: ''} text-sm h-9"
+			type="text"
+			bind:value={password}
+			on:keydown
+			autocomplete="new-password"
+			{placeholder}
+			{disabled}
+		/>
+	{/if}
 </div>
 {#if red}
 	<div class="text-red-600 text-2xs grow">This field is required</div>