RegisterForm.vue

<template>
  <form action="">
    <div class="modal-card" style="width: auto">
      <header class="modal-card-head">
        <p class="modal-card-title">Sign up</p>
      </header>
      <section class="modal-card-body">
        <h2 class="subtitle has-text-danger">{{errorMessage}}</h2>
        <b-field label="Email">
          <b-input type="email" v-model="email" placeholder="email" required maxlength="50"/>
        </b-field>

        <b-field label="Username">
          <b-input v-model="username" placeholder="username" required maxlength="30"/>
        </b-field>

        <b-field label="Password">
          <b-input type="password" v-model="password" password-reveal placeholder="password" required maxlength="50"/>
        </b-field>

        <b-field label="Confirm password">
          <b-input type="password" v-model="passwordConfirm" password-reveal placeholder="password" required maxlength="50"/>
        </b-field>

      </section>
      <footer class="modal-card-foot">
        <button class="button is-primary" @click="onRegister">Make account</button>
      </footer>
    </div>
  </form>
</template>

<script>
export default {
  name: 'RegisterForm',
  data () {
    return {
      email: '',
      username: '',
      password: '',
      passwordConfirm: '',
      errorMessage: null
    }
  },
  methods: {
    async onRegister () {
      if (this.password !== this.passwordConfirm) {
        this.errorMessage = 'Passwords are different'
        return
      }
      const response = await this.register(this.username, this.email, this.password)
      if (response.error) {
        this.errorMessage = response.message
      } else {
        await localStorage.setItem('token', response.token)
        this.$parent.close()
        this.$router.go()
      }
    },
    async register (username, email, password) {
      const url = this.$serverurl + 'user'
      try {
        const response = await fetch(
          url, {
            method: 'POST',
            headers: {
              Accept: 'application/json',
              'Content-Type': 'application/json'
            },
            body: JSON.stringify({
              email: email,
              username: username,
              password: password
            })
          }
        )
        return await response.json()
      } catch (error) {
        return null
      }
    }
  }
}
</script>

<style scoped>

</style>