web/app/components/user/ChangePass.vue

<template>
  <div>
    <Caption v-bind="{ title: 'Đổi mật khẩu', type: 'has-text-warning' }"></Caption>
    <div
      class="field mt-5"
      style="width: 400px"
    >
      <label class="label">Mật khẩu hiện tại <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="Ít nhất 6 ký tự, bao gồm cả chữ và số."
              v-model="currpass"
            />
          </p>
          <div class="control">
            <a
              class="button"
              @click="showpass = !showpass"
            >
              <SvgIcon
                v-bind="{
                  name: showpass ? 'eye-off.svg' : 'view.svg',
                  type: 'gray',
                  size: 24,
                }"
              />
            </a>
          </div>
        </div>
      </div>
      <p
        class="help is-danger"
        v-if="errors.find((v) => v.name === 'currpass')"
      >
        {{ errors.find((v) => v.name === "currpass").text }}
      </p>
    </div>

    <div
      class="field mt-5"
      style="width: 400px"
    >
      <label class="label">Mật khẩu mới <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="Ít nhất 6 ký tự, bao gồm cả chữ và số."
              v-model="password"
            />
          </p>
          <div class="control">
            <a
              class="button"
              @click="showpass = !showpass"
            >
              <SvgIcon
                v-bind="{
                  name: showpass ? 'eye-off.svg' : 'view.svg',
                  type: 'gray',
                  size: 24,
                }"
              />
            </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"
      style="width: 400px"
    >
      <label class="label">Nhắc lại mật khẩu <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="Phải trùng khớp với mật khẩu mới."
              v-model="retypepass"
            />
          </p>
          <div class="control">
            <a
              class="button"
              @click="showpass = !showpass"
            >
              <SvgIcon
                v-bind="{
                  name: showpass ? 'eye-off.svg' : 'view.svg',
                  type: 'gray',
                  size: 24,
                }"
              />
            </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 has-text-white ${loading ? 'is-loading' : ''}`"
        @click="changePassword()"
      >
        Cập nhật
      </button>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      errors: [],
      currpass: undefined,
      password: undefined,
      retypepass: undefined,
      showpass: true,
      loading: false,
    };
  },
  setup() {
    const store = useStore();
    return { store };
  },
  methods: {
    async changePassword() {
      if (!this.checkPassword()) return;
      this.loading = true;
      let conn = this.$findapi("login");
      conn.params.filter = {
        username: this.store.login.username,
        password: this.currpass,
      };
      let result = await this.$getapi([conn]);
      let user = result.find((v) => v.name === "login").data.rows;
      if (!user)
        return this.errors.push({
          name: "currpass",
          text: "Incorrect password.",
        });
      let rs0 = await this.$insertapi("gethash", { text: this.password }, undefined, false);
      user.password = rs0.rows[0];
      let rs = await this.$updateapi("user", user, undefined, false);
      if (rs !== "error") {
        this.currpass = undefined;
        this.password = undefined;
        this.retypepass = undefined;
        this.$snackbar("Mật khẩu đã được thay đổi thành công. Vui lòng đăng nhập lại.");
        this.store.commit("login", undefined);
        $fetch(`${this.$getpath()}set-token-expiry/?username=${rs.username}`);
        setTimeout(() => this.$requestLogin(), 3000);
      } else {
        this.$snackbar("Đã xảy ra lỗi. Vui lòng thử lại.");
      }
      this.loading = false;
    },
    checkPassword() {
      this.errors = [];
      if (this.$empty(this.currpass)) {
        this.errors.push({
          name: "currpass",
          text: "Mật khẩu không được để trống.",
        });
      } else if (this.currpass.length < 6) {
        this.errors.push({
          name: "currpass",
          text: "Mật khẩu phải có ít nhất 6 ký tự và bao gồm cả chữ và số.",
        });
      } else if (!(/\d/.test(this.currpass) && /[a-zA-Z]/.test(this.currpass))) {
        this.errors.push({
          name: "currpass",
          text: "Mật khẩu phải có ít nhất 6 ký tự và bao gồm cả chữ và số.",
        });
      }
      if (this.$empty(this.password)) {
        this.errors.push({
          name: "password",
          text: "Mật khẩu không được để trống.",
        });
      } else if (this.password.length < 6) {
        this.errors.push({
          name: "password",
          text: "Mật khẩu phải có ít nhất 6 ký tự và bao gồm cả 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 phải có ít nhất 6 ký tự và bao gồm cả chữ và số.",
        });
      }
      if (this.$empty(this.retypepass)) {
        this.errors.push({
          name: "retypepass",
          text: "Xác nhận mật khẩu không được để trống.",
        });
      } else if (this.password !== this.retypepass) {
        this.errors.push({
          name: "retypepass",
          text: "Xác nhận mật khẩu phải trùng khớp với mật khẩu đã nhập.",
        });
      }
      return this.errors.length > 0 ? false : true;
    },
  },
};
</script>