mirror of
https://github.com/cupcakearmy/cryptgeon.git
synced 2025-09-05 17:00:39 +00:00
client
This commit is contained in:
62
client/src/app.css
Normal file
62
client/src/app.css
Normal file
@@ -0,0 +1,62 @@
|
||||
@import '@fontsource/fira-mono';
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
:root {
|
||||
font-family: 'Fira Mono', monospace;
|
||||
|
||||
--ui-bg-0: #fefefe;
|
||||
--ui-bg-0-85: #ffffffd9;
|
||||
--ui-bg-1: #eee;
|
||||
--ui-bg-2: #e2e2e2;
|
||||
--ui-text-0: #111;
|
||||
--ui-text-1: #222;
|
||||
--ui-clr-primary: hsl(186, 65%, 55%);
|
||||
--ui-clr-error: hsl(357, 77%, 51%);
|
||||
|
||||
--ui-anim: all 150ms ease;
|
||||
}
|
||||
|
||||
.error-text {
|
||||
color: var(--ui-clr-error);
|
||||
}
|
||||
|
||||
body {
|
||||
min-height: 100vh;
|
||||
margin: 0;
|
||||
background-color: var(--ui-bg-0);
|
||||
color: var(--ui-text-0);
|
||||
}
|
||||
|
||||
a {
|
||||
color: inherit;
|
||||
text-decoration: inherit;
|
||||
box-sizing: content-box;
|
||||
border-bottom: 2px solid var(--ui-bg-2);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
a:active {
|
||||
border-color: var(--ui-clr-primary);
|
||||
}
|
||||
|
||||
a:hover {
|
||||
border-color: var(--ui-text-0);
|
||||
}
|
||||
|
||||
input,
|
||||
textarea,
|
||||
button {
|
||||
appearance: none;
|
||||
transition: var(--ui-anim);
|
||||
font-family: inherit;
|
||||
font-size: inherit;
|
||||
}
|
||||
|
||||
fieldset {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: none;
|
||||
}
|
||||
13
client/src/app.html
Normal file
13
client/src/app.html
Normal file
@@ -0,0 +1,13 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<link rel="icon" href="/favicon.png" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
|
||||
%svelte.head%
|
||||
</head>
|
||||
<body>
|
||||
<div id="svelte">%svelte.body%</div>
|
||||
</body>
|
||||
</html>
|
||||
3
client/src/global.d.ts
vendored
Normal file
3
client/src/global.d.ts
vendored
Normal file
@@ -0,0 +1,3 @@
|
||||
/// <reference types="@sveltejs/kit" />
|
||||
/// <reference types="svelte" />
|
||||
/// <reference types="vite/client" />
|
||||
151
client/src/lib/Create.svelte
Normal file
151
client/src/lib/Create.svelte
Normal file
@@ -0,0 +1,151 @@
|
||||
<script lang="ts">
|
||||
import type { Note } from '$lib/api'
|
||||
import { create } from '$lib/api'
|
||||
import { getKeyFromString, encrypt } from '$lib/crypto'
|
||||
|
||||
import Button from './ui/Button.svelte'
|
||||
import Switch from './ui/Switch.svelte'
|
||||
import TextArea from './ui/TextArea.svelte'
|
||||
import TextInput from './ui/TextInput.svelte'
|
||||
|
||||
let note: Note = {
|
||||
contents: 'secret',
|
||||
password: false,
|
||||
views: 1,
|
||||
expiration: 60,
|
||||
}
|
||||
let password: string = ''
|
||||
let result: { password: string; id: string } | null = null
|
||||
let advanced = false
|
||||
let type = false
|
||||
let loading = false
|
||||
let message = ''
|
||||
|
||||
$: if (!advanced) {
|
||||
note.views = 1
|
||||
type = false
|
||||
}
|
||||
|
||||
$: {
|
||||
let fraction: string
|
||||
fraction = type ? `${note.expiration} minutes` : `${note.views} views`
|
||||
message = 'the note will expire and be destroyed after ' + fraction
|
||||
}
|
||||
|
||||
async function submit() {
|
||||
try {
|
||||
loading = true
|
||||
const data: Note = {
|
||||
contents: note.contents,
|
||||
password: !!password,
|
||||
}
|
||||
// @ts-ignore
|
||||
if (type) data.expiration = parseInt(note.expiration)
|
||||
// @ts-ignore
|
||||
else data.views = parseInt(note.views)
|
||||
if (data.password) {
|
||||
const key = await getKeyFromString(password)
|
||||
data.contents = await encrypt(data.contents, key)
|
||||
}
|
||||
|
||||
const response = await create(data)
|
||||
result = {
|
||||
password: password,
|
||||
id: response.id,
|
||||
}
|
||||
} finally {
|
||||
loading = false
|
||||
}
|
||||
}
|
||||
|
||||
function reset() {
|
||||
window.location.reload()
|
||||
}
|
||||
</script>
|
||||
|
||||
{#if result}
|
||||
{#if result.password}
|
||||
<TextInput type="password" readonly value={result.password} copy />
|
||||
<br />
|
||||
{/if}
|
||||
<TextInput type="text" readonly value="{window.location.origin}/note/{result.id}" copy />
|
||||
<br />
|
||||
<Button on:click={reset}>new</Button>
|
||||
{:else}
|
||||
<form on:submit|preventDefault={submit}>
|
||||
<fieldset disabled={loading}>
|
||||
<TextArea label="note" bind:value={note.contents} />
|
||||
|
||||
<div class="bottom">
|
||||
<Switch label="advanced" bind:value={advanced} />
|
||||
<Button type="submit">create</Button>
|
||||
</div>
|
||||
|
||||
<p><br />{message}</p>
|
||||
|
||||
<div class="advanced" class:hidden={!advanced}>
|
||||
<br />
|
||||
<div class="fields">
|
||||
<TextInput
|
||||
type="number"
|
||||
label="views"
|
||||
bind:value={note.views}
|
||||
disabled={type}
|
||||
max={100}
|
||||
/>
|
||||
<div class="middle-switch">
|
||||
<Switch label="mode" bind:value={type} color={false} />
|
||||
</div>
|
||||
<TextInput
|
||||
type="number"
|
||||
label="minutes"
|
||||
bind:value={note.expiration}
|
||||
disabled={!type}
|
||||
max={360}
|
||||
/>
|
||||
</div>
|
||||
<br />
|
||||
<TextInput
|
||||
type="password"
|
||||
label="password"
|
||||
placeholder="optional"
|
||||
bind:value={password}
|
||||
copy
|
||||
random
|
||||
/>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.fields {
|
||||
display: flex;
|
||||
}
|
||||
.spacer {
|
||||
width: 3rem;
|
||||
}
|
||||
</style>
|
||||
</fieldset>
|
||||
</form>
|
||||
{/if}
|
||||
|
||||
<style>
|
||||
.bottom {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-end;
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
|
||||
.middle-switch {
|
||||
margin: 0 1rem;
|
||||
}
|
||||
|
||||
.advanced {
|
||||
max-height: 14em;
|
||||
overflow: hidden;
|
||||
transition: var(--ui-anim);
|
||||
}
|
||||
|
||||
.advanced.hidden {
|
||||
max-height: 0;
|
||||
}
|
||||
</style>
|
||||
BIN
client/src/lib/Header/Logo.svg
(Stored with Git LFS)
Normal file
BIN
client/src/lib/Header/Logo.svg
(Stored with Git LFS)
Normal file
Binary file not shown.
74
client/src/lib/Header/index.svelte
Normal file
74
client/src/lib/Header/index.svelte
Normal file
@@ -0,0 +1,74 @@
|
||||
<script lang="ts">
|
||||
</script>
|
||||
|
||||
<header>
|
||||
<a href="/">
|
||||
<svg
|
||||
width="100%"
|
||||
height="100%"
|
||||
viewBox="0 0 475 200"
|
||||
version="1.1"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:xlink="http://www.w3.org/1999/xlink"
|
||||
xml:space="preserve"
|
||||
style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;"
|
||||
fill="currentColor"
|
||||
><g id="Logo"
|
||||
><clipPath id="_clip1"><rect x="4.516" y="3.225" width="193.55" height="193.55" /></clipPath
|
||||
><g clip-path="url(#_clip1)"
|
||||
><g
|
||||
><g
|
||||
><path
|
||||
d="M171.604,43.296c-2.087,-0 -3.78,1.693 -3.78,3.78c-0,2.087 1.693,3.78 3.78,3.78c2.087,0 3.78,-1.693 3.78,-3.78c0,-2.087 -1.693,-3.78 -3.78,-3.78Z"
|
||||
style="fill-rule:nonzero;"
|
||||
/></g
|
||||
></g
|
||||
><g
|
||||
><g
|
||||
><path
|
||||
d="M101.291,134.023c-2.087,-0 -3.78,1.693 -3.78,3.78c-0,2.087 1.693,3.78 3.78,3.78c2.087,0 3.78,-1.693 3.78,-3.78c0,-2.087 -1.693,-3.78 -3.78,-3.78Z"
|
||||
style="fill-rule:nonzero;"
|
||||
/></g
|
||||
></g
|
||||
><g
|
||||
><g
|
||||
><path
|
||||
d="M154.215,96.22c-2.088,-0 -3.78,1.692 -3.78,3.78c-0,18.76 -15.263,34.023 -34.023,34.023c-2.088,-0 -3.78,1.692 -3.78,3.78c-0,2.088 1.692,3.78 3.78,3.78c22.929,0 41.583,-18.654 41.583,-41.583c0,-2.088 -1.692,-3.78 -3.78,-3.78Z"
|
||||
style="fill-rule:nonzero;"
|
||||
/></g
|
||||
></g
|
||||
><g
|
||||
><g
|
||||
><path
|
||||
d="M197.667,60.507l-9.515,-19.026c-4.101,-8.207 -12.349,-13.306 -21.526,-13.306c-7.48,-0 -14.627,3.547 -19.155,9.498l-10.678,12.016c-2.847,-4.047 -7.021,-7.049 -11.831,-8.421l-19.102,-5.459c-14.623,-4.178 -28.92,-15.441 -39.227,-30.901c-0.924,-1.386 -2.646,-2.003 -4.24,-1.521c-1.595,0.483 -2.685,1.953 -2.685,3.618l-0,20.372c-0,9.468 1.418,18.804 4.219,27.813c-2.936,0.73 -5.896,1.34 -8.842,1.816c-5.773,0.936 -11.654,1.411 -17.48,1.411l-29.309,-0c-1.374,-0 -2.64,0.746 -3.306,1.948c-0.666,1.202 -0.628,2.671 0.101,3.836l22.636,36.219c9.672,15.473 26.33,25.183 44.578,25.983l-36.36,41.158c-5.602,5.728 -3.654,15.315 3.746,18.396l20.018,9.887c0.088,0.044 0.179,0.084 0.271,0.121c5.789,2.313 12.389,-0.496 14.725,-6.279l13.969,-32.982l27.738,0c31.966,0 58.972,-25.967 58.972,-56.704l0,-22.682c0,-6.253 5.088,-11.341 11.341,-11.341l7.561,0c1.31,0 2.527,-0.678 3.216,-1.793c0.688,-1.114 0.751,-2.506 0.165,-3.677Zm-130.399,-42.236c10.418,12.203 23.307,21.034 36.515,24.808l19.104,5.459c3.725,1.063 6.865,3.624 8.666,7.048l-10.049,11.307l-17.652,-10.591c-7.646,-4.588 -16.746,-6.412 -25.776,-4.951c-2.837,0.46 -4.648,1.038 -6.877,1.759c-2.609,-8.332 -3.931,-16.971 -3.931,-25.733l0,-9.106Zm119.457,40.146c-10.422,-0 -18.901,8.479 -18.901,18.901l-0,22.682c-0,26.639 -23.544,49.144 -51.412,49.144l-30.242,-0c-10.771,-0 -20.452,5.983 -25.265,15.615l-0.798,1.596c-0.934,1.867 -0.177,4.137 1.691,5.071c1.867,0.934 4.138,0.176 5.072,-1.691c0.44,-0.586 3.306,-9.102 13.21,-12.125l-12.349,29.159c-0.01,0.024 -0.02,0.047 -0.03,0.071c-0.75,1.877 -2.864,2.851 -4.8,2.148c-21.279,-10.506 -19.997,-9.888 -20.252,-9.99c-2.526,-1.01 -3.191,-4.259 -1.267,-6.182c0.131,-0.131 8.026,-9.078 41.009,-46.411c13.867,-0.617 26.842,-6.319 36.694,-16.172c1.477,-1.476 1.477,-3.87 0,-5.346c-1.476,-1.477 -3.869,-1.476 -5.346,-0c-16.827,16.828 -36.803,13.634 -39.027,14.014c-16.604,0 -31.772,-8.407 -40.574,-22.488l-2.417,-3.868l2.729,1.065c17.308,6.753 38.919,4.347 53.817,-5.586c1.737,-1.158 2.206,-3.505 1.048,-5.242c-1.158,-1.737 -3.505,-2.207 -5.243,-1.048c-13.085,8.724 -31.922,10.666 -46.874,4.832l-12.185,-4.753l-9.896,-15.836l22.488,0c6.23,0 12.518,-0.507 18.688,-1.507c12.711,-2.055 18.051,-4.855 22.993,-5.655c7.181,-1.163 14.516,0.274 20.677,3.97l29.625,17.775c1.79,1.074 4.112,0.494 5.187,-1.296c1.074,-1.79 0.494,-4.113 -1.296,-5.187l-5.377,-3.226c26.559,-29.893 25.139,-28.272 25.319,-28.511c3.102,-4.136 8.038,-6.605 13.205,-6.605c6.293,0 11.95,3.497 14.764,9.127l6.779,13.555l-1.444,-0Z"
|
||||
style="fill-rule:nonzero;"
|
||||
/></g
|
||||
></g
|
||||
></g
|
||||
><text
|
||||
x="195.418px"
|
||||
y="127.131px"
|
||||
style="font-family:'Sofia-Regular', 'Sofia';font-size:60.681px;">cryptogeon</text
|
||||
></g
|
||||
></svg
|
||||
>
|
||||
</a>
|
||||
</header>
|
||||
|
||||
<style>
|
||||
a {
|
||||
border: none;
|
||||
}
|
||||
|
||||
header {
|
||||
text-align: center;
|
||||
margin-top: calc(min(15vh, 6rem));
|
||||
margin-bottom: 4rem;
|
||||
}
|
||||
|
||||
header svg {
|
||||
width: 100%;
|
||||
max-width: 16rem;
|
||||
transform: translateX(-1rem);
|
||||
}
|
||||
</style>
|
||||
37
client/src/lib/api.ts
Normal file
37
client/src/lib/api.ts
Normal file
@@ -0,0 +1,37 @@
|
||||
import axios from 'axios'
|
||||
|
||||
const base = axios.create({ baseURL: 'http://localhost:5000' })
|
||||
|
||||
export type Note = {
|
||||
contents: string
|
||||
password: boolean
|
||||
views?: number
|
||||
expiration?: number
|
||||
}
|
||||
export type NoteInfo = Pick<Note, 'password'>
|
||||
export type NotePublic = Pick<Note, 'contents'>
|
||||
|
||||
export async function create(note: Note) {
|
||||
const { data } = await base({
|
||||
url: '/notes/',
|
||||
method: 'post',
|
||||
data: note,
|
||||
})
|
||||
return data as { id: string }
|
||||
}
|
||||
|
||||
export async function get(id: string) {
|
||||
const { data } = await base({
|
||||
url: `/notes/${id}`,
|
||||
method: 'delete',
|
||||
})
|
||||
return data as NotePublic
|
||||
}
|
||||
|
||||
export async function info(id: string) {
|
||||
const { data } = await base({
|
||||
url: `/notes/${id}`,
|
||||
method: 'get',
|
||||
})
|
||||
return data as NoteInfo
|
||||
}
|
||||
71
client/src/lib/crypto.ts
Normal file
71
client/src/lib/crypto.ts
Normal file
@@ -0,0 +1,71 @@
|
||||
export class Hex {
|
||||
static encode(buffer: ArrayBuffer): string {
|
||||
let s = ''
|
||||
for (const i of new Uint8Array(buffer)) {
|
||||
s += i.toString(16).padStart(2, '0')
|
||||
}
|
||||
return s
|
||||
}
|
||||
|
||||
static decode(s: string): ArrayBuffer {
|
||||
const size = s.length / 2
|
||||
const buffer = new Uint8Array(size)
|
||||
for (let i = 0; i < size; i++) {
|
||||
const idx = i * 2
|
||||
const segment = s.slice(idx, idx + 2)
|
||||
buffer[i] = parseInt(segment, 16)
|
||||
}
|
||||
return buffer
|
||||
}
|
||||
}
|
||||
|
||||
const ALG = 'AES-GCM'
|
||||
|
||||
export function getRandomBytes(size = 16): Uint8Array {
|
||||
return window.crypto.getRandomValues(new Uint8Array(size))
|
||||
}
|
||||
|
||||
export function getKeyFromString(password: string) {
|
||||
return window.crypto.subtle.importKey(
|
||||
'raw',
|
||||
new TextEncoder().encode(password),
|
||||
'PBKDF2',
|
||||
false,
|
||||
['deriveBits', 'deriveKey']
|
||||
)
|
||||
}
|
||||
|
||||
export async function getDerivedForKey(key: CryptoKey, salt: ArrayBuffer) {
|
||||
const iterations = 1_000
|
||||
return window.crypto.subtle.deriveKey(
|
||||
{
|
||||
name: 'PBKDF2',
|
||||
salt,
|
||||
iterations,
|
||||
hash: 'SHA-512',
|
||||
},
|
||||
key,
|
||||
{ name: ALG, length: 256 },
|
||||
true,
|
||||
['encrypt', 'decrypt']
|
||||
)
|
||||
}
|
||||
|
||||
export async function encrypt(plaintext: string, key: CryptoKey) {
|
||||
const salt = getRandomBytes(16)
|
||||
const derived = await getDerivedForKey(key, salt)
|
||||
const iv = getRandomBytes(16)
|
||||
const encrypted = await window.crypto.subtle.encrypt(
|
||||
{ name: ALG, iv },
|
||||
derived,
|
||||
new TextEncoder().encode(plaintext)
|
||||
)
|
||||
return [salt, iv, encrypted].map(Hex.encode).join(':')
|
||||
}
|
||||
|
||||
export async function decrypt(ciphertext: string, key: CryptoKey) {
|
||||
const [salt, iv, encrypted] = ciphertext.split(':').map(Hex.decode)
|
||||
const derived = await getDerivedForKey(key, salt)
|
||||
const plaintext = await window.crypto.subtle.decrypt({ name: ALG, iv }, derived, encrypted)
|
||||
return new TextDecoder().decode(plaintext)
|
||||
}
|
||||
18
client/src/lib/ui/Button.svelte
Normal file
18
client/src/lib/ui/Button.svelte
Normal 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>
|
||||
34
client/src/lib/ui/Icon.svelte
Normal file
34
client/src/lib/ui/Icon.svelte
Normal file
@@ -0,0 +1,34 @@
|
||||
<script lang="ts">
|
||||
import { onMount } from 'svelte'
|
||||
export let icon: string
|
||||
|
||||
$: src = `/icons/${icon}.svg`
|
||||
|
||||
let html = null
|
||||
|
||||
onMount(async () => {
|
||||
console.log(src)
|
||||
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>
|
||||
65
client/src/lib/ui/Switch.svelte
Normal file
65
client/src/lib/ui/Switch.svelte
Normal file
@@ -0,0 +1,65 @@
|
||||
<script lang="ts">
|
||||
export let label: string = ''
|
||||
export let value: boolean
|
||||
export let color = true
|
||||
</script>
|
||||
|
||||
<div>
|
||||
<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>
|
||||
29
client/src/lib/ui/TextArea.svelte
Normal file
29
client/src/lib/ui/TextArea.svelte
Normal file
@@ -0,0 +1,29 @@
|
||||
<script lang="ts">
|
||||
export let label: string = ''
|
||||
export let value: string
|
||||
</script>
|
||||
|
||||
<label>
|
||||
<small>
|
||||
{label}
|
||||
</small>
|
||||
<textarea {...$$restProps} bind:value />
|
||||
</label>
|
||||
|
||||
<style>
|
||||
textarea {
|
||||
width: 100%;
|
||||
min-height: 8rem;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: 2px solid var(--ui-bg-1);
|
||||
resize: vertical;
|
||||
outline: none;
|
||||
padding: 0.5rem;
|
||||
}
|
||||
|
||||
textarea:hover,
|
||||
textarea:focus {
|
||||
border-color: var(--ui-clr-primary);
|
||||
}
|
||||
</style>
|
||||
91
client/src/lib/ui/TextInput.svelte
Normal file
91
client/src/lib/ui/TextInput.svelte
Normal 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>
|
||||
{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>
|
||||
45
client/src/routes/$layout.svelte
Normal file
45
client/src/routes/$layout.svelte
Normal file
@@ -0,0 +1,45 @@
|
||||
<script lang="ts">
|
||||
import '../app.css'
|
||||
import Header from '$lib/Header/index.svelte'
|
||||
</script>
|
||||
|
||||
<svelte:head>
|
||||
<title>cryptgeon</title>
|
||||
</svelte:head>
|
||||
|
||||
<main>
|
||||
<Header />
|
||||
<slot />
|
||||
</main>
|
||||
|
||||
<footer>
|
||||
<a href="/">/home</a>
|
||||
<a href="/about">/about</a>
|
||||
<a href="https://github.com/cupcakearmy/cryptgeon" target="_blank" rel="noopener">/code</a>
|
||||
</footer>
|
||||
|
||||
<style>
|
||||
a {
|
||||
margin: 0 0.5rem;
|
||||
}
|
||||
main {
|
||||
padding: 1rem;
|
||||
padding-bottom: 4rem;
|
||||
width: 100%;
|
||||
max-width: 35rem;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
footer {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
padding: 1rem;
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
width: 100%;
|
||||
background-color: var(--ui-bg-0-85);
|
||||
}
|
||||
</style>
|
||||
55
client/src/routes/about.svelte
Normal file
55
client/src/routes/about.svelte
Normal file
@@ -0,0 +1,55 @@
|
||||
<script context="module">
|
||||
import { browser, dev } from '$app/env'
|
||||
export const hydrate = dev
|
||||
export const router = browser
|
||||
export const prerender = true
|
||||
</script>
|
||||
|
||||
<svelte:head>
|
||||
<title>About</title>
|
||||
</svelte:head>
|
||||
|
||||
<section class="content">
|
||||
<h1>About</h1>
|
||||
|
||||
<p>
|
||||
<i>cryptgeon</i> is an secure, open source sharing note service inspired by
|
||||
<a href="https://privnote.com"><i>PrivNote</i></a>.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<b>▶ how does it work?</b>
|
||||
<br />
|
||||
each note has a 512bit generated <i>id</i> that is used to retrieve the note. data is stored in memory
|
||||
and never persisted to disk.
|
||||
</p>
|
||||
|
||||
<b>▶ Features</b>
|
||||
<ul>
|
||||
<li>view and time constrains</li>
|
||||
<li>in memory, no persistence</li>
|
||||
<li>in browser encryption → server cannot decrypt contents</li>
|
||||
</ul>
|
||||
|
||||
<p>
|
||||
<b>▶ tech stack</b>
|
||||
<br />
|
||||
the backend is written in rust and the frontend is svelte and typescript.
|
||||
<br />
|
||||
you are welcomed to check & audit the
|
||||
<a href="https://github.com/cupcakearmy/cryptgeon">source code</a>.
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<style>
|
||||
section {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
ul {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
padding-left: 1rem;
|
||||
list-style: square;
|
||||
}
|
||||
</style>
|
||||
9
client/src/routes/index.svelte
Normal file
9
client/src/routes/index.svelte
Normal file
@@ -0,0 +1,9 @@
|
||||
<script context="module" lang="ts">
|
||||
export const prerender = true;
|
||||
</script>
|
||||
|
||||
<script lang="ts">
|
||||
import Create from '$lib/Create.svelte';
|
||||
</script>
|
||||
|
||||
<Create />
|
||||
94
client/src/routes/note/[id].svelte
Normal file
94
client/src/routes/note/[id].svelte
Normal file
@@ -0,0 +1,94 @@
|
||||
<script context="module" lang="ts">
|
||||
export async function load({ page }) {
|
||||
return {
|
||||
props: page.params,
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<script lang="ts">
|
||||
import type { NotePublic } from '$lib/api'
|
||||
import { info, get } from '$lib/api'
|
||||
import { decrypt, getKeyFromString } from '$lib/crypto'
|
||||
import Button from '$lib/ui/Button.svelte'
|
||||
import TextInput from '$lib/ui/TextInput.svelte'
|
||||
import copy from 'copy-to-clipboard'
|
||||
|
||||
import { onMount } from 'svelte'
|
||||
|
||||
export let id: string
|
||||
let needPassword = false
|
||||
let password: string = ''
|
||||
let note: NotePublic | null = null
|
||||
let exists = false
|
||||
|
||||
let loading = true
|
||||
let error = false
|
||||
|
||||
onMount(async () => {
|
||||
try {
|
||||
loading = true
|
||||
error = null
|
||||
const data = await info(id)
|
||||
needPassword = data.password
|
||||
exists = true
|
||||
} catch {
|
||||
exists = false
|
||||
} finally {
|
||||
loading = false
|
||||
}
|
||||
})
|
||||
|
||||
async function show() {
|
||||
const data = await get(id)
|
||||
if (needPassword) {
|
||||
try {
|
||||
const key = await getKeyFromString(password)
|
||||
data.contents = await decrypt(data.contents, key)
|
||||
error = false
|
||||
} catch {
|
||||
error = true
|
||||
}
|
||||
}
|
||||
note = data
|
||||
}
|
||||
</script>
|
||||
|
||||
{#if !loading}
|
||||
{#if !exists}
|
||||
<p class="error-text">note was not found or was already deleted.</p>
|
||||
{:else if note && !error}
|
||||
<p class="error-text">you will not get the chance to see the note again.</p>
|
||||
<div class="note">
|
||||
{note.contents}
|
||||
</div>
|
||||
<br />
|
||||
<Button on:click={() => copy(note.contents)}>copy to clipboard</Button>
|
||||
{:else}
|
||||
<form on:submit|preventDefault={show}>
|
||||
<p>click below to show and delete the note if the counter has reached it's limit</p>
|
||||
{#if needPassword}
|
||||
<TextInput type="password" label="password" bind:value={password} />
|
||||
<br />
|
||||
{/if}
|
||||
<Button type="submit">show note</Button>
|
||||
{#if error}
|
||||
<br />
|
||||
<p class="error-text">wrong password. could not decipher.</p>
|
||||
{/if}
|
||||
</form>
|
||||
{/if}
|
||||
{/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;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user