<script>
import axios from 'axios'
import router from '@/router'
export default {
  // eslint-disable-next-line vue/multi-word-component-names
  name: 'Register',
  data() {
    return {
      result: {},
      user: {
        username: '',
        email: '',
        password: ''
      }
    }
  },
  created() {},
  mounted() {
    console.log('mounted() called......')
  },
  methods: {
    saveData() {
      // Ověření, jestli se shodují hesla
      var password = document.getElementById('password')
      var password_confirm = document.getElementById('password_confirm')
      if (password.value != password_confirm.value) {
        window.toastr.warning('Hesla nejsou stejná')
      } else {
        // Komunikace se serverem
        // Pokud zadané jméno nebo email je unikátní (neshoduje se již s vytvořeným účtem)
        // uživatel se registruje do databáze
        axios.post('http://localhost:3001/register', this.user).then(({ data }) => {
          try {
            if (data.status === true) {
              window.toastr.success('Byli jste úspěšně registrováni')
              router.push('/')
            } else {
              window.toastr.warning(data.message)
            }
          } catch (err) {
            window.toastr.error('Došlo k chybě, zkuste to prosím znovu')
          }
        })
      }
    },
    // Přesměrování + otevření login okna
    showLogin() {
      router.push('/')
      document.getElementById('id01').style.display = 'block'
    }
  }
}
</script>

<template>
  <article>
    <h1>Registrace</h1>
    <div>
      <form @submit.prevent="saveData">
        <div>
          <label>Přihlašovací jméno:</label>
          <input
            type="text"
            name="username"
            id="username"
            v-model="user.username"
            placeholder="uživatelské jméno"
            required
          />
        </div>
        <div>
          <label>E-mail:</label>
          <input
            type="email"
            name="email"
            id="email"
            v-model="user.email"
            placeholder="E-mailová adresa"
            required
          />
        </div>
        <div>
          <label>Heslo:</label>
          <input
            type="password"
            name="password"
            id="password"
            v-model="user.password"
            placeholder="Heslo"
            required
          />
        </div>
        <div>
          <label>Potvrzení hesla:</label>
          <input
            type="password"
            name="password_confirm"
            id="password_confirm"
            placeholder="Potvrzení hesla"
            required
          />
        </div>
        <button type="submit" class="registerbtn">Registrovat</button>
      </form>
    </div>
    <div>
      <p>
        Máte již založený účet?
        <button @click="showLogin">Přihlásit se</button>
      </p>
    </div>
  </article>
</template>
