feat：登录页面 支持MFA 联调完成

nezha-fronted/config/index.js

@@ -10,11 +10,11 @@ module.exports = {
     assetsSubDirectory: 'static',
     assetsPublicPath: '/',
     proxyTable: {
-      '/api': {
-        target: 'http://192.168.40.247:8080/nz-admin', //设置调用接口域名和端口号别忘了加http
+      '/apis': {
+        target: 'http://192.168.40.42:8080/nz-admin', //设置调用接口域名和端口号别忘了加http
         changeOrigin: true,
         pathRewrite: {
-          '^/api': '/' //这里理解成用‘/api’代替target里面的地址，组件中我们调接口时直接用/api代替
+          '^/apis': '/' //这里理解成用‘/api’代替target里面的地址，组件中我们调接口时直接用/api代替
         },
       }
     },

nezha-fronted/src/components/common/language/en.js

@@ -732,8 +732,8 @@ const en = {
       notification: 'Notification',
       mobile: 'Mobile',
       disable: 'Disable',
-      enableMfa: 'EnableMfa',
-      forceEnable: 'ForceEnable',
+      enableMfa: 'Enable',
+      forceEnable: 'Force enable',
       mfaTitle: 'Two-Factor Authentication'
     },
     roles: {

nezha-fronted/src/components/common/login.vue

@@ -17,7 +17,7 @@
         <div class="login-label"  v-if="verifyShow">{{$t('login.verifyTitle')}}</div>
         <div class="login-input"  v-if="verifyShow">
           <i class="nz-icon nz-icon-yanzhengma"></i>
-          <input v-model="loginData.authCode" type="password" name="newPassword" autocomplete="off" :placeholder="$t('login.verifyPlaceholder')"></input>
+          <input v-model="loginData.authCode"  name="newPassword" autocomplete="off" :placeholder="$t('login.verifyPlaceholder')"></input>
         </div>
         <div class="login-label-foot" v-if="verifyShow">
           {{$t('login.verifyContent')}}
@@ -145,7 +145,7 @@ export default {
       authToken: '',
       QRCode: '',
       bindAuthCode: '',
-      authKey: '123',
+      authKey: '',
       dialogLoading: false,
       fileShow: false,
       fileContent: '',
@@ -161,30 +161,31 @@ export default {
       // if (this.license.valid && this.validateLogin() && (this.$route.path == '/' || this.$route.path == '/login')) {
       if (this.validateLogin() && (this.$route.path == '/' || this.$route.path == '/login')) {
         this.loading = true
-        this.$post('sys/login', this.loginData).then(res => {
+        this.$post('/sys/login', this.loginData).then(res => {
           if (res.code == 200) {
             // 登录成功，记录用户名、token和lang
-            // res.data.authFlag = 0
-            // res.data.authBind = 1
-            this.authToken = res.data.token
-            sessionStorage.setItem('nz-token', res.data.token)
+            this.authToken = res.data.authToken
+            sessionStorage.setItem('nz-token', res.data.authToken)
             if (res.data.authFlag === 1) {
               if (res.data.authBind === 0) {
                 this.verifyShow = true
               } else if (res.data.authBind === 1) {
                 this.authBindShow = true
                 this.dialogLoading = true
-                this.$post('mfa/genKey', { authToken: this.authToken }).then(res => {
-                  this.$nextTick(() => {
-                    this.authToken = res.data.authToken
-                    // sessionStorage.setItem('nz-token', this.authToken)
-                    this.authKey = res.data.authKey
-                    this.bindQRCode(res.data.otpauth)
-                  })
+                this.$post('/mfa/genkey', { authToken: this.authToken }).then(res => {
+                  this.dialogLoading = false
+                  if (res.code === 200) {
+                    this.$nextTick(() => {
+                      this.authToken = res.data.authToken
+                      this.authKey = res.data.authKey
+                      this.bindQRCode(res.data.otpauth)
+                    })
+                  } else {
+                    this.authBindShow = false
+                    this.dialogLoading = false
+                    this.$message.error(res.message)
+                  }
                 })
-                // this.$nextTick(() => {
-                //   this.bindQRCode()
-                // })
               }
             } else {
               sessionStorage.setItem('nz-username', this.loginData.username)
@@ -207,9 +208,8 @@ export default {
         authToken: this.authToken,
         authCode: this.loginData.authCode
       }
-      this.$post('mfa/verify', params).then(res => {
+      this.$post('/mfa/verify', params).then(res => {
         if (res.code === 200) {
-          res.data.token = res.data.authToken
           sessionStorage.setItem('nz-username', this.loginData.username)
           localStorage.setItem('nz-username', this.loginData.username)
           localStorage.setItem('nz-prometheus-federation-enabled', res.data.prometheusFederationEnabled)
@@ -289,7 +289,7 @@ export default {
     },
     bindCode () {
       this.prevent_opt.save = true
-      this.$post('mfa/bind', { authToken: this.authToken, authCode: this.authCode }).then(res => {
+      this.$post('/mfa/bind', { authToken: this.authToken, authCode: this.bindAuthCode }).then(res => {
         this.prevent_opt.save = false
         if (res.code === 200) {
           this.authBindShow = false
@@ -298,15 +298,10 @@ export default {
           this.fileContent = this.recoveryCode.join(' \n ')
           this.fileShow = true
         } else {
+          this.authToken = res.data.authToken
           this.$message.error(this.$t('login.bindFail'))
         }
       })
-      // this.authBindShow = false
-      // this.bindAuthCode = ''
-      // this.recoveryCode = [1, 2, 1, 1, 2, 1, 2, 1, 2, 12, 1, 21, 21, 2, 12, 1, 21, 2, 12, 1, 2, 12, 1, 21, 2, 12, 1, 21, 33333, 1, 13]
-      // this.fileContent = this.recoveryCode.join(' \n ')
-      // console.log(this.fileContent)
-      // this.fileShow = true
     },
     jumpDlw () {
       window.open('https://google-authenticator.en.softonic.com/android')

nezha-fronted/src/components/common/rightBox/editEndpointBoxNew.vue

@@ -387,11 +387,11 @@
                           <el-input v-model="item2.source" placeholder="key" size="mini"></el-input>
                         </el-form-item>
                         <el-form-item
-                          :label="'Timestamp'"
+                          :label="'Format'"
                           :prop="'configs.1.config.'+ index +'.pipeline.' + index2 + '.timestamp'"
                           :rules="[{ required: true, message: $t('validate.required'), trigger: 'blur' }]"
                         >
-                          <el-input v-model="item2.timestamp" placeholder="key" size="mini"></el-input>
+                          <el-input v-model="item2.format" placeholder="key" size="mini"></el-input>
                         </el-form-item>
                       </div>
                       <div v-if="item2.type === 'labels'">

nezha-fronted/src/components/common/rightBox/moduleBox.vue

@@ -384,11 +384,11 @@
                         <el-input v-model="item2.source" placeholder="key" size="mini"></el-input>
                       </el-form-item>
                       <el-form-item
-                        :label="'Timestamp'"
+                        :label="'Format'"
                         :prop="'configs.1.config.'+ index +'.pipeline.' + index2 + '.timestamp'"
                         :rules="[{ required: true, message: $t('validate.required'), trigger: 'blur' }]"
                       >
-                        <el-input v-model="item2.timestamp" placeholder="key" size="mini"></el-input>
+                        <el-input v-model="item2.format" placeholder="key" size="mini"></el-input>
                       </el-form-item>
                     </div>
                     <div v-if="item2.type === 'labels'">

nezha-fronted/src/components/common/table/settings/userTable.vue

@@ -35,9 +35,14 @@
       </template>
       <template slot-scope="scope" :column="item">
         <template v-if="item.prop === 'name'">
-          <div class="flex-align-center">
-            <span>{{scope.row[item.prop]}}</span>
-            <el-tag size="mini" v-if="mfaEnable || scope.row.mfaLevel > 0" style="margin-left: 5px">Mfa</el-tag>
+          <div>
+            <div class="flex-align-center">
+              <span class="user-name-top">{{scope.row[item.prop]}}</span>
+              <el-tag size="mini" v-if="mfaEnable!='0' || scope.row.mfaLevel > 0" style="margin-left: 5px">2FA</el-tag>
+            </div>
+            <div class="user-name-bottom">
+              @{{scope.row.username}}
+            </div>
           </div>
         </template>
         <template v-else-if="item.prop === 'roles'">
@@ -103,14 +108,16 @@ export default {
           label: this.$t('config.user.name'),
           prop: 'name',
           show: true,
-          width: 150,
+          width: 600,
           sortable: 'custom'
-        }, {
-          label: this.$t('config.user.username'),
-          prop: 'username',
-          show: true,
-          width: 150
-        }, {
+        },
+        // {
+        //   label: this.$t('config.user.username'),
+        //   prop: 'username',
+        //   show: true,
+        //   width: 150
+        // },
+        {
           label: this.$t('config.user.roles'),
           prop: 'roles',
           show: true,
@@ -174,4 +181,19 @@ export default {
     display: flex;
     align-items: center;
   }
+  /deep/ .el-tag.el-tag--mini{
+    border-radius: 10px;
+    font-size: 12px;
+  }
+  .user-name-top{
+    color: #333;
+    font-weight: 600;
+    font-size: 14px;
+    line-height: 14px;
+  }
+  .user-name-bottom{
+    color: #999999;
+    font-size: 14px;
+    line-height: 14px;
+  }
 </style>