refactor(components): update form component

packages/components/streaming/StreamForm.vue

@@ -1,5 +1,5 @@
 <template>
-  <el-form ref="form" :model="record" label-position="top">
+  <el-form ref="FormCom" :model="record" label-position="top">
     <el-form-item prop="stream_name">
       <template #label>
         {{ t('streaming.streamName') }}
@@ -17,7 +17,7 @@
           v-for="item in allStreamTypes"
           :key="item"
           :value="item"
-          :label="$t(`streaming.streamTypeLabel.${item}`)"
+          :label="t(`streaming.streamTypeLabel.${item}`)"
         />
       </el-select>
     </el-form-item>
@@ -43,7 +43,8 @@
 <script setup lang="ts">
 import { StreamType } from '@emqx/shared-ui-constants'
 import { useLocale } from '@emqx/shared-ui-utils'
-import { Component, computed, defineEmits, defineProps } from 'vue'
+import type { Component } from 'vue'
+import { computed, defineEmits, defineExpose, defineProps, ref } from 'vue'
 
 interface StreamRecord {
   stream_name: string
@@ -92,6 +93,16 @@ const handleStreamTypeChange = (val: StreamType) => {
     } as StreamRecord
   }
 }
+
+const FormCom = ref()
+const validate = () => {
+  return FormCom.value.validate()
+}
+
+defineExpose({
+  FormCom,
+  validate,
+})
 </script>
 
 <style lang="scss"></style>

packages/components/streaming/StreamingACLForm.vue

@@ -1,10 +1,21 @@
 <template>
-  <el-form :model="record" label-position="top">
+  <el-form ref="FormCom" :model="record" label-position="top">
     <el-form-item prop="principal_name" :label="t('common.username')">
-      <el-input v-model="record.principal_name" />
+      <el-input v-model="record.principal_name" :disabled="matchAllUsers">
+        <template #prepend>
+          <el-select
+            class="prepend-select"
+            v-model="record.principal_name_type"
+            @change="changeNameType"
+          >
+            <el-option :label="t('streaming.matchAll')" :value="StreamPatternType.All" />
+            <el-option :label="t('streaming.literal')" :value="StreamPatternType.Literal" />
+          </el-select>
+        </template>
+      </el-input>
     </el-form-item>
     <el-form-item prop="host" :label="tl('host')">
-      <el-input v-model="record.host" :disabled="record.host_type === StreamPatternType.All">
+      <el-input v-model="record.host" :disabled="matchAllHost">
         <template #prepend>
           <el-select class="prepend-select" v-model="record.host_type" @change="changeHostType">
             <el-option :label="tl('matchAll')" :value="StreamPatternType.All" />
@@ -26,7 +37,7 @@
       </el-radio-group>
     </el-form-item>
     <el-form-item prop="resource_name" :label="tl('aclResourceName')">
-      <el-input v-model="record.resource_name" :disabled="matchAllResource || selectedCluster">
+      <el-input v-model="record.resource_name" :disabled="matchAllResources || selectedCluster">
         <template #prepend>
           <el-select
             class="prepend-select"
@@ -76,7 +87,7 @@ import {
   StreamResourceType,
 } from '@emqx/shared-ui-constants'
 import { useLocale, useStreamingAuth } from '@emqx/shared-ui-utils'
-import { computed } from 'vue'
+import { computed, ref } from 'vue'
 
 interface StreamACL {
   principal_type: string
@@ -88,6 +99,7 @@ interface StreamACL {
   resource_name: string
   operation: StreamOperation
   permission: StreamPermission
+  principal_name_type: StreamPatternType
 }
 
 const props = defineProps<{
@@ -112,23 +124,36 @@ const record = computed({
   },
 })
 
+const matchAllUsers = computed(() => record.value.principal_name_type === StreamPatternType.All)
+const matchAllHost = computed(() => record.value.host_type === StreamPatternType.All)
+const matchAllResources = computed(() => record.value.pattern_type === StreamPatternType.All)
+
 const { permissionOptions, resourceTypeOptions, getValidOperations } = useStreamingAuth(props.lang)
 
 const selectedCluster = computed(() => record.value.resource_type === StreamResourceType.Cluster)
-const matchAllResource = computed(() => record.value.pattern_type === StreamPatternType.All)
 
-const changeHostType = () => {
-  if (record.value.host_type === StreamPatternType.All) {
+const changeHostType = async () => {
+  if (matchAllHost.value) {
     record.value.host = STREAMING_MATCH_ALL
-  } else if (record.value.host === STREAMING_MATCH_ALL) {
+  } else {
     record.value.host = ''
+    clearSpecialValidate('host')
   }
 }
-const changeResourcePattern = () => {
-  if (matchAllResource.value) {
+const changeNameType = async () => {
+  if (matchAllUsers.value) {
+    record.value.principal_name = STREAMING_MATCH_ALL
+  } else {
+    record.value.principal_name = ''
+    clearSpecialValidate('principal_name')
+  }
+}
+const changeResourcePattern = async () => {
+  if (matchAllResources.value) {
     record.value.resource_name = STREAMING_MATCH_ALL
   } else if (record.value.resource_name === STREAMING_MATCH_ALL) {
     record.value.resource_name = ''
+    clearSpecialValidate('resource_name')
   }
 }
 const changeResourceType = () => {
@@ -141,6 +166,20 @@ const changeResourceType = () => {
   }
   record.value.operation = StreamOperation.All
 }
+
+const clearSpecialValidate = (key: string) => {
+  window.setTimeout(() => FormCom.value.clearValidate([key]))
+}
+
+const FormCom = ref()
+const validate = () => {
+  return FormCom.value.validate()
+}
+
+defineExpose({
+  FormCom,
+  validate,
+})
 </script>
 
 <style lang="scss" />

packages/components/streaming/StreamingAuthForm.vue

@@ -1,5 +1,5 @@
 <template>
-  <el-form :model="record" label-position="top">
+  <el-form ref="FormCom" :model="record" label-position="top">
     <el-form-item prop="mechanism" :label="t('streaming.authType')">
       <el-select v-model="record.mechanism" :disabled="isEdit">
         <el-option v-for="item in authTypeList" :key="item" :label="item" :value="item" />
@@ -13,7 +13,7 @@
         type="password"
         v-model="record.password"
         show-password
-        autocomplete="new-password"
+        autocomplete="one-time-code"
         clearable
       />
     </el-form-item>
@@ -23,7 +23,7 @@
 <script setup lang="ts">
 import { StreamAuthType } from '@emqx/shared-ui-constants'
 import { useLocale } from '@emqx/shared-ui-utils'
-import { computed } from 'vue'
+import { computed, ref } from 'vue'
 
 interface StreamRecord {
   user_name: string
@@ -53,6 +53,16 @@ const record = computed({
 })
 
 const authTypeList = [StreamAuthType.Plain, StreamAuthType.SHA256]
+
+const FormCom = ref()
+const validate = () => {
+  return FormCom.value.validate()
+}
+
+defineExpose({
+  FormCom,
+  validate,
+})
 </script>
 
 <style lang="scss" />

packages/i18n/lib/enStreaming.ts

@@ -35,7 +35,7 @@ export const enStreaming = {
   ],
   betaTip: 'This feature is in beta.',
   needVPCTip: 'Streaming requires intranet access, please create a {vpc} first.',
-  mqttTopicFormatTip: `Can contain letters, numbers, special characters (_, -, /, +, $, %, {'@'}, &, :, {'{'}{'}'} and .) and mid-string spaces (no leading/trailing spaces), up to 128 characters`,
+  mqttTopicFormatTip: `Can contain letters, numbers, special characters (_, -, /, +, #, $, %, {'@'}, &, :, {'{'}{'}'} and .) and mid-string spaces (no leading/trailing spaces), up to 128 characters`,
   streamType: 'Stream Type',
   streamTypeLabel: {
     default: 'Default',

packages/i18n/lib/jaStreaming.ts

@@ -35,7 +35,7 @@ export const jaStreaming = {
   betaTip: 'この機能はベータ版です。',
   needVPCTip:
     'ストリーミングを利用するには内部ネットワークへのアクセスが必要です。まず{vpc}を作成してください。',
-  mqttTopicFormatTip: `アルファベット、数字、「_」、「-」、「/」、「+」、「$」、「%」、「{'@'}」、「&」、「:」、「{'{'}{'}'}」、中間の空白、および「.」のみ使え、最長 128 文字です`,
+  mqttTopicFormatTip: `アルファベット、数字、「_」、「-」、「/」、「+」、「#」、「$」、「%」、「{'@'}」、「&」、「:」、「{'{'}{'}'}」、中間の空白、および「.」のみ使え、最長 128 文字です`,
   streamType: 'ストリームタイプ',
   streamTypeLabel: {
     default: 'Default',

packages/i18n/lib/zhStreaming.ts

@@ -35,7 +35,7 @@ export const zhStreaming = {
   ],
   betaTip: '此功能目前处于公测阶段。',
   needVPCTip: 'Streaming 功能需要内网访问，在开通前请先创建 {vpc}。',
-  mqttTopicFormatTip: `可包含字母、数字、部分特殊字符（_、-、/、+、$、%、{'@'}、&、:、{'{'}{'}'} 和 .）及中间空格（无首尾空格），最长 128 个字符`,
+  mqttTopicFormatTip: `可包含字母、数字、部分特殊字符（_、-、/、+、#、$、%、{'@'}、&、:、{'{'}{'}'} 和 .）及中间空格（无首尾空格），最长 128 个字符`,
   streamType: 'Stream 类型',
   streamTypeLabel: {
     default: 'Default',