move folder

frontend/src/routes/__layout.svelte

@@ -0,0 +1,32 @@
+<script lang="ts">
+	import { init } from '$lib/stores/status'
+	import Footer from '$lib/views/Footer.svelte'
+	import Header from '$lib/views/Header.svelte'
+	import { onMount } from 'svelte'
+	import '../app.css'
+
+	onMount(() => {
+		init()
+	})
+</script>
+
+<svelte:head>
+	<title>cryptgeon</title>
+</svelte:head>
+
+<main>
+	<Header />
+	<slot />
+</main>
+
+<Footer />
+
+<style>
+	main {
+		padding: 1rem;
+		padding-bottom: 4rem;
+		width: 100%;
+		max-width: 35rem;
+		margin: 0 auto;
+	}
+</style>

frontend/src/routes/about.svelte

@@ -0,0 +1,80 @@
+<script context="module">
+	import { browser, dev } from '$app/env'
+	import { status } from '$lib/stores/status'
+	import AboutParagraph from '$lib/ui/AboutParagraph.svelte'
+
+	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 a secure, open source sharing note / file service inspired by
+		<a href="https://privnote.com"><i>PrivNote</i></a>.
+	</p>
+
+	<AboutParagraph title="how does it work?">
+		<span>
+			each note has a generated <code>id (256bit)</code> and <code>key 256(bit)</code>. The
+			<code>id</code>
+			is used to save & retrieve the note. the note is then encrypted with aes in gcm mode on the client
+			side with the <code>key</code> and then sent to the server. data is stored in memory and never
+			persisted to disk. the server never sees the encryption key and cannot decrypt the contents of
+			the notes even if it tried to.
+		</span>
+	</AboutParagraph>
+
+	<AboutParagraph title="features">
+		<ul>
+			<li>server cannot decrypt contents due to client side encryption</li>
+			<li>view and time constraints</li>
+			<li>in memory, no persistence</li>
+		</ul>
+	</AboutParagraph>
+
+	<AboutParagraph title="tech stack">
+		<span>
+			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" target="_blank" rel="noopener">
+				source code
+			</a>.
+		</span>
+	</AboutParagraph>
+
+	<AboutParagraph title="attribution">
+		<span>
+			icons made by <a href="https://www.freepik.com" title="Freepik">freepik</a> from
+			<a href="https://www.flaticon.com/" title="Flaticon">www.flaticon.com</a>
+		</span>
+	</AboutParagraph>
+
+	<AboutParagraph title="version">
+		<span>
+			{#if $status}
+				<code>v{$status.version}</code>
+			{/if}
+		</span>
+	</AboutParagraph>
+</section>
+
+<style>
+	section {
+		width: 100%;
+	}
+
+	ul {
+		margin: 0;
+		padding: 0;
+		padding-left: 1rem;
+		list-style: square;
+	}
+</style>

frontend/src/routes/index.svelte

@@ -0,0 +1,9 @@
+<script context="module" lang="ts">
+	export const prerender = true
+</script>
+
+<script lang="ts">
+	import Create from '$lib/views/Create.svelte'
+</script>
+
+<Create />

frontend/src/routes/note/[id].svelte

@@ -0,0 +1,81 @@
+<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 { get, info } from '$lib/api'
+	import { decrypt, getKeyFromString } from '$lib/crypto'
+	import Button from '$lib/ui/Button.svelte'
+	import ShowNote from '$lib/ui/ShowNote.svelte'
+	import { onMount } from 'svelte'
+
+	export let id: string
+
+	let password: string
+	let note: NotePublic | null = null
+	let exists = false
+
+	let loading = true
+	let error = false
+
+	onMount(async () => {
+		try {
+			loading = true
+			error = null
+			password = window.location.hash.slice(1)
+			await info(id)
+			exists = true
+		} catch {
+			exists = false
+		} finally {
+			loading = false
+		}
+	})
+
+	async function show() {
+		try {
+			error = false
+			loading = true
+			const data = note || (await get(id)) // Don't get the content twice on wrong password.
+			const key = await getKeyFromString(password)
+			data.contents = await decrypt(data.contents, key)
+			note = data
+		} catch {
+			error = true
+		} finally {
+			loading = false
+		}
+	}
+</script>
+
+{#if !loading}
+	{#if !exists}
+		<p class="error-text" data-testid="note-not-found">
+			note was not found or was already deleted.
+		</p>
+	{:else if note && !error}
+		<ShowNote {note} />
+	{:else}
+		<form on:submit|preventDefault={show}>
+			<fieldset>
+				<p>click below to show and delete the note if the counter has reached it's limit</p>
+				<Button type="submit" data-testid="button-show">show note</Button>
+				{#if error}
+					<br />
+					<p class="error-text">
+						wrong password. could not decipher. probably a broken link. note was destroyed.
+						<br />
+					</p>
+				{/if}
+			</fieldset>
+		</form>
+	{/if}
+{/if}
+{#if loading}
+	<p>loading...</p>
+{/if}