<template>
  <div class="container">
    <div class="card o-hidden border-0 shadow-lg my-5">
      <div class="card-body p-0">
        <div class="row">
          <div class="col-lg-6 d-none d-lg-block bg-login-image">
            <img src="../assets/img/log.png" class="img-fluid h-100 d-inline-block" alt="Responsive image">
          </div>
          <div class="col-lg-6">
            <div class="p-5">
              <div class="text-center">
                <h1 class="h4 text-gray-900 mb-4">Créez un compte !</h1>
              </div>
              <form class="user" @submit="onSubmit">
                <p id="message" style="color: red"></p>
                <Input v-for="input in inputs" :key="input.id" :information="input" />
                <button type="submit" class="btn btn-primary btn-user btn-block">Inscription</button>
              </form>
              <hr>
              <div class="text-center">
                <router-link to="/">
                  <a class="small">Déjà inscrit ? Connectez-vous !</a>
                </router-link>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import Input from '@/components/Input'
  import bcrypt from 'bcryptjs'

  export default {
    name: 'Signup',
    components: {
      Input
    },
    data() {
      return {
        // Données pour créer les inputs du form
        inputs: [
          { type: 'text', id: 'firstname', placeholder: 'Prénom' },
          { type: 'text', id: 'lastname', placeholder: 'Nom' },
          { type: 'text', id: 'login', placeholder: 'Login' },
          { type: 'email', id: 'email', placeholder: 'Email' },
          { type: 'password', id: 'password', placeholder: 'Mot de passe' },
          { type: 'password', id: 'passwordRepeat', placeholder: 'Confirmation' }
        ]
      }
    },
    methods: {
      onSubmit(evt) {
        evt.preventDefault()
        const form = document.forms[0]
        let body = { 'role': 0 }

        // Si les mots de passe sont bien les mêmes
        if (form.elements.password.value == form.elements.passwordRepeat.value) {

          // Création du body de la requête
          Object.entries(form.elements).forEach((key) => {
            body[key[1].id] = key[1].id == "password" ? bcrypt.hashSync(key[1].value, bcrypt.genSaltSync(10)) : key[1].value
          })

          // Création d'un nouvel utilisateur
          fetch(this.$apiUrl + '/user', {
            method: 'POST',
            body: JSON.stringify(body)
          })
            .then(response => {
              if (response.status === 200) {
                window.location.href = "/#/"
              } 
              else {
                throw new Error('Something went wrong on api server!')
              }
            }).catch(error => {
              console.error(error);
            });
        }
        // Si les mots de passe sont différents
        else {
          document.querySelector('#message').innerHTML = "Les mots de passe sont différents"
        }
      }
    }
  }
</script>