NUXT_FRONTEND/components/User/Auth/RecoverForm.vue

<template>
  <section class="detail section">
    <div class="adaptive_flex basic_content">
      <div class="column">
        <div class="form__main-error" v-if="error.length">
          {{ this.error }}
        </div>
        <form @submit.prevent="registerUser" v-if="!load">
          <div class="error" v-if="$v.$dirty && !$v.user.email.email">
            Введите валидный e-mail
          </div>
          <div class="error" v-if="$v.$dirty && !$v.user.email.required">
            Введите e-mail
          </div>
          <BaseInput
            label="E-mail"
            v-model="user.email"
            :className="
              $v.$dirty && $v.user.email.$invalid ? 'warning-input' : ''
            "
          />

          <div class="error" v-if="$v.$dirty && !$v.user.password_a.required">
            Введите пароль
          </div>
          <div class="error" v-if="$v.$dirty && !$v.user.password_a.minLength">
            Минимальная длина пароля 8 символов
          </div>
          <BaseInput
            inputType="password"
            label="Придумайте новый пароль"
            v-model="user.password_a"
            :className="
              $v.$dirty && $v.user.password_a.$invalid ? 'warning-input' : ''
            "
          />

          <div class="error" v-if="$v.$dirty && !$v.user.password_b.required">
            Введите пароль
          </div>
          <div class="error" v-if="$v.$dirty && !$v.user.password_b.minLength">
            Минимальная длина пароля 8 символов
          </div>
          <BaseInput
            inputType="password"
            label="Повторите новый пароль"
            v-model="user.password_b"
            :className="
              $v.$dirty && $v.user.password_b.$invalid ? 'warning-input' : ''
            "
          />

          <button
            class="
              catalog-main__subscribe
              button button_grey-dark button_grey-dark-short
            "
            type="submit"
          >
            Подтвердить новый пароль
          </button>
        </form>
        <div v-if="load" class="confirm-message">
          На вашу почту отправлено письмо с данными по восстановлению доступа
        </div>
      </div>
      <div class="column"></div>
    </div>
  </section>
</template>

<script>
import {
  required,
  sameAs,
  minLength,
  maxLength,
  email,
} from "vuelidate/lib/validators";

const touchMap = new WeakMap();
export default {
  data() {
    return {
      user: this.createUser(),
      error: "",
      load: false,
    };
  },
  validations: {
    user: {
      email: {
        required,
        email,
        maxLength: maxLength(40),
      },
      password_a: {
        required,
        minLength: minLength(8),
      },
      password_b: {
        required,
        minLength: minLength(8),
      },
    },
  },
  methods: {
    createUser() {
      return {
        firstName: "",
        phone: "",
        email: "",
        password_a: "",
        password_b: "",
      };
    },

    async registerUser() {
      this.$v.$touch();
      if (this.$v.$invalid) return;

      await this.$axios
        .post("/user/credentials/restore_password", this.user)
        .then(() => (this.load = true))
        .catch((e) => console.log(e));
    },
  },
  created() {},
};
</script>

<style lang="less">
.column {
  width: 100%;
}
.warning-input {
  border: 1px solid rgb(245, 60, 60);
}
.error {
  color: rgb(245, 60, 60);
  font-size: 12px;
  max-width: 350px;
}
.warning-input {
  border: 1px solid rgb(245, 60, 60);
}
.form__main-error {
  background-color: rgba(59, 85, 115, 0.08);
  padding: 10px;
  height: 41px;
  max-width: 350px;
  border-radius: 11px;
}
.form__error {
}
</style>