chore: 2FA

packages/ui/certd-client/src/router/source/modules/certd.ts

@@ -143,6 +143,17 @@ export const certdResources = [
               keepAlive: true,
             },
           },
+          {
+            title: "认证安全设置",
+            name: "UserSecurity",
+            path: "/certd/mine/security",
+            component: "/certd/mine/security/index.vue",
+            meta: {
+              icon: "ion:locked-outline",
+              auth: true,
+              isMenu: true,
+            },
+          },
           {
             title: "账号信息",
             name: "UserProfile",

packages/ui/certd-client/src/views/certd/mine/security/api.ts

@@ -38,3 +38,10 @@ export async function TwoFactorAuthenticatorSave(req: AuthenticatorSaveReq) {
     data: req,
   });
 }
+
+export async function TwoFactorAuthenticatorOff() {
+  return await request({
+    url: apiPrefix + "/twoFactor/authenticator/off",
+    method: "post",
+  });
+}

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

@@ -1,35 +1,39 @@
 <template>
   <fs-page class="page-user-settings page-two-factor">
     <template #header>
-      <div class="title">多重认证设置</div>
+      <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="Authenticator APP认证" :name="['authenticator', 'enabled']">
-          <div class="flex">
-            <a-switch v-model:checked="formState.authenticator.enabled" />
+        <a-form-item label="OTP多重验证登录" :name="['authenticator', 'enabled']">
+          <div class="flex mt-5">
+            <a-switch v-model:checked="formState.authenticator.enabled" @change="onAuthenticatorEnabledChanged" />
 
-            <a-button v-if="formState.authenticator.enabled && formState.authenticator.verified" class="ml-1" type="primary" @click="authenticatorForm.open = true">修改</a-button>
+            <a-button v-if="formState.authenticator.enabled && formState.authenticator.verified" :disabled="authenticatorOpenRef" size="small" class="ml-2" type="primary" @click="authenticatorForm.open = true">
+              重新绑定
+            </a-button>
           </div>
 
-          <div class="helper">创建流水线时默认使用此定时时间</div>
+          <div class="helper">是否开启多重验证登录</div>
         </a-form-item>
-        <div v-if="authenticatorOpenRef" class="authenticator-config">
-          <h3>1. 安装任意一款 Authenticator APP</h3>
-          <div>比如：Microsoft Authenticator / Google Authenticator / Authy / Synology Secure SignIn 等</div>
-          <h3>2. 扫描二维码添加账号</h3>
+        <a-form-item v-if="authenticatorOpenRef" label="绑定设备" class="authenticator-config">
+          <h3 class="font-bold m-5">1. 安装任意一款 Authenticator APP</h3>
+          <div class="ml-20">比如：Microsoft Authenticator / Google Authenticator / Authy / Synology Secure SignIn 等</div>
+          <h3 class="font-bold m-10">2. 扫描二维码添加账号</h3>
           <div v-if="authenticatorForm.qrcodeSrc" class="qrcode">
-            <img style="width: 400px; height: 400px" :src="authenticatorForm.qrcodeSrc" />
+            <div class="ml-20">
+              <img class="full-w" :src="authenticatorForm.qrcodeSrc" />
+            </div>
           </div>
-          <h3>3. 输入验证码</h3>
-          <div>
+          <h3 class="font-bold m-10">3. 输入验证码</h3>
+          <div class="ml-20">
             <a-input v-model:value="authenticatorForm.verifyCode" placeholder="请输入验证码" />
           </div>
-          <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>
-        </div>
+        </a-form-item>
       </a-form>
     </div>
   </fs-page>
@@ -39,11 +43,11 @@
 import { computed, reactive, watch } from "vue";
 import * as api from "./api";
 import { UserTwoFactorSetting } from "./api";
-import { notification } from "ant-design-vue";
+import { Modal, notification } from "ant-design-vue";
 import { merge } from "lodash-es";
 
 defineOptions({
-  name: "UserSettingsTwoFactor",
+  name: "UserSecurity",
 });
 
 const formState = reactive<Partial<UserTwoFactorSetting>>({});
@@ -63,9 +67,8 @@ watch(
   },
   async open => {
     if (open) {
-      const data = await api.TwoFactorAuthenticatorGet();
       //base64 转图片
-      authenticatorForm.qrcodeSrc = `data:image/png;base64,${data}`;
+      authenticatorForm.qrcodeSrc = await api.TwoFactorAuthenticatorGet();
     } else {
       authenticatorForm.qrcodeSrc = "";
       authenticatorForm.verifyCode = "";
@@ -86,13 +89,36 @@ const doAuthenticatorSave = async (form: any) => {
   notification.success({
     message: "保存成功",
   });
+  authenticatorForm.open = false;
 };
+
+function onAuthenticatorEnabledChanged(value) {
+  if (!value) {
+    //要关闭
+    if (formState.authenticator.verified) {
+      Modal.confirm({
+        title: "确认",
+        content: `确定要关闭多重验证登录吗？`,
+        async onOk() {
+          await api.TwoFactorAuthenticatorOff();
+          notification.success({
+            message: "关闭成功",
+          });
+          loadUserSettings();
+        },
+        onCancel() {
+          formState.authenticator.enabled = true;
+        },
+      });
+    }
+  }
+}
 </script>
 
 <style lang="less">
 .page-user-settings {
   .user-settings-form {
-    width: 500px;
+    width: 600px;
     margin: 20px;
   }
 }

packages/ui/certd-client/src/views/framework/login/index.vue

@@ -1,14 +1,6 @@
 <template>
   <div class="main login-page">
-    <a-form
-      ref="formRef"
-      class="user-layout-login"
-      name="custom-validation"
-      :model="formState"
-      v-bind="layout"
-      @finish="handleFinish"
-      @finish-failed="handleFinishFailed"
-    >
+    <a-form ref="formRef" class="user-layout-login" name="custom-validation" :model="formState" v-bind="layout" @finish="handleFinish" @finish-failed="handleFinishFailed">
       <!--      <div class="login-title">登录</div>-->
       <a-tabs v-model:active-key="formState.loginType" :tab-bar-style="{ textAlign: 'center', borderBottom: 'unset' }">
         <a-tab-pane key="password" tab="密码登录" :disabled="sysPublicSettings.passwordLoginEnabled !== true">
@@ -44,13 +36,7 @@
             </a-form-item>
 
             <a-form-item name="smsCode" :rules="rules.smsCode">
-              <sms-code
-                v-model:value="formState.smsCode"
-                :img-code="formState.imgCode"
-                :mobile="formState.mobile"
-                :phone-code="formState.phoneCode"
-                :random-str="formState.randomStr"
-              />
+              <sms-code v-model:value="formState.smsCode" :img-code="formState.imgCode" :mobile="formState.mobile" :phone-code="formState.phoneCode" :random-str="formState.randomStr" />
             </a-form-item>
           </template>
         </a-tab-pane>
@@ -89,42 +75,42 @@ export default defineComponent({
       loginType: "password", //password
       imgCode: "",
       smsCode: "",
-      randomStr: ""
+      randomStr: "",
     });
 
     const rules = {
       mobile: [
         {
           required: true,
-          message: "请输入手机号"
-        }
+          message: "请输入手机号",
+        },
       ],
       username: [
         {
           required: true,
-          message: "请输入用户名"
-        }
+          message: "请输入用户名",
+        },
       ],
       password: [
         {
           required: true,
-          message: "请输入登录密码"
-        }
+          message: "请输入登录密码",
+        },
       ],
       smsCode: [
         {
           required: true,
-          message: "请输入短信验证码"
-        }
-      ]
+          message: "请输入短信验证码",
+        },
+      ],
     };
     const layout = {
       labelCol: {
-        span: 0
+        span: 0,
       },
       wrapperCol: {
-        span: 24
-      }
+        span: 24,
+      },
     };
 
     const handleFinish = async (values: any) => {
@@ -163,9 +149,9 @@ export default defineComponent({
       resetForm,
       isLoginError,
       sysPublicSettings,
-      hasRegisterTypeEnabled
+      hasRegisterTypeEnabled,
     };
-  }
+  },
 });
 </script>