<template>
  <div class="pw-change">
    <form class="pw-change__form change-form" novalidate @submit.prevent="validateBeforeSubmit">
      <div class="change-form__field skillboxform-input">
        <label for="old-pw" class="skillboxform-input__label">Aktuelles Passwort</label>
        <input id="old-pw"
               name="oldPassword"
               type="text"
               v-model="oldPassword"
               v-validate="'required'"
               :class="{ 'skillboxform-input__input--error': errors.has('oldPassword') }"
               class="change-form__old skillbox-input skillboxform-input__input"
               autocomplete="off"
               data-vv-as="Altes Passwort"
               data-cy="old-password">
        <small v-if="errors.has('oldPassword') && submitted" class="skillboxform-input__error" data-cy="old-password-local-errors">{{ errors.first('oldPassword') }}</small>
        <small v-for="error in oldPasswordErrors" :key="error" class=" skillboxform-input__error" data-cy="old-password-remote-errors">{{ error }}</small>
      </div>
      <div class="change-form__field skillboxform-input">
        <label for="new-pw" class="skillboxform-input__label">Neues Passwort</label>
        <input id="new-pw"
               name="newPassword"
               type="text"
               v-model="newPassword"
               data-vv-as="Neues Passwort"
               v-validate="'required|min:8|strongPassword'"
               :class="{ 'skillboxform-input__input--error': errors.has('newPassword') }"
               class="change-form__new skillbox-input skillboxform-input__input"
               autocomplete="off"
               data-cy="new-password">
        <small v-if="errors.has('newPassword') && submitted" class=" skillboxform-input__error" data-cy="new-password-local-errors">{{ errors.first('newPassword') }}</small>
        <small v-for="error in newPasswordErrors" :key="error" class=" skillboxform-input__error" data-cy="new-password-remote-errors">{{ error }}</small>
        <p class="skillboxform-input__hint">Das Passwort muss mindestens 8 Zeichen lang sein und Grossbuchstaben, Zahlen und Sonderzeichen beinhalten.</p>
      </div>
      <button class="button button--primary change-form__submit" data-cy="change-password-button">Speichern</button>
    </form>
  </div>
</template>

<script>
  export default {
    props: ['newPasswordErrors', 'oldPasswordErrors'],
    data: () => ({
      oldPassword: '',
      newPassword: '',
      submitted: false
    }),
    methods: {
      validateBeforeSubmit () {
        this.$validator.validate().then((result) => {
          this.submitted = true;
          if (result) {
            this.$emit('passwordSubmited', {
              oldPassword: this.oldPassword,
              newPassword: this.newPassword
            });
          }
        })
      },
      resetForm () {
        this.oldPassword = '';
        this.newPassword = '';
        this.submitted = false;
        this.$validator.reset();
      }
    },
    mounted() {
    this.$root.$on('reset-password-form', () => {
      this.resetForm();
    })
  }
  }
</script>

<style scoped lang="scss">
  @import "@/styles/_variables.scss";
  @import "@/styles/_buttons.scss";

  .change-form {
    width: 50%;

    @media screen and (max-width: 1024px) {
      width: 100%;
    }
  }

</style>
