<script setup>
import { request } from "../assets/helpers.js";
import { ref } from "vue";
import { useRouter } from "vue-router";
import { useEventBus } from "@vueuse/core";

const router = useRouter();
const bus = useEventBus("login");

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

const error = ref("");

function login() {
	request("POST", "/login", { username: username.value.value, password: password.value.value })
		.catch(err => error.value = err)
		.then(success);
}

function success() {
	bus.emit();
	router.push("/");
}
</script>

<template>
  <main>
    <h1>LOGIN</h1>

    <br>

	<label>
		Username <br>
		<input ref="username" type="text" required>
	</label>

	<br><br>

	<label>
		Password <br>
		<input ref="password" type="password" required>
	</label>

	<p class="error">{{ error }}</p>

    <button @click="login">Login</button>
  </main>
</template>
