pages/login: await when "updating" user info for the first time

I think this fixes an issue where auth token cookie
gets deleted when page is not being refreshed
after login.

package.json

@@ -17,14 +17,14 @@
     "@typescript-eslint/parser": "^6.9.1",
     "eslint": "^8.39.0",
     "nuxt": "3.8.2",
-    "prisma": "5.7.0",
+    "prisma": "5.7.1",
     "sass": "^1.62.0",
     "vite-plugin-vuetify": "^2.0.1",
     "vuetify": "^3.1.15"
   },
   "dependencies": {
-    "@prisma/client": "5.7.0",
-    "@prisma/engines": "^5.7.0",
-    "@prisma/migrate": "5.7.0"
+    "@prisma/client": "5.7.1",
+    "@prisma/engines": "5.7.1",
+    "@prisma/migrate": "5.7.1"
   }
 }

pages/client/[id].vue

@@ -1,6 +1,4 @@
 <script setup lang="ts">
-/* global $fetch */
-import { useRoute, useFetch, createError } from "nuxt/app";
 import { ref, type Ref } from "vue";
 
 import { VBtn, VForm } from "vuetify/components";
@@ -9,7 +7,10 @@ import Snowflake from "~/utils/snowflake";
 import OrderView from "~/components/orderView.vue";
 import EntryEditor, { type fieldDefinition } from "~/components/entryEditor.vue";
 
+import { useRoute, useFetch, createError, useRequestFetch } from "#imports";
+
 const route = useRoute();
+const fetch = useRequestFetch();
 const id = route.params.id;
 
 const clientRequest = await useFetch(`/api/clients/${id}` as "/api/clients/:id");
@@ -38,7 +39,7 @@ async function loadOrder(id: string) {
   if (!entry) throw createError(`excepted order entry for ${id}`);
   entry.loading = true;
   // @ts-expect-error
-  entry.value = await $fetch(`/api/orders/${id}` as "/api/order/:id", {
+  entry.value = await fetch(`/api/orders/${id}` as "/api/order/:id", {
     method: "GET",
   }) as Order;
   entry.loading = false;
@@ -77,7 +78,7 @@ async function handleSubmit() {
   submitting.value = true;
   normalizeForm();
   try {
-    const result = await $fetch(
+    const result = await fetch(
       `/api/clients/${client.value.id}` as "/api/clients/:id", {
         method: "PATCH",
         body: formData.value,

pages/clients.vue

@@ -1,5 +1,4 @@
 <script setup lang="ts">
-/* global $fetch */
 import { type NuxtError } from "nuxt/app";
 import { ref, type Ref, reactive } from "vue";
 import { VBtn } from "vuetify/components";
@@ -8,10 +7,11 @@ import pagedTable from "~/components/pagedTable.vue";
 import Alerts, { type AlertData } from "~/components/alerts.vue";
 import { type fieldDefinition } from "~/components/entryEditor.vue";
 
-import { useFetch, createError, navigateTo, useRoute, definePageMeta } from "#imports";
+import { useFetch, createError, navigateTo, useRoute, definePageMeta, useRequestFetch } from "#imports";
 
 definePageMeta({ middleware: ["auth"] });
 const route = useRoute();
+const fetch = useRequestFetch();
 
 const alerts = ref<Array<AlertData>>([]);
 
@@ -32,7 +32,7 @@ async function rowClicked(client: string, edit = false) {
 
 async function rowDelete(client: string) {
   try {
-    await $fetch(`/api/clients/${client}` as "api/clients/:id", {
+    await fetch(`/api/clients/${client}` as "/api/clients/:id", {
       method: "DELETE",
     });
     clients.value = clients.value.filter(e => e.id !== client);
@@ -48,7 +48,7 @@ async function loadBefore() {
   loadingMore.value = true;
 
   try {
-    clients.value.push(...await $fetch("/api/clients", {
+    clients.value.push(...await fetch("/api/clients", {
       query: {
         before: clients.value[clients.value.length - 1].id,
       },
@@ -91,8 +91,8 @@ async function handleSubmit() {
   submitting.value = true;
   normalizeForm();
   try {
-    const result = await $fetch(
-      "/api/clients/", {
+    const result = await fetch(
+      "/api/clients", {
         method: "POST",
         body: formData.value,
       },

pages/firstRun.vue

@@ -1,8 +1,7 @@
 <script setup lang="ts">
-/* global $fetch */
 import { ref } from 'vue';
 import { type NuxtError } from 'nuxt/app';
-import { navigateTo, useFetch, definePageMeta } from '#imports';
+import { navigateTo, useFetch, definePageMeta, useRequestFetch } from '#imports';
 
 import EntryEditor, { type fieldDefinition } from '~/components/entryEditor.vue';
 import Alerts, { type AlertData } from '~/components/alerts.vue';
@@ -22,7 +21,7 @@ definePageMeta({
 
 async function submit() {
   try {
-    await $fetch("/api/firstRun", {
+    await useRequestFetch()("/api/firstRun", {
       body: formValue.value,
       method: "POST",
     });

pages/login.vue

@@ -1,18 +1,22 @@
 <script setup lang="ts">
-/* global $fetch */
 import { ref, watch } from "vue";
 import { VForm } from "vuetify/components";
+import { type CookieRef } from "#app";
 import { cookieSettings } from "~/utils/cookieSettings";
-import { definePageMeta, navigateTo, useCookie, useFetch, useRoute } from "#imports";
+import { definePageMeta, navigateTo, useCookie, useFetch, useRoute, useRequestFetch, useRequestEvent } from "#imports";
 
 const route = useRoute();
+const fetch = useRequestFetch();
 
 const login = ref("");
 const password = ref("");
 const loading = ref(false);
 const error = ref<true | string>(true);
 const form = ref<VForm | null>(null);
-const loggedIn = ref<boolean>(useCookie("token", cookieSettings).value != null);
+const tokenCookie = useCookie("token", cookieSettings) as CookieRef<string | undefined>;
+const loggedIn = ref<boolean>(tokenCookie.value !== undefined);
+
+watch(tokenCookie, (v) => { loggedIn.value = v !== undefined; });
 
 const redirectTo = ref(route.redirectedFrom);
 
@@ -24,12 +28,12 @@ definePageMeta({
 async function submit() {
   loading.value = true;
   try {
-    const result = await $fetch("/api/login", {
+    const result = await fetch("/api/login", {
       body: { login: login.value, password: password.value },
       method: "POST",
     });
     console.log(result);
-    loggedIn.value = true;
+    tokenCookie.value = result.token;
     password.value = "";
   } catch (e) {
     console.log(typeof e);
@@ -44,9 +48,10 @@ async function submit() {
 
 async function logout() {
   try {
-    await $fetch("/api/logout");
+    await fetch("/api/logout");
     loggedIn.value = false;
   } catch (e) {
+    tokenCookie.value = undefined;
     console.error(e);
   }
 }
@@ -56,7 +61,7 @@ watch(loggedIn, updateUserInfo);
 async function updateUserInfo() {
   if (loggedIn.value) {
     try {
-      userInfo.value = JSON.stringify(await $fetch("/api/users/me"));
+      userInfo.value = JSON.stringify(await fetch("/api/users/me"));
     } catch (e) {
       // expected if the user is not logged in
       userInfo.value = "";
@@ -66,7 +71,7 @@ async function updateUserInfo() {
   }
 }
 
-updateUserInfo();
+await updateUserInfo();
 </script>
 
 <template>

pages/orders.vue

@@ -1,5 +1,4 @@
 <script setup lang="ts">
-/* global $fetch */
 import { ref, type Ref } from "vue";
 import { VBtn } from "vuetify/components";
 import type { NuxtError } from "#app";
@@ -7,10 +6,11 @@ import type { NuxtError } from "#app";
 import Alerts, { type AlertData } from "~/components/alerts.vue";
 import { type fieldDefinition } from "~/components/entryEditor.vue";
 
-import { definePageMeta, useFetch, createError, useRoute, navigateTo } from "#imports";
+import { definePageMeta, useFetch, createError, useRoute, navigateTo, useRequestFetch } from "#imports";
 
 definePageMeta({ middleware: ["auth"] });
 const route = useRoute();
+const fetch = useRequestFetch();
 
 const alerts = ref<Array<AlertData>>([]);
 
@@ -33,7 +33,7 @@ async function rowClicked(client: string, edit = false) {
 
 async function rowDelete(client: string) {
   try {
-    await $fetch(`/api/orders/${client}` as "api/orders/:id", {
+    await fetch(`/api/orders/${client}` as "/api/orders/:id", {
       method: "DELETE",
     });
     orders.value = orders.value.filter(e => e.id !== client);
@@ -49,7 +49,7 @@ async function loadBefore() {
   loadingMore.value = true;
 
   try {
-    orders.value.push(...await $fetch("/api/orders", {
+    orders.value.push(...await fetch("/api/orders", {
       query: {
         before: orders.value[orders.value.length - 1].id,
       },
@@ -87,7 +87,7 @@ async function handleSubmit() {
   submitting.value = true;
   normalizeForm();
   try {
-    const result = await $fetch(
+    const result = await fetch(
       "/api/orders", {
         method: "POST",
         body: formData.value,

shell.nix

@@ -4,12 +4,12 @@ let
   # Updating this package will force an update for nodePackages.prisma. The
   # version of prisma-engines and nodePackages.prisma must be the same for them to
   # function correctly.
-  prisma-version = "5.7.0";
+  prisma-version = "5.7.1";
   prisma-src = pkgs.fetchFromGitHub {
         owner = "prisma";
         repo = "prisma-engines";
         rev = prisma-version;
-        hash = "sha256-gZEz0UtgNwumsZbweAyx3TOVHJshpBigc9pzWN7Gb/A=";
+        hash = "sha256-EOYbWUgoc/9uUtuocfWDh0elExzL0+wb4PsihgMbsWs=";
     };
   new-prisma-engines = pkgs.rustPlatform.buildRustPackage {
     pname = "prisma-engines";