Added icon change

backend/.gitignore

@@ -14,3 +14,5 @@ logs
 .env
 .env.*
 !.env.production
+
+uploads/

backend/src/index.js

@@ -2,6 +2,7 @@ const express = require("express");
 const cors = require('cors');
 const cookieParser = require('cookie-parser');
 const passport = require('passport');
+const path = require('path');
 
 const dotenv = require('dotenv');
 
@@ -16,6 +17,11 @@ if(process.env.NODE_ENV) {
 const app = express();
 const connectDB = require("./db");
 
+
+// PUBLIC
+const uploadDir = path.join(__dirname, 'uploads');
+app.use('/public', express.static(uploadDir));
+
 // JSON LIMIT EXPRESS
 app.use(express.json({ limit: '50mb' }));
 app.use(express.urlencoded({
@@ -26,6 +32,7 @@ app.use(express.urlencoded({
 // connect database
 connectDB();
 
+// MIDDLEWARE
 app.use(passport.initialize());
 require('./services/passport')(passport);
 

backend/src/routes/user.js

@@ -158,7 +158,7 @@ router.post("/upload-avatar", upload.single("image"), passport.authenticate('jwt
 router.get("/retrieve-avatar", async (req, res) => {
     try {
         const data = await User.findOne({ username: req.query.username });
-        res.json({ status: "ok", image: data.image });
+        res.json({ status: "ok", image: `${data.image}` });
     } catch (err) {
         res.json({ status: "error" });
     }

backend/src/services/storage.js

@@ -1,14 +1,22 @@
 const multer = require('multer');
+const path = require('path');
+const fs = require('fs');
+
+const uploadDir = path.join(__dirname, '..', 'uploads'); // adjust if needed
+
+if (!fs.existsSync(uploadDir)) {
+    fs.mkdirSync(uploadDir, { recursive: true });
+}
 
 var storage = multer.diskStorage({
     destination: function (req, file, cb) {
-        cb(null, 'uploads')
+        cb(null, uploadDir);
     },
     filename: function (req, file, cb) {
-        cb(null, file.fieldname + '-' + Date.now())
+        const ext = path.extname(file.originalname);
+        cb(null, file.fieldname + '-' + Date.now() + ext);
     }
 });
 
 var upload = multer({storage: storage});
-module.exports = upload;
+module.exports = upload;
-  

frontend/app/app.vue

@@ -4,13 +4,31 @@ import ToastManager from './components/managers/ToastManager.vue';
 import WindowManager from './components/managers/WindowManager.vue';
 
 import { CreateWindow } from '@/services/Windows'
+import { GetUser, HasAdmin } from './services/User';
 
 async function start(){
-  CreateWindow('login');
+  if(GetUser()){
+    CreateWindow('main_menu');
+    return;
+  }
 
+  if(await HasAdmin()){
+    CreateWindow('login');
+  } else {
+    CreateWindow('register', {firstTime: true});
+  }
   // DisplayToast('aqua', 'All plugins loaded successfully');
 }
 
+useHead({
+  title: 'Dragonroll',
+  meta: [
+    { name: 'description', content: 'Dragonroll is a free and open-source tabletop RPG virtual tabletop. It allows you to play your favorite pen-and-paper RPGs online with your friends, with features like character sheets, dice rolling, maps, tokens, and more.' },
+    { name: 'keywords', content: 'virtual tabletop, vtt, online rpg, pen-and-paper rpg, dungeons and dragons, pathfinder, roll20 alternative' },
+    { name: 'author', content: 'Aran Roig' },
+  ],
+})
+
 onMounted(() => {
   setupTheme();
   setTheme('dark');

frontend/app/assets/css/colors.scss

@@ -16,6 +16,8 @@ $themes: (
         button-hover: #202020aa,
         button-active: #202020cc,
 
+        toast-background: #202020,
+
         hover: #21262d,
         selected: #4a4a4b,
         border-color: #819796,
@@ -24,6 +26,9 @@ $themes: (
         container-shadow: #151d28,
         sticky-header-bg: #20202077,
 
+        red: #e06c75,
+        green: #98c379,
+
         icon-invert: 100%
     ),
     light: (
@@ -41,6 +46,8 @@ $themes: (
         button-hover: #e9e9e9,
         button-active: #d4d4d4,
 
+        toast-background: #f0f0f0,
+
         border-color: #e0e0e0,
         border: #f0f0f0,
         hover: #e9e9e9,
@@ -49,6 +56,9 @@ $themes: (
         container-shadow: #5f6774,
         sticky-header-bg: #fff,
 
+        red: #e06c75,
+        green: #98c379,
+
         icon-invert: 0%
     )
 );

frontend/app/assets/css/main.scss

@@ -355,3 +355,11 @@ span.artifact {
     display: flex;
     flex-direction: column;
 }
+
+.red {
+  color: var(--color-red);
+}
+
+.green {
+  color: var(--color-green);
+}

frontend/app/components/managers/ToastManager.vue

@@ -51,12 +51,12 @@ emitter.on('toast', data => {
 <style scoped lang="scss">
 .toast-container {
     height: 100%;
-    background-color: var(--color-background-soft);
+    background-color: var(--color-toast-background);
     padding: 10px;
     margin-left: 5px;
     border-top-right-radius: 6px;
     border-bottom-right-radius: 6px;
-    transform: translate(2px,0px)
+    flex-grow: 1;
 }
 
 .toast {
@@ -72,6 +72,7 @@ emitter.on('toast', data => {
     border-radius: 6px;
     text-align: center;
 
+    flex-direction: column;
     z-index: 9999999;
 
 
@@ -100,7 +101,7 @@ emitter.on('toast', data => {
     }
     
     &.show {
-        display: block;
+        display: flex;
     }
 
     /* Colors!!!! */

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>

frontend/app/components/windows/LoginWindow.vue

@@ -14,6 +14,7 @@ import WindowHandle from './partials/WindowHandle.vue';
 import { DisplayToast } from '~/services/Toaster';
 import Server from '~/services/Server';
 import { SetUser } from '~/services/User';
+import Spinner from '../partials/Spinner.vue';
 
 const handle = ref(null);
 
@@ -25,6 +26,8 @@ let id = data.type;
 const username = ref("");
 const password = ref("");
 
+const loading = ref(false);
+
 onMounted(() => {
     SetupHandle(id, handle);
     SetSize(id, {width: 450, height: 480});
@@ -32,27 +35,28 @@ onMounted(() => {
     ResetPosition(id, "center");
 });
 
+function ShowMainMenu(){
+    CreateWindow('main_menu');
+    ClearWindow('login');
+}
+
 function login() {
-    Server().post('/user/login', { username: username.value, password: password.value }).then((response) => {
+    loading.value = true;
-    const data = response.data;
+    Server().post('/user/login', { usermail: username.value, password: password.value }).then((response) => {
-    console.log(data);
+        loading.value = false;
+        const data = response.data;
 
-    if(data.status == "error"){
+        if(data.status == "error"){
-      DisplayToast('red', "Wrong username or password", 3000)
+            DisplayToast('red', $t(data.msg), 3000)
-    } else {
+        } else {
-      SetUser(data.token);
+            SetUser(data.token);
-
+            DisplayToast('green', $t('login.success'), 3000);
-      ShowMainMenu();
+            ShowMainMenu();
-    }
+        }
-  }).catch((error) => {
+    }).catch((error) => {
-    console.log(error);
+        loading.value = false;
-    if(error.response.status == 429){
+        DisplayToast('red', $t("errors.internal"), 3000);
-      // errorMessage.value = error.response.data;
+    });
-    } else {
-      // errorMessage.value = "Hi ha hagut un error intern, torna'ho a provar més tard";
-        console.log(error);
-    }
-  });
 }
 
 function toRegister(){
@@ -84,7 +88,14 @@ function toRegister(){
                     <input id="password-field" type="password" :placeholder="$t('login.password-placeholder')" name="password" v-model="password" autocomplete="off" >
                 </div>
                 <div class="form-field">
-                    <button class="btn-primary sound-click">{{$t('login.log-in')}}</button>
+                    <button class="btn-primary sound-click">
+                        <span v-if="loading">
+                            <Spinner />
+                        </span>
+                        <span v-else>
+                            {{$t('login.log-in')}}
+                        </span>
+                    </button>
                 </div>
                 <div class="form-field center">
                     <p>{{$t('login.no-account')}} <a href="#" @click.prevent="toRegister">{{$t('login.register')}}</a></p>

frontend/app/components/windows/MainMenuWindow.vue

@@ -0,0 +1,78 @@
+<script setup>
+import { onMounted, ref } from 'vue';
+import { SetupHandle, SetSize, ResetPosition } from '@/services/Windows';
+
+import WindowHandle from './partials/WindowHandle.vue';
+import VersionRender from '../partials/VersionRender.vue';
+import EditUserPartial from '../partials/EditUserPartial.vue';
+
+const handle = ref(null);
+
+const props = defineProps(['data']);
+const data = props.data;
+
+let id = data.type;
+
+const test = ref(null)
+
+onMounted(() => {
+    SetupHandle(id, handle);
+    SetSize(id, {width: 500, height: 460});
+    ResetPosition(id, "center");
+});
+</script>
+
+
+<template>
+    <div class="window-wrapper" :id="'window-wrapper-' + id">
+        <WindowHandle :window="id" ref="handle"></WindowHandle>
+
+        <EditUserPartial></EditUserPartial>
+        <!-- Body -->
+         <h1>{{ $t("main-menu.main-menu")}}</h1>
+
+        <div class="button-container">
+            <button class="btn-primary button-expand sound-click" v-on:click="OpenCampaigns" ref="campaignButton">{{ $t("main-menu.campaigns") }}</button>
+        </div>
+        <VersionRender></VersionRender>
+
+    </div>
+</template>
+
+
+<style scoped>
+h1 {
+    margin-top: 20px;
+    font-family: MrEavesRemake;
+}
+
+.button-expand {
+    width: 100%;
+}
+
+.button-container {
+    display: flex;
+    width: 100%;
+    padding: 20px;
+
+    flex-direction: column;
+}
+
+p {
+  user-select: none;
+}
+
+.window-wrapper {
+    display: flex;
+    align-items: center;
+    user-select: none;
+}
+
+.splash-image {
+    width: 600px;
+    height: 250px;
+    user-select: none;
+}
+</style>
+
+

frontend/app/components/windows/RegisterWindow.vue

@@ -1,8 +1,12 @@
 <script setup>
 import { onMounted, ref } from 'vue';
-import { SetupHandle, SetSize, ResetPosition } from '@/services/Windows';
+import { SetupHandle, SetSize, ResetPosition, CreateWindow, ClearWindow } from '@/services/Windows';
 
 import WindowHandle from './partials/WindowHandle.vue';
+import Spinner from '../partials/Spinner.vue';
+import { DisplayToast } from '~/services/Toaster';
+import Server from '~/services/Server';
+import { errorMessages } from 'vue/compiler-sfc';
 
 const handle = ref(null);
 
@@ -11,13 +15,81 @@ const data = props.data;
 
 let id = data.type;
 
-const test = ref(null)
+
+const username = ref("");
+const password = ref("");
+const passwordConfirm = ref("");
+const email = ref("");
+const name = ref("");
+
+const firstTime = ref(false);
+const loading = ref(false);
+
+const images = [
+    "https://cdn.aranroig.com/art/miirym/miirym.jpg",
+    "https://cdn.aranroig.com/art/nozt/nozt.jpg",
+    "https://cdn.aranroig.com/art/knocking/knocking.jpg",
+    "https://cdn.aranroig.com/art/valentin/valentin.jpg",
+]
+
+const splashSource = ref("");
 
 onMounted(() => {
     SetupHandle(id, handle);
-    SetSize(id, {width: 500, height: 380});
+    SetSize(id, {width: 500});
     ResetPosition(id, "center");
+
+    // Pick random image
+    const randomIndex = Math.floor(Math.random() * images.length);
+    splashSource.value = images[randomIndex];
+    firstTime.value = data.firstTime;
 });
+
+function toLogin(){
+    CreateWindow('login');
+    ClearWindow('register');
+}
+
+function register(){
+    if(username.value.length < 3){
+        DisplayToast('red', $t('register.errors.username-empty'), 3000);
+        return;
+    }
+
+    if(email.value.length < 5 || !email.value.includes('@')){
+        DisplayToast('red', $t('register.errors.email-empty'), 3000);
+        return;
+    }
+
+    if(name.value.length == 0){
+        DisplayToast('red', $t('register.errors.name-empty'), 3000);
+        return;
+    }
+
+    if(password.value !== passwordConfirm.value){
+        DisplayToast('red', $t('register.errors.passwords-no-match'), 3000);
+        return;
+    }
+
+    loading.value = true;
+    Server().post('/user/register', {
+        username: username.value,
+        email: email.value,
+        name: name.value,
+        password: password.value
+    }).then((response) => {
+        DisplayToast('green', $t('register.success'), 3000);
+        toLogin();
+    }).catch((error) => {
+        if(error.response && error.response.data && error.response.data.message){
+            DisplayToast('red', $t(register.error.response.data.message), 3000);
+        } else {
+            DisplayToast('red', $t("errors.internal"), 3000);
+        }
+    }).finally(() => {
+        loading.value = false;
+    });
+}
 </script>
 
 
@@ -26,17 +98,134 @@ onMounted(() => {
         <WindowHandle :window="id" ref="handle"></WindowHandle>
 
         <!-- Body -->
-        <div ref="test"></div>
+        <div class="vert-expand">
+            <div class="image-container">
+                <div class="image-crop">
+                    <img :src="splashSource" class="main-image">
+                </div>
+                <picture class="overlay-image">
+                    <source media="(prefers-color-scheme: dark)" srcset="/img/logo-splash.png">
+                    <source media="(prefers-color-scheme: light)" srcset="/img/logo-splash-light.png">
+                    <img alt="Dragonroll logo" src="/img/logo-splash.png" draggable="false" width="250px">
+                </picture>
+            </div>
+            <form v-on:submit.prevent="register">
+                <p class="green" v-if="firstTime">{{ $t('register.first-register-message') }}</p>
+                <h2>{{ $t('register.welcome') }}</h2>
+                <p>{{ $t('register.message') }}</p>
+                <div class="form-field">
+                    <label for="username">{{$t('register.username')}}</label>
+                    <input id="username-field" type="text" :placeholder="$t('register.username-placeholder')" name="username" v-model="username" autocomplete="off" >
+                </div>
+                <div class="form-field">
+                    <label for="email">{{$t('register.email')}}</label>
+                    <input id="email-field" type="text" :placeholder="$t('register.email-placeholder')" name="email" v-model="email" autocomplete="off" >
+                </div>
+                <div class="form-field">
+                    <label for="name">{{$t('register.name')}}</label>
+                    <input id="name-field" type="text" :placeholder="$t('register.name-placeholder')" name="name" v-model="name" autocomplete="off" >
+                </div>
+                <div class="form-field">
+                    <label for="password">{{$t('register.password')}}</label>
+                    <div class="two-rows expand">
+                        <input id="password-field" type="password" :placeholder="$t('register.password-placeholder')" name="password" v-model="password" autocomplete="off" >
+                        <input id="password-field" type="password" :placeholder="$t('register.password-confirm-placeholder')" name="password" v-model="passwordConfirm" autocomplete="off" >
+                    </div>
+                </div>
+                <div class="form-field">
+                    <button class="btn-primary sound-click">
+                        <span v-if="loading">
+                            <Spinner />
+                        </span>
+                        <span v-else>
+                            {{$t('register.register')}}
+                        </span>
+                    </button>
+                </div>
+                <div class="form-field center" v-if="!firstTime">
+                    <p>{{$t('register.have-account')}} <a href="#" @click.prevent="toLogin">{{$t('register.login')}}</a></p>
+                </div>
+            </form>
+            
+        </div>
 
     </div>
 </template>
 
 
 <style scoped>
+p {
+  user-select: none;
+}
+
+.expand {
+    width: 100%;
+    
+    display: flex;
+    flex-direction: row;
+
+    > * {
+        flex-grow: 1;
+    }
+}
+
+.vert-expand {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    height: 100%;
+}
+
 .window-wrapper {
+    user-select: none;
+
     display: flex;
     align-items: center;
 }
+
+.splash-image {
+    width: 450px;
+}
+
+form {
+  margin-left: 30px;
+  margin-right: 30px;
+}
+
+label {
+    text-align: left;
+}
+
+.center {
+    text-align: center;
+}
+
+.image-container {
+    position: relative;
+    display: inline-block;
+    margin-bottom: 10px;
+    pointer-events: none;
+}
+
+.image-crop {
+    height: 200px;       /* adjust as needed */
+    width: 500px;        /* adjust as needed */
+    overflow: hidden;
+    position: relative;
+}
+
+.main-image {
+    position: absolute;
+    width: 500px;        /* adjust as needed */
+    top: 0px;          /* adjust as needed */
+}
+.overlay-image {
+    position: absolute;
+    bottom: 0;
+    right: 0;
+    width: 250px; /* adjust as needed */
+}
+
 </style>
 
 

frontend/app/services/WindowDefinitions.js

@@ -4,17 +4,21 @@ Put here all dragonroll windows
 
 const defWindows = {
   login: {
-    title: 'Login',
+    title: 'windows.login',
     movable: false,
     component: () => import('~/components/windows/LoginWindow.vue'),
   },
   register: {
-    title: 'Register',
+    title: 'windows.register',
     movable: false,
     component: () => import('~/components/windows/RegisterWindow.vue'),
   },
+  main_menu: {
+    title: 'windows.main-menu',
+    component: () => import('~/components/windows/MainMenuWindow.vue'),
+  },
   example: {
-    title: 'Example',
+    title: 'windows.example',
     component: () => import('~/components/windows/ExampleWindow.vue'),
   }
 }

frontend/i18n/locales/en.json

@@ -2,15 +2,58 @@
     "windows": {
         "login": "Login",
         "register": "Register",
+        "main-menu": "Dragonroll",
         "example": "Example Window"
     },
     "login": {
-        "username": "Username",
+        "username": "Username or email",
-        "username-placeholder": "Enter your username here...",
+        "username-placeholder": "Enter your username or email here...",
         "password": "Password",
         "password-placeholder": "Enter your password...",
         "log-in": "Log in",
         "no-account": "You don't have an account?",
-        "register": "Register"
+        "register": "Register",
+        "errors": {
+            "invalid-credentials": "Invalid username/email or password.",
+            "params": "Please enter both username/email and password."
+        },
+        "success": "Login successful!"
+    },
+    "register": {
+        "name": "Name",
+        "name-placeholder": "Enter your name here...",
+        "email": "Email",
+        "email-placeholder": "Enter your email here...",
+        "username": "Username",
+        "username-placeholder": "Enter your username here...",
+        "password": "Password",
+        "password-placeholder": "Enter your password...",
+        "confirm-password": "Confirm Password",
+        "confirm-password-placeholder": "Re-enter your password...",
+        "register": "Register",
+        "have-account": "Already have an account?",
+        "login": "Login",
+        "password-confirm-placeholder": "Confirm your password...",
+        "welcome": "Welcome to DragonRoll!",
+        "message": "Please enter your desired username and password to create an account.",
+        "first-register-message": "You are about to create the first account on this DragonRoll instance. This account will be granted administrator privileges.",
+        "errors": {
+            "name-empty": "Please enter your name.",
+            "email-empty": "Please enter a valid email address.",
+            "username-empty": "Please enter a username.",
+            "passwords-no-match": "The passwords you entered do not match.",
+            "email-username-exists": "An account with this email or username already exists."
+        },
+        "success": "Registration successful! You can now log in."
+    },
+    "errors": {
+        "internal": "An internal error occurred."
+    },
+    "main-menu": {
+        "main-menu": "Main menu",
+        "edit-profile": "Edit profile",
+        "campaigns": "Campaigns",
+        "log-out": "Log out",
+        "settings": "Settings"
     }
 }

frontend/nuxt.config.ts

@@ -1,4 +1,24 @@
-// https://nuxt.com/docs/api/configuration/nuxt-config
+import { execSync } from 'node:child_process'
+
+function getGitInfo() {
+  try {
+    const commit = execSync('git rev-parse --short HEAD').toString().trim()
+    const tag = execSync('git describe --tags --abbrev=0').toString().trim()
+    const branch = execSync('git rev-parse --abbrev-ref HEAD').toString().trim()
+
+    return { commit, tag, branch }
+  } catch {
+    // fallback (production / no .git)
+    return {
+      commit: process.env.NUXT_PUBLIC_GIT_COMMIT || 'unknown',
+      tag: process.env.NUXT_PUBLIC_GIT_TAG || 'no-tag',
+      branch: process.env.NUXT_PUBLIC_GIT_BRANCH || 'unknown'
+    }
+  }
+}
+
+const git = getGitInfo();
+
 export default defineNuxtConfig({
   vite: {
     optimizeDeps: {
@@ -22,7 +42,11 @@ export default defineNuxtConfig({
 
   runtimeConfig: {
     public: {
-      apiBaseUrl: process.env.API_BASE_URL || 'http://localhost:5000/api'
+      apiBaseUrl: process.env.API_BASE_URL || 'http://localhost:5000/api',
+      gitCommit: git.commit,
+      gitTag: git.tag,
+      gitBranch: git.branch,
+      buildDate: new Date().toISOString(),
     }
   },