From a2c04af8cee8b14c93a1ebde7c44f20be80ed59f Mon Sep 17 00:00:00 2001
From: JustTemmie <47639983+JustTemmie@users.noreply.github.com>
Date: Sun, 1 Jun 2025 16:36:59 +0200
Subject: [PATCH] feat: basic user popup implemented

---
 components/Userpopup.vue                      | 79 +++++++++++++++++++
 components/settings/user_settings/Account.vue | 20 +++--
 composables/auth.ts                           | 16 +++-
 pages/settings.vue                            | 21 ++++-
 types/interfaces.ts                           |  1 +
 5 files changed, 128 insertions(+), 9 deletions(-)
 create mode 100644 components/Userpopup.vue

diff --git a/components/Userpopup.vue b/components/Userpopup.vue
new file mode 100644
index 0000000..1e90026
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/components/settings/user_settings/Account.vue b/components/settings/user_settings/Account.vue
index e137031..9b7d044 100644
--- a/components/settings/user_settings/Account.vue
+++ b/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>
\ No newline at end of file
diff --git a/composables/auth.ts b/composables/auth.ts
index 19ac694..0ac2e8b 100644
--- a/composables/auth.ts
+++ b/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,
diff --git a/pages/settings.vue b/pages/settings.vue
index 9e7d420..050c1f8 100644
--- a/pages/settings.vue
+++ b/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>
diff --git a/types/interfaces.ts b/types/interfaces.ts
index b4869e2..cd4b6dd 100644
--- a/types/interfaces.ts
+++ b/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
   }