diff options
| author | Mitchell Riedstra <mitch@riedstra.dev> | 2023-01-03 22:41:20 -0500 |
|---|---|---|
| committer | Mitchell Riedstra <mitch@riedstra.dev> | 2023-01-03 22:41:20 -0500 |
| commit | 61612c8e1861ac704bbe592a623a41f12ebc9c11 (patch) | |
| tree | 1da6ae40ab9badaf1ba2cc32eb671b4183f4680d | |
| parent | 8b736f3c0b9b583cb69f01424d214d93d6a9136c (diff) | |
| download | paste-61612c8e1861ac704bbe592a623a41f12ebc9c11.tar.gz paste-61612c8e1861ac704bbe592a623a41f12ebc9c11.tar.xz | |
Add a messy but mostly working UI
| -rw-r--r-- | ui/src/routes/+layout.svelte | 14 | ||||
| -rw-r--r-- | ui/src/routes/+page.svelte | 4 | ||||
| -rw-r--r-- | ui/src/routes/list/+page.js | 26 | ||||
| -rw-r--r-- | ui/src/routes/list/+page.svelte | 42 | ||||
| -rw-r--r-- | ui/src/routes/view/[id]/+page.js | 6 | ||||
| -rw-r--r-- | ui/src/routes/view/[id]/+page.svelte | 4 |
6 files changed, 67 insertions, 29 deletions
diff --git a/ui/src/routes/+layout.svelte b/ui/src/routes/+layout.svelte index e9fd192..4f83f18 100644 --- a/ui/src/routes/+layout.svelte +++ b/ui/src/routes/+layout.svelte @@ -1,11 +1,17 @@ +<script> + import { browser } from '$app/environment'; + const loggedIn = browser ? window.localStorage.getItem('loggedIn') === "true": false +</script> <body> <nav> <a href="/">Home</a> - | + {#if loggedIn } + | <a href="/new">New</a> - <a href="/login" class="nav-right">Login</a> - <span class="nav-right">|</span> <a href="/api/v1/logout" class="nav-right">Logout</a> + {:else} + <a href="/login" class="nav-right">Login</a> + {/if} </nav> @@ -139,4 +145,4 @@ h1,h2,h3 { } -</style>
\ No newline at end of file +</style> diff --git a/ui/src/routes/+page.svelte b/ui/src/routes/+page.svelte index fae229e..4cf6b97 100644 --- a/ui/src/routes/+page.svelte +++ b/ui/src/routes/+page.svelte @@ -1,5 +1,5 @@ <script> - import Login from './login/+page.svelte'; + // import Login from './login/+page.svelte'; import View from './list/+page.svelte'; </script> @@ -11,4 +11,4 @@ Below is a listing of recent pastes: </p> -<View />
\ No newline at end of file +<View /> diff --git a/ui/src/routes/list/+page.js b/ui/src/routes/list/+page.js index 1c0c1d5..85435b1 100644 --- a/ui/src/routes/list/+page.js +++ b/ui/src/routes/list/+page.js @@ -1,14 +1,22 @@ +/** @type {import('./$types').PageLoad} */ +// export async function load({ fetch, params }) { +// const res = await fetch(`/api/v1/list`); +// const item = await res.json(); +// +// return { item }; +// } + /** @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, - }; -} +// 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, +// }; +// } diff --git a/ui/src/routes/list/+page.svelte b/ui/src/routes/list/+page.svelte index 3b463b5..1986665 100644 --- a/ui/src/routes/list/+page.svelte +++ b/ui/src/routes/list/+page.svelte @@ -1,17 +1,43 @@ <script> + import { goto } from '$app/navigation'; - - let data = null; + let Err = null; + let data; - const req = fetch(`http://localhost:6130/api/v1/list`) - .then((res) => res.json()) - .then(resData => data = resData); + console.log(data); + // $: console.log(data) + + + fetch(`/api/v1/list`) + .then((res) => { + console.log(`Got res: ${res}`) + console.log(res) + return res.json() + }) + .then((jsonResp) => { + console.log(`jsonResp: ${jsonResp}`) + console.log(jsonResp) + if (jsonResp.Code === 401) { + console.log(`status code === 401: ${jsonResp.Code}`) + window.localStorage.removeItem('loggedIn'); + window.localStorage.setItem('loggedIn', 'false'); + goto('/login'); + } else if (jsonResp.Code !== 200) { + Err = `Received code: ${jsonResp.Code} message: ${jsonResp.Msg}` + } else { + window.localStorage.removeItem('loggedIn'); + window.localStorage.setItem('loggedIn', 'true'); + data = jsonResp.Data + } + }) + .catch((error) => { + console.log(error) + Err = `Encountered error: ${error}`; + }) - </script> -<!-- TODO: Figure out how to gracefully handle 500's and such here --> {#if data} <ul> {#each data as paste (paste.id)} @@ -22,6 +48,8 @@ </li> {/each} </ul> +{:else if Err} +{Err} {:else} Loading.... {/if} diff --git a/ui/src/routes/view/[id]/+page.js b/ui/src/routes/view/[id]/+page.js index a7af895..a457936 100644 --- a/ui/src/routes/view/[id]/+page.js +++ b/ui/src/routes/view/[id]/+page.js @@ -1,7 +1,3 @@ - - - - /** @type {import('./$types').PageLoad} */ export async function load({ params }) { const req = await fetch(`/api/v1/view/${params.id}`) @@ -12,4 +8,4 @@ export async function load({ params }) { 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 index f621dbf..1a7377c 100644 --- a/ui/src/routes/view/[id]/+page.svelte +++ b/ui/src/routes/view/[id]/+page.svelte @@ -12,7 +12,7 @@ let timer = 0; function copy() { - copyPromise = navigator.clipboard.writeText(data.reqJson.Content); + copyPromise = navigator.clipboard.writeText(data.reqJson.Data.Content); timer = 3; setTimeout(function() { for (; timer >= 0 ; timer --); @@ -55,7 +55,7 @@ <button on:click={del}>Delete</button> -<pre id="content" class="code">{data.reqJson.Content}</pre> +<pre id="content" class="code">{data.reqJson.Data.Content}</pre> <style> |