<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
          v-model="oldPassword"
          v-validate="'required'"
          :class="{ 'skillboxform-input__input--error': errors.has('oldPassword') }"
          name="oldPassword"
          type="text"
          class="change-form__old skillbox-input skillboxform-input__input"
          autocomplete="off"
          data-vv-as="Altes Passwort"
          data-cy="old-password"
          id="old-pw">
        <small
          class="skillboxform-input__error"
          data-cy="old-password-local-errors"
          v-if="errors.has('oldPassword') && submitted">{{ errors.first('oldPassword') }}</small>
        <small
          :key="error"
          class=" skillboxform-input__error"
          data-cy="old-password-remote-errors"
          v-for="error in oldPasswordErrors">{{ error }}</small>
      </div>
      <div class="change-form__field skillboxform-input">
        <label
          for="new-pw"
          class="skillboxform-input__label">Neues Passwort</label>
        <input
          v-model="newPassword"
          v-validate="'required|min:8|strongPassword'"
          :class="{ 'skillboxform-input__input--error': errors.has('newPassword') }"
          name="newPassword"
          type="text"
          data-vv-as="Neues Passwort"
          class="change-form__new skillbox-input skillboxform-input__input"
          autocomplete="off"
          data-cy="new-password"
          id="new-pw">
        <small
          class=" skillboxform-input__error"
          data-cy="new-password-local-errors"
          v-if="errors.has('newPassword') && submitted">{{ errors.first('newPassword') }}</small>
        <small
          :key="error"
          class=" skillboxform-input__error"
          data-cy="new-password-remote-errors"
          v-for="error in newPasswordErrors">{{ 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
    }),
    mounted() {
    this.$root.$on('reset-password-form', () => {
      this.resetForm();
    });
  },
    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();
      }
    },
  };
</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>
