aboutsummaryrefslogtreecommitdiff
path: root/web/pw-server/src
diff options
context:
space:
mode:
Diffstat (limited to 'web/pw-server/src')
-rw-r--r--web/pw-server/src/lib/components/navbar/UserControls.svelte75
-rw-r--r--web/pw-server/src/routes/__layout.svelte4
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>