Merge pull request #177 from cupcakearmy/password-eye-toggle

fix: password eye toggle not working

Author: cupcakearmy

packages/frontend/package.json

@@ -13,19 +13,19 @@
 	},
 	"type": "module",
 	"devDependencies": {
-		"@lokalise/node-api": "^13.0.0",
+		"@lokalise/node-api": "^13.2.1",
 		"@sveltejs/adapter-static": "^3.0.8",
-		"@sveltejs/kit": "^2.16.0",
+		"@sveltejs/kit": "^2.17.3",
 		"@sveltejs/vite-plugin-svelte": "^5.0.3",
 		"@zerodevx/svelte-toast": "^0.9.6",
 		"adm-zip": "^0.5.16",
 		"dotenv": "^16.4.7",
-		"svelte": "^5.19.0",
+		"svelte": "^5.20.5",
 		"svelte-check": "^4.1.4",
 		"svelte-intl-precompile": "^0.12.3",
 		"tslib": "^2.8.1",
 		"typescript": "^5.7.3",
-		"vite": "^6.0.9"
+		"vite": "^6.2.0"
 	},
 	"dependencies": {
 		"@fontsource/fira-mono": "^5.1.1",

packages/frontend/src/lib/ui/TextInput.svelte

@@ -21,20 +21,15 @@
 		...rest
 	}: HTMLInputAttributes & Props = $props()
 
-	const initialType = rest.type
+	const initialType = $state(rest.type)
 	const isPassword = initialType === 'password'
 	let hidden = $state(true)
 
 	let valid = $derived(validate(value))
-
-	$effect(() => {
-		if (isPassword) {
-			value
-			rest.type = hidden ? initialType : 'text'
-		}
-	})
+	let type = $derived(isPassword ? (hidden ? 'password' : 'text') : rest.type)
 
 	function toggle() {
+		console.debug('toggle')
 		hidden = !hidden
 	}
 
@@ -50,7 +45,7 @@
 			<span class="error-text">{valid}</span>
 		{/if}
 	</small>
-	<input bind:value {...rest} class:valid={valid === true} />
+	<input bind:value {...rest} {type} autocomplete="off" class:valid={valid === true} />
 	<div class="icons">
 		{#if isPassword}
 			<Icon