cupcakearmy/cryptgeon
1
0
Fork 0
mirror of https://github.com/cupcakearmy/cryptgeon.git synced 2025-09-06 01:10:40 +00:00
Code Issues Packages Projects Releases Wiki Activity

add password to frontend

Browse Source
This commit is contained in:
Niccolo Borgioli
2023-05-23 09:39:19 +02:00
parent 6da28a701e
commit fdc2722fb9
8 changed files with 124 additions and 70 deletions
Download Patch File Download Diff File Expand all files Collapse all files

79
packages/frontend/src/lib/ui/AdvancedParameters.svelte
View File

@@ -8,48 +8,69 @@
export let note: Note
export let timeExpiration = false
let customPassword = false
$: if (!customPassword) note.password = undefined
</script>
<div class="fields">
<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 } })}
/>
<div class="middle-switch">
<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 bind:value={customPassword} label={$t('home.advanced.custom_password')} />
<TextInput
type="password"
bind:value={note.password}
label={$t('common.password')}
disabled={!customPassword}
random
/>
</div>
<div>
{$t('home.advanced.explanation')}
</div>
<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>
<style>
.middle-switch {
margin: 0 1rem;
.flex {
display: flex;
align-items: flex-end;
gap: 1rem;
width: 100%;
}
.fields {
display: flex;
.col {
gap: 1.5rem;
flex-direction: column;
}
</style>