mirror of
https://github.com/certd/certd.git
synced 2026-05-15 20:47:31 +08:00
Translate user security page
This commit is contained in:
Lorenzo
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user