mirror of
https://github.com/cupcakearmy/cryptgeon.git
synced 2025-09-05 17:00:39 +00:00
client
This commit is contained in:
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