implement navbar user controls

2 files changed, 77 insertions, 2 deletions

diff --git a/web/pw-server/src/lib/components/navbar/UserControls.svelte b/web/pw-server/src/lib/components/navbar/UserControls.svelte
new file mode 100644
index 0000000..e9dbab1
--- /dev/null
+++ b/web/pw-server/src/lib/components/navbar/UserControls.svelte
@@ -0,0 +1,75 @@
+<script lang="ts">
+  import { get_session_token } from "$lib/auth";
+
+  import { onMount } from "svelte";
+
+  let user = null;
+
+  onMount(async () => {
+    const session_token = get_session_token();
+    if (!session_token) {
+      return;
+    }
+
+    let response = await fetch("/api/users/me", {
+      method: "GET",
+      headers: {
+        "Content-Type": "application/json",
+        Authorization: `Bearer ${session_token}`,
+      },
+    });
+
+    if (!response.ok) {
+      throw response.statusText;
+    }
+
+    user = await response.json();
+  });
+
+  function signOut() {
+    // TODO: destroy session on server
+    user = null;
+  }
+</script>
+
+<div class="user-controls">
+  {#if user}
+    <div class="current-user-name">
+      {user["username"]}
+    </div>
+    <div class="sign-out" on:click={signOut}>Sign out</div>
+  {:else}
+    <a class="account-href" href="login">Sign in</a>
+    <a class="account-href" href="register">Sign up</a>
+  {/if}
+</div>
+
+<style lang="scss">
+  @mixin navbar-item {
+    font-size: 18px;
+    font-family: Helvetica, sans-serif;
+    padding: 4px 8px;
+  }
+
+  .account-href {
+    @include navbar-item;
+    color: #eee;
+    text-decoration: none;
+  }
+
+  .current-user-name {
+    @include navbar-item;
+    color: #fff;
+  }
+
+  .sign-out {
+    @include navbar-item;
+    color: #ccc;
+    cursor: pointer;
+  }
+
+  .user-controls {
+    display: flex;
+    align-items: center;
+  }
+</style>
diff --git a/web/pw-server/src/routes/__layout.svelte b/web/pw-server/src/routes/__layout.svelte
index c22591e..065a82c 100644
--- a/web/pw-server/src/routes/__layout.svelte
+++ b/web/pw-server/src/routes/__layout.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import NavbarUserSection from "$lib/components/navbar/NavbarUserSection.svelte";
+  import UserControls from "$lib/components/navbar/UserControls.svelte";
 
   import "./style.css";
 </script>
@@ -9,7 +9,7 @@
     <div class="navbar-main">
       <a href="/">PlanetWars</a>
     </div>
-    <NavbarUserSection />
+    <UserControls />
   </div>
   <slot />
 </div>