<template>
  <div>
    <div>
      <p>
        User name: <b>{{ row.username }}</b>
      </p>
      <p class="mt-1">
        Full name: <b>{{ row.fullname }}</b>
      </p>
    </div>
    <div class="field mt-5">
      <label class="label">New password <b class="has-text-danger">*</b></label>
      <div class="field-body">
        <div class="field has-addons">
          <p class="control is-expanded">
            <input
              class="input"
              :type="showpass ? 'text' : 'password'"
              placeholder="At least 6 characters, letters and numbers."
              v-model="password"
            />
          </p>
          <div class="control">
            <a
              class="button"
              @click="showpass = !showpass"
            >
              <Icon
                :name="
                  showpass
                    ? 'material-symbols:visibility-off-outline-rounded'
                    : 'material-symbols:visibility-outline-rounded'
                "
                :size="20"
              />
            </a>
          </div>
        </div>
      </div>
      <p
        class="help is-danger"
        v-if="errors.find((v) => v.name === 'password')"
      >
        {{ errors.find((v) => v.name === "password").text }}
      </p>
    </div>
    <div class="field mt-5">
      <label class="label">Retype password <b class="has-text-danger">*</b></label>
      <div class="field-body">
        <div class="field has-addons">
          <p class="control is-expanded">
            <input
              class="input"
              :type="showpass ? 'text' : 'password'"
              placeholder="Must match the new password."
              v-model="retypepass"
            />
          </p>
          <div class="control">
            <a
              class="button"
              @click="showpass = !showpass"
            >
              <Icon
                :name="
                  showpass
                    ? 'material-symbols:visibility-off-outline-rounded'
                    : 'material-symbols:visibility-outline-rounded'
                "
                :size="20"
              />
            </a>
          </div>
        </div>
      </div>
      <p
        class="help is-danger"
        v-if="errors.find((v) => v.name === 'retypepass')"
      >
        {{ errors.find((v) => v.name === "retypepass").text }}
      </p>
    </div>
    <div class="mt-5 pt-2">
      <button
        class="button is-primary"
        @click="changePassword()"
      >
        Set password
      </button>
    </div>
  </div>
</template>
<script>
export default {
  props: ["row"],
  data() {
    return {
      errors: [],
      password: undefined,
      retypepass: undefined,
      showpass: false,
    };
  },
  methods: {
    async changePassword() {
      if (!this.checkPassword()) return;
      let user = await this.$getdata("user", {
        first: true,
        params: { filter: { id: this.row.id } },
      });
      let rs = await this.$insertapi("gethash", { data: { text: this.password } });
      user.password = rs.rows[0];
      let rs1 = await this.$patchapi("user", user);
      if (rs1 !== "error") this.$emit("close");
      else {
        this.$snackbar("Có lỗi xảy ra. Hãy thử lại một lần nữa", "Error");
      }
    },
    checkPassword() {
      this.errors = [];
      if (this.$empty(this.password)) {
        this.errors.push({
          name: "password",
          text: "Mật khẩu không được bỏ trống",
        });
      } else if (this.password.length < 6) {
        this.errors.push({
          name: "password",
          text: "Mật khẩu từ 6 kí tự bao gồm chữ và số ",
        });
      } else if (!(/\d/.test(this.password) && /[a-zA-Z]/.test(this.password))) {
        this.errors.push({
          name: "password",
          text: "Mật khẩu từ 6 kí tự bao gồm chữ và số ",
        });
      }
      if (this.$empty(this.retypepass)) {
        this.errors.push({
          name: "retypepass",
          text: "Nhắc lại mật khẩu không được bỏ trống",
        });
      } else if (this.password !== this.retypepass) {
        this.errors.push({
          name: "retypepass",
          text: "Nhắc lại phải giống với mật khẩu đã nhập",
        });
      }
      return this.errors.length > 0 ? false : true;
    },
  },
};
</script>
