changes

app/components/user/ChangePass.vue

@@ -1,123 +1,197 @@
+<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", user, undefined, 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-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"
-            >
-              <Icon
-                :name="
-                  showpass
-                    ? 'material-symbols:visibility-off-outline-rounded'
-                    : 'material-symbols:visibility-outline-rounded'
-                "
-                :size="20"
+    <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"
               />
-            </a>
+            </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>
-      <p
-        class="help is-danger"
-        v-if="errors.find((v) => v.name === 'currpass')"
+      <div
+        class="field"
+        style="width: 400px"
       >
-        {{ 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"
-            >
-              <Icon
-                :name="
-                  showpass
-                    ? 'material-symbols:visibility-off-outline-rounded'
-                    : 'material-symbols:visibility-outline-rounded'
-                "
-                :size="20"
+        <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"
               />
-            </a>
+            </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>
-      <p
-        class="help is-danger"
-        v-if="errors.find((v) => v.name === 'password')"
+      <div
+        class="field"
+        style="width: 400px"
       >
-        {{ 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"
-            >
-              <Icon
-                :name="
-                  showpass
-                    ? 'material-symbols:visibility-off-outline-rounded'
-                    : 'material-symbols:visibility-outline-rounded'
-                "
-                :size="20"
+        <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"
               />
-            </a>
+            </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>
-      <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
@@ -129,101 +203,3 @@
     </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", { data: { text: this.password }, notify: false });
-      user.password = rs0.rows[0];
-      let rs = await this.$patchapi("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>