feat: Add password visibility toggle to password fields w SensitiveInput.svelte component

This commit is contained in:
silentoplayz
2025-08-03 16:07:12 -04:00
parent 7c29084a19
commit 56eeed6277
4 changed files with 14 additions and 8 deletions

View File

@@ -10,6 +10,7 @@
import Modal from '$lib/components/common/Modal.svelte';
import { generateInitialsImage } from '$lib/utils';
import XMark from '$lib/components/icons/XMark.svelte';
import SensitiveInput from '$lib/components/common/SensitiveInput.svelte';
const i18n = getContext('i18n');
const dispatch = createEventDispatcher();
@@ -224,12 +225,13 @@
<div class=" mb-1 text-xs text-gray-500">{$i18n.t('Password')}</div>
<div class="flex-1">
<input
<SensitiveInput
class="w-full text-sm bg-transparent disabled:text-gray-500 dark:disabled:text-gray-500 outline-hidden"
type="password"
bind:value={_user.password}
placeholder={$i18n.t('Enter Your Password')}
autocomplete="off"
required
/>
</div>
</div>

View File

@@ -9,6 +9,7 @@
import Modal from '$lib/components/common/Modal.svelte';
import localizedFormat from 'dayjs/plugin/localizedFormat';
import XMark from '$lib/components/icons/XMark.svelte';
import SensitiveInput from '$lib/components/common/SensitiveInput.svelte';
const i18n = getContext('i18n');
const dispatch = createEventDispatcher();
@@ -139,12 +140,13 @@
<div class=" mb-1 text-xs text-gray-500">{$i18n.t('New Password')}</div>
<div class="flex-1">
<input
<SensitiveInput
class="w-full text-sm bg-transparent outline-hidden"
type="password"
placeholder={$i18n.t('Enter New Password')}
bind:value={_user.password}
autocomplete="new-password"
required
/>
</div>
</div>