cleanup

frontend/.prettierrc

@@ -1,9 +1,10 @@
 {
     "arrowParens": "avoid",
     "semi": true,
-    "tabWidth": 4,
-    "useTabs": true,
+    "tabWidth": 2,
+    "useTabs": false,
     "vueIndentScriptAndStyle": true,
     "singleQuote": true,
-	"trailingComma": "es5"
+    "trailingComma": "es5",
+    "printWidth": 120
 }

frontend/src/api/user.ts

@@ -15,4 +15,8 @@ export class UserApi extends BaseAPI {
   public self() {
     return this.http.get<Result<User>>(UrlBuilder('/users/self'));
   }
+
+  public logout() {
+    return this.http.post<object, void>(UrlBuilder('/users/logout'), {});
+  }
 }

frontend/src/lib/requests/requests.ts

@@ -54,11 +54,7 @@ export class Requests {
     return method === Method.POST || method === Method.PUT;
   }
 
-	private async do<T>(
-		method: Method,
-		url: string,
-		payload: Object = {}
-	): Promise<TResponse<T>> {
+  private async do<T>(method: Method, url: string, payload: Object = {}): Promise<TResponse<T>> {
     const args: RequestInit = {
       method,
       headers: {
@@ -83,7 +79,13 @@ export class Requests {
       this.logger(response);
     }
 
-		const data = await response.json();
+    const data: T = await (async () => {
+      try {
+        return await response.json();
+      } catch (e) {
+        return {} as T;
+      }
+    })();
 
     return {
       status: response.status,

frontend/src/pages/home.vue

@@ -1,20 +1,10 @@
 <script setup lang="ts">
   import { useUserApi } from '@/composables/use-api';
+  import { useAuthStore } from '@/store/auth';
   useHead({
     title: 'Homebox | Home',
   });
 
-	const links = [
-		{
-			name: 'Home',
-			href: '/home',
-		},
-		{
-			name: 'Logout',
-			href: '/logout',
-			last: true,
-		},
-	];
   const api = useUserApi();
 
   const user = ref({});
@@ -26,24 +16,50 @@
       user.value = data.item;
     }
   });
+
+  const authStore = useAuthStore();
+  const router = useRouter();
+
+  async function logout() {
+    const { error } = await authStore.logout(api);
+
+    if (error) {
+      console.error(error);
+      return;
+    }
+
+    router.push('/');
+  }
+
+  const links = [
+    {
+      name: 'Home',
+      href: '/home',
+    },
+    {
+      name: 'Logout',
+      action: logout,
+      last: true,
+    },
+  ];
 </script>
 
 <template>
   <section class="max-w-7xl mx-auto">
     <header class="sm:px-6 py-2 lg:p-14 sm:py-6">
-			<h2
-				class="mt-1 text-4xl font-bold tracking-tight text-gray-200 sm:text-5xl lg:text-6xl"
-			>
-				Homebox
-			</h2>
-			<div class="ml-1 text-lg text-gray-400 space-x-2 italic">
+      <h2 class="mt-1 text-4xl font-bold tracking-tight text-gray-200 sm:text-5xl lg:text-6xl">Homebox</h2>
+      <div class="ml-1 text-lg text-gray-400 space-x-2">
         <template v-for="link in links">
           <router-link
-						class="hover:text-base-content transition-color duration-200"
+            v-if="!link.action"
+            class="hover:text-base-content transition-color duration-200 italic"
             :to="link.href"
           >
             {{ link.name }}
           </router-link>
+          <button v-else @click="link.action" class="hover:text-base-content transition-color duration-200 italic">
+            {{ link.name }}
+          </button>
           <span v-if="!link.last"> / </span>
         </template>
       </div>

frontend/src/store/auth.ts

@@ -1,3 +1,4 @@
+import { UserApi } from '@/api/user';
 import { defineStore } from 'pinia';
 
 export const useAuthStore = defineStore('auth', {
@@ -18,4 +19,18 @@ export const useAuthStore = defineStore('auth', {
       return state.expires < new Date();
     },
   },
+  actions: {
+    async logout(api: UserApi) {
+      const result = await api.logout();
+
+      if (result.error) {
+        return result;
+      }
+
+      this.token = '';
+      this.expires = '';
+
+      return result;
+    },
+  },
 });