33 lines
1.5 KiB
Plaintext
33 lines
1.5 KiB
Plaintext
component PasswordInput {
|
|
props {
|
|
class = ""
|
|
id = "password"
|
|
name = "password"
|
|
label = "Password"
|
|
value = ""
|
|
placeholder = "Enter your password"
|
|
help = ""
|
|
error = ""
|
|
required = false
|
|
disabled = false
|
|
readonly = false
|
|
autocomplete = "current-password"
|
|
revealable = true
|
|
}
|
|
|
|
state visible = false
|
|
|
|
view {
|
|
<div class="wire-auth-field {class}">
|
|
<label for="{id}" class="wire-label">{label}{#if required}<span class="wire-required"> *</span>{/if}</label>
|
|
<div class="wire-auth-field__control">
|
|
<span class="wire-auth-field__icon icon-[lucide--lock-keyhole]" aria-hidden="true"></span>
|
|
<input id="{id}" name="{name}" type="{visible ? 'text' : 'password'}" value="{value}" placeholder="{placeholder}" required="{required}" disabled="{disabled}" readonly="{readonly}" autocomplete="{autocomplete}" aria-invalid="{error ? 'true' : 'false'}" aria-describedby="{id}-help {id}-error" class="wire-input wire-auth-field__input" />
|
|
{#if revealable}<button type="button" @click="visible = !visible" aria-label="{visible ? 'Hide password' : 'Show password'}" aria-pressed="{visible}" class="wire-auth-field__toggle"><span class="{visible ? 'icon-[lucide--eye-off]' : 'icon-[lucide--eye]'} size-5" aria-hidden="true"></span></button>{/if}
|
|
</div>
|
|
{#if help && !error}<p id="{id}-help" class="wire-field-message wire-field-message--help">{help}</p>{/if}
|
|
{#if error}<p id="{id}-error" role="alert" class="wire-field-message wire-field-message--error">{error}</p>{/if}
|
|
</div>
|
|
}
|
|
}
|