fix: 两步验证样式调整 (#827)

frontend/src/lang/modules/en.ts

@@ -891,10 +891,6 @@ const message = {
         mfaHelper1: 'Download a MFA verification mobile app e.g.:',
         mfaHelper2: 'Scan the following QR code using the mobile app to obtain the 6-digit verification code',
         mfaHelper3: 'Enter six digits from the app',
-        mfaSecret: 'Secret',
-        mfaTypeOption: 'Select the method of obtaining the secret',
-        qrCode: 'QR code',
-        manualInput: 'Manual input',
         mfaCode: 'Code',
         sslDisable: 'Disable',
         sslDisableHelper:

frontend/src/lang/modules/zh.ts

@@ -928,10 +928,6 @@ const message = {
         mfaHelper1: '下载两步验证手机应用 如:',
         mfaHelper2: '使用手机应用扫描以下二维码，获取 6 位验证码',
         mfaHelper3: '输入手机应用上的 6 位数字',
-        mfaSecret: '验证密钥',
-        mfaTypeOption: '选择获取密钥方式',
-        qrCode: '二维码',
-        manualInput: '手动输入',
         mfaCode: '验证码',
         sslDisable: '禁用',
         sslDisableHelper: '禁用 https 服务，需要重启面板才能生效，是否继续？',

frontend/src/views/setting/safe/mfa/index.vue

@@ -22,28 +22,23 @@
                                 <li>Authenticator</li>
                             </ul>
                         </el-form-item>
-                        <el-form-item :label="$t('setting.mfaTypeOption')">
+                        <el-form-item :label="$t('setting.mfaHelper2')">
-                            <el-radio-group v-model="mode" @change="form.secret = ''">
-                                <el-radio label="scan">{{ $t('setting.qrCode') }}</el-radio>
-                                <el-radio label="input">{{ $t('setting.manualInput') }}</el-radio>
-                            </el-radio-group>
-                        </el-form-item>
-                        <el-form-item :label="$t('setting.mfaHelper2')" v-if="mode === 'scan'">
                             <el-image style="width: 120px; height: 120px" :src="qrImage" />
+                            <span class="input-help">
+                                <span style="float: left">{{ $t('setting.secret') }}: {{ form.secret }}</span>
+                                <div style="float: left; margin-top: 2px">
+                                    <el-icon
+                                        color="#409EFC"
+                                        style="cursor: pointer; margin-left: 10px"
+                                        :size="18"
+                                        @click="onCopy()"
+                                    >
+                                        <DocumentCopy />
+                                    </el-icon>
+                                </div>
+                            </span>
                         </el-form-item>
-                        <el-form-item
+                        <el-form-item :label="$t('setting.mfaCode')" prop="code" :rules="Rules.requiredInput">
-                            :label="$t('setting.mfaSecret')"
-                            v-if="mode === 'input'"
-                            prop="secret"
-                            :rules="Rules.requiredInput"
-                        >
-                            <el-input v-model="form.secret"></el-input>
-                        </el-form-item>
-                        <el-form-item
-                            :label="mode === 'scan' ? $t('setting.mfaHelper3') : $t('setting.mfaCode')"
-                            prop="code"
-                            :rules="Rules.requiredInput"
-                        >
                             <el-input v-model="form.code"></el-input>
                         </el-form-item>
                     </el-col>
@@ -70,7 +65,6 @@ import { FormInstance } from 'element-plus';
 
 const loading = ref();
 const qrImage = ref();
-const mode = ref('scan');
 const drawerVisiable = ref();
 const formRef = ref();
 
@@ -85,6 +79,16 @@ const acceptParams = (): void => {
     drawerVisiable.value = true;
 };
 
+const onCopy = () => {
+    let input = document.createElement('input');
+    input.value = form.secret;
+    document.body.appendChild(input);
+    input.select();
+    document.execCommand('Copy');
+    document.body.removeChild(input);
+    MsgSuccess(i18n.global.t('commons.msg.copySuccess'));
+};
+
 const loadMfaCode = async () => {
     const res = await getMFA();
     form.secret = res.data.secret;