erp/web
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

changes

Browse Source
This commit is contained in:
Viet An
2026-07-02 13:55:35 +07:00
parent e91f0d22c4
commit 976816d408
7 changed files with 290 additions and 318 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
app/components/Modal.vue
View File

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

10
app/components/common/Avatarbox.vue
View File

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

380
app/components/user/ChangePass.vue
View File

@@ -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>

24
app/components/user/Logout.vue
View File

@@ -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"
@click="$requestLogin()"
>
{{ $store.lang === "en" ? "Sign out" : "Đăng xuất" }}
</button>
</div>
<button
class="button is-danger has-text-white"
@click="$requestLogin()"
>
<span class="icon">
<Icon
name="material-symbols:logout-rounded"
:size="18"
/>
</span>
<span>{{ $store.lang === "en" ? "Sign out" : "Đăng xuất" }}</span>
</button>
</div>
</template>

111
app/components/user/Profile.vue
View File

@@ -1,53 +1,64 @@
<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">
<Avatarbox
class="ml-4"
v-bind="{
image: undefined,
text: login.fullname.substring(0, 1).toUpperCase(),
type: 'primary',
size: 'three',
<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>
<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">
<li
v-for="(v, i) in tabs"
style="list-style: none"
>
<a
:class="`${v.code === tab ? 'has-background-primary has-text-white' : 'has-text-dark'} fsb-17 mt-4`"
@click="changeTab(v)"
>
<div class="mb-8 is-flex is-flex-direction-column is-align-items-center">
<Avatarbox
v-bind="{
image: undefined,
text: store.login.fullname.substring(0, 1).toUpperCase(),
type: 'primary',
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>
<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"
>
{{ isVietnamese ? v.vi : v.en }}
</a>
</li>
</ul>
</aside>
<a
:class="['button is-text', v.code === tab && 'has-background-primary has-text-white']"
style="text-decoration: none"
@click="changeTab(v)"
>
{{ 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(() => 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>

78
app/components/user/UserInfo.vue
View File

@@ -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>