fix(auth): use CustomInputPassword component

src/hooks/Auth/useDatabaseConfigForm.ts

@@ -1,6 +1,7 @@
 import type { ComputedRef, Ref } from 'vue'
 import { computed, ref } from 'vue'
 import useFormRules from '@/hooks/useFormRules'
+import { isJSONString } from '@emqx/shared-ui-utils'
 import { FormRules } from 'element-plus'
 import useI18nTl from '../useI18nTl'
 import { usePasswordHashRules } from './usePasswordHashAlgorithmData'
@@ -67,6 +68,16 @@ export default (props: PropsParams, databaseConfig: any): ReturnData => {
         ...createMongoCommonFormRules(),
         /* For mongo type 'rs' */
         replica_set_name: createRequiredRule(tl('replicaSetName')),
+        filter: [
+          {
+            validator(rules, value, callback) {
+              if (!value || isJSONString(value)) {
+                return callback()
+              }
+              callback(new Error(tl('jsonFormatError')))
+            },
+          },
+        ],
       }
     } else if (isMySQL.value || isPgSQL.value) {
       ret = { ...ret, ...createMySQLFormRules() }

src/i18n/Gateway.js

@@ -11,6 +11,10 @@ export default {
     zh: '连接',
     en: 'Connections',
   },
+  currentConnection: {
+    zh: '连接数',
+    en: 'Current Connections',
+  },
   listeners: {
     zh: '监听器',
     en: 'Listeners',

src/views/Auth/AuthnCreate.vue

@@ -128,7 +128,7 @@
             v-if="['mysql', 'postgresql', 'mongodb', 'redis'].includes(backend)"
             v-model="configData"
             ref="formCom"
-            :database="backend as DatabaseAndServerDOM"
+            :database="(backend as DatabaseAndServerDOM)"
             auth-type="authn"
           />
           <built-in-config

src/views/Auth/components/DatabaseConfig.vue

@@ -79,12 +79,7 @@
           </el-col>
           <el-col :span="12">
             <el-form-item :label="$t('Base.password')">
-              <el-input
-                v-model="databaseConfig.password"
-                type="password"
-                autocomplete="one-time-code"
-                show-password
-              />
+              <CustomInputPassword v-model="databaseConfig.password" />
             </el-form-item>
           </el-col>
           <el-col v-if="isAuthn && isMongoDB" :span="12">
@@ -177,7 +172,7 @@
           </el-col>
           <!-- Mongodb -->
           <el-col :span="24" v-else-if="isMongoDB">
-            <el-form-item class="label-whole-line">
+            <el-form-item class="label-whole-line" prop="filter">
               <template #label>
                 <span>{{ $t('Auth.filter') }}</span>
                 <el-button

src/views/Auth/components/JwtConfig.vue

@@ -41,12 +41,7 @@
                     :content="$t('Auth.jwtBase64Tips')"
                   />
                 </template>
-                <el-input
-                  v-model="jwtConfig.secret"
-                  type="password"
-                  show-password
-                  autocomplete="one-time-code"
-                />
+                <CustomInputPassword v-model="jwtConfig.secret" />
               </el-form-item>
             </el-col>
             <el-col :span="24">

src/views/Auth/components/LdapConfig.vue

@@ -28,11 +28,7 @@
           <!-- Password -->
           <el-col :span="12">
             <el-form-item :label="$t('Base.password')" prop="password">
-              <el-input
-                type="password"
-                v-model="ldapConfig.password"
-                autocomplete="one-time-code"
-              />
+              <CustomInputPassword v-model="ldapConfig.password" />
             </el-form-item>
           </el-col>
 

src/views/Base/Layout.vue

@@ -302,6 +302,7 @@ $header-heigh: 60px;
 .el-header {
   padding: 0;
   right: 0;
+  left: 0;
   position: fixed;
   z-index: 101;
   transition: all 0.3s;

src/views/Gateway/Gateway.vue

@@ -10,22 +10,10 @@
           <span class="g-title">{{ transGatewayName(row.name) }}</span>
         </template>
       </el-table-column>
-      <el-table-column :label="tl('connection')" :min-width="160">
+      <el-table-column :label="tl('currentConnection')" :min-width="160">
         <template #default="{ row }">
           <template v-if="hasBeenInitialized(row)">
-            <template v-if="row?.max_connections === INFINITY_VALUE">
-              {{ connectionCount(row) }}
-            </template>
-            <template v-else>
-              <el-tooltip placement="top" effect="dark" :content="connectionCount(row)">
-                <el-progress
-                  :stroke-width="20"
-                  :percentage="calcPercentage(row.current_connections, row.max_connections, false)"
-                  :format="() => row.current_connections || 0"
-                >
-                </el-progress>
-              </el-tooltip>
-            </template>
+            {{ row.current_connections ?? 0 }}
           </template>
         </template>
       </el-table-column>
@@ -69,7 +57,7 @@
 <script lang="ts">
 import { getGatewayList, toggleGatewayEnable } from '@/api/gateway'
 import { INFINITY_VALUE } from '@/common/constants'
-import { calcPercentage, caseInsensitiveCompare } from '@/common/tools'
+import { caseInsensitiveCompare } from '@/common/tools'
 import useI18nTl from '@/hooks/useI18nTl'
 import useTransName from '@/hooks/useTransName'
 import { GatewayStatus } from '@/types/enum'
@@ -116,12 +104,6 @@ export default defineComponent({
       router.push({ name: 'gateway-create', params: { name: listener.name } })
     }
 
-    const connectionCount = ({ current_connections, max_connections }: any) => {
-      const max =
-        max_connections === INFINITY_VALUE ? 'Infinity' : max_connections ? max_connections : 0
-      return `${current_connections || 0}/${max}`
-    }
-
     const gatewayStartStop = async function (instance: any) {
       const { name } = instance
       try {
@@ -164,12 +146,10 @@ export default defineComponent({
       tl,
       tbLoading,
       tbData,
-      calcPercentage,
       GatewayStatus,
       isRunning,
       isUnload,
       INFINITY_VALUE,
-      connectionCount,
       hasBeenInitialized,
       getRowClassName,
       transGatewayName,