Added icon change

frontend/app/components/partials/EditUserPartial.vue

@@ -0,0 +1,167 @@
+<script setup>
+import { onMounted, ref } from 'vue';
+import { GetUser, LogoutUser } from '@/services/User'
+
+import Server from '@/services/Server'
+
+import { ClearWindows, CreateWindow, CreateChildWindow, ClearWindow } from '../../services/Windows';
+import { backendUrl } from '../../services/BackendURL';
+import Spinner from './Spinner.vue';
+const emitter = useEmitter();
+const loadedIcon = ref(false);
+
+const username = ref("");
+username.value = GetUser().username;
+
+function retrieveAvatar(){
+    let userAvatarDisplay = document.getElementById("upload-image");
+
+    // Hide image + show spinner while loading
+    loadedIcon.value = false;
+
+    Server().get('/user/retrieve-avatar?username=' + GetUser().username)
+    .then((response) => {
+        if(response.data.image){
+            const imgUrl = backendUrl + "public/" + response.data.image;
+
+            // Wait for the image to fully load
+            const img = new Image();
+            img.src = imgUrl;
+
+            img.onload = () => {
+                userAvatarDisplay.src = imgUrl;
+                loadedIcon.value = true;
+            };
+
+            img.onerror = () => {
+                console.log("Image failed to load");
+                loadedIcon.value = true; // fallback to avoid infinite spinner
+            };
+        }
+    })
+    .catch(() => console.log("Internal error"));
+}
+
+function LogOut(){
+    LogoutUser();
+
+    ClearWindows({type: "main_menu"});
+    CreateWindow('login');
+}
+
+function EditProfile(){
+    console.log("User:"); console.log(GetUser());
+    CreateChildWindow('main_menu', 'edit_profile', {
+        user: GetUser()
+    });
+}
+
+function EditSettings(){
+    ClearWindow('main_menu');
+    CreateWindow('settings', {
+        id: 'settings',
+        type: 'settings',
+        title: 'settings.title',
+        back: () => { ClearWindow('settings'); CreateWindow('main_menu');  }
+    });
+}
+
+onMounted(() => {
+    let userAvatarDisplay = document.getElementById("upload-image");
+    let sendAvatarFileUploader = document.getElementById("send-avatar-file-uploader");
+    
+    sendAvatarFileUploader.addEventListener("change", (event) => {
+        const formData = new FormData();
+        const image = event.target.files[0];
+
+        formData.append("image", image);
+
+        Server().post('/user/upload-avatar', formData, {
+            headers: { "Content-Type": "multipart/form-data" }
+        }).then((response) => {
+            retrieveAvatar();
+        }).catch((err) => console.log("Internal error"));
+    });
+
+    userAvatarDisplay.addEventListener("click", (event) => {
+        sendAvatarFileUploader.click();
+    });
+
+    retrieveAvatar();
+});
+</script>
+
+
+<template>
+    <form id="send-avatar-form" enctype="multipart/form-data">
+        <input name="file" type="file" accept="image/*" id="send-avatar-file-uploader">
+    </form>
+
+    <div class="main-user-container">
+        <div class="main-user-container-inner">
+            <div class="user-icon-container">
+                <img class="user-icon" src="/img/def-avatar.jpg" id="upload-image" draggable="false" v-show="loadedIcon">
+                <Spinner v-show="!loadedIcon" :size="30"></Spinner>
+            </div>
+            <div class="main-user-info">
+                <b>{{ username }}</b><br>Hola
+            </div>
+
+            <div class="main-user-actions">
+                <button class="btn-primary button-small sound-click" v-on:click.prevent="EditProfile">{{ $t("main-menu.edit-profile") }}</button>
+                <button class="btn-primary button-small sound-click" v-on:click.prevent="EditSettings">{{ $t("main-menu.settings") }}</button>
+                <button class="btn-primary button-small sound-click" v-on:click.prevent="LogOut">{{ $t("main-menu.log-out") }}</button>
+            </div>
+        </div>
+    </div>
+</template>
+
+
+<style scoped>
+#send-avatar-form {
+    display: none;
+}
+
+.button-small {
+    height: 32px;
+    padding: 10px;
+}
+
+.main-user-container {
+    background-color: var(--color-background-softer);
+    width: 100%;
+    user-select: none;
+}
+
+.main-user-container-inner {
+    padding: 10px;
+    display: flex;
+    align-items: center;
+
+    justify-content: center;
+}
+
+.main-user-info {
+    text-align: left;
+    margin-left: 10px;
+}
+
+.user-icon {
+    width: 40px;
+    height: 40px;
+}
+
+.user-icon-container {
+    width: 40px;
+    height: 40px;
+    overflow: hidden;
+}
+
+.main-user-actions {
+    margin-left: auto;
+
+    button {
+        margin-left: 10px;
+    }
+}
+</style>

frontend/app/components/partials/Spinner.vue

@@ -0,0 +1,33 @@
+<script setup>
+defineProps({
+  size: {
+    type: Number,
+    default: 10
+  }
+})
+</script>
+
+<template>
+  <div class="spinner">
+    <span
+      class="spinner-inner"
+      :style="{ width: size + 'px', height: size + 'px' }"
+    ></span>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.spinner-inner {
+  border: 2px solid white;
+  border-top: 2px solid transparent;
+  border-radius: 50%;
+  display: inline-block;
+  animation: spin 0.7s linear infinite;
+}
+
+@keyframes spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+</style>

frontend/app/components/partials/VersionRender.vue

@@ -0,0 +1,24 @@
+<script setup>
+const config = useRuntimeConfig()
+</script>
+
+
+<template>
+    <div class="version-render">
+        <span>Dragonroll {{ config.public.gitTag }}-{{ config.public.gitCommit }}@{{ config.public.gitBranch }}</span>
+            <br><span>{{ config.public.buildDate }}</span>
+    </div>
+</template>
+
+
+<style scoped>
+.version-render {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    user-select: none;
+}
+span{
+    color: rgb(59, 59, 59);
+}
+</style>