83 lines
1.8 KiB
Svelte
83 lines
1.8 KiB
Svelte
<script lang="ts">
|
|
import { t } from 'svelte-intl-precompile'
|
|
|
|
import { status } from '$lib/stores/status'
|
|
import Switch from '$lib/ui/Switch.svelte'
|
|
import TextInput from '$lib/ui/TextInput.svelte'
|
|
import type { Note } from '@cryptgeon/shared'
|
|
|
|
export let note: Note
|
|
export let timeExpiration = false
|
|
export let customPassword: string | null = null
|
|
|
|
let hasCustomPassword = false
|
|
|
|
$: if (!hasCustomPassword) customPassword = null
|
|
</script>
|
|
|
|
<div class="flex col">
|
|
<div class="flex">
|
|
<TextInput
|
|
data-testid="field-views"
|
|
type="number"
|
|
label={$t('common.views', { values: { n: 0 } })}
|
|
bind:value={note.views}
|
|
disabled={timeExpiration}
|
|
max={$status?.max_views}
|
|
min={1}
|
|
validate={(v) =>
|
|
($status && v <= $status?.max_views && v > 0) ||
|
|
$t('home.errors.max', { values: { n: $status?.max_views ?? 0 } })}
|
|
/>
|
|
<Switch
|
|
data-testid="switch-advanced-toggle"
|
|
label={$t('common.mode')}
|
|
bind:value={timeExpiration}
|
|
color={false}
|
|
/>
|
|
<TextInput
|
|
data-testid="field-expiration"
|
|
type="number"
|
|
label={$t('common.minutes', { values: { n: 0 } })}
|
|
bind:value={note.expiration}
|
|
disabled={!timeExpiration}
|
|
max={$status?.max_expiration}
|
|
validate={(v) =>
|
|
($status && v < $status?.max_expiration) ||
|
|
$t('home.errors.max', { values: { n: $status?.max_expiration ?? 0 } })}
|
|
/>
|
|
</div>
|
|
<div class="flex">
|
|
<Switch
|
|
data-testid="custom-password"
|
|
bind:value={hasCustomPassword}
|
|
label={$t('home.advanced.custom_password')}
|
|
/>
|
|
<TextInput
|
|
data-testid="password"
|
|
type="password"
|
|
bind:value={customPassword}
|
|
label={$t('common.password')}
|
|
disabled={!hasCustomPassword}
|
|
random
|
|
/>
|
|
</div>
|
|
<div>
|
|
{$t('home.advanced.explanation')}
|
|
</div>
|
|
</div>
|
|
|
|
<style>
|
|
.flex {
|
|
display: flex;
|
|
align-items: flex-end;
|
|
gap: 1rem;
|
|
width: 100%;
|
|
}
|
|
|
|
.col {
|
|
gap: 1.5rem;
|
|
flex-direction: column;
|
|
}
|
|
</style>
|