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

feat: finish up the my account section for now

Browse source
This commit is contained in:
JustTemmie 2025-06-02 13:10:42 +02:00
parent 8a3bb89f8a
commit acc4fa14b7
Signed by: justtemmie
SSH key fingerprint: SHA256:nBO+OwpTkd8LYhe38PIqdxmDvkIg9Vw2EbrRZM97dkU
4 changed files with 72 additions and 69 deletions
Download patch file Download diff file Expand all files Collapse all files

9
components/Userpopup.vue
View file

@ -10,7 +10,7 @@
{{ props.user.username || "username" }} - {{ props.user.pronouns || "un/defined" }}
</p>
<div id="about-me">
<span>About me</span>
{{ props.user.about || "about me" }}
</div>
</div>
</div>
@ -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;
}
</style>

112
components/settings/user_settings/Account.vue
View file

@ -2,21 +2,24 @@
<div>
<input id="hidden-pfp-uploader" type="file" accept="image/*" style="display: none;">
<h1>My Account</h1>
<div class="profile-and-user-data-fields">
<div class="user-data-fields">
<h3 class="subtitle">AVATAR</h3>
<Button text="Change Avatar" :callback="changeAvatar"></Button>
<Button text="Remove Avatar" :callback="removeAvatar" style="margin-left: 10px; background-color: grey;"></Button>
<Button text="Remove Avatar" :callback="removeAvatar"
style="margin-left: 10px; background-color: grey;"></Button>
<h3 class="subtitle">DISPLAY NAME</h3>
<input type="text" v-model="user.display_name" placeholder="Enter display name" />
<input class="profile-data-input" type="text" v-model="user.display_name" placeholder="Enter display name" />
<h3 class="subtitle">USERNAME</h3>
<input type="text" v-model="user.username" placeholder="Enter username" />
<input class="profile-data-input" type="text" v-model="user.username" placeholder="Enter username" />
<h3 class="subtitle">PRONOUNS</h3>
<input type="text" v-model="user.pronouns" placeholder="Enter pronouns" />
<input class="profile-data-input" type="text" v-model="user.pronouns" placeholder="Enter pronouns" />
<h3 class="subtitle">ABOUT ME</h3>
<p>{{ user?.about_me || "TBD" }}</p>
<input class="profile-data-input" type="text" v-model="user.about" placeholder="About You" />
<br>
<br>
<Button text="Save Changes" :callback="saveChanges"></Button>
</div>
<Userpopup :user=user_me class="profile"></Userpopup>
@ -29,10 +32,10 @@
<br>
<h2>Password (and eventually authenticator)</h2>
<Button text="Reset Password (tbd)" :callback=resetPassword></Button>
<Button text="Reset Password (tbd)" :callback=resetPassword></Button>
<h2>Account Deletion</h2>
<ButtonScary text="Delete Account (tbd)" :callback=deleteAccount></ButtonScary>
<ButtonScary text="Delete Account (tbd)" :callback=deleteAccount></ButtonScary>
</div>
</template>
@ -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;
}
</style>