<template>
  <div class="pw-reset">
    <form class="pw-reset__form reset-form" novalidate @submit.prevent="validateBeforeSubmit">
      <div class="reset-form__field sbform-input">
        <label for="old-pw" class="sbform-input__label">Aktuells Passwort</label>
        <input id="old-pw"
               name="oldPassword"
               type="text"
               v-model="oldPassword"
               v-validate="'required'"
               :class="{ 'sbform-input__input--error': errors.has('oldPassword') }"
               class="reset-form__old skillbox-input sbform-input__input">
        <small v-if="errors.has('oldPassword') && submitted" class="sbform-input__error">{{ errors.first('oldPassword') }}</small>
        <small v-for="error in oldPasswordErrors" :key="error" class=" sbform-input__error">{{ error }}</small>
      </div>
      <div class="reset-form__field sbform-input">
        <label for="new-pw" class="sbform-input__label">Neues Passwort</label>
        <input id="new-pw"
               name="newPassword"
               type="text"
               v-model="newPassword"
               v-validate="'required|min:8|strongPassword'"
               :class="{ 'sbform-input__input--error': errors.has('newPassword') }"
               class="reset-form__new skillbox-input sbform-input__input">
        <small v-if="errors.has('newPassword') && submitted" class=" sbform-input__error">{{ errors.first('newPassword') }}</small>
        <small v-for="error in newPasswordErrors" :key="error" class=" sbform-input__error">{{ error }}</small>
      </div>
      <button class="button button--primary reset-form__submit">Zurücksetzen</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
            });
          }
        })
      }
    }
  }
</script>

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

  .reset-form {
    width: 50%;

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

  .sbform-input {

    margin-bottom: 20px;
    font-family: $sans-serif-font-family;

    &__label {
      margin-bottom: 10px;
      display: inline-block;
    }

    &__input {
      width: 100%;

      &--error {
        border-color: $color-error;
      }
    }

    &__error {
      margin-top: 10px;
      color: $color-error;
      display: inline-block;
    }
  }

</style>
