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

Merge branch 'settings-page'
All checks were successful
ci/woodpecker/manual/build-and-publish Pipeline was successful
Details

Browse source 
co-authored-by: JustTemmie <git@beaver.mom>
This commit is contained in:
Radical 2025-06-23 21:11:08 +02:00
commit 6141cac41a
14 changed files with 547 additions and 1 deletions
Download patch file Download diff file Expand all files Collapse all files

44
components/Button.vue Normal file
View file

@ -0,0 +1,44 @@
<template>
<div @click="props.callback()" class="button" :class="props.variant + '-button'">
{{ props.text }}
</div>
</template>
<script lang="ts" setup>
const props = defineProps<{
text: string,
callback: CallableFunction,
variant?: "normal" | "scary" | "neutral",
}>();
</script>
<style scoped>
.button {
cursor: pointer;
background-color: #b35719;
color: #ffffff;
padding: 0.7dvh 1.2dvw;
font-size: 1.1em;
transition: background-color 0.2s;
border-radius: 0.7rem;
text-decoration: none;
display: inline-block;
}
.scary-button {
background-color: red;
}
.neutral-button {
background-color: grey;
}
.button:hover {
background-color: #934410;
}
</style>

14
components/Settings/AppSettings/Appearance.vue Normal file
View file

@ -0,0 +1,14 @@
<template>
<div>
<h1>hi</h1>
<h5>TEST</h5>
<h5>TEST</h5>
</div>
</template>
<script lang="ts" setup>
</script>
<style scoped>
</style>

12
components/Settings/AppSettings/Keybinds.vue Normal file
View file

@ -0,0 +1,12 @@
<template>
<div>
<h1>Keybinds (TBA)</h1>
</div>
</template>
<script lang="ts" setup>
</script>
<style scoped>
</style>

12
components/Settings/AppSettings/Language.vue Normal file
View file

@ -0,0 +1,12 @@
<template>
<div>
<h1>Language (TBA)</h1>
</div>
</template>
<script lang="ts" setup>
</script>
<style scoped>
</style>

12
components/Settings/AppSettings/Notifications.vue Normal file
View file

@ -0,0 +1,12 @@
<template>
<div>
<h1>Notifications (TBA)</h1>
</div>
</template>
<script lang="ts" setup>
</script>
<style scoped>
</style>

155
components/Settings/UserSettings/Account.vue Normal file
View file

@ -0,0 +1,155 @@
<template>
<div>
<h1>My 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>
<h2>Account Deletion</h2>
<Button text="Delete Account (tbd)" :callback=deleteAccount variant="scary"></Button>
</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;
const saveChanges = async () => {
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`)
}
}
};
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);
}
})
input.click()
}
const resetPassword = async () => {
alert("TBD")
// await fetchWithApi(`/auth/reset-password`);
}
const deleteAccount = async () => {
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;
}
.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: white;
background-color: #54361b;
}
.profile-popup {
margin-left: 2dvw;
}
</style>

12
components/Settings/UserSettings/Connections.vue Normal file
View file

@ -0,0 +1,12 @@
<template>
<div>
<h1>Connections (TBA)</h1>
</div>
</template>
<script lang="ts" setup>
</script>
<style scoped>
</style>

12
components/Settings/UserSettings/Devices.vue Normal file
View file

@ -0,0 +1,12 @@
<template>
<div>
<h1>Devices (TBA)</h1>
</div>
</template>
<script lang="ts" setup>
</script>
<style scoped>
</style>

13
components/Settings/UserSettings/Privacy.vue Normal file
View file

@ -0,0 +1,13 @@
<template>
<div>
<h1>Privacy (TBA)</h1>
</div>
</template>
<script lang="ts" setup>
import Button from '~/components/Button.vue';
</script>
<style scoped>
</style>

85
components/UserPopup.vue Normal file
View file

@ -0,0 +1,85 @@
<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 }}</strong>
</p>
<p id="username-and-pronouns">
{{ props.user.username }}
<span v-if="props.user.pronouns"> - {{ props.user.pronouns }}</span>
</p>
<div id="about-me" v-if="props.user.about">
{{ props.user.about }}
</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: 300px;
max-width: 300px;
border-radius: 8px;
position: relative;
display: flex;
flex-direction: column;
}
#cover-colour {
border-radius: 12px 12px 0 0;
min-height: 60px;
background-color: #442505;
}
#main-body {
border-radius: 0 0 12px 12px;
padding: 12px;
min-height: 280px;
background-color: #4b3018;
overflow-wrap: break-word;
hyphens: manual;
}
#avatar {
width: 96px;
height: 96px;
border: 5px solid #4b3018;
border-radius: 100%;
position: absolute;
left: 16px;
top: 16px;
}
#display-name {
margin-top: 60px;
margin-bottom: 0;
font-size: 28px;
}
#username-and-pronouns {
margin: 2px;
font-size: 16px;
}
#about-me {
background-color: #34200f;
border-radius: 12px;
margin-top: 32px;
padding: 16px;
font-size: 16px;
}
</style>