KnockOutWhist-Frontend/src/views/LoginView.vue

<template>
  <div class="login-box q-col-gutter-sm">
    <div class="text-h3 text-center row">
      <img src="/logo.png" alt="Logo" style="height: 60px; margin-right: 10px;" />
    </div>
    <q-form @submit.prevent="onSubmit"
            class="q-gutter-md row justify-center"
            style="width: 100%">

      <div class="row q-col-gutter-sm" style="width: 100%">
        <q-input
          style="width: 100%"
          filled
          dark
          label-color="white"
          color="white"
          v-model="username"
          label="Username *"

          :error="!!loginError"
          :error-message="loginError"

          lazy-rules
          :rules="[ val => val && val.length > 0 || 'Username is required']"
        />
      </div>

      <div class="row q-col-gutter-sm" style="width: 100%">
        <q-input
          style="width: 100%"
          filled
          dark
          type="password"
          label-color="white"
          color="white"
          v-model="password"
          label="Password *"
          :error="!!loginError"
          :error-message="loginError"

          lazy-rules
          :rules="[
            val => !!val || 'Password is required'
          ]"
        />
      </div>

      <div class="row justify-center">
        <q-btn type="submit" label="Login" push color="dark" />
      </div>
    </q-form>
  </div>
  <vue-particles
    id="particles-js"
    :options='options'
  />
</template>

<script lang="ts" setup>

import { useQuasar } from 'quasar'
import { ref } from 'vue'
import axios from "axios";
import router from "@/router";
import {useUserInfo} from "@/composables/useUserInfo.ts";

const api = window?.__RUNTIME_CONFIG__?.API_URL;

const $q = useQuasar()

const username = ref(null)
const password = ref(null)
const inProgress = ref(false)
const loginError = ref('')
const uInfo = useUserInfo()

const onSubmit = () => {
  if (inProgress.value) return
  inProgress.value = true
  loginError.value = ''
  axios.post(`${api}/login`, {username: username.value, password: password.value}, {withCredentials: true}).then((response) => {
    uInfo.setUserInfo(response.data.user.username, response.data.user.id)
    router.push("/mainmenu")
  }).catch(() => {
    loginError.value = 'Invalid username or password'
  }).finally(() =>
    inProgress.value = false
  )
}

const options = {
  "particles": {
    "number": {
      "value": 80,
      "density": {
        "enable": true,
        "area": 800
      }
    },
    "color": {
      "value": "#ffffff"
    },
    "shape": {
      "type": "circle",
      "stroke": {
        "width": 0,
        "color": "#000000"
      },
      "polygon": {
        "sides": 5
      }
    },
    "opacity": {
      "value": 0.5,
      "random": false,
      "animation": {
        "enable": false,
        "speed": 1,
        "minimumValue": 0.1,
        "sync": false
      }
    },
    "size": {
      "value": 3,
      "random": true,
      "animation": {
        "enable": false,
        "speed": 40,
        "minimumValue": 0.1,
        "sync": false
      }
    },
    "links": {
      "enable": true,
      "distance": 150,
      "color": "#ffffff",
      "opacity": 0.4,
      "width": 1
    },
    "move": {
      "enable": true,
      "speed": 1,
      "direction": "none",
      "random": false,
      "straight": false,
      "outModes": {
        "default": "out"
      },
      "attract": {
        "enable": false,
        "rotate": {
          "x": 600,
          "y": 1200
        }
      }
    }
  },
  "interactivity": {
    "detectsOn": "canvas",
    "events": {
      "onHover": {
        "enable": false,
        "mode": "repulse"
      },
      "onClick": {
        "enable": false,
        "mode": "push"
      },
      "resize": true
    },
    "modes": {
      "grab": {
        "distance": 400,
        "links": {
          "opacity": 1
        }
      },
      "bubble": {
        "distance": 400,
        "size": 40,
        "duration": 2,
        "opacity": 8,
        "speed": 3
      },
      "repulse": {
        "distance": 200,
        "duration": 0.4
      },
      "push": {
        "quantity": 4
      },
      "remove": {
        "quantity": 2
      }
    }
  },
  "detectRetina": true
};

</script>

<style scoped>
.login-box {
  position: fixed;
  align-items: center;
  justify-content: center;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  width: 100%;
  max-width: 420px;
  padding: 1rem;
  z-index: 2;
  background-color: var(--color-background);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}
</style>