1Panel-dev/1Panel
1
1
Fork 0
mirror of https://github.com/1Panel-dev/1Panel.git synced 2025-09-07 15:14:36 +08:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat: MFA verification code automatically obtains focus (#10213)

Browse source 
refs #8032
This commit is contained in:
蘭 2025-09-01 14:20:48 +08:00 • committed by GitHub
parent 29306827ba
commit f62ce085bf
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
1 changed files with 7 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9
frontend/src/views/login/components/login-form.vue
View file

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