aboutsummaryrefslogtreecommitdiff
path: root/ui/src
diff options
context:
space:
mode:
Diffstat (limited to 'ui/src')
-rw-r--r--ui/src/app.d.ts9
-rw-r--r--ui/src/app.html12
-rw-r--r--ui/src/routes/+layout.svelte140
-rw-r--r--ui/src/routes/+page.js9
-rw-r--r--ui/src/routes/+page.svelte14
-rw-r--r--ui/src/routes/list/+page.js14
-rw-r--r--ui/src/routes/list/+page.svelte22
-rw-r--r--ui/src/routes/login/+page.svelte21
-rw-r--r--ui/src/routes/new/+page.svelte44
-rw-r--r--ui/src/routes/view/[id]/+page.js15
-rw-r--r--ui/src/routes/view/[id]/+page.svelte63
11 files changed, 363 insertions, 0 deletions
diff --git a/ui/src/app.d.ts b/ui/src/app.d.ts
new file mode 100644
index 0000000..26a9569
--- /dev/null
+++ b/ui/src/app.d.ts
@@ -0,0 +1,9 @@
+// See https://kit.svelte.dev/docs/types#app
+// for information about these interfaces
+// and what to do when importing types
+declare namespace App {
+ // interface Error {}
+ // interface Locals {}
+ // interface PageData {}
+ // interface Platform {}
+}
diff --git a/ui/src/app.html b/ui/src/app.html
new file mode 100644
index 0000000..effe0d0
--- /dev/null
+++ b/ui/src/app.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+ <head>
+ <meta charset="utf-8" />
+ <link rel="icon" href="%sveltekit.assets%/favicon.png" />
+ <meta name="viewport" content="width=device-width" />
+ %sveltekit.head%
+ </head>
+ <body data-sveltekit-preload-data="hover">
+ <div style="display: contents">%sveltekit.body%</div>
+ </body>
+</html>
diff --git a/ui/src/routes/+layout.svelte b/ui/src/routes/+layout.svelte
new file mode 100644
index 0000000..6539952
--- /dev/null
+++ b/ui/src/routes/+layout.svelte
@@ -0,0 +1,140 @@
+<body>
+ <nav>
+ <a href="/">Home</a>
+ |
+ <a href="/new">New</a>
+ <a href="/login" class="nav-right">Login</a>
+ </nav>
+
+
+ <div class="container">
+ <slot></slot>
+ </div>
+</body>
+
+<style>
+nav {
+ border-bottom: 3px solid #000;
+ padding-bottom: 10px;
+}
+.nav-right {
+ display: block;
+ float: right;
+}
+a {
+ text-decoration: none;
+ color: #268bd2;
+}
+a:visited {
+ color: #d22653;
+ /*
+ * Previous colors:
+ * #aa26d2;
+ * #888;
+ */
+}
+a:hover {
+ text-decoration: underline;
+}
+
+code {
+ /* color: #9672d5; */
+ color: #222;
+ /* background-color: #ff000020; */
+ /* padding: 2px; */
+ border: 1px solid;
+ padding: 2px;
+ font-size: .8em;
+ font-family: "Roboto Mono", "Monaco", "Lucida Console", "DejaVu Sans Mono", "monospace";
+}
+
+pre code, textarea {
+ color: #000;
+ background-color: #FFFFEA;
+ display: block;
+ padding: 10px;
+ border: 1px solid;
+ line-height: 1.1;
+ overflow: auto;
+}
+
+.code {
+ color: #000;
+ background-color: #FFFFEA;
+ display: block;
+ padding: 10px;
+ border: 1px solid;
+ line-height: 1.1;
+ overflow: auto;
+ border: 1px solid;
+ padding: 2px;
+ font-size: .8em;
+ font-family: "Roboto Mono", "Monaco", "Lucida Console", "DejaVu Sans Mono", "monospace";
+}
+
+textarea {
+ width: 100%;
+}
+
+blockquote {
+ border-left: 4px solid #aaa;
+ padding-left: 1em;
+}
+
+/*
+ * The following was shamelessly ripped from:
+ * http://bettermotherfuckingwebsite.com/
+ * And subsequently modified to suit my needs
+ */
+
+body {
+ margin: 40px auto;
+ max-width: 80%;
+ line-height: 1.6;
+ font-size: 1em;
+ color: #444;
+ padding: 0 10px;
+ /* Added because some browsers don't default to white */
+ background-color: #fff;
+}
+
+img {
+ width: 100%;
+ height: auto;
+}
+
+h1,h2,h3 {
+ line-height: 1.2
+}
+
+@media screen and (min-width: 960px) {
+ body {
+ max-width: 768px;
+ }
+}
+
+@media print {
+ .hide-print { display: none; }
+ nav {
+ display: none;
+ }
+ body {
+ background-color: transparent;
+ line-height: 1;
+ font-size: 10pt;
+ /* margin: 5px auto; */
+ margin: 5px 5px 5px 5px;
+ max-width: 100%;
+ }
+
+ pre code {
+ color: #000;
+ background-color: inherit;
+ display: block;
+ padding: 10px;
+ border: none;
+ }
+
+}
+
+</style> \ No newline at end of file
diff --git a/ui/src/routes/+page.js b/ui/src/routes/+page.js
new file mode 100644
index 0000000..8777d48
--- /dev/null
+++ b/ui/src/routes/+page.js
@@ -0,0 +1,9 @@
+/*
+export function load({params}) {
+ return {
+ post: {
+
+ }
+ }
+}
+*/ \ No newline at end of file
diff --git a/ui/src/routes/+page.svelte b/ui/src/routes/+page.svelte
new file mode 100644
index 0000000..fae229e
--- /dev/null
+++ b/ui/src/routes/+page.svelte
@@ -0,0 +1,14 @@
+<script>
+ import Login from './login/+page.svelte';
+ import View from './list/+page.svelte';
+</script>
+
+<h1>Simple Pastebin</h1>
+
+
+<!-- <Login /> -->
+<p>
+ Below is a listing of recent pastes:
+</p>
+
+<View /> \ No newline at end of file
diff --git a/ui/src/routes/list/+page.js b/ui/src/routes/list/+page.js
new file mode 100644
index 0000000..72e2878
--- /dev/null
+++ b/ui/src/routes/list/+page.js
@@ -0,0 +1,14 @@
+
+
+
+
+/** @type {import('./$types').PageLoad} */
+export async function load({ params }) {
+ const req = await fetch(`http://localhost:6130/api/v1/list`)
+ const reqJson = await req.json();
+
+ return {
+ req: req,
+ reqJson: reqJson,
+ };
+} \ No newline at end of file
diff --git a/ui/src/routes/list/+page.svelte b/ui/src/routes/list/+page.svelte
new file mode 100644
index 0000000..c487068
--- /dev/null
+++ b/ui/src/routes/list/+page.svelte
@@ -0,0 +1,22 @@
+<script>
+
+
+ let data = null;
+
+ const req = fetch(`http://localhost:6130/api/v1/list`)
+ .then((res) => res.json())
+ .then(resData => data = resData);
+
+</script>
+
+{#if data}
+<ul>
+ {#each data as paste (paste.id)}
+ <li>
+ <a href="/view/{paste.id}">
+ ID: {paste.id} ({paste.size} bytes)
+ </a>
+ </li>
+ {/each}
+</ul>
+{/if} \ No newline at end of file
diff --git a/ui/src/routes/login/+page.svelte b/ui/src/routes/login/+page.svelte
new file mode 100644
index 0000000..bed5c18
--- /dev/null
+++ b/ui/src/routes/login/+page.svelte
@@ -0,0 +1,21 @@
+
+
+<h2>Login</h2>
+
+<div class="contianer">
+ <form action="" method="post">
+
+ <label for="username">Username: </label>
+ <input type="text" name="username" id="username" />
+
+ <br />
+
+ <label for="password">Password: </label>
+ <input type="password" name="password" id="password" />
+
+ <br />
+
+ <button type="submit">Login</button>
+
+ </form>
+</div> \ No newline at end of file
diff --git a/ui/src/routes/new/+page.svelte b/ui/src/routes/new/+page.svelte
new file mode 100644
index 0000000..28687e4
--- /dev/null
+++ b/ui/src/routes/new/+page.svelte
@@ -0,0 +1,44 @@
+
+
+
+
+<div class="content">
+
+<h1>New Paste</h1>
+
+<label for="content">Content:</label>
+<br />
+<br />
+<textarea name="content" id="content" cols="80" rows="20"></textarea>
+
+<br />
+<br />
+<button type="submit">Save</button>
+
+</div>
+
+
+
+<style>
+/* TODO: Figure out why the styles don't get propagated down here
+ from the +layout up above */
+textarea {
+ margin: 0px auto;
+ width: 100%;
+ max-width: 100%;
+ min-width: 75%;
+ color: #000;
+ background-color: #FFFFEA;
+ display: block;
+ padding: 10px;
+ border: 1px solid;
+ line-height: 1.1;
+ overflow: auto;
+ border: 1px solid;
+ padding: 2px;
+ font-size: .8em;
+ font-family: "Roboto Mono", "Monaco", "Lucida Console", "DejaVu Sans Mono", "monospace";
+}
+
+
+</style> \ No newline at end of file
diff --git a/ui/src/routes/view/[id]/+page.js b/ui/src/routes/view/[id]/+page.js
new file mode 100644
index 0000000..a7af895
--- /dev/null
+++ b/ui/src/routes/view/[id]/+page.js
@@ -0,0 +1,15 @@
+
+
+
+
+/** @type {import('./$types').PageLoad} */
+export async function load({ params }) {
+ const req = await fetch(`/api/v1/view/${params.id}`)
+ const reqJson = await req.json();
+
+ return {
+ id: params.id,
+ req: req,
+ reqJson: reqJson,
+ };
+} \ No newline at end of file
diff --git a/ui/src/routes/view/[id]/+page.svelte b/ui/src/routes/view/[id]/+page.svelte
new file mode 100644
index 0000000..0fc865f
--- /dev/null
+++ b/ui/src/routes/view/[id]/+page.svelte
@@ -0,0 +1,63 @@
+
+<script>
+ let id = "";
+
+ /** @type {import('./$types').PageData} */
+ export let data;
+
+ console.log(data);
+
+
+ let msg = "";
+ let copyPromise = null;
+ let timer = 0;
+
+ function copy() {
+ copyPromise = navigator.clipboard.writeText(data.reqJson.Content);
+ timer = 3;
+ setTimeout(function() {
+ for (; timer >= 0 ; timer --);
+ return
+ }, 1000)
+ }
+</script>
+
+<h2>ID: {data.id}</h2>
+
+{#if timer > 0}
+{#await copyPromise}
+{:then}
+ <p>
+ Successfully copied!
+ </p>
+{:catch error}
+ <p>
+ Failed to copy: {error}
+ </p>
+{/await}
+{/if}
+
+<button on:click={copy}>Copy to clipboard!</button>
+
+<pre id="content" class="code">{data.reqJson.Content}</pre>
+
+
+<style>
+/* TODO: Figure out why the styles don't get propagated down here
+ from the +layout up above */
+.code {
+ color: #000;
+ background-color: #FFFFEA;
+ display: block;
+ padding: 10px;
+ border: 1px solid;
+ line-height: 1.1;
+ overflow: auto;
+ border: 1px solid;
+ padding: 2px;
+ font-size: .8em;
+ font-family: "Roboto Mono", "Monaco", "Lucida Console", "DejaVu Sans Mono", "monospace";
+}
+
+
+</style> \ No newline at end of file
You can read more about the author.