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

frontend/package-lock.json

@@ -8,6 +8,7 @@
       "name": "frontend",
       "version": "0.0.0",
       "devDependencies": {
+        "@fortawesome/fontawesome-free": "^6.2.0",
         "@sveltejs/vite-plugin-svelte": "^1.0.1",
         "@tsconfig/svelte": "^3.0.0",
         "bulma": "^0.9.4",
@@ -36,6 +37,16 @@
         "node": ">=12"
       }
     },
+    "node_modules/@fortawesome/fontawesome-free": {
+      "version": "6.2.0",
+      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-free/-/fontawesome-free-6.2.0.tgz",
+      "integrity": "sha512-CNR7qRIfCwWHNN7FnKUniva94edPdyQzil/zCwk3v6k4R6rR2Fr8i4s3PM7n/lyfPA6Zfko9z5WDzFxG9SW1uQ==",
+      "dev": true,
+      "hasInstallScript": true,
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/@jridgewell/resolve-uri": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-3.1.0.tgz",
@@ -1492,6 +1503,12 @@
       "dev": true,
       "optional": true
     },
+    "@fortawesome/fontawesome-free": {
+      "version": "6.2.0",
+      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-free/-/fontawesome-free-6.2.0.tgz",
+      "integrity": "sha512-CNR7qRIfCwWHNN7FnKUniva94edPdyQzil/zCwk3v6k4R6rR2Fr8i4s3PM7n/lyfPA6Zfko9z5WDzFxG9SW1uQ==",
+      "dev": true
+    },
     "@jridgewell/resolve-uri": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-3.1.0.tgz",

frontend/package.json

@@ -10,15 +10,16 @@
     "check": "svelte-check --tsconfig ./tsconfig.json"
   },
   "devDependencies": {
+    "@fortawesome/fontawesome-free": "^6.2.0",
     "@sveltejs/vite-plugin-svelte": "^1.0.1",
     "@tsconfig/svelte": "^3.0.0",
+    "bulma": "^0.9.4",
+    "sass": "^1.53.0",
     "svelte": "^3.49.0",
     "svelte-check": "^2.8.0",
     "svelte-preprocess": "^4.10.7",
     "tslib": "^2.4.0",
     "typescript": "^4.6.4",
-    "vite": "^3.0.7",
-    "sass": "^1.53.0",
-    "bulma": "^0.9.4"
+    "vite": "^3.0.7"
   }
 }

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);