gorb/frontend
4
0
Fork 0
Code Issues 6 Pull requests Projects Releases Packages 1 Wiki Activity Actions

Polish GUI #7

Merged
justtemmie merged 10 commits from GUI-polish into main 2025-07-03 17:18:25 +00:00
Conversation 6 Commits 10 Files changed 12 +166 -81
3 changed files with 166 additions and 81 deletions
Download patch file Download diff file Expand all files Collapse all files
Showing only changes of commit d90252542d - Show all commits

105
components/Settings/UserSettings/Account.vue
View file

@ -1,33 +1,16 @@
<template>
<div>
<h1>My Account</h1>
<div v-if="user">
<h1>Account</h1>
<div class="profile-container">
<div class="user-data-fields" v-if="user">
<p class="subtitle">AVATAR</p>
<Button text="Change Avatar" :callback="changeAvatar" style="margin-right: 0.8dvw;"></Button>
<Button text="Remove Avatar" :callback="removeAvatar" variant="neutral"></Button>
<label for="profile-display-name-input" class="subtitle">DISPLAY NAME</label>
<input id="profile-display-name-input" class="profile-data-input" type="text" v-model="user.display_name" placeholder="Enter display name" />
<label for="profile-username-input" class="subtitle">USERNAME</label>
<input id="profile-username-input" class="profile-data-input" type="text" v-model="user.username" placeholder="Enter username" />
<label for="profile-pronouns-input" class="subtitle">PRONOUNS</label>
<input id="profile-pronouns-input" class="profile-data-input" type="text" v-model="user.pronouns" placeholder="Enter pronouns" />
<label for="profile-about-me-input" class="subtitle">ABOUT ME</label>
<input id="profile-about-me-input" class="profile-data-input" type="text" v-model="user.about" placeholder="About me" />
<br>
<Button style="margin-top: 1dvh" text="Save Changes" :callback="saveChanges"></Button>
</div>
<UserPopup v-if="user" :user="user" class="profile-popup"></UserPopup>
</div>
<h2 style="margin-top: 8duservh">Password (and eventually authenticator)</h2>
<Button text="Reset Password (tbd)" :callback=resetPassword></Button>
<p class="subtitle">E-MAIL</p>
<input id="profile-about-me-input" class="profile-data-input" type="text" v-model="user.email" placeholder="john@example.org" />
<br>
<Button text="Submit" :callback=changeEmail style="margin-top: .4em"></Button>
<h2>Account Deletion</h2>
<p class="subtitle">PASSWORD</p>
<Button text="Reset Password" :callback=resetPassword></Button>
<p class="subtitle">ACCOUNT DELETION</p>
<Button text="Delete Account (tbd)" :callback=deleteAccount variant="scary"></Button>
</div>
@ -44,22 +27,13 @@ if (!user) {
alert("could not fetch user info, aborting :(")
}
let newPfpFile: File;
const saveChanges = async () => {
async function changeEmail() {
if (!user) return;
const formData = new FormData()
if (newPfpFile) {
formData.append("avatar", newPfpFile)
}
const bytes = new TextEncoder().encode(JSON.stringify({
display_name: user.display_name,
username: user.username,
pronouns: user.pronouns,
about: user.about,
email: user.email,
}));
formData.append('json', new Blob([bytes], { type: 'application/json' }));
@ -78,58 +52,29 @@ const saveChanges = async () => {
};
const removeAvatar = async () => {
alert("TBD")
// await fetchWithApi(`/auth/reset-password`);
}
const changeAvatar = async () => {
if (!user) return;
const input = document.createElement('input');
input.type = 'file';
input.accept = 'image/*';
input.addEventListener("change", (e: Event) => {
if (input.files?.length && input.files.length > 0) {
const file = input.files[0];
if (!file) return;
newPfpFile = file
const reader = new FileReader();
reader.addEventListener("onload", () => {
if (reader.result && typeof reader.result === 'string') {
user.avatar = reader.result;
}
});
reader.readAsDataURL(file);
async function resetPassword () {
await fetchWithApi("/auth/reset-password", {
method: 'GET',
headers: {
'Content-Type': 'application/json',
},
query: {
identifier: user?.username
}
})
input.click()
});
}
const resetPassword = async () => {
alert("TBD")
// await fetchWithApi(`/auth/reset-password`);
}
const deleteAccount = async () => {
async function deleteAccount() {
alert("TBD")
}
</script>
<style scoped>
.profile-container {
display: flex;
}
.subtitle {
display: block;
font-size: 0.8em;
font-weight: 800;
margin: 1.5dvh 0 0.5dvh 0.25dvw;
margin: 4dvh 0 0.5dvh 0.25dvw;
}
.user-data-fields {

138
components/Settings/UserSettings/Profile.vue Normal file
View file

@ -0,0 +1,138 @@
<template>
<div>
<h1>Profile</h1>
<div class="profile-container">
<div class="user-data-fields" v-if="user">
<p class="subtitle">AVATAR</p>
<Button text="Change Avatar" :callback="changeAvatar" style="margin-right: 0.8dvw;"></Button>
<Button text="Remove Avatar" :callback="removeAvatar" variant="neutral"></Button>
<label for="profile-display-name-input" class="subtitle">DISPLAY NAME</label>
<input id="profile-display-name-input" class="profile-data-input" type="text" v-model="user.display_name" placeholder="Enter display name" />
<label for="profile-username-input" class="subtitle">USERNAME</label>
<input id="profile-username-input" class="profile-data-input" type="text" v-model="user.username" placeholder="Enter username" />
<label for="profile-pronouns-input" class="subtitle">PRONOUNS</label>
<input id="profile-pronouns-input" class="profile-data-input" type="text" v-model="user.pronouns" placeholder="Enter pronouns" />
<label for="profile-about-me-input" class="subtitle">ABOUT ME</label>
<input id="profile-about-me-input" class="profile-data-input" type="text" v-model="user.about" placeholder="About me" />
<Button style="margin-top: 2dvh" text="Save Changes" :callback="saveChanges"></Button>
</div>
<UserPopup v-if="user" :user="user" class="profile-popup"></UserPopup>
</div>
</div>
</template>
<script lang="ts" setup>
import Button from '~/components/Button.vue';
import type { UserResponse } from '~/types/interfaces';
const { fetchUser } = useAuth();
const user: UserResponse | undefined = await fetchUser()
if (!user) {
alert("could not fetch user info, aborting :(")
}
let newPfpFile: File;
async function saveChanges() {
if (!user) return;
const formData = new FormData()
if (newPfpFile) {
formData.append("avatar", newPfpFile)
}
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 {
await fetchWithApi('/me', {
method: 'PATCH',
body: formData
})
alert('success!!')
} catch (error: any) {
if (error?.response?.status !== 200) {
alert(`error ${error?.response?.status} met whilst trying to update profile info`)
}
}
};
async function removeAvatar() {
alert("TBD")
// await fetchWithApi(`/auth/reset-password`);
}
async function changeAvatar() {
if (!user) return;
const input = document.createElement('input');
input.type = 'file';
input.accept = 'image/*';
input.addEventListener("change", (e: Event) => {
if (input.files?.length && input.files.length > 0) {
const file = input.files[0];
if (!file) return;
newPfpFile = file
const reader = new FileReader();
reader.addEventListener("onload", () => {
if (reader.result && typeof reader.result === 'string') {
user.avatar = reader.result;
}
});
reader.readAsDataURL(file);
}
})
input.click()
}
</script>
<style scoped>
.profile-container {
display: flex;
}
.subtitle {
display: block;
font-size: 0.8em;
font-weight: 800;
margin: 1.5dvh 0 0.5dvh 0.25dvw;
}
.user-data-fields {
min-width: 35dvw;
max-width: 35dvw;
}
.profile-data-input {
min-width: 30dvw;
margin: 0.07dvh;
padding: 0.1dvh 0.7dvw;
height: 2.5em;
font-size: 1em;
border-radius: 8px;
border: none;
color: var(--text-color);
background-color: var(--accent-color);
}
.profile-popup {
margin-left: 2dvw;
}
</style>

4
pages/settings.vue
View file

@ -39,6 +39,7 @@ interface Category {
pages: Page[];
}
import Profile from '~/components/Settings/UserSettings/Profile.vue';
import Account from '~/components/Settings/UserSettings/Account.vue';
import Privacy from '~/components/Settings/UserSettings/Privacy.vue';
import Devices from '~/components/Settings/UserSettings/Devices.vue';
@ -53,7 +54,8 @@ const settingsCategories = {
userSettings: {
displayName: "User Settings",
pages: [
{ displayName: "My Account", pageData: Account },
{ displayName: "Profile", pageData: Profile },
{ displayName: "Account", pageData: Account },
{ displayName: "Privacy", pageData: Privacy },
{ displayName: "Devices", pageData: Devices },
{ displayName: "Connections", pageData: Connections },