fix: 解决 mfa 验证回车时触发页面刷新的问题 (#383)

backend/app/dto/auth.go

@@ -9,7 +9,6 @@ type UserLoginInfo struct {
 	Name      string `json:"name"`
 	Token     string `json:"token"`
 	MfaStatus string `json:"mfaStatus"`
-	MfaSecret string `json:"mfaSecret"`
 }
 
 type MfaCredential struct {
@@ -28,7 +27,6 @@ type Login struct {
 type MFALogin struct {
 	Name       string `json:"name"`
 	Password   string `json:"password"`
-	Secret     string `json:"secret"`
 	Code       string `json:"code"`
 	AuthMethod string `json:"authMethod"`
 }

backend/app/service/auth.go

@@ -86,9 +86,9 @@ func (u *AuthService) MFALogin(c *gin.Context, info dto.MFALogin) (*dto.UserLogi
 	}
 	pass, err := encrypt.StringDecrypt(passwrodSetting.Value)
 	if err != nil {
-		return nil, constant.ErrAuth
+		return nil, err
 	}
-	if info.Password != pass && nameSetting.Value != info.Name {
+	if info.Password != pass || nameSetting.Value != info.Name {
 		return nil, constant.ErrAuth
 	}
 

frontend/src/api/interface/auth.ts

@@ -9,7 +9,6 @@ export namespace Login {
     export interface MFALoginForm {
         name: string;
         password: string;
-        secret: string;
         code: string;
         authMethod: string;
     }
@@ -17,7 +16,6 @@ export namespace Login {
         name: string;
         token: string;
         mfaStatus: string;
-        mfaSecret: string;
     }
     export interface InitUser {
         name: string;

frontend/src/lang/modules/en.ts

@@ -120,6 +120,8 @@ const message = {
             warnning:
                 'Note: [Closing the security entrance] will make your panel login address directly exposed to the Internet, very dangerous, please exercise caution',
             codeInput: 'Please enter the 6-digit verification code of the MFA validator',
+            mfaTitle: 'MFA Certification',
+            mfaCode: 'MFA verification code',
             title: 'Linux Server Management Panel',
             licenseHelper:
                 'Agree to FIT2CLOUD &laquo; <a href="https://www.fit2cloud.com/legal/licenses.html" target="_blank">Community Software License Agreement</a> &raquo;',

frontend/src/lang/modules/zh.ts

@@ -123,7 +123,8 @@ const message = {
             solutionHelper: '在 SSH 终端输入以下一种命令来解决 1.查看面板入口：/etc/init.d/bt default',
             warnning: '注意：【关闭安全入口】将使您的面板登录地址被直接暴露在互联网上，非常危险，请谨慎操作',
             codeInput: '请输入 MFA 验证器的 6 位验证码',
-            mfaTitle: 'MFA认证',
+            mfaTitle: 'MFA 认证',
+            mfaCode: 'MFA 验证码',
             title: 'Linux 服务器运维管理面板',
             licenseHelper:
                 '同意 FIT2CLOUD 飞致云 &laquo; <a href="https://www.fit2cloud.com/legal/licenses.html" target="_blank"> 社区软件许可协议</a> &raquo;',

frontend/src/views/login/components/login-form.vue

@@ -1,5 +1,5 @@
 <template>
-    <div>
+    <div v-loading="loading">
         <div v-if="isFirst">
             <div class="login-form">
                 <el-form ref="registerFormRef" :model="registerForm" size="default" :rules="registerRules">
@@ -70,13 +70,13 @@
         </div>
         <div v-else-if="mfaShow">
             <div class="login-form">
-                <el-form>
+                <el-form @submit.prevent="mfaLogin()">
                     <div class="login-title">{{ $t('commons.login.mfaTitle') }}</div>
                     <el-form-item class="no-border">
                         <el-input
                             size="default"
-                            :placeholder="$t('commons.login.captchaHelper')"
-                            v-model="mfaLoginForm.code"
+                            :placeholder="$t('commons.login.mfaCode')"
+                            v-model.trim="mfaLoginForm.code"
                         >
                             <template #prefix>
                                 <el-icon class="el-input__icon">
@@ -89,7 +89,15 @@
                         </span>
                     </el-form-item>
                     <el-form-item>
-                        <el-button class="login-button" type="primary" size="default" round @click="mfaLogin()">
+                        <el-button
+                            @focus="mfaButtonFocused = true"
+                            @blur="mfaButtonFocused = false"
+                            class="login-button"
+                            type="primary"
+                            size="default"
+                            round
+                            @click="mfaLogin()"
+                        >
                             {{ $t('commons.button.verify') }}
                         </el-button>
                     </el-form-item>
@@ -233,6 +241,8 @@ const loginRules = reactive({
     name: [{ required: true, message: i18n.global.t('commons.rule.username'), trigger: 'blur' }],
     password: [{ required: true, message: i18n.global.t('commons.rule.password'), trigger: 'blur' }],
 });
+
+const mfaButtonFocused = ref();
 const mfaLoginForm = reactive({
     name: '',
     password: '',
@@ -266,41 +276,39 @@ const login = (formEl: FormInstance | undefined) => {
     if (!formEl) return;
     formEl.validate(async (valid) => {
         if (!valid) return;
-        loading.value = true;
+        let requestLoginForm = {
+            name: loginForm.name,
+            password: loginForm.password,
+            captcha: loginForm.captcha,
+            captchaID: captcha.captchaID,
+            authMethod: '',
+        };
+        if (requestLoginForm.captcha == '') {
+            errCaptcha.value = true;
+            return;
+        }
+        if (loginForm.agreeLicense == false) {
+            errAgree.value = true;
+            return;
+        }
         try {
-            let requestLoginForm = {
-                name: loginForm.name,
-                password: loginForm.password,
-                captcha: loginForm.captcha,
-                captchaID: captcha.captchaID,
-                authMethod: '',
-            };
-            if (requestLoginForm.captcha == '') {
-                errCaptcha.value = true;
-                return;
-            }
-            if (loginForm.agreeLicense == false) {
-                errAgree.value = true;
-                return;
-            }
+            loading.value = true;
             const res = await loginApi(requestLoginForm);
             if (res.code === 406) {
                 if (res.message === 'ErrCaptchaCode') {
                     errCaptcha.value = true;
                     errAuthInfo.value = false;
-                    loginVerify();
                 }
                 if (res.message === 'ErrAuth') {
                     errCaptcha.value = false;
                     errAuthInfo.value = true;
-                    loginVerify();
                 }
+                loginVerify();
                 return;
             }
             if (res.data.mfaStatus === 'enable') {
                 mfaShow.value = true;
                 errMfaInfo.value = false;
-                mfaLoginForm.secret = res.data.mfaSecret;
                 return;
             }
             globalStore.setLogStatus(true);
@@ -366,12 +374,16 @@ onMounted(() => {
     document.onkeydown = (e: any) => {
         e = window.event || e;
         if (e.keyCode === 13) {
-            if (loading.value) return;
-            if (isFirst.value && !registerButtonFocused.value) {
-                register(registerFormRef.value);
+            if (!mfaShow.value) {
+                if (isFirst.value && !registerButtonFocused.value) {
+                    register(registerFormRef.value);
+                }
+                if (!isFirst.value && !loginButtonFocused.value) {
+                    login(loginFormRef.value);
+                }
             }
-            if (!isFirst.value && !loginButtonFocused.value) {
-                login(loginFormRef.value);
+            if (mfaShow.value && !mfaButtonFocused.value) {
+                mfaLogin();
             }
         }
     };