styling changes, added basic logics for registering accounts

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">