<script setup>
  import router from '@/router'
</script>

<template>
  <form>
    <label for="username">Username:</label>
    <input type="text" id="username" v-model="username" placeholder="Username" />
    <label for="email">Email:</label>
    <input type="email" id="email" v-model="email" placeholder="Email" />
    <label for="password">Password:</label>
    <input type="password" id="password" v-model="password" placeholder="Password" />
    <button @click.prevent="formAction">Sign up</button>
  </form>
</template>

<script>
import User from '@/api/user'
export default {
  data() {
    return {
      username: '',
      email: '',
      password: ''
    }
  },
  methods: {
    async formAction() {
      const status = await User.registerUser({ username: this.username, email: this.email, password: this.password })
      if (status.code == 201) {
        throw router.push('/')
      }
    }
  }
}
</script>
