client/src/components/screens/Login.vue

<template>
  <div class="login-screen">
    <div class="content-wrapper">
      <h1 class="main-title">NEW QUEST</h1>
      <form @submit.prevent="loginFunc">
        <div class="content-elements">
          <div class="login-form">
            <div class="form-field">
              <label for="username">Username</label>
              <input id="username" v-model="username" type="text" name="username" required autofocus />
            </div>
            <div class="form-field">
              <label for="password">Password</label>
              <input id="password" v-model="password" type="password" name="password" required />
            </div>
          </div>
          <div class="row-buttons">
            <button class="button btn-cyan" type="submit"><span>PLAY</span></button>
            <button class="button btn-cyan" type="button" @click.prevent="registerFunc"><span>REGISTER</span></button>
            <button class="button btn-cyan"><span>CREDITS</span></button>
          </div>
        </div>
      </form>
    </div>
  </div>
  <audio ref="bgm" id="bgm" src="/assets/music/bgm.mp3" loop autoplay></audio>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { login, register } from '@/services/authentication'
import { useNotificationStore } from '@/stores/notifications'
import ZoneEditor from '@/components/utilities/zoneEditor/ZoneEditor.vue'
import Modal from '@/components/utilities/Modal.vue'
import { useSocketStore } from '@/stores/socket'

const bgm = ref('bgm')
if (bgm.value.paused) {
  window.addEventListener('click', () => bgm.value.play())
  window.addEventListener('keydown', () => bgm.value.play())
}

const socket = useSocketStore()
const notifications = useNotificationStore()
const username = ref('')
const password = ref('')

async function loginFunc() {
  // check if username and password are valid
  if (username.value === '' || password.value === '') {
    notifications.addNotification({ message: 'Please enter a valid username and password' })
    return
  }

  // send login event to server
  const response = await login(username.value, password.value)

  if (response.success === undefined) {
    notifications.addNotification({ message: response.error })
    return
  }

  socket.setToken(response.token)
  socket.initConnection();
}

async function registerFunc() {
  // check if username and password are valid
  if (username.value === '' || password.value === '') {
    notifications.addNotification({ message: 'Please enter a valid username and password' })
    return
  }

  // send register event to server
  const response = await register(username.value, password.value)

  if (response.success === undefined) {
    notifications.addNotification({ message: response.error })
    return
  }

  socket.setToken(response.token)
  socket.initConnection();
}
</script>

<style scoped lang="scss">
@import '@/assets/scss/main';

.login-screen {
  &::before {
    content: '';
    position: absolute;
    background-image: url('/assets/shapes/select-screen-bg-shape.svg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% cover;
    width: 100%;
    height: 100%;
    z-index: 1;
    pointer-events: none;
  }
  background-color: $dark-gray;

  .content-wrapper {
    z-index: 2;
    width: 100%;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-direction: column;
    position: relative;
    &::before {
      content: '';
    }

    .content-elements {
      margin: 80px 0;
      width: inherit;
      display: flex;
      flex-direction: column;
      gap: 24px;

      .login-form {
        width: inherit;
        display: grid;
        gap: 15px;

        .form-field {
          display: flex;
          flex-direction: column;
          background-color: rgba($white, 0.5);
          border-radius: 3px;
          border: $light-gray 1px solid;
          min-width: 500px;
          margin: 0 auto;

          label {
            color: $black;
            background-color: rgba($white, 0.5);
            padding: 4px;
            font-size: 0.875rem;
            border-radius: 3px 3px 0 0;
          }

          input {
            padding: 4px;
            font-size: 0.875rem;

            &:focus-visible {
              outline: none;
            }
          }
        }
      }

      .row-buttons {
        display: flex;
        justify-content: center;
        gap: 15px;

        .button {
          padding: 8px 0;
          min-width: 100px;

          span {
            margin: auto;
          }
        }
      }
    }
  }

  .main-title {
    margin-top: 115px;
    text-align: center;
    font-size: 4rem;
  }

  a {
    text-decoration: none;
  }

  // Mobile screens (< 450px)
  @media screen and (max-width: 550px) {
    .content-wrapper {
      .content-elements {
        .login-form {
          .form-field {
            width: 100%;
            min-width: unset;
          }
        }
        .row-buttons {
          gap: 8px;
        }
      }
    }
  }
}
</style>