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