Untitled

<script setup lang="ts">
import { api } from 'src/boot/axios';
import { ref } from 'vue';

const password = ref('');
const username = ref('');

const loginShite = async () => {
  let res = await api.post('https://nocturna.ngrok.dev/api/auth/register', {
    username: username.value,
    password: password.value,
  });

  console.log(res);
};
</script>

<template>
  <h1 class="text-center">Login</h1>
  <q-page class="column items-center justify-evenly">
    <div class="md:flex md:items-center q-pa-xl bg-dark" id="wrapper">
      <form class="w-full max-w-sm">
        <div class="md:flex md:items-center mb-6">
          <div class="md:w-2/3">
            <q-input
              v-model="username"
              class="bg-gray-200 appearance-none border-2 border-gray-200 rounded w-full py-2 px-4 text-gray-700 leading-tight focus:outline-none focus:bg-white focus:border-purple-500"
              id="inline-full-name"
              type="text"
              label="Username"
            />
          </div>
        </div>
        <div class="md:flex md:items-center mb-6">
          <div class="md:w-2/3">
            <q-input
              v-model="password"
              class="bg-gray-200 appearance-none border-2 border-gray-200 rounded w-full py-2 px-4 text-gray-700 leading-tight focus:outline-none focus:bg-white focus:border-purple-500"
              id="inline-password"
              type="password"
              label="Password"
            />
          </div>
        </div>
        <div class="md:flex md:items-center">
          <br />
          <div class="md:w-1/3"></div>
          <div class="md:w-2/3">
            <button
              class="shadow bg-positive hover:bg-purple-400 focus:shadow-outline focus:outline-none text-white font-bold py-2 px-4 rounded"
              type="button"
              @click="loginShite"
            >
              Log in
            </button>
          </div>
        </div>
      </form>
    </div>
  </q-page>
</template>

<style lang="scss" scoped>
#wrapper {
  border: 4px solid $dark-page;
  box-shadow: 20px 22px 4.3px 0px rgba(0, 0, 0, 0.25) inset;
  filter: drop-shadow(33px 29px 4.300000190734863px rgba(0, 0, 0, 0.52));
}
h1 {
  background-image: url('../assets/banners/main/banner-main.svg');
  background-repeat: no-repeat;
  background-position: center;
  color: $dark;
  margin-top: 20px;
  height: 125px;
  width: 427px;
  font-size: 4.5rem;
  position: absolute;
  left: 0;
  right: 0;
  margin-left: auto;
  margin-right: auto;
}
</style>