210b8285d4
* improve collapsible link * do not show superadmin ws link when already in it * improve OAuth UI * sso/oauth instance settings ui * refactor instance settings alerts WIP * Indexer and Oauth to brand guidelines * refactor ws error handler page * Create a tab SMTP in the Instance Settings * Ractivity isssue fix for tabs * nit * Add smtp settings status in Error handler * Add smtp configuration status * Display teams connection status for instance alerts * nit * Add critical alerts description * nit * nit * improve ee display * nit * nit * fix typo * nit * restore vit config --------- Co-authored-by: Alexander Petric <alex@windmill.dev>
68 lines
1.5 KiB
Svelte
68 lines
1.5 KiB
Svelte
<script lang="ts">
|
|
import { createBubbler } from 'svelte/legacy'
|
|
import Button from './common/button/Button.svelte'
|
|
import TextInput from './text_input/TextInput.svelte'
|
|
import { Eye, EyeClosed } from 'lucide-svelte'
|
|
|
|
const bubble = createBubbler()
|
|
interface Props {
|
|
password: string | undefined
|
|
placeholder?: string
|
|
disabled?: boolean
|
|
required?: boolean
|
|
small?: boolean
|
|
id?: string
|
|
onKeyDown?: (event: KeyboardEvent) => void
|
|
onBlur?: (event: FocusEvent) => void
|
|
}
|
|
|
|
let {
|
|
password = $bindable(),
|
|
placeholder = '******',
|
|
disabled = false,
|
|
required = false,
|
|
small = false,
|
|
id,
|
|
onKeyDown,
|
|
onBlur
|
|
}: Props = $props()
|
|
|
|
let red = $derived(required && (password == '' || password == undefined))
|
|
|
|
let hideValue = $state(true)
|
|
</script>
|
|
|
|
<div class="relative w-full {small ? 'max-w-lg' : ''}">
|
|
<div class="absolute inset-y-0 right-1 flex items-center">
|
|
<Button
|
|
unifiedSize="sm"
|
|
onClick={() => (hideValue = !hideValue)}
|
|
iconOnly
|
|
startIcon={{ icon: hideValue ? Eye : EyeClosed }}
|
|
variant="subtle"
|
|
wrapperClasses="bg-surface-input"
|
|
/>
|
|
</div>
|
|
<TextInput
|
|
size="md"
|
|
error={red}
|
|
bind:value={password}
|
|
inputProps={{
|
|
id,
|
|
disabled,
|
|
placeholder,
|
|
autocomplete: 'new-password',
|
|
onblur: (e) => onBlur?.(e),
|
|
onkeydown: (e) => {
|
|
onKeyDown?.(e)
|
|
bubble('keydown')(e)
|
|
},
|
|
type: hideValue ? 'password' : 'text'
|
|
}}
|
|
class="pr-8"
|
|
/>
|
|
</div>
|
|
{#if red}
|
|
<div class="text-red-600 text-2xs grow">This field is required</div>
|
|
{/if}
|