web/app/components/user/ChangePass.vue

<script setup>
import { ref, getCurrentInstance } from "vue";

const store = useStore();
const { proxy } = getCurrentInstance();

const errors = ref([]);
const currpass = ref(undefined);
const password = ref(undefined);
const retypepass = ref(undefined);
const showpass = ref(true);
const loading = ref(false);

function checkPassword() {
  errors.value = [];
  if (proxy.$empty(currpass.value)) {
    errors.value.push({ name: "currpass", text: "Mật khẩu không được để trống." });
  } else if (currpass.value.length < 6 || !(/\d/.test(currpass.value) && /[a-zA-Z]/.test(currpass.value))) {
    errors.value.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 (proxy.$empty(password.value)) {
    errors.value.push({ name: "password", text: "Mật khẩu không được để trống." });
  } else if (password.value.length < 6 || !(/\d/.test(password.value) && /[a-zA-Z]/.test(password.value))) {
    errors.value.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 (proxy.$empty(retypepass.value)) {
    errors.value.push({ name: "retypepass", text: "Xác nhận mật khẩu không được để trống." });
  } else if (password.value !== retypepass.value) {
    errors.value.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 errors.value.length === 0;
}

async function changePassword() {
  if (!checkPassword()) return;
  loading.value = true;

  let conn = proxy.$findapi("login");
  conn.params.filter = { username: store.login.username, password: currpass.value };
  let result = await proxy.$getapi([conn]);
  let user = result.find((v) => v.name === "login").data.rows;

  if (!user) {
    errors.value.push({ name: "currpass", text: "Incorrect password." });
    loading.value = false;
    return;
  }

  let rs0 = await proxy.$insertapi("gethash", { data: { text: password.value }, notify: false });
  user.password = rs0.rows[0];
  let rs = await proxy.$patchapi("user", { data: user, notify: false });

  if (rs !== "error") {
    currpass.value = undefined;
    password.value = undefined;
    retypepass.value = undefined;
    proxy.$snackbar("Mật khẩu đã được thay đổi thành công. Vui lòng đăng nhập lại.");
    store.commit("login", undefined);
    $fetch(`${proxy.$getpath()}set-token-expiry/?username=${rs.username}`);
    setTimeout(() => proxy.$requestLogin(), 3000);
  } else {
    proxy.$snackbar("Đã xảy ra lỗi. Vui lòng thử lại.");
  }
  loading.value = false;
}
</script>

<template>
  <div>
    <Caption
      v-bind="{
        title: 'Đổi mật khẩu',
        type: 'has-text-primary block',
        size: 16,
      }"
    />
    <div class="block">
      <div
        class="field"
        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 h-full"
                @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 === 'currpass')"
        >
          {{ errors.find((v) => v.name === "currpass").text }}
        </p>
      </div>
      <div
        class="field"
        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 h-full"
                @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"
        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 h-full"
                @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>
    <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>