mirror of https://github.com/certd/certd
Translate user security page
Lorenzo
parent
34ec6210c6
commit
dfddfc3e06
|
|
@ -9,96 +9,103 @@ import { useSettingStore } from "/@/store/settings";
|
||||||
import PageFooter from "./components/footer/index.vue";
|
import PageFooter from "./components/footer/index.vue";
|
||||||
import { useRouter } from "vue-router";
|
import { useRouter } from "vue-router";
|
||||||
import MaxKBChat from "/@/components/ai/index.vue";
|
import MaxKBChat from "/@/components/ai/index.vue";
|
||||||
|
import { useI18n } from "vue-i18n";
|
||||||
|
|
||||||
|
const { t } = useI18n();
|
||||||
|
|
||||||
const userStore = useUserStore();
|
const userStore = useUserStore();
|
||||||
|
|
||||||
const router = useRouter();
|
const router = useRouter();
|
||||||
const menus = computed(() => [
|
const menus = computed(() => [
|
||||||
{
|
{
|
||||||
handler: () => {
|
handler: () => {
|
||||||
router.push("/certd/mine/user-profile");
|
router.push("/certd/mine/user-profile");
|
||||||
},
|
},
|
||||||
icon: "fa-solid:book",
|
icon: "fa-solid:book",
|
||||||
text: "账号信息",
|
text: t("certd.accountInfo"),
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
handler: () => {
|
handler: () => {
|
||||||
router.push("/certd/mine/security");
|
router.push("/certd/mine/security");
|
||||||
},
|
},
|
||||||
icon: "fluent:shield-keyhole-16-regular",
|
icon: "fluent:shield-keyhole-16-regular",
|
||||||
text: "认证安全设置",
|
text: t("certd.securitySettings"),
|
||||||
},
|
},
|
||||||
]);
|
]);
|
||||||
|
|
||||||
|
|
||||||
const avatar = computed(() => {
|
const avatar = computed(() => {
|
||||||
const avt = userStore.getUserInfo?.avatar;
|
const avt = userStore.getUserInfo?.avatar;
|
||||||
return avt ? `/api/basic/file/download?key=${avt}` : "";
|
return avt ? `/api/basic/file/download?key=${avt}` : "";
|
||||||
});
|
});
|
||||||
|
|
||||||
async function handleLogout() {
|
async function handleLogout() {
|
||||||
await userStore.logout(true);
|
await userStore.logout(true);
|
||||||
}
|
}
|
||||||
|
|
||||||
const settingStore = useSettingStore();
|
const settingStore = useSettingStore();
|
||||||
|
|
||||||
const sysPublic = computed(() => {
|
const sysPublic = computed(() => {
|
||||||
return settingStore.sysPublic;
|
return settingStore.sysPublic;
|
||||||
});
|
});
|
||||||
const siteInfo = computed(() => {
|
const siteInfo = computed(() => {
|
||||||
return settingStore.siteInfo;
|
return settingStore.siteInfo;
|
||||||
});
|
});
|
||||||
|
|
||||||
onErrorCaptured(e => {
|
onErrorCaptured(e => {
|
||||||
console.error("ErrorCaptured:", e);
|
console.error("ErrorCaptured:", e);
|
||||||
// notification.error({ message: e.message });
|
// notification.error({ message: e.message });
|
||||||
//阻止错误向上传递
|
//阻止错误向上传递
|
||||||
return false;
|
return false;
|
||||||
});
|
});
|
||||||
|
|
||||||
onMounted(async () => {
|
onMounted(async () => {
|
||||||
await settingStore.checkUrlBound();
|
await settingStore.checkUrlBound();
|
||||||
});
|
});
|
||||||
|
|
||||||
function goGithub() {
|
function goGithub() {
|
||||||
window.open("https://github.com/certd/certd");
|
window.open("https://github.com/certd/certd");
|
||||||
}
|
}
|
||||||
const settingsStore = useSettingStore();
|
const settingsStore = useSettingStore();
|
||||||
const chatBox = ref();
|
const chatBox = ref();
|
||||||
const openChat = (q: string) => {
|
const openChat = (q: string) => {
|
||||||
chatBox.value.openChat({ q });
|
chatBox.value.openChat({ q });
|
||||||
};
|
};
|
||||||
provide("fn:ai.open", openChat);
|
provide("fn:ai.open", openChat);
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<BasicLayout @clear-preferences-and-logout="handleLogout">
|
<BasicLayout @clear-preferences-and-logout="handleLogout">
|
||||||
<template #user-dropdown>
|
<template #user-dropdown>
|
||||||
<UserDropdown :avatar="avatar" :menus="menus" :text="userStore.userInfo?.nickName || userStore.userInfo?.username" description="" tag-text="" @logout="handleLogout" />
|
<UserDropdown :avatar="avatar" :menus="menus"
|
||||||
</template>
|
:text="userStore.userInfo?.nickName || userStore.userInfo?.username" description="" tag-text=""
|
||||||
<template #lock-screen>
|
@logout="handleLogout" />
|
||||||
<LockScreen :avatar @to-login="handleLogout" />
|
</template>
|
||||||
</template>
|
<template #lock-screen>
|
||||||
<template #header-right-0>
|
<LockScreen :avatar @to-login="handleLogout" />
|
||||||
<div v-if="!settingStore.isComm" class="hover:bg-accent ml-1 mr-2 cursor-pointer rounded-full hidden md:block">
|
</template>
|
||||||
<tutorial-button class="flex-center header-btn" />
|
<template #header-right-0>
|
||||||
</div>
|
<div v-if="!settingStore.isComm"
|
||||||
<div class="hover:bg-accent ml-1 mr-2 cursor-pointer rounded-full">
|
class="hover:bg-accent ml-1 mr-2 cursor-pointer rounded-full hidden md:block">
|
||||||
<vip-button class="flex-center header-btn" mode="nav" />
|
<tutorial-button class="flex-center header-btn" />
|
||||||
</div>
|
</div>
|
||||||
<div v-if="!settingStore.isComm" class="hover:bg-accent ml-1 mr-2 cursor-pointer rounded-full">
|
<div class="hover:bg-accent ml-1 mr-2 cursor-pointer rounded-full">
|
||||||
<fs-button shape="circle" type="text" icon="ion:logo-github" :text="null" @click="goGithub" />
|
<vip-button class="flex-center header-btn" mode="nav" />
|
||||||
</div>
|
</div>
|
||||||
</template>
|
<div v-if="!settingStore.isComm" class="hover:bg-accent ml-1 mr-2 cursor-pointer rounded-full">
|
||||||
<template #footer>
|
<fs-button shape="circle" type="text" icon="ion:logo-github" :text="null" @click="goGithub" />
|
||||||
<PageFooter></PageFooter>
|
</div>
|
||||||
<MaxKBChat v-if="settingsStore.sysPublic.aiChatEnabled !== false" ref="chatBox" />
|
</template>
|
||||||
</template>
|
<template #footer>
|
||||||
</BasicLayout>
|
<PageFooter></PageFooter>
|
||||||
|
<MaxKBChat v-if="settingsStore.sysPublic.aiChatEnabled !== false" ref="chatBox" />
|
||||||
|
</template>
|
||||||
|
</BasicLayout>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<style lang="less">
|
<style lang="less">
|
||||||
.header-btn {
|
.header-btn {
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
padding: 5px;
|
padding: 5px;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -274,4 +274,19 @@ export default {
|
||||||
required: "Please enter domains to import",
|
required: "Please enter domains to import",
|
||||||
placeholder: "www.baidu.com:443:Baidu\nwww.taobao.com::Taobao\nwww.google.com\n",
|
placeholder: "www.baidu.com:443:Baidu\nwww.taobao.com::Taobao\nwww.google.com\n",
|
||||||
},
|
},
|
||||||
|
accountInfo: "Account Information",
|
||||||
|
securitySettings: "Security & Settings",
|
||||||
|
confirmDisable2FA: "Are you sure you want to disable two-factor authentication login?",
|
||||||
|
disabledSuccess: "Disabled successfully",
|
||||||
|
saveSuccess: "Saved successfully",
|
||||||
|
twoFactorAuth: "2FA Two-Factor Authentication Login",
|
||||||
|
rebind: "Rebind",
|
||||||
|
twoFactorAuthHelper: "Enable or disable two-factor authentication login",
|
||||||
|
bindDevice: "Bind Device",
|
||||||
|
step1: "1. Install any authenticator app, for example:",
|
||||||
|
tooltipGoogleServiceError: "If you get a Google service not found error, you can install KK Google Assistant",
|
||||||
|
step2: "2. Scan the QR code to add the account",
|
||||||
|
step3: "3. Enter the verification code",
|
||||||
|
inputVerifyCode: "Please enter the verification code",
|
||||||
|
cancel: "Cancel",
|
||||||
};
|
};
|
||||||
|
|
|
||||||
|
|
@ -280,4 +280,19 @@ export default {
|
||||||
required: "请输入要导入的域名",
|
required: "请输入要导入的域名",
|
||||||
placeholder: "www.baidu.com:443:百度\nwww.taobao.com::淘宝\nwww.google.com\n",
|
placeholder: "www.baidu.com:443:百度\nwww.taobao.com::淘宝\nwww.google.com\n",
|
||||||
},
|
},
|
||||||
|
accountInfo: "账号信息",
|
||||||
|
securitySettings: "认证安全设置",
|
||||||
|
confirmDisable2FA: "确定要关闭多重验证登录吗？",
|
||||||
|
disabledSuccess: "关闭成功",
|
||||||
|
saveSuccess: "保存成功",
|
||||||
|
twoFactorAuth: "2FA多重验证登录",
|
||||||
|
rebind: "重新绑定",
|
||||||
|
twoFactorAuthHelper: "是否开启多重验证登录",
|
||||||
|
bindDevice: "绑定设备",
|
||||||
|
step1: "1. 安装任意一款支持Authenticator的验证APP，比如：",
|
||||||
|
tooltipGoogleServiceError: "如果报没有找到谷歌服务的错误，您可以安装KK谷歌助手",
|
||||||
|
step2: "2. 扫描二维码添加账号",
|
||||||
|
step3: "3. 输入验证码",
|
||||||
|
inputVerifyCode: "请输入验证码",
|
||||||
|
cancel: "取消",
|
||||||
};
|
};
|
||||||
|
|
|
||||||
|
|
@ -1,73 +1,82 @@
|
||||||
<template>
|
<template>
|
||||||
<fs-page class="page-user-settings page-two-factor">
|
<fs-page class="page-user-settings page-two-factor">
|
||||||
<template #header>
|
<template #header>
|
||||||
<div class="title">认证安全设置</div>
|
<div class="title">{{ t("certd.securitySettings") }}</div>
|
||||||
</template>
|
</template>
|
||||||
<div class="user-settings-form settings-form">
|
|
||||||
<a-form :model="formState" name="basic" :label-col="{ span: 8 }" :wrapper-col="{ span: 16 }" autocomplete="off">
|
|
||||||
<a-form-item label="2FA多重验证登录" :name="['authenticator', 'enabled']">
|
|
||||||
<div class="flex mt-5">
|
|
||||||
<a-switch v-model:checked="formState.authenticator.enabled" :disabled="!settingsStore.isPlus" @change="onAuthenticatorEnabledChanged" />
|
|
||||||
|
|
||||||
<a-button
|
<div class="user-settings-form settings-form">
|
||||||
v-if="formState.authenticator.enabled && formState.authenticator.verified"
|
<a-form :model="formState" name="basic" :label-col="{ span: 8 }" :wrapper-col="{ span: 16 }"
|
||||||
:disabled="authenticatorOpenRef || !settingsStore.isPlus"
|
autocomplete="off">
|
||||||
size="small"
|
<a-form-item :label="t('certd.twoFactorAuth')" :name="['authenticator', 'enabled']">
|
||||||
class="ml-5"
|
<div class="flex mt-5">
|
||||||
type="primary"
|
<a-switch v-model:checked="formState.authenticator.enabled" :disabled="!settingsStore.isPlus"
|
||||||
@click="authenticatorForm.open = true"
|
@change="onAuthenticatorEnabledChanged" />
|
||||||
>
|
|
||||||
重新绑定
|
|
||||||
</a-button>
|
|
||||||
|
|
||||||
<vip-button class="ml-5" mode="button"></vip-button>
|
<a-button v-if="formState.authenticator.enabled && formState.authenticator.verified"
|
||||||
</div>
|
:disabled="authenticatorOpenRef || !settingsStore.isPlus" size="small" class="ml-5"
|
||||||
|
type="primary" @click="authenticatorForm.open = true">
|
||||||
|
{{ t('certd.rebind') }}
|
||||||
|
</a-button>
|
||||||
|
|
||||||
<div class="helper">是否开启多重验证登录</div>
|
<vip-button class="ml-5" mode="button"></vip-button>
|
||||||
</a-form-item>
|
</div>
|
||||||
<a-form-item v-if="authenticatorOpenRef" label="绑定设备" class="authenticator-config">
|
|
||||||
<h3 class="font-bold m-5">1. 安装任意一款支持Authenticator的验证APP，比如：</h3>
|
<div class="helper">{{ t('certd.twoFactorAuthHelper') }}</div>
|
||||||
<div class="ml-20">
|
</a-form-item>
|
||||||
<ul>
|
|
||||||
<li>
|
<a-form-item v-if="authenticatorOpenRef" :label="t('certd.bindDevice')" class="authenticator-config">
|
||||||
<a-tooltip title="如果报没有找到谷歌服务的错误，您可以安装KK谷歌助手">
|
<h3 class="font-bold m-5">{{ t('certd.step1') }}</h3>
|
||||||
<a href="https://appgallery.huawei.com/app/C100262999" target="_blank"> Microsoft Authenticator</a>
|
<div class="ml-20">
|
||||||
</a-tooltip>
|
<ul>
|
||||||
</li>
|
<li>
|
||||||
<li>
|
<a-tooltip :title="t('certd.tooltipGoogleServiceError')">
|
||||||
<a href="https://sj.qq.com/appdetail/com.tencent.authenticator" target="_blank">腾讯身份验证器</a>
|
<a href="https://appgallery.huawei.com/app/C100262999" target="_blank">Microsoft
|
||||||
</li>
|
Authenticator</a>
|
||||||
<li>
|
</a-tooltip>
|
||||||
<a href="https://www.synology.cn/zh-cn/dsm/feature/authentication" target="_blank">群晖身份验证器</a>
|
</li>
|
||||||
</li>
|
<li>
|
||||||
<li>
|
<a href="https://sj.qq.com/appdetail/com.tencent.authenticator"
|
||||||
<a-tooltip title="如果报没有找到谷歌服务的错误，您可以安装KK谷歌助手">
|
target="_blank">腾讯身份验证器</a>
|
||||||
<a href="https://play.google.com/store/apps/details?id=com.google.android.apps.authenticator2" target="_blank">Google Authenticator</a>
|
</li>
|
||||||
</a-tooltip>
|
<li>
|
||||||
</li>
|
<a href="https://www.synology.cn/zh-cn/dsm/feature/authentication"
|
||||||
<li>
|
target="_blank">群晖身份验证器</a>
|
||||||
<a href="https://play.google.com/store/apps/details?id=com.authy.authy" target="_blank">Authy</a>
|
</li>
|
||||||
</li>
|
<li>
|
||||||
</ul>
|
<a-tooltip :title="t('certd.tooltipGoogleServiceError')">
|
||||||
</div>
|
<a href="https://play.google.com/store/apps/details?id=com.google.android.apps.authenticator2"
|
||||||
<h3 class="font-bold m-10">2. 扫描二维码添加账号</h3>
|
target="_blank">Google Authenticator</a>
|
||||||
<div v-if="authenticatorForm.qrcodeSrc" class="qrcode">
|
</a-tooltip>
|
||||||
<div class="ml-20">
|
</li>
|
||||||
<img class="full-w" :src="authenticatorForm.qrcodeSrc" />
|
<li>
|
||||||
</div>
|
<a href="https://play.google.com/store/apps/details?id=com.authy.authy"
|
||||||
</div>
|
target="_blank">Authy</a>
|
||||||
<h3 class="font-bold m-10">3. 输入验证码</h3>
|
</li>
|
||||||
<div class="ml-20">
|
</ul>
|
||||||
<a-input v-model:value="authenticatorForm.verifyCode" placeholder="请输入验证码" />
|
</div>
|
||||||
</div>
|
<h3 class="font-bold m-10">{{ t('certd.step2') }}</h3>
|
||||||
<div class="ml-20 flex mt-10">
|
<div v-if="authenticatorForm.qrcodeSrc" class="qrcode">
|
||||||
<loading-button type="primary" html-type="button" :click="doAuthenticatorSave">确认</loading-button>
|
<div class="ml-20">
|
||||||
<a-button class="ml-1" @click="authenticatorForm.open = false">取消</a-button>
|
<img class="full-w" :src="authenticatorForm.qrcodeSrc" />
|
||||||
</div>
|
</div>
|
||||||
</a-form-item>
|
</div>
|
||||||
</a-form>
|
<h3 class="font-bold m-10">{{ t('certd.step3') }}</h3>
|
||||||
</div>
|
<div class="ml-20">
|
||||||
</fs-page>
|
<a-input v-model:value="authenticatorForm.verifyCode"
|
||||||
|
:placeholder="t('certd.inputVerifyCode')" />
|
||||||
|
</div>
|
||||||
|
<div class="ml-20 flex mt-10">
|
||||||
|
<loading-button type="primary" html-type="button" :click="doAuthenticatorSave">{{
|
||||||
|
t('certd.confirm')
|
||||||
|
}}</loading-button>
|
||||||
|
<a-button class="ml-1" @click="authenticatorForm.open = false">{{ t('certd.cancel')
|
||||||
|
}}</a-button>
|
||||||
|
</div>
|
||||||
|
</a-form-item>
|
||||||
|
|
||||||
|
</a-form>
|
||||||
|
</div>
|
||||||
|
</fs-page>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup lang="tsx">
|
<script setup lang="tsx">
|
||||||
|
|
@ -77,87 +86,92 @@ import { UserTwoFactorSetting } from "./api";
|
||||||
import { Modal, notification } from "ant-design-vue";
|
import { Modal, notification } from "ant-design-vue";
|
||||||
import { merge } from "lodash-es";
|
import { merge } from "lodash-es";
|
||||||
import { useSettingStore } from "/@/store/settings";
|
import { useSettingStore } from "/@/store/settings";
|
||||||
|
import { useI18n } from "vue-i18n";
|
||||||
|
|
||||||
|
const { t } = useI18n();
|
||||||
const settingsStore = useSettingStore();
|
const settingsStore = useSettingStore();
|
||||||
defineOptions({
|
defineOptions({
|
||||||
name: "UserSecurity",
|
name: "UserSecurity",
|
||||||
});
|
});
|
||||||
|
|
||||||
const formState = reactive<Partial<UserTwoFactorSetting>>({
|
const formState = reactive<Partial<UserTwoFactorSetting>>({
|
||||||
authenticator: {
|
authenticator: {
|
||||||
enabled: false,
|
enabled: false,
|
||||||
verified: false,
|
verified: false,
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
|
||||||
const authenticatorForm = reactive({
|
const authenticatorForm = reactive({
|
||||||
qrcodeSrc: "",
|
qrcodeSrc: "",
|
||||||
verifyCode: "",
|
verifyCode: "",
|
||||||
open: false,
|
open: false,
|
||||||
});
|
});
|
||||||
|
|
||||||
const authenticatorOpenRef = computed(() => {
|
const authenticatorOpenRef = computed(() => {
|
||||||
return formState.authenticator.enabled && (authenticatorForm.open || !formState.authenticator.verified);
|
return formState.authenticator.enabled && (authenticatorForm.open || !formState.authenticator.verified);
|
||||||
});
|
});
|
||||||
watch(
|
watch(
|
||||||
() => {
|
() => {
|
||||||
return authenticatorOpenRef.value;
|
return authenticatorOpenRef.value;
|
||||||
},
|
},
|
||||||
async open => {
|
async open => {
|
||||||
if (open) {
|
if (open) {
|
||||||
//base64 转图片
|
//base64 转图片
|
||||||
authenticatorForm.qrcodeSrc = await api.TwoFactorAuthenticatorGet();
|
authenticatorForm.qrcodeSrc = await api.TwoFactorAuthenticatorGet();
|
||||||
} else {
|
} else {
|
||||||
authenticatorForm.qrcodeSrc = "";
|
authenticatorForm.qrcodeSrc = "";
|
||||||
authenticatorForm.verifyCode = "";
|
authenticatorForm.verifyCode = "";
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
);
|
);
|
||||||
|
|
||||||
async function loadUserSettings() {
|
async function loadUserSettings() {
|
||||||
const data: any = await api.TwoFactorSettingsGet();
|
const data: any = await api.TwoFactorSettingsGet();
|
||||||
merge(formState, data);
|
merge(formState, data);
|
||||||
}
|
}
|
||||||
|
|
||||||
loadUserSettings();
|
loadUserSettings();
|
||||||
const doAuthenticatorSave = async (form: any) => {
|
const doAuthenticatorSave = async (form: any) => {
|
||||||
await api.TwoFactorAuthenticatorSave({
|
await api.TwoFactorAuthenticatorSave({
|
||||||
verifyCode: authenticatorForm.verifyCode,
|
verifyCode: authenticatorForm.verifyCode,
|
||||||
});
|
});
|
||||||
notification.success({
|
notification.success({
|
||||||
message: "保存成功",
|
message: t("certd.saveSuccess"),
|
||||||
});
|
});
|
||||||
authenticatorForm.open = false;
|
authenticatorForm.open = false;
|
||||||
formState.authenticator.verified = true;
|
formState.authenticator.verified = true;
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
||||||
function onAuthenticatorEnabledChanged(value: any) {
|
function onAuthenticatorEnabledChanged(value: any) {
|
||||||
if (!value) {
|
if (!value) {
|
||||||
//要关闭
|
//要关闭
|
||||||
if (formState.authenticator.verified) {
|
if (formState.authenticator.verified) {
|
||||||
Modal.confirm({
|
Modal.confirm({
|
||||||
title: "确认",
|
title: t("certd.confirm"),
|
||||||
content: `确定要关闭多重验证登录吗？`,
|
content: t("certd.confirmDisable2FA"),
|
||||||
async onOk() {
|
async onOk() {
|
||||||
await api.TwoFactorAuthenticatorOff();
|
await api.TwoFactorAuthenticatorOff();
|
||||||
notification.success({
|
notification.success({
|
||||||
message: "关闭成功",
|
message: t("certd.disabledSuccess"),
|
||||||
});
|
});
|
||||||
loadUserSettings();
|
loadUserSettings();
|
||||||
},
|
},
|
||||||
onCancel() {
|
onCancel() {
|
||||||
formState.authenticator.enabled = true;
|
formState.authenticator.enabled = true;
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="less">
|
<style lang="less">
|
||||||
.page-user-settings {
|
.page-user-settings {
|
||||||
.user-settings-form {
|
.user-settings-form {
|
||||||
width: 600px;
|
width: 600px;
|
||||||
margin: 20px;
|
margin: 20px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue