cupcakearmy/cryptgeon
1
0
Fork 0
mirror of https://github.com/cupcakearmy/cryptgeon.git synced 2026-04-02 09:55:23 +00:00
Code Issues Packages Projects Releases Wiki Activity

move folder

Browse Source
This commit is contained in:
cupcakearmy
2022-01-02 23:46:08 +01:00
parent 835f7df0f6
commit a0732a4593
58 changed files with 73 additions and 83 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
frontend/src/lib/ui/AboutParagraph.svelte Normal file
View File

@@ -0,0 +1,19 @@
<script lang="ts">
export let title: string
</script>
<p>
<b>▶ {title}</b>
<slot />
</p>
<style>
b {
display: block;
margin-bottom: 0.25rem;
}
p > :global(span) {
padding-left: 1.25em;
}
</style>

18
frontend/src/lib/ui/Button.svelte Normal file
View File

@@ -0,0 +1,18 @@
<button {...$$restProps} on:click><slot /></button>
<style>
button {
width: auto;
display: inline-block;
padding: 0.25rem 2.5rem;
border: 2px solid var(--ui-bg-2);
background: var(--ui-bg-1);
outline: none;
cursor: pointer;
height: 2.5rem;
}
button:hover {
border-color: var(--ui-clr-primary);
}
</style>

72
frontend/src/lib/ui/FileUpload.svelte Normal file
View File

@@ -0,0 +1,72 @@
<script lang="ts">
import type { FileDTO } from '$lib/api'
import { Files } from '$lib/files'
import { createEventDispatcher } from 'svelte'
import MaxSize from './MaxSize.svelte'
export let label: string = ''
let files: File[] = []
const dispatch = createEventDispatcher<{ file: string }>()
async function onInput(e: Event) {
const input = e.target as HTMLInputElement
if (input.files.length) {
files = Array.from(input.files)
const data: FileDTO[] = await Promise.all(
files.map(async (file) => ({
name: file.name,
type: file.type,
size: file.size,
contents: await Files.toString(file),
}))
)
console.debug(
'files',
data.map((d) => d.contents.length)
)
dispatch('file', JSON.stringify(data))
} else {
dispatch('file', '')
}
}
</script>
<label>
<small>
{label}
</small>
<input type="file" on:change={onInput} multiple />
<div class="box">
{#if files.length}
<div>
<b>Selected Files</b>
{#each files as file}
<div class="file">
{file.name}
</div>
{/each}
</div>
{:else}
<div>
<b>No Files Selected</b>
<br />
<small>max: <MaxSize /></small>
</div>
{/if}
</div>
</label>
<style>
input {
display: none;
}
.box {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
cursor: pointer;
}
</style>

34
frontend/src/lib/ui/Icon.svelte Normal file
View File

@@ -0,0 +1,34 @@
<script lang="ts">
import { onMount } from 'svelte'
export let icon: string = ''
export let href: string = ''
$: src = href || `/icons/${icon}.svg`
let html = null
onMount(async () => {
html = await fetch(src).then((res) => res.text())
})
</script>
{#if html === null}
<img on:click {...$$restProps} {src} alt={icon} />
{:else}
<div on:click {...$$restProps}>
{@html html}
</div>
{/if}
<style>
img,
div {
display: inline-block;
contain: strict;
box-sizing: content-box;
}
div > :global(svg) {
display: block;
fill: currentColor;
}
</style>

12
frontend/src/lib/ui/MaxSize.svelte Normal file
View File

@@ -0,0 +1,12 @@
<script lang="ts">
import { status } from '$lib/stores/status'
import prettyBytes from 'pretty-bytes'
</script>
<span>
{#if $status !== null}
{prettyBytes($status.max_size, { binary: true })}
{:else}
loading...
{/if}
</span>

69
frontend/src/lib/ui/ShowNote.svelte Normal file
View File

@@ -0,0 +1,69 @@
<script lang="ts">
import type { FileDTO, NotePublic } from '$lib/api'
import { Files } from '$lib/files'
import copy from 'copy-to-clipboard'
import { saveAs } from 'file-saver'
import prettyBytes from 'pretty-bytes'
import Button from './Button.svelte'
export let note: NotePublic
let files: FileDTO[] = []
$: if (note.meta.type === 'file') {
files = JSON.parse(note.contents) as FileDTO[]
}
$: download = () => {
for (const file of files) {
downloadFile(file)
}
}
async function downloadFile(file: FileDTO) {
const f = new File([await Files.fromString(file.contents)], file.name, {
type: file.type,
})
saveAs(f)
}
</script>
<p class="error-text">you will <b>not</b> get the chance to see the note again.</p>
{#if note.meta.type === 'text'}
<div class="note" data-testid="note-result">
{note.contents}
</div>
<Button on:click={() => copy(note.contents)}>copy to clipboard</Button>
{:else}
{#each files as file}
<div class="note file" data-testid="note-result">
<b on:click={() => downloadFile(file)}>↓ {file.name}</b>
<small> {file.type} － {prettyBytes(file.size)}</small>
</div>
{/each}
<Button on:click={download}>download all</Button>
{/if}
<style>
.note {
width: 100%;
margin: 0;
padding: 0;
border: 2px solid var(--ui-bg-1);
outline: none;
padding: 0.5rem;
white-space: pre;
overflow: auto;
margin-bottom: 0.5rem;
}
.note b {
cursor: pointer;
}
.note.file {
display: flex;
justify-content: space-between;
align-items: center;
}
</style>

65
frontend/src/lib/ui/Switch.svelte Normal file
View File

@@ -0,0 +1,65 @@
<script lang="ts">
export let label: string = ''
export let value: boolean
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>
<style>
div {
height: 3.75rem;
}
.switch {
position: relative;
display: inline-block;
width: 4rem;
height: 2.5rem;
}
.switch input {
opacity: 0;
width: 0;
height: 0;
}
.slider {
position: absolute;
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 {
position: absolute;
content: '';
height: 2rem;
width: 1.25rem;
left: 0.125rem;
bottom: 0.1rem;
background-color: var(--ui-bg-1);
-webkit-transition: 0.4s;
transition: var(--ui-anim);
}
input:checked + .slider.color:before {
background-color: var(--ui-clr-primary);
}
input:checked + .slider:before {
transform: translateX(calc(2.25rem - 1px));
}
</style>

11
frontend/src/lib/ui/TextArea.svelte Normal file
View File

@@ -0,0 +1,11 @@
<script lang="ts">
export let label: string = ''
export let value: string
</script>
<label>
<small>
{label}
</small>
<textarea class="box" {...$$restProps} bind:value />
</label>

91
frontend/src/lib/ui/TextInput.svelte Normal file
View File

@@ -0,0 +1,91 @@
<script lang="ts">
import { getRandomBytes, Hex } from '$lib/crypto'
import copyToClipboard from 'copy-to-clipboard'
import Icon from './Icon.svelte'
export let label: string = ''
export let value
export let copy: boolean = false
export let random: boolean = false
const initialType = $$restProps.type
const isPassword = initialType === 'password'
let hidden = true
$: if (isPassword) {
value
$$restProps.type = hidden ? initialType : 'text'
}
function toggle() {
hidden = !hidden
}
function copyFN() {
copyToClipboard(value)
}
function randomFN() {
value = Hex.encode(getRandomBytes(20))
}
</script>
<label>
<small disabled={$$restProps.disabled}>
{label}
</small>
<input bind:value {...$$restProps} />
<div class="icons">
{#if isPassword}
<Icon class="icon" icon={hidden ? 'eye-sharp' : 'eye-off-sharp'} on:click={toggle} />
{/if}
{#if random}
<Icon class="icon" icon="dice-sharp" on:click={randomFN} />
{/if}
{#if copy}
<Icon class="icon" icon="copy-sharp" on:click={copyFN} />
{/if}
</div>
</label>
<style>
label {
position: relative;
display: block;
}
input {
width: 100%;
margin: 0;
border: 2px solid var(--ui-bg-1);
outline: none;
padding: 0.5rem;
height: 2.5rem;
}
input:hover,
input:focus {
border-color: var(--ui-clr-primary);
}
.icons {
border: 1px red;
position: absolute;
right: 0.3rem;
bottom: 0.3rem;
display: flex;
color: var(--ui-clr-primary);
}
.icons > :global(.icon) {
width: 1.5rem;
height: 1.5rem;
background-color: var(--ui-bg-1);
border: 2px solid var(--ui-bg-2);
padding: 1px;
cursor: pointer;
margin-left: 0.25rem;
}
.icons > :global(.icon:hover) {
border-color: var(--ui-clr-primary);
}
</style>

62
frontend/src/lib/ui/ThemeToggle.svelte Normal file
View File

@@ -0,0 +1,62 @@
<script lang="ts" context="module">
import { writable } from 'svelte/store'
enum Theme {
Dark = 'dark',
Light = 'light',
Auto = 'auto',
}
const NextTheme = {
[Theme.Auto]: Theme.Light,
[Theme.Light]: Theme.Dark,
[Theme.Dark]: Theme.Auto,
}
function init(): Theme {
if (typeof window !== 'undefined') {
const saved = window.localStorage.getItem('theme') as Theme
if (Object.values(Theme).includes(saved)) return saved
}
return Theme.Auto
}
export const theme = writable<Theme>(init())
theme.subscribe((theme) => {
if (typeof window !== 'undefined') {
window.localStorage.setItem('theme', theme)
const html = window.document.getElementsByTagName('html')[0]
html.setAttribute('theme', theme)
}
})
</script>
<script lang="ts">
import Icon from '$lib/ui/Icon.svelte'
function change() {
theme.update((current) => NextTheme[current])
}
</script>
<div on:click={change}>
<Icon class="icon" icon="contrast-sharp" />
{$theme}
</div>
<style>
div :global(.icon) {
height: 1rem;
width: 1rem;
margin-right: 0.5rem;
}
div {
display: flex;
flex-direction: row;
justify-content: flex-end;
align-items: center;
cursor: pointer;
}
</style>