updata
This commit is contained in:
@@ -6,6 +6,7 @@
|
||||
"register": "Register"
|
||||
},
|
||||
"message": {
|
||||
"functionality_not_yet_developed":"Functionality not yet developed",
|
||||
"hello": "Hello",
|
||||
"welcome": "Welcome",
|
||||
"dark_mode": "Enable dark mode",
|
||||
@@ -47,7 +48,13 @@
|
||||
"preferences": "Preferences",
|
||||
"administrator": "Administrator",
|
||||
"select_date":"Select a date",
|
||||
"save_ok":"Saved successfully"
|
||||
"save_ok":"Saved successfully",
|
||||
"change_ok":"Changed successfully",
|
||||
"type_old_pass":"Enter old password",
|
||||
"type_new_pass":"Enter new password",
|
||||
"type_cof_pass":"Confirm new password",
|
||||
"old_pass_incorrect":"Old password is incorrect",
|
||||
"confirm_password_incorrect":"Confirm password is incorrect"
|
||||
},
|
||||
"settings": {
|
||||
"account_settings": "Account Settings",
|
||||
|
||||
@@ -6,6 +6,7 @@
|
||||
"register": "注册"
|
||||
},
|
||||
"message": {
|
||||
"functionality_not_yet_developed":"功能未开发",
|
||||
"hello": "你好",
|
||||
"welcome": "欢迎",
|
||||
"dark_mode": "深色模式",
|
||||
@@ -47,7 +48,13 @@
|
||||
"preferences": "偏好设置",
|
||||
"administrator": "管理员",
|
||||
"select_date":"选择日期",
|
||||
"save_ok":"保存成功"
|
||||
"save_ok":"保存成功",
|
||||
"change_ok":"更改成功",
|
||||
"type_old_pass":"输入旧密码",
|
||||
"type_new_pass":"输入新密码",
|
||||
"type_cof_pass":"确认新密码",
|
||||
"old_pass_incorrect":"旧密码不正确",
|
||||
"confirm_password_incorrect":"确认密码不正确"
|
||||
},
|
||||
"settings": {
|
||||
"account_settings": "个人设置",
|
||||
|
||||
@@ -86,6 +86,8 @@ export const useUserStore = defineStore("user", () => {
|
||||
getUserInfoFromCookie();
|
||||
};
|
||||
|
||||
|
||||
|
||||
const cookieUpdata = (cookie) => {
|
||||
userCookie.value = cookie;
|
||||
myfuncs.saveJsonT("userCookie", cookie);
|
||||
@@ -118,6 +120,7 @@ export const useUserStore = defineStore("user", () => {
|
||||
isLoggedIn,
|
||||
getUserAvatarPath,
|
||||
getUserBirthday,
|
||||
getUserInfoFromCookie,
|
||||
logout,
|
||||
login,
|
||||
loginFromStoreCookie,
|
||||
|
||||
@@ -7,32 +7,11 @@ import imageCropper from "@/components/imageCropper.vue";
|
||||
const user = useUserStore();
|
||||
const mos = ref();
|
||||
|
||||
function t() {
|
||||
console.log("test");
|
||||
|
||||
my_network_func.postJson(
|
||||
"/users/test",
|
||||
{
|
||||
a: "1",
|
||||
},
|
||||
(a) => {
|
||||
console.log(a);
|
||||
}
|
||||
);
|
||||
}
|
||||
function tt(){
|
||||
mos.value?.showAlert("danger", "123123", 5000);
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<main>
|
||||
1112
|
||||
<button @click="t">222</button>
|
||||
{{ user.userCookie }}
|
||||
<button @click="tt">333</button>
|
||||
{{ user.userInfo }}
|
||||
</main>
|
||||
<imageCropper />
|
||||
|
||||
|
||||
<MyOffcanvas ref="mos" />
|
||||
</template>
|
||||
|
||||
@@ -117,6 +117,9 @@ function functionupdataTitle() {
|
||||
}
|
||||
onMounted(() => {
|
||||
functionupdataTitle();
|
||||
if (userStore.isLoggedIn) {
|
||||
router.push("/");
|
||||
}
|
||||
});
|
||||
// 监听语言变化,更新标题
|
||||
watch(locale, () => {
|
||||
|
||||
@@ -167,7 +167,11 @@ watch(locale, () => {
|
||||
<span class="input-group-text">
|
||||
<div
|
||||
class="link-secondary"
|
||||
title="Show password"
|
||||
:title="
|
||||
isShowPassword
|
||||
? t('message.hidden_Password')
|
||||
: t('message.show_password')
|
||||
"
|
||||
data-bs-toggle="tooltip"
|
||||
>
|
||||
<!-- Download SVG icon from http://tabler-icons.io/i/eye -->
|
||||
|
||||
@@ -7,16 +7,32 @@ import imageCropper from "@/components/imageCropper.vue";
|
||||
import { useUserStore } from "@/stores/user";
|
||||
import { my_network_func } from "@/my_network_func";
|
||||
import MyOffcanvas from "@/components/MyOffcanvas.vue";
|
||||
import { myfuncs } from "@/myfunc";
|
||||
import { useRouter } from "vue-router";
|
||||
const mos = ref();
|
||||
|
||||
const { t } = useI18n();
|
||||
const { t, locale } = useI18n();
|
||||
|
||||
const router = useRouter();
|
||||
|
||||
const birthday = ref();
|
||||
const username = ref();
|
||||
const userremark = ref();
|
||||
|
||||
const emailInput = ref();
|
||||
|
||||
const userStore = useUserStore();
|
||||
|
||||
const oldPassInput = ref();
|
||||
const newPassInput = ref();
|
||||
const cnfPassInput = ref();
|
||||
|
||||
const isShowPassword = ref(false);
|
||||
|
||||
function togglePasswordVisibility() {
|
||||
isShowPassword.value = !isShowPassword.value;
|
||||
}
|
||||
|
||||
function updataInfo() {
|
||||
let isDataErr = false;
|
||||
|
||||
@@ -44,13 +60,13 @@ function updataInfo() {
|
||||
}
|
||||
|
||||
if (isDataErr) {
|
||||
console.log("用户信息有误,无法保存");
|
||||
//console.log("用户信息有误,无法保存");
|
||||
return;
|
||||
}
|
||||
console.log("保存用户信息");
|
||||
console.log("用户名:", usernameValue);
|
||||
console.log("备注:", userremarkValue);
|
||||
console.log("生日:", birthdayValue);
|
||||
// console.log("保存用户信息");
|
||||
// console.log("用户名:", usernameValue);
|
||||
// console.log("备注:", userremarkValue);
|
||||
// console.log("生日:", birthdayValue);
|
||||
my_network_func.postJson(
|
||||
"/users/updateInfo",
|
||||
{
|
||||
@@ -59,16 +75,14 @@ function updataInfo() {
|
||||
birthday: birthdayValue,
|
||||
},
|
||||
(r) => {
|
||||
console.log(r);
|
||||
//console.log(r);
|
||||
switch (r.statusCode) {
|
||||
case 200:
|
||||
switch (r.data.err_code) {
|
||||
case 0:
|
||||
mos.value?.showAlert(
|
||||
"success",
|
||||
t("message.save_ok"),
|
||||
1000
|
||||
);
|
||||
mos.value?.showAlert("success", t("message.save_ok"), 1000);
|
||||
// 更新用户信息到store
|
||||
userStore.getUserInfoFromCookie();
|
||||
break;
|
||||
default:
|
||||
mos.value?.showAlert("danger", t("message.server_error"), 5000);
|
||||
@@ -83,10 +97,167 @@ function updataInfo() {
|
||||
);
|
||||
}
|
||||
|
||||
function changeEmail() {
|
||||
if (emailInput.value.value == "") {
|
||||
emailInput.value.classList.add("is-invalid");
|
||||
mos.value?.showAlert("warning", t("message.please_enter_your_email"), 3000);
|
||||
return;
|
||||
} else {
|
||||
emailInput.value.classList.remove("is-invalid");
|
||||
}
|
||||
//判断是否是合法邮箱
|
||||
if (myfuncs.isValidEmail(emailInput.value.value) == false) {
|
||||
emailInput.value.classList.add("is-invalid");
|
||||
mos.value?.showAlert("danger", t("message.this_not_email"), 3000);
|
||||
return;
|
||||
} else {
|
||||
emailInput.value.classList.remove("is-invalid");
|
||||
}
|
||||
|
||||
my_network_func.postJson(
|
||||
"/users/changeEmail",
|
||||
{
|
||||
newemail: emailInput.value.value,
|
||||
},
|
||||
(r) => {
|
||||
switch (r.statusCode) {
|
||||
case 200:
|
||||
switch (r.data.err_code) {
|
||||
case 0:
|
||||
mos.value?.showAlert("success", t("message.change_ok"), 5000);
|
||||
// 更新用户信息到store
|
||||
userStore.getUserInfoFromCookie();
|
||||
break;
|
||||
case -43:
|
||||
emailInput.value.classList.add("is-invalid");
|
||||
mos.value?.showAlert("danger", t("message.this_not_email"), 3000);
|
||||
break;
|
||||
|
||||
default:
|
||||
mos.value?.showAlert("danger", t("message.server_error"), 5000);
|
||||
break;
|
||||
}
|
||||
break;
|
||||
default:
|
||||
mos.value?.showAlert("danger", t("message.network_err"), 5000);
|
||||
break;
|
||||
}
|
||||
}
|
||||
);
|
||||
}
|
||||
|
||||
function changePassword() {
|
||||
let isDataErr = false;
|
||||
|
||||
let oldPass = oldPassInput.value.value;
|
||||
let newPass = newPassInput.value.value;
|
||||
let cnfPass = cnfPassInput.value.value;
|
||||
|
||||
oldPassInput.value.classList.remove("is-invalid");
|
||||
newPassInput.value.classList.remove("is-invalid");
|
||||
cnfPassInput.value.classList.remove("is-invalid");
|
||||
|
||||
if (!oldPass) {
|
||||
isDataErr = true;
|
||||
oldPassInput.value.classList.add("is-invalid");
|
||||
}
|
||||
if (!newPass) {
|
||||
isDataErr = true;
|
||||
newPassInput.value.classList.add("is-invalid");
|
||||
}
|
||||
|
||||
if (!cnfPass) {
|
||||
isDataErr = true;
|
||||
cnfPassInput.value.classList.add("is-invalid");
|
||||
}
|
||||
|
||||
if (newPass !== cnfPass) {
|
||||
isDataErr = true;
|
||||
newPassInput.value.classList.add("is-invalid");
|
||||
cnfPassInput.value.classList.add("is-invalid");
|
||||
mos.value?.showAlert(
|
||||
"warning",
|
||||
t("message.confirm_password_incorrect"),
|
||||
3000
|
||||
);
|
||||
}
|
||||
if (isDataErr) {
|
||||
return;
|
||||
}
|
||||
|
||||
my_network_func.postJson(
|
||||
"/users/changePassword",
|
||||
{
|
||||
oldpass: oldPass,
|
||||
newpass: newPass,
|
||||
},
|
||||
(r) => {
|
||||
switch (r.statusCode) {
|
||||
case 200:
|
||||
switch (r.data.err_code) {
|
||||
case 0:
|
||||
// 清空输入框
|
||||
oldPassInput.value.value = "";
|
||||
newPassInput.value.value = "";
|
||||
cnfPassInput.value.value = "";
|
||||
mos.value?.showAlert(
|
||||
"success",
|
||||
t("message.change_ok"),
|
||||
2000,
|
||||
() => {
|
||||
userStore.logout();
|
||||
router.push("/");
|
||||
}
|
||||
);
|
||||
|
||||
break;
|
||||
case -42:
|
||||
oldPassInput.value.classList.add("is-invalid");
|
||||
mos.value?.showAlert(
|
||||
"danger",
|
||||
t("message.old_pass_incorrect"),
|
||||
3000
|
||||
);
|
||||
break;
|
||||
|
||||
default:
|
||||
mos.value?.showAlert("danger", t("message.server_error"), 5000);
|
||||
break;
|
||||
}
|
||||
break;
|
||||
default:
|
||||
mos.value?.showAlert("danger", t("message.network_err"), 5000);
|
||||
break;
|
||||
}
|
||||
}
|
||||
);
|
||||
}
|
||||
|
||||
function changeAvatar() {
|
||||
mos.value?.showAlert(
|
||||
"info",
|
||||
t("message.functionality_not_yet_developed"),
|
||||
5000
|
||||
);
|
||||
}
|
||||
|
||||
function functionupdataTitle() {
|
||||
document.title = "Operations." + t("settings.account_settings");
|
||||
}
|
||||
|
||||
// 监听语言变化,更新标题
|
||||
watch(locale, () => {
|
||||
functionupdataTitle();
|
||||
});
|
||||
|
||||
onMounted(() => {
|
||||
//console.log("account mounted");
|
||||
//username.value.value="Kevin";
|
||||
functionupdataTitle();
|
||||
|
||||
if (!userStore.isLoggedIn) {
|
||||
router.push("/login");
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
@@ -119,7 +290,7 @@ onMounted(() => {
|
||||
</div>
|
||||
<!-- <imageCropper /> -->
|
||||
<div class="col-auto">
|
||||
<button class="btn">
|
||||
<button class="btn" @click="changeAvatar">
|
||||
{{ t("settings.change_avatar") }}
|
||||
</button>
|
||||
</div>
|
||||
@@ -150,7 +321,10 @@ onMounted(() => {
|
||||
</div>
|
||||
<div class="col-md">
|
||||
<div class="form-label">{{ t("settings.birthday") }}</div>
|
||||
<datePicker ref="birthday" :setdef="userStore.getUserBirthday()"/>
|
||||
<datePicker
|
||||
ref="birthday"
|
||||
:setdef="userStore.getUserBirthday()"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<button class="btn" @click="updataInfo">
|
||||
@@ -162,22 +336,89 @@ onMounted(() => {
|
||||
<div>
|
||||
<div class="row g-2">
|
||||
<div class="col-auto">
|
||||
<input type="text" class="form-control w-auto" />
|
||||
<input
|
||||
ref="emailInput"
|
||||
type="text"
|
||||
class="form-control w-auto"
|
||||
:value="userStore.user.Email"
|
||||
:placeholder="t('message.your_email_address')"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-auto">
|
||||
<button class="btn">
|
||||
<button class="btn" @click="changeEmail">
|
||||
{{ t("settings.change_email") }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<h3 class="card-title mt-4">{{ t("settings.password") }}</h3>
|
||||
<input type="password" class="form-control w-auto mb-1" />
|
||||
<input type="password" class="form-control w-auto mb-1" />
|
||||
<input type="password" class="form-control w-auto mb-1" />
|
||||
<h3 class="card-title mt-4">
|
||||
{{ t("settings.password") }}
|
||||
<!-- Download SVG icon from http://tabler-icons.io/i/eye -->
|
||||
<svg
|
||||
v-if="!isShowPassword"
|
||||
@click="togglePasswordVisibility"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
class="icon"
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
stroke-width="2"
|
||||
stroke="currentColor"
|
||||
fill="none"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
>
|
||||
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
|
||||
<path d="M10 12a2 2 0 1 0 4 0a2 2 0 0 0 -4 0" />
|
||||
<path
|
||||
d="M21 12c-2.4 4 -5.4 6 -9 6c-3.6 0 -6.6 -2 -9 -6c2.4 -4 5.4 -6 9 -6c3.6 0 6.6 2 9 6"
|
||||
/>
|
||||
</svg>
|
||||
<svg
|
||||
v-if="isShowPassword"
|
||||
@click="togglePasswordVisibility"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
class="icon"
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
>
|
||||
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
|
||||
<path d="M10.585 10.587a2 2 0 0 0 2.829 2.828" />
|
||||
<path
|
||||
d="M16.681 16.673a8.717 8.717 0 0 1 -4.681 1.327c-3.6 0 -6.6 -2 -9 -6c1.272 -2.12 2.712 -3.678 4.32 -4.674m2.86 -1.146a9.055 9.055 0 0 1 1.82 -.18c3.6 0 6.6 2 9 6c-.666 1.11 -1.379 2.067 -2.138 2.87"
|
||||
/>
|
||||
<path d="M3 3l18 18" />
|
||||
</svg>
|
||||
</h3>
|
||||
|
||||
<input
|
||||
ref="oldPassInput"
|
||||
:type="isShowPassword ? 'text' : 'password'"
|
||||
class="form-control w-auto mb-1"
|
||||
:placeholder="t('message.type_old_pass')"
|
||||
/>
|
||||
|
||||
<input
|
||||
ref="newPassInput"
|
||||
:type="isShowPassword ? 'text' : 'password'"
|
||||
class="form-control w-auto mb-1"
|
||||
:placeholder="t('message.type_new_pass')"
|
||||
/>
|
||||
<input
|
||||
ref="cnfPassInput"
|
||||
:type="isShowPassword ? 'text' : 'password'"
|
||||
class="form-control w-auto mb-1"
|
||||
:placeholder="t('message.type_cof_pass')"
|
||||
/>
|
||||
|
||||
<div>
|
||||
<button class="btn">
|
||||
<button class="btn" @click="changePassword">
|
||||
{{ t("settings.set_new_password") }}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user