From 68d97242cc35bc7e8243b56b1d5049c53500b65a Mon Sep 17 00:00:00 2001
From: feng626 <1304903146@qq.com>
Date: Mon, 6 Jun 2022 22:11:09 +0800
Subject: [PATCH] =?UTF-8?q?perf:=20=E7=BB=9F=E4=B8=80=E6=A0=A1=E9=AA=8C?=
 =?UTF-8?q?=E5=BD=93=E5=89=8D=E7=94=A8=E6=88=B7api?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../AccountListTable/ShowSecretInfo.vue       | 10 +-
 .../AppAccountListTable/ShowSecretInfo.vue    | 10 +-
 .../ListTable/TableAction/ExportDialog.vue    | 10 +-
 src/components/MFAVerifyDialog/index.vue      | 77 ----------------
 src/components/UserConfirmDialog/index.vue    | 92 +++++++++++++++++++
 src/components/index.js                       |  2 +-
 src/i18n/langs/en.json                        |  1 +
 src/i18n/langs/ja.json                        |  1 +
 src/i18n/langs/zh.json                        |  1 +
 src/views/profile/ProfileInfo.vue             | 61 ++++--------
 10 files changed, 131 insertions(+), 134 deletions(-)
 delete mode 100644 src/components/MFAVerifyDialog/index.vue
 create mode 100644 src/components/UserConfirmDialog/index.vue

diff --git a/src/components/AccountListTable/ShowSecretInfo.vue b/src/components/AccountListTable/ShowSecretInfo.vue
index 008c14e83..3b7981151 100644
--- a/src/components/AccountListTable/ShowSecretInfo.vue
+++ b/src/components/AccountListTable/ShowSecretInfo.vue
@@ -1,8 +1,8 @@
 <template>
   <div>
-    <MFAVerifyDialog
-      @MFAVerifyDone="getAuthInfo"
-      @MFAVerifyCancel="exit"
+    <UserConfirmDialog
+      @UserConfirmDone="getAuthInfo"
+      @UserConfirmCancel="exit"
     />
     <Dialog
       :title="dialogTitle"
@@ -36,12 +36,12 @@
 
 <script>
 import Dialog from '@/components/Dialog'
-import MFAVerifyDialog from '@/components/MFAVerifyDialog'
+import UserConfirmDialog from '@/components/UserConfirmDialog'
 export default {
   name: 'ShowSecretInfo',
   components: {
     Dialog,
-    MFAVerifyDialog
+    UserConfirmDialog
   },
   props: {
     account: {
diff --git a/src/components/AppAccountListTable/ShowSecretInfo.vue b/src/components/AppAccountListTable/ShowSecretInfo.vue
index a48fcfed9..ce19e7932 100644
--- a/src/components/AppAccountListTable/ShowSecretInfo.vue
+++ b/src/components/AppAccountListTable/ShowSecretInfo.vue
@@ -1,8 +1,8 @@
 <template>
   <div>
-    <MFAVerifyDialog
-      @MFAVerifyDone="getAuthInfo"
-      @MFAVerifyCancel="exit"
+    <UserConfirmDialog
+      @UserConfirmDone="getAuthInfo"
+      @UserConfirmCancel="exit"
     />
     <Dialog
       :title="dialogTitle"
@@ -33,12 +33,12 @@
 
 <script>
 import Dialog from '@/components/Dialog'
-import MFAVerifyDialog from '@/components/MFAVerifyDialog'
+import UserConfirmDialog from '@/components/UserConfirmDialog'
 export default {
   name: 'ShowSecretInfo',
   components: {
     Dialog,
-    MFAVerifyDialog
+    UserConfirmDialog
   },
   props: {
     account: {
diff --git a/src/components/ListTable/TableAction/ExportDialog.vue b/src/components/ListTable/TableAction/ExportDialog.vue
index 982ef7b66..044f22348 100644
--- a/src/components/ListTable/TableAction/ExportDialog.vue
+++ b/src/components/ListTable/TableAction/ExportDialog.vue
@@ -1,9 +1,9 @@
 <template>
   <div>
-    <MFAVerifyDialog
+    <UserConfirmDialog
       v-if="mfaDialogShow"
-      @MFAVerifyDone="showExportDialog"
-      @MFAVerifyCancel="handleExportCancel"
+      @UserConfirmDone="showExportDialog"
+      @UserConfirmCancel="handleExportCancel"
     />
     <Dialog
       v-if="exportDialogShow"
@@ -31,7 +31,7 @@
 
 <script>
 import Dialog from '@/components/Dialog'
-import MFAVerifyDialog from '@/components/MFAVerifyDialog'
+import UserConfirmDialog from '@/components/UserConfirmDialog'
 import { createSourceIdCache } from '@/api/common'
 import * as queryUtil from '@/components/DataTable/compenents/el-data-table/utils/query'
 
@@ -39,7 +39,7 @@ export default {
   name: 'ExportDialog',
   components: {
     Dialog,
-    MFAVerifyDialog
+    UserConfirmDialog
   },
   props: {
     selectedRows: {
diff --git a/src/components/MFAVerifyDialog/index.vue b/src/components/MFAVerifyDialog/index.vue
deleted file mode 100644
index a87901047..000000000
--- a/src/components/MFAVerifyDialog/index.vue
+++ /dev/null
@@ -1,77 +0,0 @@
-<template>
-  <Dialog
-    :title="$t('common.MFAVerify')"
-    :width="'50'"
-    :show-confirm="false"
-    :show-cancel="false"
-    :visible.sync="visible"
-    :destroy-on-close="true"
-    v-bind="$attrs"
-    v-on="$listeners"
-  >
-    <el-row :gutter="20">
-      <el-col :md="4" :sm="24">
-        <div style="line-height: 34px;text-align: center">MFA</div>
-      </el-col>
-      <el-col :md="14" :sm="24">
-        <el-input v-model="MFAToken" />
-        <span class="help-tips help-block">{{ $t('common.MFARequireForSecurity') }}</span>
-      </el-col>
-      <el-col :md="4" :sm="24">
-        <el-button size="mini" type="primary" style="line-height:20px " @click="verifyMFA">
-          {{ this.$t('common.Confirm') }}
-        </el-button>
-      </el-col>
-    </el-row>
-  </Dialog>
-</template>
-
-<script>
-import Dialog from '@/components/Dialog'
-
-export default {
-  name: 'MFAVerifyDialog',
-  components: {
-    Dialog
-  },
-  data() {
-    return {
-      MFAToken: '',
-      visible: false
-    }
-  },
-  watch: {
-    visible(val) {
-      if (!val) {
-        this.$emit('MFAVerifyCancel', true)
-      }
-    }
-  },
-  mounted() {
-    this.$axios.get('/api/v1/authentication/otp/verify/', { disableFlashErrorMsg: true }).then(() => {
-      this.$emit('MFAVerifyDone', true)
-    }).catch(err => {
-      this.$log.debug('Verify otp code error: ', err)
-      this.visible = true
-    })
-  },
-  methods: {
-    verifyMFA() {
-      if (this.MFAToken.length !== 6) {
-        return this.$message.error(this.$tc('common.MFAErrorMsg'))
-      }
-      this.$axios.post(
-        `/api/v1/authentication/otp/verify/`, {
-          code: this.MFAToken
-        }
-      ).then(res => {
-        this.$emit('MFAVerifyDone', true)
-      })
-    }
-  }
-}
-</script>
-
-<style scoped>
-
-</style>
diff --git a/src/components/UserConfirmDialog/index.vue b/src/components/UserConfirmDialog/index.vue
new file mode 100644
index 000000000..2c24ba7fb
--- /dev/null
+++ b/src/components/UserConfirmDialog/index.vue
@@ -0,0 +1,92 @@
+<template>
+  <Dialog
+    :title="$t('common.CurrentUserVerify')"
+    :width="'50'"
+    :show-confirm="false"
+    :show-cancel="false"
+    :visible.sync="visible"
+    :destroy-on-close="true"
+    v-bind="$attrs"
+    v-on="$listeners"
+  >
+    <el-row :gutter="20">
+      <el-col :md="4" :sm="24">
+        <div style="line-height: 34px;text-align: center">{{ Label }}</div>
+      </el-col>
+      <el-col :md="14" :sm="24">
+        <el-input v-model="SecretKey" />
+        <span class="help-tips help-block">{{ HelpText }}</span>
+      </el-col>
+      <el-col :md="4" :sm="24">
+        <el-button size="mini" type="primary" style="line-height:20px " @click="userConfirm">
+          {{ this.$t('common.Confirm') }}
+        </el-button>
+      </el-col>
+    </el-row>
+  </Dialog>
+</template>
+<script>
+import Dialog from '@/components/Dialog'
+
+export default {
+  name: 'UserConfirmDialog',
+  components: {
+    Dialog
+  },
+  data() {
+    return {
+      Label: '',
+      HelpText: '',
+      ConfirmType: '',
+      SecretKey: '',
+      visible: false
+    }
+  },
+  watch: {
+    visible(val) {
+      if (!val) {
+        this.$emit('UserConfirmCancel', true)
+      }
+    }
+  },
+  mounted() {
+    this.$axios.get('/api/v1/authentication/confirm/', { disableFlashErrorMsg: true }).then(() => {
+      this.$emit('UserConfirmDone', true)
+    }).catch(err => {
+      this.$log.debug('Verify otp code error: ', err)
+      const backends = err.response.data.backends
+      backends.sort((a, b) => b.level - a.level)
+      this.ConfirmType = backends[0].name
+      if (this.ConfirmType === 'relogin') {
+        return this.$message.error(this.$t('auth.ReLogin'))
+      } else if (this.ConfirmType === 'mfa') {
+        this.Label = 'MFA'
+        this.HelpText = this.$t('common.MFARequireForSecurity')
+      } else if (this.ConfirmType === 'password') {
+        this.Label = this.$t('setting.password')
+        this.HelpText = this.$t('common.PasswordRequireForSecurity')
+      }
+      this.visible = true
+    })
+  },
+  methods: {
+    userConfirm() {
+      if (this.ConfirmType === 'mfa' && this.SecretKey.length !== 6) {
+        return this.$message.error(this.$tc('common.MFAErrorMsg'))
+      }
+      this.$axios.post(
+        `/api/v1/authentication/confirm/`, {
+          confirm_type: this.ConfirmType,
+          secret_key: this.SecretKey
+        }
+      ).then(res => {
+        this.$emit('UserConfirmDone', true)
+      })
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>
diff --git a/src/components/index.js b/src/components/index.js
index 0261ebfe6..b50b78cc7 100644
--- a/src/components/index.js
+++ b/src/components/index.js
@@ -25,6 +25,6 @@ export { default as UploadField } from './FormFields/UploadField'
 export { default as AccountListTable } from './AccountListTable/index'
 export { default as AppAccountListTable } from './AppAccountListTable'
 export { default as AssetRelationCard } from './AssetRelationCard'
-export { default as MFAVerifyDialog } from './MFAVerifyDialog'
+export { default as UserConfirmDialog } from './UserConfirmDialog'
 export { default as Announcement } from './Announcement'
 export { default as CronTab } from './CronTab'
diff --git a/src/i18n/langs/en.json b/src/i18n/langs/en.json
index a7c90e9ed..a9c172d9e 100644
--- a/src/i18n/langs/en.json
+++ b/src/i18n/langs/en.json
@@ -268,6 +268,7 @@
     "Database": "Database",
     "Params": "Params",
     "MFAVerify": "Verify MFA",
+    "CurrentUserVerify": "Verify Current User",
     "ViewSecret": "View secret",
     "ConnectWebSocketError": "Connect Websocket failed",
     "Nothing": "Nothing",
diff --git a/src/i18n/langs/ja.json b/src/i18n/langs/ja.json
index ec9a1cfb9..6bf43211c 100644
--- a/src/i18n/langs/ja.json
+++ b/src/i18n/langs/ja.json
@@ -276,6 +276,7 @@
     "DateUpdated": "更新日",
     "ApprovaLevel": "承認情報",
     "MFAVerify": "MFAの検証",
+    "CurrentUserVerify": "現在のユーザー検証",
     "ViewSecret": "パスワードの確認",
     "ConnectWebSocketError": "Webソケット接続に失敗しました",
     "Action": "アクション",
diff --git a/src/i18n/langs/zh.json b/src/i18n/langs/zh.json
index 3d4049742..ee8df0606 100644
--- a/src/i18n/langs/zh.json
+++ b/src/i18n/langs/zh.json
@@ -277,6 +277,7 @@
     "DateUpdated": "更新日期",
     "ApprovaLevel": "审批信息",
     "MFAVerify": "验证 MFA",
+    "CurrentUserVerify": "验证当前用户",
     "ViewSecret": "查看密码",
     "ConnectWebSocketError": "连接 WebSocket 失败",
     "Action": "动作",
diff --git a/src/views/profile/ProfileInfo.vue b/src/views/profile/ProfileInfo.vue
index 3557d5d0c..218bab43e 100644
--- a/src/views/profile/ProfileInfo.vue
+++ b/src/views/profile/ProfileInfo.vue
@@ -1,5 +1,11 @@
 <template>
   <Page v-bind="$attrs">
+    <UserConfirmDialog
+      v-if="showPasswordDialog"
+      :visible.sync="showPasswordDialog"
+      @UserConfirmDone="verifyDone"
+      @UserConfirmCancel="exit"
+    />
     <div>
       <el-row :gutter="20">
         <el-col :md="14" :sm="24">
@@ -20,28 +26,6 @@
           />
         </el-col>
       </el-row>
-      <Dialog
-        width="50"
-        top="20vh"
-        :title="this.$t('common.PasswordConfirm')"
-        :visible.sync="showPasswordDialog"
-        :show-confirm="false"
-        :show-cancel="false"
-        :destroy-on-close="true"
-      >
-        <el-row :gutter="20">
-          <el-col :md="4" :sm="24">
-            <div style="line-height: 34px">{{ $t('assets.Password') }}</div>
-          </el-col>
-          <el-col :md="14" :sm="24">
-            <el-input v-model="passwordInput" type="password" />
-            <span class="help-tips help-block">{{ $t('common.PasswordRequireForSecurity') }}</span>
-          </el-col>
-          <el-col :md="4" :sm="24">
-            <el-button size="mini" type="primary" style="line-height:20px " @click="passConfirm">{{ this.$t('common.Confirm') }}</el-button>
-          </el-col>
-        </el-row>
-      </Dialog>
     </div>
   </Page>
 </template>
@@ -50,7 +34,7 @@
 import Page from '@/layout/components/Page'
 import DetailCard from '@/components/DetailCard'
 import QuickActions from '@/components/QuickActions'
-import Dialog from '@/components/Dialog'
+import UserConfirmDialog from '@/components/UserConfirmDialog'
 import { toSafeLocalDateStr } from '@/utils/common'
 import store from '@/store'
 
@@ -60,7 +44,7 @@ export default {
     Page,
     DetailCard,
     QuickActions,
-    Dialog
+    UserConfirmDialog
   },
   props: {
     object: {
@@ -72,7 +56,6 @@ export default {
     return {
       url: `/api/v1/users/profile/`,
       showPasswordDialog: false,
-      passwordInput: '',
       currentEdit: '',
       authQuickActions: [
         {
@@ -325,23 +308,19 @@ export default {
       }
       return backendList
     },
-    passConfirm() {
-      this.$axios.post(
-        `/api/v1/authentication/password/verify/`, {
-          password: this.passwordInput
-        }
-      ).then(res => {
-        if (!this.object[`is_${this.currentEdit}_bound`]) {
-          window.location.href = `/core/auth/${this.currentEdit}/qr/bind/?redirect_url=${this.$route.fullPath}`
-        } else {
-          this.$axios.post(`/api/v1/authentication/${this.currentEdit}/qr/unbind/`).then(res => {
-            this.$message.success(this.$t('common.updateSuccessMsg'))
-            this.$store.dispatch('users/getProfile')
-          })
-        }
-      })
-      this.passwordInput = ''
+    verifyDone() {
+      if (!this.object[`is_${this.currentEdit}_bound`]) {
+        window.location.href = `/core/auth/${this.currentEdit}/qr/bind/?redirect_url=${this.$route.fullPath}`
+      } else {
+        this.$axios.post(`/api/v1/authentication/${this.currentEdit}/qr/unbind/`).then(res => {
+          this.$message.success(this.$t('common.updateSuccessMsg'))
+          this.$store.dispatch('users/getProfile')
+        })
+      }
       this.showPasswordDialog = false
+    },
+    exit() {
+      this.$emit('update:visible', false)
     }
   }
 }