From f62ce085bf423446786ddafbc44705a3ff4d6e4d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=98=AD?= <81747598+lan-yonghui@users.noreply.github.com>
Date: Mon, 1 Sep 2025 14:20:48 +0800
Subject: [PATCH] feat: MFA verification code automatically obtains focus
 (#10213)

refs #8032
---
 frontend/src/views/login/components/login-form.vue | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

diff --git a/frontend/src/views/login/components/login-form.vue b/frontend/src/views/login/components/login-form.vue
index de129d475..aa11b43c5 100644
--- a/frontend/src/views/login/components/login-form.vue
+++ b/frontend/src/views/login/components/login-form.vue
@@ -12,6 +12,7 @@
                     <div class="space-y-6 flex-grow">
                         <el-form-item>
                             <el-input
+                                ref="mfaLoginRef"
                                 size="large"
                                 :placeholder="$t('commons.login.mfaCode')"
                                 v-model.trim="mfaLoginForm.code"
@@ -27,7 +28,7 @@
                             <el-button
                                 @focus="mfaButtonFocused = true"
                                 @blur="mfaButtonFocused = false"
-                                class="w-full"
+                                class="w-full login-button"
                                 type="primary"
                                 @click="mfaLogin(false)"
                             >
@@ -181,7 +182,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, reactive, onMounted, computed } from 'vue';
+import { ref, reactive, onMounted, computed, nextTick } from 'vue';
 import type { ElForm } from 'element-plus';
 import { loginApi, getCaptcha, mfaLoginApi, getLoginSetting } from '@/api/modules/auth';
 import { GlobalStore, MenuStore, TabsStore } from '@/store';
@@ -252,6 +253,7 @@ function checkAgreeLicense(rule: any, value: any, callback: any) {
 }
 
 let isLoggingIn = false;
+const mfaLoginRef = ref();
 const mfaButtonFocused = ref();
 const mfaLoginForm = reactive({
     name: '',
@@ -338,6 +340,9 @@ const login = (formEl: FormInstance | undefined) => {
             if (res.data.mfaStatus === 'Enable') {
                 mfaShow.value = true;
                 errMfaInfo.value = false;
+                nextTick(() => {
+                    mfaLoginRef.value?.focus();
+                });
                 return;
             }
             globalStore.setLogStatus(true);