KJdksjlkj

client/src/assets/base.css

@@ -10,14 +10,19 @@
   --c-white-mute: #e2e2e2;
   --c-white-muter: #c4c4c4;
 
+  --c-white-blurred: #f8f8f8cc;
+
   --c-black: #181818;
-  --c-black-semisoft: #1d1d1d;
+  --c-black-semisoft:1 #1d1d1d;
   --c-black-soft: #222222;
   --c-black-softer: #282828;
   --c-black-softest: #3a3a3a;
   --c-black-mute: #383838;
   --c-black-muter: #585858;
 
+
+  --c-black-blurred: #222222cc;
+
   --c-indigo: #2c3e50;
 
 
@@ -44,6 +49,8 @@
 
 /* semantic color variables for this project */
 :root {
+  --window-background: var(--c-white-blurred);
+
   --color-background: var(--c-white);
   --color-background-semisoft: var(--c-white-semisoft);
   --color-background-soft: var(--c-white-soft);
@@ -63,6 +70,8 @@
 
 @media (prefers-color-scheme: dark) {
   :root {
+    --window-background: var(--c-black-blurred);
+
     --color-handler: var(--c-black-semisoft);
     --color-background: var(--c-black);
     --color-background-semisoft: var(--c-black-semisoft);

client/src/assets/main.css

@@ -33,9 +33,11 @@ a {
   }
 }
 
-._blog-title {
-  margin-top: 120px;
-  padding-bottom: 30px;
+.icon {
+  @media (prefers-color-scheme: dark) {
+    filter: invert(0.7);
+  }
+  
 }
 
 label {

client/src/main.js

@@ -1,7 +1,7 @@
 import './assets/main.css'
 import './assets/prism.css'
 
-import { createApp } from 'vue'
+import { createApp, reactive } from 'vue'
 import App from './App.vue'
 import router from './router'
 
@@ -35,7 +35,13 @@ VueMarkdownEditor.use(createKatexPlugin());
 const app = createApp(App).use(VueMarkdownEditor);
 
 
-app.config.globalProperties.emitter = emitter;
+app.config.globalProperties.rollWindows = {
+    login: reactive([]),
+    register: reactive([]),
+    test: reactive([]),
+    main_menu: reactive([]),
+    edit_profile: reactive([]),
+};
 
 app.use(router)
 

client/src/services/Windows.js

@@ -1,16 +1,42 @@
-function SetupHandle(id){
+import { reactive, ref } from 'vue'
+
+const windows = {
+    login: ref([]),
+    register: ref([]),
+    test: ref([]),
+    main_menu: ref([]),
+    edit_profile: ref([]),
+};
+
+const reload = ref(0);
+
+let ReloadRef = () => { return reload };
+let Windows = () => { return windows };
+
+let currentIndex = 1;
+
+function SetupHandle(id, handle, handleData){
+
+    // Update window info with handle info
+    
+    let win = GetWindowWithId(id);
+    win.handle = handleData;
+
     let currentWindowId = "window-wrapper-" + id;
     let currentWindowHandleId = "window-handle-" + id;
     
     let mouseDown = false;
 
     let currentWindow = document.getElementById(currentWindowId);
-
     let handler = document.getElementById(currentWindowHandleId);
 
     let offsetX = 0;
     let offsetY = 0;
 
+    currentWindow.addEventListener("mousedown", (event) => {
+        SetOnTop(id);
+    });
+
     handler.addEventListener("mousedown", (event) => {
         mouseDown = true;
 
@@ -33,7 +59,11 @@ function SetupHandle(id){
 
     document.addEventListener("mouseup", (event) => {
         mouseDown = false;
+        // ummm suposo que no pots tancar mentres mous?
+        SaveWindowPos({id, x: parseInt(currentWindow.style.left, 10), y: parseInt(currentWindow.style.top, 10)});
     });
+
+    handle.value.setupHandle();
 }
 
 function SetSize(id, size){
@@ -60,11 +90,90 @@ function SetPosition(id, pos){
 
     currentWindow.style.top = pos.y + "px";
     currentWindow.style.left = pos.x + "px";
+
+    SaveWindowPos({id, x: pos.x, y: pos.y})
 }
 
+function ResetPosition(id, pos){
+    let win = GetWindowWithId(id);
+    let data = {x: win.x, y: win.y};
+
+    if(data.x && data.y){
+        SetPosition(id, data);
+        return;
+    }
+    SetPosition(id, pos);
+}
+
+
+function CreateWindow(data){
+    if(windows[data.type] === undefined){
+        console.error("Window type " + data.type + " is not defined!");
+        return;
+    }
+
+    let contains = false;
+    for (let i = 0; i < windows[data.type].length; i++) {
+        if(windows[data.type][i].id == data.id){
+            contains = true;
+            break;
+        }
+    }
+
+    if(!contains) {
+        windows[data.type].value.push(data);
+        // reload.value += 1;
+
+        setTimeout(() => SetOnTop(data.id), 0);
+    }
+}
+
+function ClearWindows(data){
+    windows[data.type].value = [];
+    // reload.value += 1;
+}
+
+function ClearWindow(id){
+    let win = GetWindowWithId(id);
+    windows[win.type].value = windows[win.type].value.filter((e) => {return e.id !== id});
+    // reload.value += 1;
+}
+
+function GetWindowWithId(id){
+    for(let key of Object.keys(windows)){
+        for(let i = 0; i < windows[key].value.length; i++){
+            if(windows[key].value[i].id == id){
+                return windows[key].value[i];
+            }
+        }
+    }
+}
+
+function SaveWindowPos(data){
+    let win = GetWindowWithId(data.id);
+    if(win === undefined) return;
+    win.x = data.x;
+    win.y = data.y;
+}
+
+function SetOnTop(id){
+    let currentWindowId = "window-wrapper-" + id;
+    let currentWindow = document.getElementById(currentWindowId);
+
+    currentIndex += 1;
+    currentWindow.style.zIndex = currentIndex;
+}
 
 export {
     SetupHandle,
     SetSize,
-    SetPosition
+    SetPosition,
+    ResetPosition,
+    Windows,
+    ReloadRef,
+    ClearWindows,
+    CreateWindow,
+    GetWindowWithId,
+    SaveWindowPos,
+    ClearWindow
 }

client/src/views/HomeView.vue

@@ -5,17 +5,14 @@ import { RouterLink, RouterView } from 'vue-router'
 import WindowManager from '@/views/managers/WindowManager.vue'
 import { GetUser } from '@/services/User'
 
-// Gestionem ventanas
-import useEmitter from '@/services/Emitter';
-const emitter = useEmitter();
-
+import { CreateWindow } from '@/services/Windows'
 
 onMounted(() => {
   if(GetUser()){
-    emitter.emit("create-window", {type: "main_menu", id: "main_menu"})
+    CreateWindow({type: "main_menu", id: "main_menu"})
     return;
   }
-  emitter.emit("create-window", {type: "login", id: "login"});
+  CreateWindow({type: "login", id: "login"});
 }
 );
 

client/src/views/RegisterView.vue

@@ -31,7 +31,6 @@ function register(){
         const data = response.data;
 
         if(data.error){
-            console.log(data);
             errorMessage.value = data.msg;
         } else {
             errorMessage.value = "";

client/src/views/managers/WindowManager.vue

@@ -7,58 +7,33 @@ import RegisterWindow from '@/views/windows/RegisterWindow.vue'
 import ExampleWindow from '@/views/windows/ExampleWindow.vue'
 import MainMenuWindow from '@/views/windows/MainMenuWindow.vue'
 import EditProfileWindow from '@/views/windows/EditProfileWindow.vue'
+import AccountSettingsWindow from '../windows/AccountSettingsWindow.vue'
+
+import { Windows, ReloadRef } from '@/services/Windows';
 
 // Gestionem ventanas
 import useEmitter from '@/services/Emitter';
-const emitter = useEmitter();
 
-const reload = ref(0);
+const reload = ReloadRef();
+const windows = Windows();
 
-const windows = {
-    login: reactive([]),
-    register: reactive([]),
-    test: reactive([]),
-    main_menu: reactive([]),
-    edit_profile: reactive([]),
-};
-
-emitter.on("create-window", (data) => {
-    if(windows[data.type] === undefined){
-        console.log("Window type " + data.type + " is not defined!");
-        return;
-    }
-
-    let contains = false;
-    for (var i = 0; i < windows[data.type].length; i++) {
-        if(windows[data.type][i].id == data.id){
-            contains = true;
-            break;
-        }
-    }
-
-    console.log(contains);
-
-    if(!contains) {
-        windows[data.type].push(data);
-        // reload.value += 1;
-    }
-})
-
-
-emitter.on("clear-windows", (data) => {
-    windows[data.type] = [];
-    reload.value += 1;
-})
+// Win names
+const login = windows.login;
+const register = windows.register;
+const test = windows.test;
+const main_menu = windows.main_menu;
+const edit_profile = windows.edit_profile;
 
 </script>
 
 <template>
   <div class="window-container" :key="reload">
-    <LoginWindow v-for="window in windows.login" :key="window.id" :data="window"></LoginWindow>
-    <RegisterWindow v-for="window in windows.register" :key="window.id" :data="window"></RegisterWindow>
-    <ExampleWindow v-for="window in windows.test" :key="window.id" :data="window"></ExampleWindow>
-    <MainMenuWindow v-for="window in windows.main_menu" :key="window.id" :data="window"></MainMenuWindow>
-    <EditProfileWindow v-for="window in windows.edit_profile" :key="window.id" :data="window"></EditProfileWindow>
+    <LoginWindow v-for="win in login" :key="win.id" :data="win"></LoginWindow>
+    <RegisterWindow v-for="win in register" :key="win.id" :data="win"></RegisterWindow>
+    <ExampleWindow v-for="win in test" :key="win.id" :data="win"></ExampleWindow>
+    <MainMenuWindow v-for="win in main_menu" :key="win.id" :data="win"></MainMenuWindow>
+    <EditProfileWindow v-for="win in edit_profile" :key="win.id" :data="win"></EditProfileWindow>
+    <AccountSettingsWindow v-for="win in account_settings" :key="win.id" :data="win"></AccountSettingsWindow>
   </div>
 </template>
 
@@ -66,8 +41,9 @@ emitter.on("clear-windows", (data) => {
 <style>
 
 .window-wrapper {
-    background-color: var(--color-background-soft);
+    background-color: var(--window-background);
 
+    backdrop-filter: blur(10px);
     position: fixed;
 
 
@@ -76,13 +52,4 @@ emitter.on("clear-windows", (data) => {
     text-align: center;
 }
 
-.window-handle {
-    user-select: none;
-    font-family: MrEavesRemake;
-    justify-content: center;
-    width: 100%;
-
-    background-color: var(--color-handler);
-}
-
 </style>

client/src/views/partials/EditUserPartial.vue

@@ -10,6 +10,7 @@ import Api from '@/services/Api'
 import url from '@/services/BackendURL'
 
 import useEmitter from '@/services/Emitter';
+import { ClearWindows, CreateWindow } from '../../services/Windows';
 const emitter = useEmitter();
 
 const username = ref("");
@@ -25,12 +26,12 @@ function retrieveAvatar(){
 function LogOut(){
     LogoutUser();
 
-    emitter.emit("clear-windows", {type: "main_menu"});
-    emitter.emit("create-window", {type: "login", id: "login"})
+    ClearWindows({type: "main_menu"});
+    CreateWindow({type: "login", id: "login"});
 }
 
 function EditProfile(){
-    emitter.emit("create-window", {type: "edit_profile", id: "edit_profile"})
+    CreateWindow({type: "edit_profile", id: "edit_profile"});
 }
 
 onMounted(() => {
@@ -67,13 +68,14 @@ onMounted(() => {
 
     <div class="main-user-container">
         <div class="main-user-container-inner">
-            <img class="user-icon" src="img/def-avatar.jpg" id="upload-image">
+            <img class="user-icon" src="img/def-avatar.jpg" id="upload-image" draggable="false">
             <div class="main-user-info">
                 <b>{{ username }}</b><br>Miauler
             </div>
 
             <div class="main-user-actions">
                 <button class="btn-primary button-small" v-on:click.prevent="EditProfile">Edit profile</button>
+                <button class="btn-primary button-small" v-on:click.prevent="EditProfile">Settings</button>
                 <button class="btn-primary button-small" v-on:click.prevent="LogOut">Log out</button>
             </div>
         </div>
@@ -95,7 +97,7 @@ onMounted(() => {
 .main-user-container {
     background-color: var(--color-background-softer);
     width: 100%;
-
+    user-select: none;
 }
 
 .main-user-container-inner {

client/src/views/partials/WindowHandle.vue

@@ -0,0 +1,81 @@
+<script setup>
+import { ref } from 'vue';
+import { GetWindowWithId } from '@/services/Windows';
+import { ClearWindow } from '../../services/Windows';
+
+const props = defineProps(['window']);
+const id = props.window;
+
+const closeButton = ref(null);
+
+const title = ref("");
+const close = ref(false);
+
+function setupHandle() {
+    let handleInfo = GetWindowWithId(id).handle;
+
+    if(handleInfo.title) title.value = handleInfo.title;
+    if(handleInfo.close) close.value = true;
+}
+
+function CloseButton(){
+    ClearWindow(id)
+}
+
+defineExpose({
+    setupHandle
+})
+</script>
+
+
+<template>
+    <div class="window-handle" :id="'window-handle-' + id">
+
+        <div class="left"></div>
+        <div class="center">
+            <span>{{ title }}</span>
+        </div>
+        <div class="right">
+            <img class="icon" src="icons/iconoir/regular/xmark.svg" draggable="false" ref="closeButton" v-if="close" v-on:click="CloseButton">
+        </div>
+        <!-- span>{{ title }}</span>
+            
+        -->
+    </div>
+</template>
+
+
+<style scoped lang="scss">
+
+.window-handle {
+    
+    .left, .right {
+        flex: 1;
+        display: flex;
+    }
+
+    .left {
+        justify-content: left;
+    }
+
+    .right {
+        justify-content: right;
+    }
+
+    span {
+        font-family: MrEavesRemake;
+    }
+
+    img {
+    }
+
+    user-select: none;
+    justify-content: center;
+    width: 100%;
+
+    display: flex;
+    
+    background-color: var(--color-handler);
+}
+
+</style>

client/src/views/windows/AccountSettingsWindow.vue

@@ -0,0 +1,64 @@
+<script setup>
+
+import VersionRender from '@/views/others/VersionRender.vue'
+import ErrorMessage from '@/views/others/ErrorMessage.vue'
+
+import { onMounted, onUpdated, ref } from 'vue';
+import { SetupHandle, SetSize, SetPosition, ResetPosition } from '@/services/Windows';
+
+const handle = ref(null);
+
+import Api from '@/services/Api.js'
+
+const props = defineProps(['data']);
+const data = props.data;
+
+let id = data.id;
+let title = data.title;
+
+onMounted(() => {
+    SetupHandle(id, handle, {title: "Example window", close: true});
+    SetSize(id, {x: 500, y: 380});
+    ResetPosition(id, "center");
+});
+</script>
+
+
+<template>
+    <div class="window-wrapper" :id="'window-wrapper-' + id">
+        <WindowHandle :window="id" ref="handle"></WindowHandle>
+
+        <!-- Body -->
+
+    </div>
+</template>
+
+
+<style scoped>
+.window-wrapper {
+    min-width: 700px;
+    min-height: 630px;
+
+    display: flex;
+    align-items: center;
+}
+
+.splash-image {
+    width: 600px;
+    height: 250px;
+}
+
+.form-field {
+    padding: 10px;
+    display: flex;
+    align-items: left;
+    flex-direction: column;
+    justify-content: left;
+    width: 600px;
+}
+
+label {
+    text-align: left;
+}
+
+</style>

client/src/views/windows/EditProfileWindow.vue

@@ -1,7 +1,8 @@
 <script setup>
+import WindowHandle from '@/views/partials/WindowHandle.vue';
 
-import { onMounted, ref } from 'vue';
-import { SetupHandle, SetSize, SetPosition } from '@/services/Windows';
+import { onMounted, onUpdated, ref } from 'vue';
+import { SetupHandle, SetSize, SetPosition, ResetPosition } from '@/services/Windows';
 
 import Api from '@/services/Api.js'
 
@@ -11,24 +12,21 @@ const emitter = useEmitter();
 const props = defineProps(['data']);
 const data = props.data;
 
+const handle = ref(null);
+
 let id = data.id;
 
 onMounted(() => {
-    SetupHandle(id);
+    SetupHandle(id, handle, {title: "Edit profile", close: true});
     SetSize(id, {x: 500, y: 380});
-    SetPosition(id, "center");
+    ResetPosition(id, "center");
 });
 </script>
 
 
 <template>
     <div class="window-wrapper" :id="'window-wrapper-' + id">
-        <div class="window-handle" :id="'window-handle-' + id">
-            Edit profile
-        </div>
-
-        <!-- Body -->
-
+        <WindowHandle :window="id" ref="handle"></WindowHandle>
     </div>
 </template>
 

client/src/views/windows/ExampleWindow.vue

@@ -3,14 +3,13 @@
 import VersionRender from '@/views/others/VersionRender.vue'
 import ErrorMessage from '@/views/others/ErrorMessage.vue'
 
-import { onMounted, ref } from 'vue';
-import { SetupHandle, SetSize, SetPosition } from '@/services/Windows';
+import { onMounted, onUpdated, ref } from 'vue';
+import { SetupHandle, SetSize, SetPosition, ResetPosition } from '@/services/Windows';
+
+const handle = ref(null);
 
 import Api from '@/services/Api.js'
 
-import useEmitter from '@/services/Emitter';
-const emitter = useEmitter();
-
 const props = defineProps(['data']);
 const data = props.data;
 
@@ -18,18 +17,16 @@ let id = data.id;
 let title = data.title;
 
 onMounted(() => {
-    SetupHandle(id);
+    SetupHandle(id, handle, {title: "Example window", close: true});
     SetSize(id, {x: 500, y: 380});
-    SetPosition(id, "center");
+    ResetPosition(id, "center");
 });
 </script>
 
 
 <template>
     <div class="window-wrapper" :id="'window-wrapper-' + id">
-        <div class="window-handle" :id="'window-handle-' + id">
-            {{ title }}
-        </div>
+        <WindowHandle :window="id" ref="handle"></WindowHandle>
 
         <!-- Body -->
 

client/src/views/windows/LoginWindow.vue

@@ -4,14 +4,16 @@ import VersionRender from '@/views/others/VersionRender.vue'
 import ErrorMessage from '@/views/others/ErrorMessage.vue'
 import SuccessMessage from '@/views/others/SuccessMessage.vue'
 
-import { onMounted, ref } from 'vue';
-import { SetupHandle, SetSize, SetPosition } from '@/services/Windows';
+import { onMounted, onUpdated, ref } from 'vue';
+import { SetupHandle, SetSize, SetPosition, ResetPosition } from '@/services/Windows';
 import { SetUser } from '@/services/User'
 
 import Api from '@/services/Api.js'
 
-import useEmitter from '@/services/Emitter';
-const emitter = useEmitter();
+import WindowHandle from '@/views/partials/WindowHandle.vue';
+import { ClearWindows, CreateWindow } from '../../services/Windows';
+
+const handle = ref(null);
 
 const username = ref("");
 const password = ref("");
@@ -28,9 +30,10 @@ let success = data.msg;
 
 onMounted(() => {
   successMessage.value = success;
-  SetupHandle(id);
+
+  SetupHandle(id, handle, {title: "Login"});
   SetSize(id, {x: 700, y: 630});
-  SetPosition(id, "center");
+  ResetPosition(id, "center");
 });
 
 function login(){
@@ -58,13 +61,13 @@ function login(){
 }
 
 function ShowRegister(){
-  emitter.emit("clear-windows", {type: "login"});
-  emitter.emit("create-window", {type: "register", id: "register"})
+  ClearWindows({type: "login"});
+  CreateWindow({type: "register", id: "register"});
 }
 
 function ShowMainMenu(){
-  emitter.emit("clear-windows", {type: "login"});
-  emitter.emit("create-window", {type: "main_menu", id: "main_menu"})
+  ClearWindows({type: "login"});
+  CreateWindow({type: "main_menu", id: "main_menu"});
 }
 
 </script>
@@ -72,9 +75,7 @@ function ShowMainMenu(){
 
 <template>
     <div class="window-wrapper" :id="'window-wrapper-' + id">
-        <div class="window-handle" :id="'window-handle-' + id">
-            Login
-        </div>
+        <WindowHandle :window="id" ref="handle"></WindowHandle>
 
         <img src="img/logo-splash.png" class="splash-image" draggable="false">
 
@@ -109,6 +110,7 @@ p {
 .window-wrapper {
     min-width: 700px;
     min-height: 630px;
+    user-select: none;
 
     display: flex;
     align-items: center;

client/src/views/windows/MainMenuWindow.vue

@@ -1,17 +1,18 @@
 <script setup>
 
 import VersionRender from '@/views/others/VersionRender.vue'
-import ErrorMessage from '@/views/others/ErrorMessage.vue'
+import WindowHandle from '@/views/partials/WindowHandle.vue';
 
 import EditUserPartial from '@/views/partials/EditUserPartial.vue'
 
-import { onMounted, ref } from 'vue';
-import { SetupHandle, SetSize, SetPosition } from '@/services/Windows';
+import { onMounted, onUpdated, ref } from 'vue';
+import { SetupHandle, SetSize, SetPosition, ResetPosition } from '@/services/Windows';
 
 import Api from '@/services/Api.js'
 
 import useEmitter from '@/services/Emitter';
 const emitter = useEmitter();
+const handle = ref(null);
 
 const props = defineProps(['data']);
 
@@ -21,9 +22,9 @@ let id = data.id;
 let title = data.title;
 
 onMounted(() => {
-    SetupHandle(id);
-    SetSize(id, {x: 500, y: 380});
-    SetPosition(id, "center");
+    SetupHandle(id, handle, {title: "Dragonroll"});
+    SetSize(id, {x: 500, y: 450});
+    ResetPosition(id, "center", emitter);
 });
 
 </script>
@@ -31,9 +32,7 @@ onMounted(() => {
 
 <template>
     <div class="window-wrapper" :id="'window-wrapper-' + id">
-        <div class="window-handle" :id="'window-handle-' + id">
-            Dragonroll
-        </div>
+        <WindowHandle :window="id" ref="handle"></WindowHandle>
 
         <EditUserPartial></EditUserPartial>
 
@@ -42,6 +41,7 @@ onMounted(() => {
         <div class="button-container">
             <button class="btn-primary button-expand">My campaings</button>
             <button class="btn-primary button-expand">Join existing campaign</button>
+            <button class="btn-primary button-expand">Database</button>
         </div>
         <VersionRender></VersionRender>
     </div>
@@ -74,6 +74,7 @@ p {
 .window-wrapper {
     display: flex;
     align-items: center;
+    user-select: none;
 }
 
 .splash-image {

client/src/views/windows/RegisterWindow.vue

@@ -2,23 +2,24 @@
 
 import VersionRender from '@/views/others/VersionRender.vue'
 import ErrorMessage from '@/views/others/ErrorMessage.vue'
+import WindowHandle from '@/views/partials/WindowHandle.vue';
 
-import { onMounted, ref } from 'vue';
-import { SetupHandle, SetSize, SetPosition } from '@/services/Windows';
+import { onMounted, onUpdated, ref } from 'vue';
+import { SetupHandle, SetSize, SetPosition, ResetPosition } from '@/services/Windows';
 
 import Api from '@/services/Api.js'
 
-import useEmitter from '@/services/Emitter';
-const emitter = useEmitter();
+import { ClearWindows, CreateWindow } from '../../services/Windows';
 
 const email = ref("");
 const name = ref("");
 const username = ref("");
 const password = ref("");
 const confirmPassword = ref("");
-
 const errorMessage = ref("");
 
+const handle = ref(null);
+
 const props = defineProps(['data']);
 
 const data = props.data;
@@ -27,11 +28,12 @@ let id = data.id;
 let title = data.title;
 
 onMounted(() => {
-    SetupHandle(id);
+    SetupHandle(id, handle, {title: "Register"});
     SetSize(id, {x: 700, y: 630});
-    SetPosition(id, "center");
+    ResetPosition(id, "center");
 });
 
+
 function register(){
   if(password.value != confirmPassword.value){
       errorMessage.value = "Password mismatch";
@@ -62,8 +64,8 @@ function register(){
 }
 
 function ShowLogin(msg){
-  emitter.emit("clear-windows", {type: "register"});
-  emitter.emit("create-window", {type: "login", id: "login", success: msg})
+    ClearWindows({type: "register"});
+    CreateWindow({type: "login", id: "login", success: msg});
 }
 
 </script>
@@ -71,9 +73,7 @@ function ShowLogin(msg){
 
 <template>
     <div class="window-wrapper" :id="'window-wrapper-' + id">
-        <div class="window-handle" :id="'window-handle-' + id">
-            Register
-        </div>
+        <WindowHandle :window="id" ref="handle"></WindowHandle>
 
         <div class="window-content">
         <img src="img/logo-splash.png" class="splash-image" draggable="false">