changes

2026-07-02 13:55:35 +07:00
parent e91f0d22c4
commit 976816d408
7 changed files with 290 additions and 318 deletions
--- a/app/assets/styles/overrides-components.scss
+++ b/app/assets/styles/overrides-components.scss
@@ -34,6 +34,7 @@

 .modal-card {
  border-radius: var(--bulma-modal-card-head-radius);
+  max-width: min(1200px, calc(100vw - var(--bulma-modal-card-spacing)));
 }

 .modal-card-head {
--- a/app/components/Modal.vue
+++ b/app/components/Modal.vue
@@ -12,9 +12,9 @@
        @click="closeModal"
      ></div>
      <div
-        class="modal-card max-w-8xl"
+        class="modal-card"
        :style="{
-          width: $store.viewport <= 1 ? 'calc(100% - 2rem)' : width,
+          width: $store.viewport <= 1 ? 'calc(100% - var(--bulma-modal-card-spacing))' : width,
          height,
        }"
      >
--- a/app/components/common/Avatarbox.vue
+++ b/app/components/common/Avatarbox.vue
@@ -3,13 +3,19 @@ const props = defineProps({
  text: String,
  image: String,
  type: String,
-  size: String,
+  size: {
+    type: Number,
+    default: 9,
+  },
 });
 </script>
 <template>
  <div
    @click="$emit('justclick')"
-    class="avatarbox rounded-full mx-0 px-0 size-9 font-bold is-flex is-justify-content-center is-align-items-center"
+    :class="[
+      'avatarbox rounded-full mx-0 px-0 font-bold is-flex is-justify-content-center is-align-items-center',
+      `size-${size}`,
+    ]"
    :style="{
      border: image ? 'none' : '1px solid var(--bulma-grey-90)',
    }"
--- a/app/components/user/ChangePass.vue
+++ b/app/components/user/ChangePass.vue
@@ -1,8 +1,82 @@
+<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>
+    <Caption
+      v-bind="{
+        title: 'Đổi mật khẩu',
+        type: 'has-text-primary block',
+        size: 16,
+      }"
+    />
+    <div class="block">
      <div
-      class="field mt-5"
+        class="field"
        style="width: 400px"
      >
        <label class="label">Mật khẩu hiện tại <b class="has-text-danger">*</b></label>
@@ -18,7 +92,7 @@
            </p>
            <div class="control">
              <a
-              class="button"
+                class="button h-full"
                @click="showpass = !showpass"
              >
                <Icon
@@ -40,9 +114,8 @@
          {{ errors.find((v) => v.name === "currpass").text }}
        </p>
      </div>
-
      <div
-      class="field mt-5"
+        class="field"
        style="width: 400px"
      >
        <label class="label">Mật khẩu mới <b class="has-text-danger">*</b></label>
@@ -58,7 +131,7 @@
            </p>
            <div class="control">
              <a
-              class="button"
+                class="button h-full"
                @click="showpass = !showpass"
              >
                <Icon
@@ -81,7 +154,7 @@
        </p>
      </div>
      <div
-      class="field mt-5"
+        class="field"
        style="width: 400px"
      >
        <label class="label">Nhắc lại mật khẩu <b class="has-text-danger">*</b></label>
@@ -97,7 +170,7 @@
            </p>
            <div class="control">
              <a
-              class="button"
+                class="button h-full"
                @click="showpass = !showpass"
              >
                <Icon
@@ -119,6 +192,7 @@
          {{ 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' : ''}`"
@@ -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>
--- a/app/components/user/Logout.vue
+++ b/app/components/user/Logout.vue
@@ -1,7 +1,7 @@
 <template>
  <div>
-    <article class="message is-dark">
-      <div class="message-body py-2 mt-5 has-text-dark fs-16">
+    <article class="message is-danger">
+      <div class="message-body py-2">
        {{
          $store.lang === "en"
            ? "Click the button below to log out of the system."
@@ -9,13 +9,17 @@
        }}
      </div>
    </article>
-    <div class="mt-5 pt-3">
    <button
-        class="button is-primary has-text-white"
+      class="button is-danger has-text-white"
      @click="$requestLogin()"
    >
-        {{ $store.lang === "en" ? "Sign out" : "Đăng xuất" }}
+      <span class="icon">
+        <Icon
+          name="material-symbols:logout-rounded"
+          :size="18"
+        />
+      </span>
+      <span>{{ $store.lang === "en" ? "Sign out" : "Đăng xuất" }}</span>
    </button>
  </div>
-  </div>
 </template>
--- a/app/components/user/Profile.vue
+++ b/app/components/user/Profile.vue
@@ -1,40 +1,41 @@
 <template>
  <div
-    class="columns mx-0"
-    v-if="login"
+    v-if="store.login"
+    class="fixed-grid has-12-cols"
  >
-    <div class="column is-3">
-      <div class="leftbox">
+    <div class="grid is-gap-0">
+      <div class="cell is-col-span-3">
+        <div
+          class="card h-full p-4 has-background-grey-100"
+          :style="{
+            borderTopRightRadius: 0,
+            borderBottomRightRadius: 0,
+          }"
+        >
+          <div class="mb-8 is-flex is-flex-direction-column is-align-items-center">
            <Avatarbox
-          class="ml-4"
              v-bind="{
                image: undefined,
-            text: login.fullname.substring(0, 1).toUpperCase(),
+                text: store.login.fullname.substring(0, 1).toUpperCase(),
                type: 'primary',
-            size: 'three',
+                size: 12,
              }"
            />
+            <p class="mt-3 fsb-16">{{ store.login.fullname }}</p>
+            <p class="fs-14 has-text-grey">{{ store.login.username }}</p>
+          </div>
          <div>
-          <p class="ml-4 mt-3 fsb-16">
-            <span>{{ login.fullname }}</span>
-          </p>
-          <p class="ml-4 mt-1 fs-14 has-text-grey">
-            <span>{{ login.username }}</span>
-          </p>
-          <p class="border-bottom mt-2"></p>
-          <aside
-            class="menu"
-            style="padding-top: 22px"
-          >
-            <ul class="menu-list">
+            <aside class="menu">
+              <ul class="menu-list is-flex is-flex-direction-column is-gap-1">
                <li
                  v-for="(v, i) in tabs"
+                  :key="i"
                  style="list-style: none"
                >
                  <a
-                  :class="`${v.code === tab ? 'has-background-primary has-text-white' : 'has-text-dark'} fsb-17 mt-4`"
+                    :class="['button is-text', v.code === tab && 'has-background-primary has-text-white']"
+                    style="text-decoration: none"
                    @click="changeTab(v)"
-                  :key="i"
                  >
                    {{ isVietnamese ? v.vi : v.en }}
                  </a>
@@ -44,10 +45,20 @@
          </div>
        </div>
      </div>
-    <div class="column">
-      <UserInfo v-if="tab === 'info'"></UserInfo>
-      <ChangePass v-else-if="tab === 'password'"></ChangePass>
-      <Logout v-else-if="tab === 'logout'"></Logout>
+      <div class="cell is-col-span-9">
+        <div
+          class="card h-full p-4 has-background-grey-100"
+          :style="{
+            borderTopLeftRadius: 0,
+            borderBottomLeftRadius: 0,
+            borderLeft: 'none',
+          }"
+        >
+          <UserInfo v-if="tab === 'info'" />
+          <ChangePass v-else-if="tab === 'password'" />
+          <Logout v-else-if="tab === 'logout'" />
+        </div>
+      </div>
    </div>
  </div>
 </template>
@@ -55,24 +66,16 @@
 import Logout from "~/components/user/Logout";
 import UserInfo from "~/components/user/UserInfo";
 import ChangePass from "~/components/user/ChangePass";
+
 const store = useStore();
-const lang = computed(() => store.lang);
-const isVietnamese = computed(() => lang.value === "vi");
-var login = store.login;
-var tabs = [
+const isVietnamese = computed(() => store.lang === "vi");
+const tabs = [
  { code: "info", vi: "Hồ sơ cá nhân", en: "Personal Information" },
  { code: "password", vi: "Đổi mật khẩu", en: "Change Password" },
  { code: "logout", vi: "Đăng xuất", en: "Logout" },
 ];
-var tab = ref("info");
+const tab = ref("info");
 function changeTab(v) {
  tab.value = v.code;
 }
 </script>
-<style>
-.leftbox {
-  border-radius: 15px;
-  background: rgb(245, 245, 246);
-  padding: 20px;
-}
-</style>
--- a/app/components/user/UserInfo.vue
+++ b/app/components/user/UserInfo.vue
@@ -1,44 +1,52 @@
+<script setup>
+import { ref, onMounted, getCurrentInstance } from "vue";
+
+const props = defineProps({ userId: Number });
+const store = useStore();
+const { $getdata } = useNuxtApp();
+
+const record = ref();
+const isVietnamese = store.lang === "vi";
+
+onMounted(async () => {
+  record.value = await $getdata("user", {
+    first: true,
+    params: {
+      filter: { id: props.userId || store.login.id },
+      values: "id,username,fullname,type,type__name,create_time",
+    },
+  });
+});
+</script>
 <template>
  <div v-if="record">
    <Caption
      v-bind="{
        title: isVietnamese ? 'Thông tin tài khoản' : 'User information',
-        type: 'has-text-warning',
-        size: 18,
+        type: 'has-text-primary',
+        size: 16,
      }"
-    ></Caption>
-    <div class="columns is-multiline mx-0 mt-2">
-      <div class="column is-3">
+    />
+    <div class="columns is-multiline mt-2">
+      <div class="column is-4">
        <div class="field">
-          <label class="label"
-            >{{ isVietnamese ? "Tên người dùng" : "User name" }}<b class="ml-1 has-text-danger">*</b></label
-          >
+          <label class="label">{{ isVietnamese ? "Tên người dùng" : "User name" }}</label>
          <div class="control">
            {{ record.username }}
          </div>
        </div>
      </div>
-      <div class="column is-3">
+      <div class="column is-4">
        <div class="field">
-          <label class="label">{{ isVietnamese ? "Họ tên" : "Full name" }}<b class="ml-1 has-text-danger">*</b></label>
+          <label class="label">{{ isVietnamese ? "Họ tên" : "Full name" }}</label>
          <div class="control">
            {{ record.fullname }}
          </div>
        </div>
      </div>
-      <!-- <div class="column is-3">
+      <div class="column is-4">
        <div class="field">
-          <label class="label">{{ isVietnamese ? "Điện thoại" : "Phone" }}<b class="ml-1 has-text-danger">*</b></label>
-          <div class="control">
-            {{ record.phone }}
-          </div>
-        </div>
-      </div> -->
-      <div class="column is-3">
-        <div class="field">
-          <label class="label"
-            >{{ isVietnamese ? "Thời gian tạo" : "Create time" }}<b class="ml-1 has-text-danger">*</b></label
-          >
+          <label class="label">{{ isVietnamese ? "Thời gian tạo" : "Create time" }}</label>
          <div class="control">
            {{ $dayjs(record.create_time).format("L") }}
          </div>
@@ -47,29 +55,3 @@
    </div>
  </div>
 </template>
-<script>
-export default {
-  props: ["userId"],
-  setup() {
-    const store = useStore();
-    return { store };
-  },
-  data() {
-    return {
-      errors: {},
-      record: undefined,
-      reginfo: undefined,
-      isVietnamese: this.store.lang === "vi",
-    };
-  },
-  async created() {
-    this.record = await this.$getdata("user", {
-      first: true,
-      params: {
-        filter: { id: this.userId || this.store.login.id },
-        values: "id,username,fullname,type,type__name,create_time",
-      },
-    });
-  },
-};
-</script>