<script setup>
import { request } from "../assets/helpers.js";
import { ref } from "vue";

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

const error = ref("");

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

function success() {
	alert("Successfully registered an account");
}
</script>

<template>
  <main>
    <h1>REGISTER</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="register">Register</button>
  </main>
</template>

