<template>
  <div>
    <div class="flex items-center justify-center">
      <div class="sm:block">
        <div class="p-5 mx-auto text-left font-raleway">
          <h1 class="font-bold text-left font-montserrat text-3xl sm:text-5xl mb-7">
            Sign Up to join DD-Code
          </h1>
          <p v-show="error" class="text-lg text-red-500">{{ errorMsg }}</p>
          <form @submit="register">
            <div class="my-4">
              <h1 class="text-left font-bold mb-2 text-xl sm:text-2xl font-montserrat">Name</h1>
              <input type="text" v-model="name" class="text-xl outline-none pb-2 w-4/5 bg-transparent border-b hover:border-blue-700 focus:border-blue-700">
            </div>
            <div class="my-4">
              <h1 class="text-left font-bold mb-2 text-xl sm:text-2xl font-montserrat">Email</h1>
              <input type="email" v-model="email" class="text-xl outline-none pb-2 w-4/5 bg-transparent border-b hover:border-blue-700 focus:border-blue-700">
            </div>
            <div class="my-4">
              <h1 class="text-left font-bold mb-2 text-xl sm:text-2xl font-montserrat">Password</h1>
              <input type="password" v-model="password" class="text-xl outline-none pb-2 w-4/5 bg-transparent border-b hover:border-blue-700 focus:border-blue-700">
            </div>
            <div class="my-4">
              <h1 class="text-left font-bold mb-2 text-xl sm:text-2xl font-montserrat">Username</h1>
              <input type="text" v-model="username" class="text-xl outline-none pb-2 w-4/5 bg-transparent border-b hover:border-blue-700 focus:border-blue-700">
            </div>

            <button type="submit" :disabled="name.length < 6 || password.length < 6 || username.length < 3" class="bg-green-400 p-5 text-white">
              Sign Up <span class="fa fa-arrow-right"/>
            </button>
          </form>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: 'Register',
  data() {
    return {
      name: '',
      email: '',
      password: '',
      username: '',
      error: false,
      errorMsg: `An Error occurred, please try again`
    }
  },
  methods: {
    async register(e) {
      const vm = this
      try {
        e.preventDefault()
        await vm.axios.post(`http://localhost:1337/api/auth/local/register`, {
          name: vm.name,
          password: vm.password,
          email: vm.email,
          username: vm.username
        })
        vm.$router.push('login')
      } catch(e) {
        // console.error(e)
        vm.error = true
        vm.email = ''
      }
    }
  }
}
</script>
<style>
  @import url('~@/assets/bootstrap.css');

  a {
    color: #42b983;
  }
</style>