Add logout button

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)
+}

server/src/api/auth.rs

@@ -69,6 +69,12 @@ pub(super) async fn sign_up(
     Ok(())
 }
 
+#[delete("/")]
+pub(super) async fn sign_out(cookies: &CookieJar<'_>) {
+    cookies.remove_private(Cookie::named("user"));
+    cookies.remove(Cookie::named("name"));
+}
+
 /// Authentication guard
 #[derive(Deref)]
 pub(super) struct Auth(users::Model);

server/src/api/mod.rs

@@ -114,7 +114,7 @@ pub fn start_server(db: DatabaseConnection) -> Rocket<Build> {
             "/api/v1/groups",
             routes![all_groups, group, insert_group, update_group, delete_group],
         )
-        .mount("/api/v1/auth", routes![auth::login, auth::sign_up])
+        .mount("/api/v1/auth", routes![auth::login, auth::sign_up, auth::sign_out])
         .mount("/", FileServer::from("/src/public"));
 
     #[cfg(feature = "unsafe_import")]

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
   ];
 }
-