feat: basic user popup implemented

components/Userpopup.vue

@@ -0,0 +1,79 @@
+<template>
+  <div id="profile-popup">
+    <img v-if="props.user.avatar" id="avatar" :src="props.user.avatar" alt="profile avatar">
+    <div id="cover-colour"></div>
+    <div id="main-body">
+      <p id="display-name"><strong>{{ props.user.display_name || "display_name" }}</strong></p>
+      <p id="username"> {{ props.user.username || "username" }}</p>
+      <div id="about-me">
+        <span>About me</span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import type { UserResponse } from '~/types/interfaces';
+
+const { fetchMembers } = useApi();
+
+const props = defineProps<{
+	user: UserResponse,
+}>();
+
+</script>
+
+<style scoped>
+#profile-popup {
+  min-width: 200px;
+  max-width: 200px;
+  border-radius: 8px;
+  position: relative;
+  display: flex;
+  flex-direction: column;
+}
+
+#cover-colour {
+  border-radius: 8px 8px 0 0;
+  min-height: 52px;
+  background-color: #442505;
+}
+
+#main-body {
+  border-radius: 0 0 8px 8px;
+  padding: 8px;
+  min-height: 180px;
+  background-color: #4b3018;
+  overflow-wrap: break-word;
+  hyphens: manual;
+}
+
+#avatar {
+  width: 64px;
+  border: 4px solid #4b3018;
+  border-radius: 100%;
+  position: absolute;
+  left: 12px;
+  top: 12px;
+}
+
+#display-name {
+  margin-top: 28px;
+  margin-bottom: 0;
+  font-size: 18px;
+}
+
+#username {
+  margin-top: 2px;
+  margin-bottom: 0;
+  font-size: 12px;
+}
+
+#about-me {
+  margin-top: 4px;
+  padding: 4px;
+  font-size: 14px;
+}
+
+
+</style>

components/settings/user_settings/Account.vue

@@ -3,14 +3,14 @@
     <h1>My Account</h1>
     
     <div id="profile-container">
-
+      <Userpopup :user=user_me></Userpopup>
     </div>
 
     <h2>Password (and eventually authenticator)</h2>
-    <Button text="Reset Password" :callback=resetPassword></Button> 
+    <Button text="Reset Password (tbd)" :callback=resetPassword></Button> 
 
     <h2>Account Deletion</h2>
-    <ButtonScary text="Delete Account" :callback=deleteAccount></ButtonScary> 
+    <ButtonScary text="Delete Account (tbd)" :callback=deleteAccount></ButtonScary> 
 
   </div>
 </template>
@@ -19,7 +19,9 @@
 import Button from '~/components/buttons/Button.vue';
 import ButtonScary from '~/components/buttons/ButtonScary.vue';
 
-const { user } = useAuth();
+const { user, fetchUser } = useAuth();
+
+const user_me = await fetchUser()
 
 
 const resetPassword = async () => {
@@ -27,11 +29,17 @@ const resetPassword = async () => {
   // await fetchWithApi(`/auth/reset-password`);
 }
 
-const deleteAccount = () => {
+const deleteAccount = async () => {
   alert("TBD")
 }
 </script>
 
 <style scoped>
-
+#profile-container {
+  border: 2px solid orange;
+  min-width: 250px;
+  min-height: 200px;
+  padding: 8px;
+  border-radius: 8px;
+}
 </style>

composables/auth.ts

@@ -75,7 +75,7 @@ export const useAuth = () => {
   async function fetchUser() {
     if (!accessToken.value) return;
     console.log("fetchuser access token:", accessToken.value);
-    const res = await fetchWithApi("/users/me") as UserResponse;
+    const res = await fetchWithApi("/me") as UserResponse;
     user.value = res;
     return user.value;
   }
@@ -88,6 +88,20 @@ export const useAuth = () => {
     return user.value;
   }
 
+  
+  // as in email the password link
+  async function resetPassword() {
+    // ...
+  }
+
+  async function disableAccount() {
+    // ...
+  }
+
+  async function deleteAccount() {
+    // ...
+  }
+
   return {
     accessToken,
     register,

pages/settings.vue

@@ -69,17 +69,34 @@ const settingsCategories = {
       { display_name: "Language", page_data: Language },
     ]
   },
+  app_settings2: {
+    display_name: "App Settings",
+    pages: [
+      { display_name: "Appearance", page_data: Appearance },
+      { display_name: "Notifications", page_data: Notifications },
+      { display_name: "Keybinds", page_data: Keybinds },
+      { display_name: "Language", page_data: Language },
+    ]
+  },
+  app_settings3: {
+    display_name: "App Settings",
+    pages: [
+      { display_name: "Appearance", page_data: Appearance },
+      { display_name: "Notifications", page_data: Notifications },
+      { display_name: "Keybinds", page_data: Keybinds },
+      { display_name: "Language", page_data: Language },
+    ]
+  },
 };
 
 const categories = Object.values(settingsCategories);
 
 let currentPage = ref(categories[0].pages[0]);
-let selectedPage = ref(currentPage.value.display_name);
+let selectedPage = ref(currentPage.value.display_name); // used to highlight the current channel
 
 const selectCategory = (_category: Category, page: Page) => {
   currentPage.value = page;
   selectedPage.value = page.display_name;
-  console.log(`switching to ${page.display_name}`)
 };
 
 </script>

types/interfaces.ts

@@ -58,6 +58,7 @@ export interface UserResponse {
 	username: string,
 	display_name: string | null,
 	avatar: string | null,
+	pronouns: string | null,
 	email?: string,
 	email_verified?: boolean
   }