cupcakearmy/cryptgeon
1
0
Fork 0
mirror of https://github.com/cupcakearmy/cryptgeon.git synced 2025-09-10 19:20:38 +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>

5
packages/frontend/src/lib/ui/NoteResult.svelte
View File

@@ -1,7 +1,7 @@
<script lang="ts" context="module">
export type NoteResult = {
password: string
id: string
password?: string
}
</script>
@@ -14,7 +14,8 @@
export let result: NoteResult
$: url = `${window.location.origin}/note/${result.id}#${result.password}`
let url = `${window.location.origin}/note/${result.id}`
if (result.password) url += `#${result.password}`
function reset() {
window.location.reload()

42
packages/frontend/src/lib/ui/Switch.svelte
View File

@@ -4,43 +4,35 @@
export let color = true
</script>
<div {...$$restProps}>
<label class="switch">
<small>{label}</small>
<input type="checkbox" bind:checked={value} />
<span class:color class="slider" />
</label>
</div>
<label {...$$restProps}>
<small>{label}</small>
<input type="checkbox" bind:checked={value} />
<span class:color class="slider" />
</label>
<style>
div {
height: 3.75rem;
}
.switch {
label {
position: relative;
display: inline-block;
width: 4rem;
height: 2.5rem;
}
.switch input {
opacity: 0;
width: 0;
height: 0;
label input {
display: none;
}
small {
display: block;
width: max-content;
}
.slider {
position: absolute;
display: block;
width: 4rem;
height: 2.5rem;
position: relative;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
border: 2px solid var(--ui-bg-1);
background-color: var(--ui-bg-0);
transition: var(--ui-anim);
transform: translateY(1.2rem);
}
.slider:before {

3
packages/frontend/src/lib/ui/TextInput.svelte
View File

@@ -30,7 +30,7 @@
</script>
<label>
<small disabled={$$restProps.disabled}>
<small class:disabled={$$restProps.disabled}>
{label}
{#if valid !== true}
<span class="error-text">{valid}</span>
@@ -54,6 +54,7 @@
label {
position: relative;
display: block;
width: 100%;
}
label > small {