changes

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 {

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,
         }"
       >

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)',
     }"

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>
+    <Caption
-    <div
+      v-bind="{
-      class="field mt-5"
+        title: 'Đổi mật khẩu',
-      style="width: 400px"
+        type: 'has-text-primary block',
-    >
+        size: 16,
-      <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">
+    <div class="block">
-          <p class="control is-expanded">
+      <div
-            <input
+        class="field"
-              class="input"
+        style="width: 400px"
-              :type="showpass ? 'text' : 'password'"
+      >
-              placeholder="Ít nhất 6 ký tự, bao gồm cả chữ và số."
+        <label class="label">Mật khẩu hiện tại <b class="has-text-danger">*</b></label>
-              v-model="currpass"
+        <div class="field-body">
-            />
+          <div class="field has-addons">
-          </p>
+            <p class="control is-expanded">
-          <div class="control">
+              <input
-            <a
+                class="input"
-              class="button"
+                :type="showpass ? 'text' : 'password'"
-              @click="showpass = !showpass"
+                placeholder="Ít nhất 6 ký tự, bao gồm cả chữ và số."
-            >
+                v-model="currpass"
-              <Icon
-                :name="
-                  showpass
-                    ? 'material-symbols:visibility-off-outline-rounded'
-                    : 'material-symbols:visibility-outline-rounded'
-                "
-                :size="20"
               />
-            </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
+      <div
-        class="help is-danger"
+        class="field"
-        v-if="errors.find((v) => v.name === 'currpass')"
+        style="width: 400px"
       >
-        {{ errors.find((v) => v.name === "currpass").text }}
+        <label class="label">Mật khẩu mới <b class="has-text-danger">*</b></label>
-      </p>
+        <div class="field-body">
-    </div>
+          <div class="field has-addons">
-
+            <p class="control is-expanded">
-    <div
+              <input
-      class="field mt-5"
+                class="input"
-      style="width: 400px"
+                :type="showpass ? 'text' : 'password'"
-    >
+                placeholder="Ít nhất 6 ký tự, bao gồm cả chữ và số."
-      <label class="label">Mật khẩu mới <b class="has-text-danger">*</b></label>
+                v-model="password"
-      <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"
               />
-            </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
+      <div
-        class="help is-danger"
+        class="field"
-        v-if="errors.find((v) => v.name === 'password')"
+        style="width: 400px"
       >
-        {{ errors.find((v) => v.name === "password").text }}
+        <label class="label">Nhắc lại mật khẩu <b class="has-text-danger">*</b></label>
-      </p>
+        <div class="field-body">
-    </div>
+          <div class="field has-addons">
-    <div
+            <p class="control is-expanded">
-      class="field mt-5"
+              <input
-      style="width: 400px"
+                class="input"
-    >
+                :type="showpass ? 'text' : 'password'"
-      <label class="label">Nhắc lại mật khẩu <b class="has-text-danger">*</b></label>
+                placeholder="Phải trùng khớp với mật khẩu mới."
-      <div class="field-body">
+                v-model="retypepass"
-        <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"
               />
-            </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>

app/components/user/Logout.vue

@@ -1,7 +1,7 @@
 <template>
   <div>
-    <article class="message is-dark">
+    <article class="message is-danger">
-      <div class="message-body py-2 mt-5 has-text-dark fs-16">
+      <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
-      <button
+      class="button is-danger has-text-white"
-        class="button is-primary has-text-white"
+      @click="$requestLogin()"
-        @click="$requestLogin()"
+    >
-      >
+      <span class="icon">
-        {{ $store.lang === "en" ? "Sign out" : "Đăng xuất" }}
+        <Icon
-      </button>
+          name="material-symbols:logout-rounded"
-    </div>
+          :size="18"
+        />
+      </span>
+      <span>{{ $store.lang === "en" ? "Sign out" : "Đăng xuất" }}</span>
+    </button>
   </div>
 </template>

app/components/user/Profile.vue

@@ -1,53 +1,64 @@
 <template>
   <div
-    class="columns mx-0"
+    v-if="store.login"
-    v-if="login"
+    class="fixed-grid has-12-cols"
   >
-    <div class="column is-3">
+    <div class="grid is-gap-0">
-      <div class="leftbox">
+      <div class="cell is-col-span-3">
-        <Avatarbox
+        <div
-          class="ml-4"
+          class="card h-full p-4 has-background-grey-100"
-          v-bind="{
+          :style="{
-            image: undefined,
+            borderTopRightRadius: 0,
-            text: login.fullname.substring(0, 1).toUpperCase(),
+            borderBottomRightRadius: 0,
-            type: 'primary',
-            size: 'three',
           }"
-        />
+        >
-        <div>
+          <div class="mb-8 is-flex is-flex-direction-column is-align-items-center">
-          <p class="ml-4 mt-3 fsb-16">
+            <Avatarbox
-            <span>{{ login.fullname }}</span>
+              v-bind="{
-          </p>
+                image: undefined,
-          <p class="ml-4 mt-1 fs-14 has-text-grey">
+                text: store.login.fullname.substring(0, 1).toUpperCase(),
-            <span>{{ login.username }}</span>
+                type: 'primary',
-          </p>
+                size: 12,
-          <p class="border-bottom mt-2"></p>
+              }"
-          <aside
+            />
-            class="menu"
+            <p class="mt-3 fsb-16">{{ store.login.fullname }}</p>
-            style="padding-top: 22px"
+            <p class="fs-14 has-text-grey">{{ store.login.username }}</p>
-          >
+          </div>
-            <ul class="menu-list">
+          <div>
-              <li
+            <aside class="menu">
-                v-for="(v, i) in tabs"
+              <ul class="menu-list is-flex is-flex-direction-column is-gap-1">
-                style="list-style: none"
+                <li
-              >
+                  v-for="(v, i) in tabs"
-                <a
-                  :class="`${v.code === tab ? 'has-background-primary has-text-white' : 'has-text-dark'} fsb-17 mt-4`"
-                  @click="changeTab(v)"
                   :key="i"
+                  style="list-style: none"
                 >
-                  {{ isVietnamese ? v.vi : v.en }}
+                  <a
-                </a>
+                    :class="['button is-text', v.code === tab && 'has-background-primary has-text-white']"
-              </li>
+                    style="text-decoration: none"
-            </ul>
+                    @click="changeTab(v)"
-          </aside>
+                  >
+                    {{ isVietnamese ? v.vi : v.en }}
+                  </a>
+                </li>
+              </ul>
+            </aside>
+          </div>
+        </div>
+      </div>
+      <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 class="column">
-      <UserInfo v-if="tab === 'info'"></UserInfo>
-      <ChangePass v-else-if="tab === 'password'"></ChangePass>
-      <Logout v-else-if="tab === 'logout'"></Logout>
     </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(() => store.lang === "vi");
-const isVietnamese = computed(() => lang.value === "vi");
+const tabs = [
-var login = store.login;
-var 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>

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',
+        type: 'has-text-primary',
-        size: 18,
+        size: 16,
       }"
-    ></Caption>
+    />
-    <div class="columns is-multiline mx-0 mt-2">
+    <div class="columns is-multiline mt-2">
-      <div class="column is-3">
+      <div class="column is-4">
         <div class="field">
-          <label class="label"
+          <label class="label">{{ isVietnamese ? "Tên người dùng" : "User name" }}</label>
-            >{{ isVietnamese ? "Tên người dùng" : "User name" }}<b class="ml-1 has-text-danger">*</b></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>
+          <label class="label">{{ isVietnamese ? "Thời gian tạo" : "Create time" }}</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
-          >
           <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>