mirror of
https://github.com/vrtmrz/obsidian-livesync.git
synced 2026-09-09 20:27:05 +00:00
68 lines
1.6 KiB
Svelte
68 lines
1.6 KiB
Svelte
<script lang="ts">
|
|
import { translateIfAvailable as translate } from "@/common/translation";
|
|
|
|
type Props = {
|
|
value: string;
|
|
name?: string;
|
|
placeholder?: string;
|
|
disabled?: boolean;
|
|
required?: boolean;
|
|
};
|
|
let {
|
|
value = $bindable(),
|
|
name = "password",
|
|
placeholder = "Enter your password",
|
|
disabled = false,
|
|
required = false,
|
|
}: Props = $props();
|
|
let showPassword = $state(false);
|
|
const type = $derived.by(() => (showPassword ? "text" : "password"));
|
|
const translatedPlaceholder = $derived.by(() => translate(placeholder));
|
|
const toggleLabel = $derived.by(() => translate(showPassword ? "Hide password" : "Show password"));
|
|
</script>
|
|
|
|
<input
|
|
{type}
|
|
{name}
|
|
placeholder={translatedPlaceholder}
|
|
bind:value
|
|
{disabled}
|
|
{required}
|
|
spellcheck="false"
|
|
autocorrect="off"
|
|
autocapitalize="off"
|
|
/>
|
|
<button
|
|
type="button"
|
|
class="sls-password-toggle"
|
|
aria-label={toggleLabel}
|
|
title={toggleLabel}
|
|
aria-pressed={showPassword}
|
|
{disabled}
|
|
onclick={() => (showPassword = !showPassword)}
|
|
>
|
|
👁️
|
|
</button>
|
|
|
|
<style>
|
|
.sls-password-toggle {
|
|
display: inline-flex;
|
|
flex: 0 0 auto;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 4px;
|
|
margin-left: 4px;
|
|
background: transparent;
|
|
border: none;
|
|
box-shadow: none;
|
|
line-height: 1;
|
|
cursor: pointer;
|
|
}
|
|
.sls-password-toggle:hover {
|
|
background: var(--background-modifier-hover);
|
|
}
|
|
:global(body.is-mobile) .sls-password-toggle {
|
|
min-width: 44px;
|
|
}
|
|
</style>
|