This commit is contained in:
Timothy Jaeryang Baek 2025-08-08 12:55:24 +04:00
parent 04f37ca279
commit 4ba96fe3e5

View file

@ -2,8 +2,10 @@
const i18n = getContext('i18n'); const i18n = getContext('i18n');
import { getContext } from 'svelte'; import { getContext } from 'svelte';
import { settings } from '$lib/stores'; import { settings } from '$lib/stores';
export let id = 'password-input';
export let value: string = ''; export let value: string = '';
export let placeholder = ''; export let placeholder = '';
export let type = 'text';
export let required = true; export let required = true;
export let readOnly = false; export let readOnly = false;
export let outerClassName = 'flex flex-1 bg-transparent'; export let outerClassName = 'flex flex-1 bg-transparent';
@ -14,16 +16,19 @@
</script> </script>
<div class={outerClassName}> <div class={outerClassName}>
<label class="sr-only" for="password-input">{placeholder || $i18n.t('Password')}</label> <label class="sr-only" for={id}>{placeholder || $i18n.t('Password')}</label>
<input <input
{id}
class={`${inputClassName} ${show ? '' : 'password'} ${($settings?.highContrastMode ?? false) ? 'placeholder:text-gray-700 dark:placeholder:text-gray-100' : ' outline-hidden placeholder:text-gray-300 dark:placeholder:text-gray-600'}`} class={`${inputClassName} ${show ? '' : 'password'} ${($settings?.highContrastMode ?? false) ? 'placeholder:text-gray-700 dark:placeholder:text-gray-100' : ' outline-hidden placeholder:text-gray-300 dark:placeholder:text-gray-600'}`}
{placeholder} {placeholder}
id="password-input" type={type === 'password' && !show ? 'password' : 'text'}
bind:value {value}
required={required && !readOnly} required={required && !readOnly}
disabled={readOnly} disabled={readOnly}
on:change={(e) => {
value = e.target.value;
}}
autocomplete="off" autocomplete="off"
type="text"
/> />
<button <button
class={showButtonClassName} class={showButtonClassName}