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

fix: password eye toggle not working
This commit is contained in:
Nicco 2025-02-27 19:38:37 +01:00 committed by GitHub
commit a248440bfd
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 500 additions and 247 deletions

View File

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

View File

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

726
pnpm-lock.yaml generated

File diff suppressed because it is too large Load Diff