backup

frontend/app/components/windows/LoginWindow.vue

@@ -1,8 +1,19 @@
 <script setup>
 import { onMounted, ref } from 'vue';
-import { SetupHandle, SetSize, ResetPosition } from '@/services/Windows';
+import { 
+    SetupHandle,
+    SetSize,
+    ResetPosition,
+    SetResizable,
+    SetMovable,
+    ClearWindow,
+    CreateWindow,
+} from '@/services/Windows';
 
 import WindowHandle from './partials/WindowHandle.vue';
+import { DisplayToast } from '~/services/Toaster';
+import Server from '~/services/Server';
+import { SetUser } from '~/services/User';
 
 const handle = ref(null);
 
@@ -11,13 +22,44 @@ const data = props.data;
 
 let id = data.id;
 
-const test = ref(null)
+const username = ref("");
+const password = ref("");
 
 onMounted(() => {
     SetupHandle(id, handle);
-    SetSize(id, {width: 500, height: 380});
+    SetSize(id, {width: 450, height: 480});
+    SetMovable(id, false);
+    SetResizable(id, false);
     ResetPosition(id, "center");
 });
+
+function login() {
+    Server().post('/user/login', { username: username.value, password: password.value }).then((response) => {
+    const data = response.data;
+    console.log(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);
+    }
+  });
+}
+
+function toRegister(){
+    CreateWindow('register');
+    ClearWindow('login');
+}
 </script>
 
 
@@ -26,8 +68,30 @@ onMounted(() => {
         <WindowHandle :window="id" ref="handle"></WindowHandle>
 
         <!-- Body -->
-        <div ref="test">
-            <p>Hola</p>
+        <div class="vert-expand">
+            <picture align="center">
+            <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" class="splash-image" draggable="false">
+            </picture>
+
+            <form v-on:submit.prevent="login">
+                <div class="form-field">
+                    <label for="username">Username</label>
+                    <input id="username-field" type="text" placeholder="Enter your username here..." name="username" v-model="username" autocomplete="off" >
+                </div>
+                <div class="form-field">
+                    <label for="password">Password</label>
+                    <input id="password-field" type="password" placeholder="Enter your password..." name="password" v-model="password" autocomplete="off" >
+                </div>
+                <div class="form-field">
+                    <button class="btn-primary sound-click">Log in</button>
+                </div>
+                <div class="form-field center">
+                    <p>You don't have an account? <a href="#" @click.prevent="toRegister">Register</a></p>
+                </div>
+            </form>
+            
         </div>
 
     </div>
@@ -35,10 +99,41 @@ onMounted(() => {
 
 
 <style scoped>
+p {
+  user-select: none;
+}
+
+.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;
+}
+
 </style>