Added icon change

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) => {
-    const data = response.data;
-    console.log(data);
+    loading.value = true;
+    Server().post('/user/login', { usermail: username.value, password: password.value }).then((response) => {
+        loading.value = false;
+        const data = response.data;
 
-    if(data.status == "error"){
-      DisplayToast('red', "Wrong username or password", 3000)
-    } else {
-      SetUser(data.token);
-
-      ShowMainMenu();
-    }
-  }).catch((error) => {
-    console.log(error);
-    if(error.response.status == 429){
-      // errorMessage.value = error.response.data;
-    } else {
-      // errorMessage.value = "Hi ha hagut un error intern, torna'ho a provar més tard";
-        console.log(error);
-    }
-  });
+        if(data.status == "error"){
+            DisplayToast('red', $t(data.msg), 3000)
+        } else {
+            SetUser(data.token);
+            DisplayToast('green', $t('login.success'), 3000);
+            ShowMainMenu();
+        }
+    }).catch((error) => {
+        loading.value = false;
+        DisplayToast('red', $t("errors.internal"), 3000);
+    });
 }
 
 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>