Merge pull request 'Frontend was merged prematurely, this fixes that' (#3) from frontend/feature/login-view into feature/user-auth

Reviewed-on: https://git.tams.tech/scott/kalkutago/pulls/3

client/src/components/NavBar.vue

@@ -1,5 +1,14 @@
 <script setup lang="ts">
 import { RouterLink } from 'vue-router';
+import { error } from '../error'
+import router from "../router";
+
+async function logOut() {
+    const result = await fetch('/api/v1/auth', {method: 'DELETE'})
+    if(!result.ok) return error('failed to log out')
+    console.debug('logged out')
+    router.push('/login')
+}
 </script>
 <template>
     <nav class="navbar" role="navigation" aria-label="main navigation">
@@ -9,20 +18,27 @@ import { RouterLink } from 'vue-router';
         <div class="navbar-menu"></div>
         <div class="navbar-end">
             <div class="navbar-item">
-                <div class="buttons">
-                    <RouterLink to="/" v-if="$route.path === '/new-track'">
-                        <button class="button is-info">
-                            Go Back
-                        </button>
-                    </RouterLink>
+                <RouterLink to="/" v-if="$route.path === '/new-track'">
+                    <button class="button is-info">
+                        Go Back
+                    </button>
+                </RouterLink>
 
-                    <RouterLink to="/new-track" v-else>
-                        <button class="button is-primary">
-                            Add Track
-                        </button>
-                    </RouterLink>
-                </div>
+                <RouterLink to="/new-track" v-else>
+                    <button class="button is-primary">
+                        Add Track
+                    </button>
+                </RouterLink>
+            </div>
+            <div class="navbar-item">
+                <button class="button is-info" @click="logOut">
+                    Log Out
+                </button>
+            </div>
+            <div class="navbar-item">
+                <!-- spacer -->
+                &nbsp;
             </div>
         </div>
     </nav>
-</template>
+</template>

client/src/state.ts

@@ -2,6 +2,7 @@ import { reactive } from "vue"
 import { Track } from "./track"
 import { Tick } from './ticks'
 import { error } from "./error"
+import { getCookie } from "./util";
 
 enum State {
     Unfetched,
@@ -31,6 +32,8 @@ class AppState {
     constructor() {
         this.tracks = new Array<Track>
         this.state = State.Unfetched
+        const name = getCookie("name")
+        if (name) this.user = { name }
     }
     streamUpdatesFromServer() {
         const source = new EventSource("/api/v1/updates")

client/src/util.ts

@@ -0,0 +1,8 @@
+export function getCookie(key: string): string | null {
+    const start = document.cookie.indexOf(key + '=')
+    if(start === -1) return null
+    let end: number | undefined = document.cookie.indexOf(';', start)
+    if(end === -1)
+        end = undefined
+    return document.cookie.substring(start + key.length + 1, end)
+}

client/src/views/Login.vue

@@ -1,13 +1,18 @@
 <script setup lang="ts">
-import { ref } from 'vue'
+import { ref, computed } from 'vue'
 import { state } from '../state';
 import router from '../router'
 
 const name = ref("")
 const password = ref("")
+const signUpWait = ref(false)
+const loginWait = ref(false)
+const signUpClass = computed(() => `submit button is-success ${signUpWait.value ? 'is-loading' : ''}`)
+const loginClass = computed(() => `submit button is-info ${loginWait.value ? 'is-loading' : ''}`)
 
 async function signUp() {
     const $name = name.value
+    signUpWait.value = true
     const result = await fetch("/api/v1/auth", {
         method: 'POST',
         body: JSON.stringify({ name: $name, password: password.value }),
@@ -22,6 +27,7 @@ async function signUp() {
 
 async function login() {
     const $name = name.value
+    loginWait.value = true
     const result = await fetch("/api/v1/auth", {
         method: 'PUT',
         body: JSON.stringify({ name: $name, password: password.value }),
@@ -34,6 +40,8 @@ async function login() {
     }
 }
 
+if(state.user?.name) router.push("/")
+
 </script>
 <template>
     <div class="modal is-active">
@@ -44,7 +52,7 @@ async function login() {
             </header>
             <section class="modal-card-body">
                 <div class="field">
-                    <label for="username">Name</label>
+                    <label for="username" class=label>Name</label>
                     <div class="control">
                         <input type="text" name="username" class="input" v-model="name" />
                     </div>
@@ -58,8 +66,8 @@ async function login() {
                 </div>
             </section>
             <footer class="modal-card-foot">
-                <button class="submit button is-success" @click="login">Log in</button>
-                <button class="submit button is-info" @click="signUp">Sign Up</button>
+                <button :class="loginClass" @click="login">Log in</button>
+                <button :class="signUpClass" @click="signUp">Sign Up</button>
             </footer>
         </div>
     </div>

shell.nix

@@ -2,13 +2,16 @@
 { pkgs ? import <nixpkgs> {} }:
 
 pkgs.mkShell {
-   nativeBuildInputs = with pkgs.buildPackages; [
-     clang
-     yarn nodejs
-     openssl
-     python3
-     python3Packages.requests
-     python3Packages.ipython
+  name = "kalkutago";
+  nativeBuildInputs = with pkgs.buildPackages; [
+    clang
+    yarn nodejs
+    openssl
+    python3
+    python3Packages.requests
+    python3Packages.ipython
+    rustup
+    docker
+    gnumake
   ];
 }
-