mirror of
https://github.com/windmill-labs/windmill.git
synced 2026-09-07 08:02:40 +00:00
HugoCasa
dc2d7e1c8f
* feat: display last key renewal attempt * feat: improve UI + add renew button + dev instance * fix: nits * chore: update ee ref * fix: nit * fix: tests
59 lines
1.6 KiB
Svelte
59 lines
1.6 KiB
Svelte
<script lang="ts">
|
|
// @ts-nocheck
|
|
import { onMount } from 'svelte'
|
|
export let password: string
|
|
export let placeholder = '******'
|
|
export let disabled = false
|
|
export let required = false
|
|
export let small = false
|
|
|
|
onMount(() => {
|
|
const passwordToggle = document.querySelector('.js-password-toggle')
|
|
if (passwordToggle) {
|
|
passwordToggle.addEventListener('change', function () {
|
|
const password = document.querySelector('.js-password'),
|
|
passwordLabel = document.querySelector('.js-password-label')
|
|
|
|
if (password.type === 'password') {
|
|
password.type = 'text'
|
|
passwordLabel.innerHTML = 'hide'
|
|
} else {
|
|
password.type = 'password'
|
|
passwordLabel.innerHTML = 'show'
|
|
}
|
|
|
|
password.focus()
|
|
})
|
|
} else {
|
|
throw Error('Password component is undefined')
|
|
}
|
|
})
|
|
|
|
$: red = required && (password == '' || password == undefined)
|
|
</script>
|
|
|
|
<div class="relative w-full {small ? 'max-w-lg' : ''}">
|
|
<div class="absolute inset-y-0 right-0 flex items-center px-2">
|
|
<input class="!hidden js-password-toggle" id="toggle" type="checkbox" />
|
|
<label
|
|
class="bg-surface-secondary hover:bg-gray-400 rounded px-2 py-1 text-sm text-tertiary font-mono cursor-pointer js-password-label"
|
|
for="toggle">show</label
|
|
>
|
|
</div>
|
|
<input
|
|
class="block {small ? '!text-2xs' : 'w-full'} px-2 py-1 {red
|
|
? '!border-red-500'
|
|
: ''} text-sm js-password h-9"
|
|
id="password"
|
|
type="password"
|
|
bind:value={password}
|
|
on:keydown
|
|
autocomplete="off"
|
|
{placeholder}
|
|
{disabled}
|
|
/>
|
|
</div>
|
|
{#if red}
|
|
<div class="text-red-600 text-2xs grow">This field is required</div>
|
|
{/if}
|