github
/
certd
mirror of https://github.com/certd/certd
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

Translate user security page

pull/436/head
Lorenzo 2025-06-26 00:16:30 +02:00
parent 34ec6210c6
commit dfddfc3e06
4 changed files with 222 additions and 171 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
packages/ui/certd-client/src/layout/layout-basic.vue
View File

@ -9,6 +9,9 @@ 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();
@ -19,17 +22,18 @@ const menus = computed(() => [
router.push("/certd/mine/user-profile");
},
icon: "fa-solid:book",
text: "账号信息",
text: t("certd.accountInfo"),
},
{
handler: () => {
router.push("/certd/mine/security");
},
icon: "fluent:shield-keyhole-16-regular",
text: "认证安全设置",
text: t("certd.securitySettings"),
},
]);
const avatar = computed(() => {
const avt = userStore.getUserInfo?.avatar;
return avt ? `/api/basic/file/download?key=${avt}` : "";
@ -73,13 +77,16 @@ provide("fn:ai.open", openChat);
<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" />
<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">
<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">

15
packages/ui/certd-client/src/locales/langs/en-US/certd.ts
View File

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

15
packages/ui/certd-client/src/locales/langs/zh-CN/certd.ts
View File

@ -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: "取消",
};

82
packages/ui/certd-client/src/views/certd/mine/security/index.vue
View File

@ -1,70 +1,79 @@
<template>
<fs-page class="page-user-settings page-two-factor">
<template #header>
<div class="title">认证安全设置</div>
<div class="title">{{ t("certd.securitySettings") }}</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" />
<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"
>
重新绑定
<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" />
<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>
<vip-button class="ml-5" mode="button"></vip-button>
</div>
<div class="helper">是否开启多重验证登录</div>
<div class="helper">{{ t('certd.twoFactorAuthHelper') }}</div>
</a-form-item>
<a-form-item v-if="authenticatorOpenRef" label="绑定设备" class="authenticator-config">
<h3 class="font-bold m-5">1. 安装任意一款支持Authenticator的验证APP，比如：</h3>
<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="如果报没有找到谷歌服务的错误，您可以安装KK谷歌助手">
<a href="https://appgallery.huawei.com/app/C100262999" target="_blank"> Microsoft Authenticator</a>
<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>
<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>
<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 :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>
<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>
<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">3. 输入验证码</h3>
<h3 class="font-bold m-10">{{ t('certd.step3') }}</h3>
<div class="ml-20">
<a-input v-model:value="authenticatorForm.verifyCode" placeholder="请输入验证码" />
<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">确认</loading-button>
<a-button class="ml-1" @click="authenticatorForm.open = false">取消</a-button>
<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>
@ -77,6 +86,9 @@ 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",
@ -124,23 +136,24 @@ const doAuthenticatorSave = async (form: any) => {
verifyCode: authenticatorForm.verifyCode,
});
notification.success({
message: "保存成功",
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: `确定要关闭多重验证登录吗？`,
title: t("certd.confirm"),
content: t("certd.confirmDisable2FA"),
async onOk() {
await api.TwoFactorAuthenticatorOff();
notification.success({
message: "关闭成功",
message: t("certd.disabledSuccess"),
});
loadUserSettings();
},
@ -151,6 +164,7 @@ function onAuthenticatorEnabledChanged(value: any) {
}
}
}
</script>
<style lang="less">