reorganisation, cleanup and new nonce protocol

components/Header.vue

@@ -1,15 +1,17 @@
 <template>
-  <div class="h-16 cursor-pointer bg-gray-950 flex flex-row justify-between">
-    <div
-      @mousedown="() => window.startDragging()"
-      class="flex flex-row grow items-center justify-between pl-5 pr-2 py-3"
-    >
+  <div
+    @mousedown="() => window.startDragging()"
+    class="h-16 cursor-pointer bg-zinc-950 flex flex-row justify-between"
+  >
+    <div class="flex flex-row grow items-center justify-between pl-5 pr-2 py-3">
       <div class="inline-flex items-center gap-x-10">
-        <Wordmark class="h-8 mb-0.5" />
+        <NuxtLink to="/">
+          <Wordmark class="h-8 mb-0.5" />
+        </NuxtLink>
         <nav class="inline-flex items-center mt-0.5">
           <ol class="inline-flex items-center gap-x-6">
             <li
-              class="transition text-gray-300 hover:text-gray-100 uppercase font-display font-semibold text-md"
+              class="transition text-zinc-300 hover:text-zinc-100 uppercase font-display font-semibold text-md"
               v-for="(nav, navIdx) in navigation"
             >
               {{ nav.label }}

components/HeaderUserWidget.vue

@@ -49,15 +49,16 @@
                 Admin Dashboard
               </a>
             </MenuItem>
-            <MenuItem v-for="(nav, navIdx) in navigation" v-slot="{ active }">
-              <NuxtLink
+            <MenuItem v-for="(nav, navIdx) in navigation" v-slot="{ active, close }">
+              <button
+              @click="() => navigate(close, nav)"
                 :href="nav.route"
                 :class="[
                   active ? 'bg-zinc-800 text-zinc-100' : 'text-zinc-400',
-                  'transition block px-4 py-2 text-sm',
+                  'transition text-left block px-4 py-2 text-sm',
                 ]"
               >
-                {{ nav.label }}</NuxtLink
+                {{ nav.label }}</button
               >
             </MenuItem>
           </div>
@@ -75,6 +76,12 @@ import HeaderWidget from "./HeaderWidget.vue";
 import { useAppState } from "~/composables/app-state";
 import { invoke } from "@tauri-apps/api/core";
 
+const open = ref(false);
+const router = useRouter();
+router.afterEach(() => {
+  open.value = false;
+})
+
 const state = useAppState();
 const profilePictureUrl: string = await invoke("gen_drop_url", {
   path: `/api/v1/object/${state.value.user?.profilePicture}`,
@@ -83,16 +90,26 @@ const adminUrl: string = await invoke("gen_drop_url", {
   path: "/admin",
 });
 
+function navigate(close: () => any, to: NavigationItem){
+  close();
+  router.push(to.route);
+}
+
 const navigation: NavigationItem[] = [
   {
     label: "Account settings",
     route: "/account",
     prefix: "",
   },
+  {
+    label: "App settings",
+    route: "/settings",
+    prefix: "",
+  },
   {
     label: "Sign out",
     route: "/signout",
     prefix: "",
   },
-].filter((e) => e !== undefined);
+]
 </script>

components/InitiateAuthModule.vue

@@ -14,9 +14,9 @@
         <slot />
         <div class="mt-10">
           <button
-            @click="() => auth()"
+            @click="() => authWrapper_wrapper()"
             :disabled="loading"
-            class="text-sm font-semibold leading-7 text-blue-600"
+            class="text-sm text-left font-semibold leading-7 text-blue-600"
           >
             <div v-if="loading" role="status">
               <svg
@@ -40,6 +40,22 @@
             <span v-else>
               Sign in with your browser <span aria-hidden="true">&rarr;</span>
             </span>
+
+            <div v-if="error" class="mt-5 rounded-md bg-red-600/10 p-4">
+              <div class="flex">
+                <div class="flex-shrink-0">
+                  <XCircleIcon
+                    class="h-5 w-5 text-red-600"
+                    aria-hidden="true"
+                  />
+                </div>
+                <div class="ml-3">
+                  <h3 class="text-sm font-medium text-red-600">
+                    {{ error }}
+                  </h3>
+                </div>
+              </div>
+            </div>
           </button>
         </div>
       </div>
@@ -82,12 +98,21 @@
 </template>
 
 <script setup lang="ts">
+import { XCircleIcon } from "@heroicons/vue/16/solid";
 import { invoke } from "@tauri-apps/api/core";
 
 const loading = ref(false);
+const error = ref<string | undefined>();
 
 async function auth() {
-  loading.value = true;
   await invoke("auth_initiate");
 }
+
+function authWrapper_wrapper() {
+  loading.value = true;
+  auth().catch((e) => {
+    loading.value = false;
+    error.value = e;
+  });
+}
 </script>