From 4d4df7cd9969782b0c7091b8d66e347a9d5b87bf Mon Sep 17 00:00:00 2001
From: Dennis Postma <dennis@directonline.io>
Date: Fri, 3 May 2024 18:55:00 +0200
Subject: [PATCH] styling changes, added basic logics for registering accounts

---
 src/App.vue                      |  4 ++--
 src/assets/login.scss            |  8 ++++----
 src/components/screens/Login.vue | 32 ++++++++++++++++++++++++++------
 3 files changed, 32 insertions(+), 12 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index ecb3943..b32614d 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -7,11 +7,11 @@
 <script setup lang="ts">
 import Game from '@/components/Game.vue'
 import Login from '@/components/screens/Login.vue'
-import config from '@/config'
 import { onMounted, type Ref, ref } from 'vue'
+import SocketioService from '@/services/socketio.service';
+
 const screen:Ref<string> = ref('login');
 
-import SocketioService from '@/services/socketio.service';
 onMounted(() => {
   SocketioService.setupSocketConnection();
 });
diff --git a/src/assets/login.scss b/src/assets/login.scss
index 767b5f9..2dc48f8 100644
--- a/src/assets/login.scss
+++ b/src/assets/login.scss
@@ -37,12 +37,12 @@
         label {
           color: #000;
           background-color: rgba(255, 255, 255, 0.5);
-          padding: 0.25rem 0.5rem;
+          padding: 0.15rem 0.5rem;
         }
         input {
           background-color: transparent;
           border: none;
-          padding: 0.5rem 0.25rem;
+          padding: 0.25rem 0.25rem;
           font-size: 16px;
         }
       }
@@ -56,11 +56,11 @@
     bottom: 5rem;
 
     .button {
-      padding: 1.2rem 0;
+      padding: 1rem 0;
       min-width: 6rem;
       text-align: center;
       position: relative;
-      font-size: 12px;
+      font-size: 10px;
 
       &.button-1 {
         background-image: url('/assets/Button_1.png');
diff --git a/src/components/screens/Login.vue b/src/components/screens/Login.vue
index a37c92d..6aaf5b2 100644
--- a/src/components/screens/Login.vue
+++ b/src/components/screens/Login.vue
@@ -7,21 +7,21 @@
     <div class="login-form">
       <form method="post">
         <div class="form-field">
-          <label for="username">USERNAME</label>
-          <input type="text" name="username" required>
+          <label for="username">Username</label>
+          <input v-model="username" type="text" name="username" required>
         </div>
         <div class="form-field">
-          <label for="password">PASSWORD</label>
-          <input type="password" name="password" required>
+          <label for="password">Password</label>
+          <input v-model="password" type="password" name="password" required>
         </div>
       </form>
     </div>
 
     <div class="row-buttons">
-      <button class="button button-1" id="submit">
+      <button class="button button-1" id="submit" @click="submit">
         LOGIN
       </button>
-      <button class="button button-2">
+      <button class="button button-2" @click="register">
         REGISTER
       </button>
       <button class="button button-3">
@@ -33,6 +33,7 @@
 
 <script setup>
 import { ref, onMounted } from 'vue'
+import SocketioService from '@/services/socketio.service';
 
 
 // const bgm = ref('bgm');
@@ -46,6 +47,25 @@ import { ref, onMounted } from 'vue'
 //   }
 //
 // })
+
+// on login form submit
+const submit = () => {
+  console.log('submit');
+}
+
+const username = ref('');
+const password = ref('');
+
+function register() {
+  // check if username and password are valid
+  if (username.value === '' || password.value === '') {
+    alert('Please enter a valid username and password');
+    return;
+  }
+
+  // send register event to server
+  SocketioService.socket.emit('register', username.value, password.value);
+}
 </script>
 
 <style scoped lang="scss">