perf: 登录支持双重认证

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

@@ -9,7 +9,14 @@
           <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" size="small" class="ml-5" type="primary" @click="authenticatorForm.open = true">
+            <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>
 
@@ -53,7 +60,12 @@ defineOptions({
   name: "UserSecurity",
 });
 
-const formState = reactive<Partial<UserTwoFactorSetting>>({});
+const formState = reactive<Partial<UserTwoFactorSetting>>({
+  authenticator: {
+    enabled: false,
+    verified: false,
+  },
+});
 
 const authenticatorForm = reactive({
   qrcodeSrc: "",

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

@@ -1,6 +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 v-if="!twoFactor.loginId" 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">
@@ -49,6 +49,23 @@
         <router-link v-if="hasRegisterTypeEnabled()" class="register" :to="{ name: 'register' }"> 注册 </router-link>
       </a-form-item>
     </a-form>
+    <a-form v-else ref="twoFactorFormRef" class="user-layout-login" :model="twoFactor" v-bind="layout">
+      <div class="mb-10 flex flex-center">请打开您的Authenticator APP，获取动态验证码。</div>
+      <a-form-item name="verifyCode">
+        <a-input v-model:value="twoFactor.verifyCode" placeholder="请输入动态验证码" allow-clear>
+          <template #prefix>
+            <fs-icon icon="ion:lock-closed-outline"></fs-icon>
+          </template>
+        </a-input>
+      </a-form-item>
+      <a-form-item>
+        <loading-button type="primary" size="large" html-type="button" class="login-button" :click="handleTwoFactorSubmit">OTP验证登录</loading-button>
+      </a-form-item>
+
+      <a-form-item class="user-login-other">
+        <a class="register" @click="twoFactor.loginId = null"> 返回 </a>
+      </a-form-item>
+    </a-form>
   </div>
 </template>
 <script lang="ts">
@@ -113,11 +130,28 @@ export default defineComponent({
       },
     };
 
+    const twoFactor = reactive({
+      loginId: "",
+      verifyCode: "",
+    });
+
+    const handleTwoFactorSubmit = async () => {
+      await userStore.loginByTwoFactor(twoFactor);
+    };
+
     const handleFinish = async (values: any) => {
       loading.value = true;
       try {
         const loginType = formState.loginType;
         await userStore.login(loginType, toRaw(formState));
+      } catch (e: any) {
+        //@ts-ignore
+        if (e.code === 10020) {
+          //@ts-ignore
+          twoFactor.loginId = e.data;
+        } else {
+          throw e;
+        }
       } finally {
         loading.value = false;
       }
@@ -150,6 +184,8 @@ export default defineComponent({
       isLoginError,
       sysPublicSettings,
       hasRegisterTypeEnabled,
+      twoFactor,
+      handleTwoFactorSubmit,
     };
   },
 });

packages/ui/certd-client/src/views/sys/settings/tabs/safe.vue

@@ -4,8 +4,7 @@
       <h2>站点隐藏</h2>
       <a-form-item label="启用站点隐藏" :name="['hidden', 'enabled']" :required="true">
         <div class="flex">
-          <a-switch v-model:checked="formState.hidden.enabled" :disabled="!settingsStore.isPlus" />
-          <vip-button class="ml-5" mode="button"></vip-button>
+          <a-switch v-model:checked="formState.hidden.enabled" />
         </div>
 
         <div class="helper">