Creating new pastes from the UI works. As does the login page.

Still need to redirect to login page automatically.
Also need to show only one of Logout or Login at a time.

4 files changed, 49 insertions, 9 deletions

diff --git a/ui/src/routes/+layout.svelte b/ui/src/routes/+layout.svelte
index 6539952..e9fd192 100644
--- a/ui/src/routes/+layout.svelte
+++ b/ui/src/routes/+layout.svelte
@@ -4,6 +4,8 @@
         |
         <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>
     </nav>
 
 
diff --git a/ui/src/routes/login/+page.svelte b/ui/src/routes/login/+page.svelte
index bed5c18..f427d41 100644
--- a/ui/src/routes/login/+page.svelte
+++ b/ui/src/routes/login/+page.svelte
@@ -3,7 +3,7 @@
 <h2>Login</h2>
 
 <div class="contianer">
-    <form action="" method="post">
+    <form action="/api/v1/login" method="post">
 
         <label for="username">Username: </label>
         <input type="text" name="username" id="username" />
@@ -18,4 +18,4 @@
         <button type="submit">Login</button>
 
     </form>
-</div>
\ No newline at end of file
+</div>
diff --git a/ui/src/routes/new/+page.svelte b/ui/src/routes/new/+page.svelte
index 28687e4..10557af 100644
--- a/ui/src/routes/new/+page.svelte
+++ b/ui/src/routes/new/+page.svelte
@@ -1,5 +1,27 @@
+<script>
+  import { goto } from '$app/navigation';
+  let content = '';
 
+  // $: console.log("Content is: ", content)
 
+  async function save() {
+    const res = await fetch("/api/v1/new", {
+      method: 'POST',
+      body: JSON.stringify({
+        content: content,
+      })
+    })
+
+    const resp = await res.json()
+    console.log(resp)
+
+    if ('Code' in resp && resp.Code === 200) {
+		goto('view/' + resp.Data.Id)
+    }
+
+  }
+
+</script>
 
 
 <div class="content">
@@ -9,11 +31,11 @@
 <label for="content">Content:</label>
 <br />
 <br />
-<textarea name="content" id="content" cols="80" rows="20"></textarea>
+<textarea name="content" id="content" cols="80" rows="20" bind:value={content}></textarea>
 
 <br />
 <br />
-<button type="submit">Save</button>
+<button type="submit" on:click={save}>Save</button>
 
 </div>
 
@@ -41,4 +63,4 @@ textarea {
 }
 
 
-</style>
\ No newline at end of file
+</style>
diff --git a/ui/src/routes/view/[id]/+page.svelte b/ui/src/routes/view/[id]/+page.svelte
index 0fc865f..f621dbf 100644
--- a/ui/src/routes/view/[id]/+page.svelte
+++ b/ui/src/routes/view/[id]/+page.svelte
@@ -1,14 +1,13 @@
 
 <script>
-    let id = "";
-    
+  import { goto } from '$app/navigation';
+
     /** @type {import('./$types').PageData} */
     export let data;
 
     console.log(data);
     
     
-  let msg = "";
   let copyPromise = null;
   let timer = 0;
   
@@ -20,6 +19,21 @@
       return
     }, 1000)
   }
+
+
+  async function del() {
+      let res = await fetch(`/api/v1/del/${data.id}`, {
+          method: "DELETE",
+      })
+
+    const resp = await res.json()
+    console.log(resp)
+
+    if ('Code' in resp && resp.Code === 200) {
+		goto('/')
+    }
+  }
+
 </script>
 
 <h2>ID: {data.id}</h2>
@@ -39,6 +53,8 @@
 
 <button on:click={copy}>Copy to clipboard!</button>
 
+<button on:click={del}>Delete</button>
+
 <pre id="content" class="code">{data.reqJson.Content}</pre>
 
 
@@ -60,4 +76,4 @@
 }
 
 
-</style>
\ No newline at end of file
+</style>