feat: Implement user settings

availabili.tf/src/router/index.ts

@@ -11,6 +11,7 @@ import TeamSettingsView from "@/views/TeamSettingsView.vue";
 import TeamSettingsGeneralView from "@/views/TeamSettings/GeneralView.vue";
 import TeamSettingsIntegrationsView from "@/views/TeamSettings/IntegrationsView.vue";
 import TeamSettingsInvitesView from "@/views/TeamSettings/InvitesView.vue";
+import UserSettingsView from "@/views/UserSettingsView.vue";
 
 const router = createRouter({
   history: createWebHistory(import.meta.env.BASE_URL),
@@ -72,6 +73,11 @@ const router = createRouter({
         },
       ],
     },
+    {
+      path: "/settings",
+      name: "user-settings",
+      component: UserSettingsView,
+    },
   ]
 });
 

availabili.tf/src/stores/auth.ts

@@ -1,7 +1,7 @@
 import { defineStore } from "pinia";
 import { ref } from "vue";
 import { useClientStore } from "./client";
-import type { LocationQuery } from "vue-router";
+import { useRouter, type LocationQuery } from "vue-router";
 
 export const useAuthStore = defineStore("auth", () => {
   const clientStore = useClientStore();
@@ -13,6 +13,8 @@ export const useAuthStore = defineStore("auth", () => {
   const isRegistering = ref(false);
   const hasCheckedAuth = ref(false);
 
+  const router = useRouter();
+
   async function getUser() {
     hasCheckedAuth.value = true;
     return clientStore.call(
@@ -48,8 +50,16 @@ export const useAuthStore = defineStore("auth", () => {
       });
   }
 
-  async function setUsername(username: string) {
-    return client.default.setUsername({ username });
+  async function logout() {
+    return client.default.deleteApiLogin()
+      .then(() => router.push("/"));
+  }
+
+  async function setUsername(name: string) {
+    return client.default.setUsername({ username: name })
+      .then((response) => {
+        username.value = response.username;
+      });
   }
 
   return {
@@ -60,6 +70,7 @@ export const useAuthStore = defineStore("auth", () => {
     isRegistering,
     getUser,
     login,
+    logout,
     setUsername,
   }
 });

availabili.tf/src/views/UserSettingsView.vue

@@ -0,0 +1,43 @@
+<script setup lang="ts">
+import { useAuthStore } from "@/stores/auth";
+import { onMounted, ref } from "vue";
+
+const displayName = ref("");
+
+const authStore = useAuthStore();
+
+function save() {
+  authStore.setUsername(displayName.value);
+}
+
+onMounted(() => {
+  displayName.value = authStore.username;
+});
+</script>
+
+<template>
+  <main>
+    <div class="user-settings-container">
+      <h1>User Settings</h1>
+      <div class="form-group margin">
+        <h3>
+          Display Name
+        </h3>
+        <input v-model="displayName" />
+      </div>
+      <div class="form-group margin">
+        <div class="action-buttons">
+          <button class="accent" @click="save">Save</button>
+        </div>
+      </div>
+    </div>
+  </main>
+</template>
+
+<style scoped>
+.user-settings-container {
+  align-items: center;
+  max-width: 500px;
+  margin: auto;
+}
+</style>