<template>
  <div class="user-auth reset-pass page">
    <div class="formBox">
      <div class="side">
        <p>
          <span>کلمه عبور جدید را وارد کنید.</span>
        </p>
      </div>
      <div class="main">
        <form class="form form_2" @submit.prevent="setNewPass">
          <div v-if="message" class="msgBox">
            <div class="inner" :class="messageStatus ? 'success-link' : 'error'">
              <nuxt-link v-if="messageStatus" :to="{ name: 'auth-login-register' }">{{ message }}</nuxt-link>
              <p v-else>{{ message }}</p>
            </div>
          </div>
          <template v-if="!message">
            <div class="title">
              <p>تغییر کلمه عبور</p>
            </div>
            <div class="formRow" :class="validation.password ? 'err' : null">
              <input v-model="newPass.password" type="password" name="email" placeholder="کلمه عبور جدید" />
              <p v-if="validation.password">{{ validation.password.msg }}</p>
            </div>
            <div class="formRow" :class="validation.password_confirmation ? 'err' : null">
              <input
                v-model="newPass.password_confirmation"
                type="password"
                name="email"
                placeholder="تکرار کلمه عبور"
              />
              <p v-if="validation.password_confirmation">{{ validation.password_confirmation.msg }}</p>
            </div>
            <div class="btnRow">
              <el-button
                class="btn btn-secondary secondary-reverse custom-el-button"
                :loading="waiting"
                :disabled="!newPass.password.length"
                native-type="submit"
                >تغییر کلمه عبور</el-button
              >
            </div>
          </template>
        </form>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'NewPassPage',
  layout: 'user-auth',
  data() {
    return {
      newPass: {
        token: this.$route.params.token,
        password: '',
        password_confirmation: ''
      },
      validation: {},
      waiting: false,
      message: null,
      messageStatus: false
    }
  },
  methods: {
    setNewPass() {
      if (this.waiting) {
        return this.$message({
          type: 'warning',
          message: 'لطفا منتظر بمانید'
        })
      }
      this.waiting = true
      this.validation = {}
      this.$axios
        .post('/api/auth/set-new-pass', this.newPass)
        .then(res => {
          this.waiting = false
          this.$message({
            type: 'success',
            message: 'کلمه عبور با موفقیت تغییر کرد.'
          })
          this.message = 'ورود به حساب کاربری'
          this.messageStatus = true
        })
        .catch(e => {
          this.waiting = false
          if (e.response.status === 422) this.validation = e.response.data.validation
          else {
            this.message = e.response.data.message
            this.messageStatus = false
          }
        })
    }
  }
}
</script>
