<template>
  <div class="forgotpass">
    <template v-if="!passwordChanged">
      <div class="input-group">
        <label for="user">Lietotājvārds</label>
        <input type="text" id="user" v-model.trim="username">
      </div>
      <div v-if="!codeSent" class="input-group">
        <button @click="sendCode" class="btn btn-green btn-big border">Sūtīt kodu</button>
        <button @click="codeSent = true" class="btn btn-slim">Man jau ir kods</button>
      </div>
      <template v-else>
        <div class="input-group">
          <label for="code">Kods</label>
          <input type="text" id="code" v-model.trim="code">
        </div>
        <div class="input-group">
          <label for="pass">Jaunā parole</label>
          <input type="password" id="pass" v-model.trim="password">
        </div>
        <div class="input-group">
          <label for="pass2">Atkārtot paroli</label>
          <input type="password" id="pass2" v-model.trim="password2">
        </div>
        <button @click="forgotPasswordSubmit" class="btn btn-green btn-big border">Mainīt paroli</button>
      </template>
    </template>
    <button v-else @click="$emit('back-to-signin');" class="btn btn-green btn-big border">Uz pieslēgšanos</button>
    <div :class="notice.error ? 'error-block' : 'success-block'" v-if="notice.display" @click="notice.display = false">
      <span>{{ notice.text }}</span>
    </div>
  </div>
</template>

<script>
import { Auth } from 'aws-amplify';

export default {
  props: {
    errors: Object
  },
  data() {
    return {
      username: '',
      code: '',
      password: '',
      password2: '',
      codeSent: false,
      passwordChanged: false,
      notice: {
        error: false,
        text: '',
        display: false
      }
    }
  },
  methods: {
    sendCode() {
      const { username, displayError, displaySuccess } = this;

      if (username === '') {
        displayError('Pārliecinieties, lai visi lauki būtu aizpildīti!');
      } else {
        Auth.forgotPassword(username).then(() => {
          this.codeSent = true;
          displaySuccess('Uz jūsu e-pastu tika nosūtīts kods, lai apstiprinātu jauno paroli');
        }).catch(error => {
          console.log(error);
          displayError(this.errors[error.code] || 'Radās kļūda!');
        });
      }
    },
    forgotPasswordSubmit() {
      const { username, code, password, password2, displayError, displaySuccess } = this;
      const passRegex = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[ !"#$%&'()*+,-./:;<=>?@[\]\\^_`{|}~])[A-Za-z\d !"#$%&'()*+,-./:;<=>?@[\]^_`{|}~]{8,}$/;

      if (username === '' || code === '' || password === '' || password2 === '') {
        displayError('Pārliecinieties, lai visi lauki būtu aizpildīti!');
      } else if (!passRegex.test(password)) {
        displayError('Parolei jābūt vismaz 8 rakstzīmju garai. Tai jāsastāv no vismaz viena mazā burta, lielā burta, cipara un simbola');
      } else if (password !== password2) {
        displayError('Ievadītās paroles nesakrīt');
      } else {
        Auth.forgotPasswordSubmit(username, code, password).then(() => {
          displaySuccess('Parole veiksmīgi nomainīta');
          this.passwordChanged = true;
        }).catch(error => {
          displayError(this.errors[error.code] || 'Radās kļūda!');
        });
      }
    },
    displayError(text) {
      this.notice.error = true;
      this.notice.text = text;
      this.notice.display = true;
    },
    displaySuccess(text) {
      this.notice.error = false;
      this.notice.text = text;
      this.notice.display = true;
    }
  }
}
</script>