From acc4fa14b7846629165f1b360e22b2a0f171f0ff Mon Sep 17 00:00:00 2001 From: JustTemmie <47639983+JustTemmie@users.noreply.github.com> Date: Mon, 2 Jun 2025 13:10:42 +0200 Subject: [PATCH] feat: finish up the my account section for now --- components/Userpopup.vue | 9 +- components/settings/user_settings/Account.vue | 112 ++++++++++-------- pages/settings.vue | 18 --- types/interfaces.ts | 2 +- 4 files changed, 72 insertions(+), 69 deletions(-) diff --git a/components/Userpopup.vue b/components/Userpopup.vue index 7381637..eaf7626 100644 --- a/components/Userpopup.vue +++ b/components/Userpopup.vue @@ -10,7 +10,7 @@ {{ props.user.username || "username" }} - {{ props.user.pronouns || "un/defined" }}

- About me + {{ props.user.about || "about me" }}
@@ -74,8 +74,11 @@ const props = defineProps<{ } #about-me { - margin-top: 4px; - padding: 4px; + background-color: #34200f; + border-radius: 12px; + + margin-top: 32px; + padding: 16px; font-size: 16px; } \ No newline at end of file diff --git a/components/settings/user_settings/Account.vue b/components/settings/user_settings/Account.vue index bb50f07..6438946 100644 --- a/components/settings/user_settings/Account.vue +++ b/components/settings/user_settings/Account.vue @@ -2,21 +2,24 @@

My Account

- +

AVATAR

- +

DISPLAY NAME

- +

USERNAME

- +

PRONOUNS

- +

ABOUT ME

-

{{ user?.about_me || "TBD" }}

+ +
+
@@ -29,10 +32,10 @@

Password (and eventually authenticator)

- +

Account Deletion

- +
@@ -50,36 +53,33 @@ const user = user_me! let new_pfp_file: any = null const saveChanges = async () => { + const formData = new FormData() + + if (new_pfp_file !== null) { + formData.append("avatar", new_pfp_file) + } + + const bytes = new TextEncoder().encode(JSON.stringify({ + display_name: user.display_name, + username: user.username, + pronouns: user.pronouns, + about: user.about, + })); + formData.append('json', new Blob([bytes], { type: 'application/json' })); + try { - const formData = new FormData() - - const upload_field: HTMLInputElement = document.getElementById("hidden-pfp-uploader") - if (upload_field.files?.length && upload_field.files.length > 0) { - console.log(upload_field.files[0]) - formData.append("avatar", upload_field.files[0]) - } - - const bytes = new TextEncoder().encode(JSON.stringify({ - display_name: user.display_name, - username: user.username, - pronouns: user.pronouns, - })); - formData.append("json", new Blob([bytes], { type: "application/json" })); - - await fetchWithApi("/me", { - method: "PATCH", + await fetchWithApi('/me', { + method: 'PATCH', body: formData }) - user_reference = Object.assign({}, user_me) - alert("success!!") + user_reference = Object.assign({}, await fetchUser()) + alert('success!!') } catch (error: any) { if (error?.response?.status !== 200) { - const errorData = await error?.response?.json() - - alert(`error ${error?.response?.status} met whilst trying to update profile info\n${errorData}`) + alert(`error ${error?.response?.status} met whilst trying to update profile info`) } - } + } }; @@ -89,23 +89,28 @@ const removeAvatar = async () => { } const changeAvatar = async () => { - const upload_field: HTMLInputElement = document.getElementById("hidden-pfp-uploader") - - // upload_field.onchange = async(e) => { - // console.log(upload_field.files) - // if (upload_field.files?.length && upload_field.files.length > 0) { - // const file = upload_field.files[0]; - // if (!file) return; + let input = document.createElement('input'); + input.type = 'file'; + input.accept = 'image/*'; - // const reader = new FileReader(); - // reader.onload = (e) => { - // user.avatar = e?.target?.result; - // }; - // reader.readAsDataURL(file); - // } - // } + input.onchange = async (e) => { + if (input.files?.length && input.files.length > 0) { + const file = input.files[0]; + if (!file) return; - upload_field?.click() + new_pfp_file = file + + const reader = new FileReader(); + reader.onload = (e) => { + if (e.target?.result && typeof e.target.result === 'string') { + user.avatar = e.target.result; + } + }; + reader.readAsDataURL(file); + } + } + + input.click() } const resetPassword = async () => { @@ -130,7 +135,8 @@ const deleteAccount = async () => { display: flex; } -.profile-container, .user-data-fields { +.profile-container, +.user-data-fields { min-width: 350px; } @@ -139,4 +145,16 @@ const deleteAccount = async () => { font-weight: 800; margin: 12px 0; } + +.profile-data-input { + min-width: 300px; + margin: 2px; + padding: 2px 10px; + height: 40px; + font-size: 16px; + border-radius: 8px; + border: none; + color: white; + background-color: #54361b; +} \ No newline at end of file diff --git a/pages/settings.vue b/pages/settings.vue index 60c4265..0c2fefe 100644 --- a/pages/settings.vue +++ b/pages/settings.vue @@ -69,24 +69,6 @@ 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); diff --git a/types/interfaces.ts b/types/interfaces.ts index 04da39a..b5b1995 100644 --- a/types/interfaces.ts +++ b/types/interfaces.ts @@ -59,7 +59,7 @@ export interface UserResponse { display_name: string | null, avatar: string | null, pronouns: string | null, - about_me: string | null, + about: string | null, email?: string, email_verified?: boolean }