refactor(authn): interaction of authentication page

src/api/auth.ts

@@ -1,8 +1,8 @@
 /* eslint-disable @typescript-eslint/explicit-module-boundary-types */
 import http from '@/common/http'
-import { AuthzSetting, ImportResult, Metrics } from '@/types/auth'
+import { AuthnItem, AuthzSetting, ImportResult, Metrics } from '@/types/auth'
 
-export function listAuthn(params = {}) {
+export function listAuthn(params = {}): Promise<AuthnItem[]> {
   return http.get('/authentication', { params })
 }
 

src/hooks/Auth/useAuthn.ts

@@ -1,7 +1,7 @@
 import { listAuthn, queryAuthnItemMetrics } from '@/api/auth'
-import { AuthnItem, Metrics } from '@/types/auth'
-import { SortableEvent } from 'sortablejs'
 import jwtIcon from '@/assets/img/jwt.png'
+import { AuthnItem, Metrics } from '@/types/auth'
+import { AuthnMechanismType } from '@/types/enum'
 
 export type AuthnItemInTable = AuthnItem & {
   metrics?: Metrics
@@ -10,14 +10,9 @@ export type AuthnItemInTable = AuthnItem & {
 export default (): {
   isListLoading: Ref<boolean>
   authnList: Ref<AuthnItemInTable[]>
-  tableCom: Ref<Component>
   getAuthnItemBackendForShow: (item: AuthnItemInTable) => string
   getAuthnList: (isInit?: boolean) => Promise<void>
   updateAuthnItemMetrics: (authn: AuthnItem) => Promise<void>
-  moveAuthnUp: (index: number) => Promise<void>
-  moveAuthnDown: (index: number) => Promise<void>
-  moveAuthnToTop: (authn: AuthnItem) => any
-  moveAuthnToBottom: (authn: AuthnItem) => any
 } => {
   const isListLoading = ref(false)
   const authnList: Ref<Array<AuthnItemInTable>> = ref([])
@@ -45,13 +40,13 @@ export default (): {
       const res: AuthnItem[] = await listAuthn()
       authnList.value = res.map((item) => {
         const ret: AuthnItemInTable = item
-        if (ret.mechanism !== 'jwt' && ret.mechanism !== 'cinfo') {
+        if (ret.mechanism !== 'jwt' && ret.mechanism !== AuthnMechanismType.CINFO) {
           try {
             ret.img = getImg(`img/${ret.backend}.png`)
           } catch {
             ret.img = ''
           }
-        } else if (ret.mechanism === 'cinfo') {
+        } else if (ret.mechanism === AuthnMechanismType.CINFO) {
           ret.img = getImg(`img/cinfo.png`)
         } else {
           ret.img = jwtIcon
@@ -60,8 +55,6 @@ export default (): {
         return item
       })
       setAddedAuthn()
-      await nextTick()
-      initSortable()
     } catch (error) {
       console.error(error)
     } finally {
@@ -108,67 +101,13 @@ export default (): {
     }
   }
 
-  const {
-    moveAuthnBeforeAnotherAuthn,
-    moveAuthnAfterAnotherAuthn,
-    moveAuthnToTop: requestMoveAuthnToTop,
-    moveAuthnToBottom: requestMoveAuthnToBottom,
-  } = useHandleAuthnItem()
-  const moveAuthnUp = async (index: number) => handleDragEvent(index - 1, index, authnList.value)
-  const moveAuthnDown = async (index: number) => handleDragEvent(index + 1, index, authnList.value)
-  const moveAuthnToTop = async (row: AuthnItem) => {
-    try {
-      await requestMoveAuthnToTop(row)
-    } catch (error) {
-      // empty the array first when an error occurs, otherwise the view will not be updated
-      authnList.value = []
-    } finally {
-      getAuthnList()
-    }
-  }
-  const moveAuthnToBottom = async (row: AuthnItem) => {
-    try {
-      await requestMoveAuthnToBottom(row)
-    } catch (error) {
-      // empty the array first when an error occurs, otherwise the view will not be updated
-      authnList.value = []
-    } finally {
-      getAuthnList()
-    }
-  }
-  const { handleDragEvent } = useMove(
-    {
-      moveToBottom: moveAuthnToBottom,
-      moveToTop: moveAuthnToTop,
-      moveBeforeAnotherTarget: moveAuthnBeforeAnotherAuthn,
-      moveAfterAnotherTarget: moveAuthnAfterAnotherAuthn,
-    },
-    undefined,
-    getAuthnList,
-  )
-
-  const handleOrderChanged = async (evt: SortableEvent) => {
-    const { newIndex, oldIndex } = evt
-    if (newIndex === undefined || oldIndex === undefined) {
-      return
-    }
-    handleDragEvent(newIndex, oldIndex, authnList.value)
-  }
-
-  const { tableCom, initSortable } = useSortableTable(handleOrderChanged)
-
   initTableData()
 
   return {
     isListLoading,
     authnList,
-    tableCom,
     getAuthnItemBackendForShow,
     getAuthnList,
     updateAuthnItemMetrics,
-    moveAuthnUp,
-    moveAuthnDown,
-    moveAuthnToTop,
-    moveAuthnToBottom,
   }
 }

src/hooks/Auth/useBuiltInDatabaseAuthn.ts

@@ -0,0 +1,20 @@
+import { AuthnMechanismType, DatabasesType } from '@/types/enum'
+
+const useBuiltInDatabaseAuthn = () => {
+  const defaultAuthnId = `${AuthnMechanismType.PasswordBased}:${DatabasesType.BuiltInDatabase}`
+
+  const { t } = useI18n()
+  const getFiledLabel = (field: 'clientid' | 'username') => {
+    const fieldMap = {
+      clientid: t('Base.clientid'),
+      username: t('Base.username'),
+    }
+    return fieldMap[field]
+  }
+  return {
+    defaultAuthnId,
+    getFiledLabel,
+  }
+}
+
+export default useBuiltInDatabaseAuthn

src/i18n/Auth.ts

@@ -63,10 +63,6 @@ export default {
     zh: '数据库',
     en: 'Database',
   },
-  noBackendDataSourceDesc: {
-    zh: '{ mechanism } 认证无需选择数据源，请继续下一步配置',
-    en: '{ mechanism } authentication does not require a backend, continue to the next step',
-  },
   reconnect: {
     zh: '自动重连',
     en: 'Reconnect',
@@ -898,4 +894,8 @@ Find more information about Variform expressions in EMQX doc.`,
     zh: '存在重复的权限配置',
     en: 'Duplicated permission configuration',
   },
+  extended: {
+    zh: '扩展',
+    en: 'Extended',
+  },
 }

src/i18n/components.ts

@@ -55,6 +55,14 @@ export default {
     zh: '客户端认证',
     en: 'Authentication',
   },
+  'authentication-default': {
+    zh: '默认认证',
+    en: 'Default Authentication',
+  },
+  'authentication-extended': {
+    zh: '扩展认证',
+    en: 'Extended Authentication',
+  },
   authorization: {
     zh: '客户端授权',
     en: 'Authorization',

src/router/index.ts

@@ -233,15 +233,21 @@ export const routes: Array<RouteRecordRaw> = [
   {
     path: '/authentication',
     component: Layout,
+    redirect: { name: 'authentication-default' },
     meta: {
       hideKey: 'authentication',
       authRequired: true,
     },
     children: [
       {
-        path: '',
-        name: 'authentication',
-        component: () => import('@/views/Auth/Authn.vue'),
+        path: 'default',
+        name: 'authentication-default',
+        component: () => import('@/views/Auth/AuthnDefault.vue'),
+      },
+      {
+        path: 'extended',
+        name: 'authentication-extended',
+        component: () => import('@/views/Auth/AuthnExtended.vue'),
       },
       {
         path: 'create',

src/types/auth.d.ts

@@ -71,12 +71,15 @@ export interface BuiltInDBItem {
   username: string
 }
 
-export interface DataManagerItem {
+export interface AuthnUser {
   user_id: string
-  password: string
   is_superuser: boolean
 }
 
+export interface DataManagerItem extends AuthnUser {
+  password: string
+}
+
 export type Metrics = MetricsDataWithExtraData<{
   node_status: Array<{
     node: string