From c424e22924f32d739855665970e0b961f0e504e7 Mon Sep 17 00:00:00 2001
From: ssongliu <73214554+ssongliu@users.noreply.github.com>
Date: Fri, 28 Apr 2023 15:58:19 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E4=B8=A4=E6=AD=A5=E9=AA=8C=E8=AF=81?=
 =?UTF-8?q?=E6=A0=B7=E5=BC=8F=E8=B0=83=E6=95=B4=20(#827)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/lang/modules/en.ts               |  4 --
 frontend/src/lang/modules/zh.ts               |  4 --
 frontend/src/views/setting/safe/mfa/index.vue | 46 ++++++++++---------
 3 files changed, 25 insertions(+), 29 deletions(-)

diff --git a/frontend/src/lang/modules/en.ts b/frontend/src/lang/modules/en.ts
index aed1822ed..a399db7d7 100644
--- a/frontend/src/lang/modules/en.ts
+++ b/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:
diff --git a/frontend/src/lang/modules/zh.ts b/frontend/src/lang/modules/zh.ts
index a8e1671b5..73251216b 100644
--- a/frontend/src/lang/modules/zh.ts
+++ b/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 服务，需要重启面板才能生效，是否继续？',
diff --git a/frontend/src/views/setting/safe/mfa/index.vue b/frontend/src/views/setting/safe/mfa/index.vue
index b467408ef..a26d73a6f 100644
--- a/frontend/src/views/setting/safe/mfa/index.vue
+++ b/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-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-form-item :label="$t('setting.mfaHelper2')">
                             <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
-                            :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-form-item :label="$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;