<template>
  <div>
    <section>
      <div class="title is-4 has-text-white-ter has-text-centered">Register</div>
      <div class="control my-2">
        <input type="text" placeholder="Username"
               aria-label="Username" v-model="username">
      </div>
      <div class="control my-2">
        <input type="password" placeholder="Password"
               aria-label="Password" v-model="password">
      </div>
      <div class="buttons is-flex is-justify-content-end mt-5">
        <button @click="submit">Submit</button>
      </div>
    </section>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { useRouter } from 'vue-router';
import { register } from '@/api/composed';

const router = useRouter();

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

const submit = async () => {
  const resp = await register(username.value, password.value);
  if (!resp) throw new Error('Could not get response from registration');
  success.value = resp.success;
  if (success.value) {
    await router.push('/');
  }
};
</script>

<style scoped lang="stylus">

</style>
