Refactor auth into user.py, Implement login/out in frontend, Add FontAwesome

frontend/src/App.svelte

@@ -1,8 +1,17 @@
 <script lang="ts">
+  import { onMount } from "svelte";
+
+  import { user } from "./stores";
+
   import Navbar from "./Navbar.svelte";
+
+  onMount(async () => {
+    const res = await fetch("/user/me");
+    $user = await res.json();
+  });
 </script>
 
 <Navbar />
 <section class="section">
-  Hallo i bims 1 frontend
+  <p>Hallo i bims 1 frontend</p>
 </section>

frontend/src/Navbar.svelte

@@ -1,13 +1,71 @@
 <script lang="ts">
     import logo from "./assets/turtle.png";
+
+    import { user } from "./stores";
+
+    let menu_open = false;
 </script>
 
 <nav class="navbar">
     <div class="navbar-brand">
-        <div class="navbar-item">
-            <a href="/">
-                <img src={logo} alt="logo"/>
-            </a>
+        <a class="navbar-item" href="/">
+            <span class="icon-text">
+                <img class="image is-24x24" src={logo} alt="logo" />
+                <span><strong>Control Panel</strong></span>
+            </span>
+        </a>
+        <!-- svelte-ignore a11y-missing-attribute -->
+        <a
+            role="button"
+            class="navbar-burger {menu_open ? 'is-active' : ''}"
+            on:click={() => (menu_open = !menu_open)}
+            aria-label="menu"
+            aria-expanded="false"
+        >
+            <span aria-hidden="true" />
+            <span aria-hidden="true" />
+            <span aria-hidden="true" />
+        </a>
+    </div>
+    <div class="navbar-menu {menu_open ? 'is-active' : ''}">
+        <div class="navbar-start">
+            <a class="navbar-item" href="/foo"> Foo </a>
+
+            <a class="navbar-item" href="/bar"> Bar </a>
+        </div>
+        <div class="navbar-end">
+            {#if $user !== null}
+                <div class="navbar-item has-dropdown is-hoverable">
+                    <!-- svelte-ignore a11y-missing-attribute -->
+                    <a class="navbar-link">
+                        <img
+                            class="image is-24x24 mr-2"
+                            src={$user.picture}
+                            alt="{$user.name}'s picture"
+                        />
+                        <span>{$user.name}</span>
+                    </a>
+
+                    <div class="navbar-dropdown is-right">
+                        <div class="navbar-item">
+                            <p>{$user.email}</p>
+                        </div>
+                        <hr class="navbar-divider" />
+                        <a
+                            href="/user/logout"
+                            class="navbar-item has-text-danger"
+                        >
+                            Log out
+                        </a>
+                    </div>
+                </div>
+            {:else}
+                <div class="navbar-item">
+                    <a class="button is-primary" href="/user/login">
+                        <strong>Log in</strong>
+                    </a>
+                </div>
+            {/if}
         </div>
     </div>
 </nav>

frontend/src/app.scss

@@ -9,3 +9,10 @@
 @import "bulma/sass/grid/_all";
 @import "bulma/sass/helpers/_all";
 @import "bulma/sass/layout/_all";
+
+$fa-font-path: "@fortawesome/fontawesome-free/webfonts";
+@import "@fortawesome/fontawesome-free/scss/fontawesome.scss";
+@import "@fortawesome/fontawesome-free/scss/regular.scss";
+@import "@fortawesome/fontawesome-free/scss/solid.scss";
+@import "@fortawesome/fontawesome-free/scss/brands.scss";
+@import "@fortawesome/fontawesome-free/scss/v4-shims.scss";

frontend/src/stores.ts

@@ -0,0 +1,9 @@
+import { writable, type Writable } from "svelte/store";
+
+type User = {
+    name: string,
+    email: string,
+    picture: string,
+}
+
+export const user: Writable<User | null> = writable(null);