From 968c249753785cd5344495d1be47d58fbb887b2e Mon Sep 17 00:00:00 2001
From: YuShifan <894402575bt@gmail.com>
Date: Tue, 24 Sep 2024 11:18:49 +0800
Subject: [PATCH] feat(client): allow client id empty

---
 src/utils/mqttUtils.ts                       |  1 +
 src/views/connections/ConnectionForm.vue     | 60 ++++++++++----------
 src/views/connections/ConnectionInfo.vue     |  1 -
 web/src/views/connections/ConnectionForm.vue | 59 ++++++++++---------
 web/src/views/connections/ConnectionInfo.vue |  1 -
 5 files changed, 59 insertions(+), 63 deletions(-)

diff --git a/src/utils/mqttUtils.ts b/src/utils/mqttUtils.ts
index 3a47a0ebb..cad1dd61b 100644
--- a/src/utils/mqttUtils.ts
+++ b/src/utils/mqttUtils.ts
@@ -53,6 +53,7 @@ export const getClientOptions = (record: ConnectionModel): IClientOptions => {
     clientIdWithTime,
   } = record
   const protocolVersion = mqttVersionDict[mqttVersion as '3.1' | '3.1.1' | '5.0']
+
   const options: IClientOptions = {
     clientId,
     keepalive,
diff --git a/src/views/connections/ConnectionForm.vue b/src/views/connections/ConnectionForm.vue
index d0e047011..2535b5d95 100644
--- a/src/views/connections/ConnectionForm.vue
+++ b/src/views/connections/ConnectionForm.vue
@@ -71,35 +71,6 @@
                 </a>
               </el-tooltip>
             </el-col>
-            <el-col :span="22">
-              <el-form-item label-width="93px" label="Client ID" prop="clientId">
-                <el-input size="mini" v-model="record.clientId"></el-input>
-              </el-form-item>
-            </el-col>
-            <el-col :span="1">
-              <a href="javascript:;" class="icon-oper" @click="setClientID">
-                <i class="el-icon-refresh-right"></i>
-              </a>
-            </el-col>
-            <!-- add clientID timestamp check icon -->
-            <el-col :span="1">
-              <el-tooltip
-                placement="top"
-                :effect="theme !== 'light' ? 'light' : 'dark'"
-                :open-delay="500"
-                :offset="80"
-                :content="$t('connections.clientIdWithTimeTip')"
-              >
-                <a
-                  href="javascript:;"
-                  class="icon-oper-pure"
-                  @click="reverseClientIDWithTime"
-                  :class="{ 'icon-oper-active': clientIdWithTime }"
-                >
-                  <i class="el-icon-time"></i>
-                </a>
-              </el-tooltip>
-            </el-col>
             <el-col :span="22">
               <el-form-item class="host-item" label-width="93px" :label="$t('connections.brokerIP')" prop="host">
                 <el-col :span="6">
@@ -129,7 +100,35 @@
                 </el-input-number>
               </el-form-item>
             </el-col>
-
+            <el-col :span="22">
+              <el-form-item label-width="93px" label="Client ID" prop="clientId">
+                <el-input size="mini" v-model="record.clientId" clearable></el-input>
+              </el-form-item>
+            </el-col>
+            <el-col :span="1">
+              <a href="javascript:;" class="icon-oper" @click="setClientID">
+                <i class="el-icon-refresh-right"></i>
+              </a>
+            </el-col>
+            <!-- add clientID timestamp check icon -->
+            <el-col :span="1">
+              <el-tooltip
+                placement="top"
+                :effect="theme !== 'light' ? 'light' : 'dark'"
+                :open-delay="500"
+                :offset="80"
+                :content="$t('connections.clientIdWithTimeTip')"
+              >
+                <a
+                  href="javascript:;"
+                  class="icon-oper-pure"
+                  @click="reverseClientIDWithTime"
+                  :class="{ 'icon-oper-active': clientIdWithTime }"
+                >
+                  <i class="el-icon-time"></i>
+                </a>
+              </el-tooltip>
+            </el-col>
             <template v-if="record.protocol === 'ws' || record.protocol === 'wss'">
               <el-col :span="22">
                 <el-form-item label-width="93px" label="Path" prop="path">
@@ -656,7 +655,6 @@ export default class ConnectionForm extends Vue {
         { required: true, message: this.$t('common.inputRequired') },
         { validator: this.validateName, trigger: 'blur' },
       ],
-      clientId: [{ required: true, message: this.$t('common.inputRequired') }],
       path: [{ required: true, message: this.$t('common.inputRequired') }],
       host: [{ required: true, message: this.$t('common.inputRequired') }],
       port: [{ required: true, message: this.$t('common.inputRequired') }],
diff --git a/src/views/connections/ConnectionInfo.vue b/src/views/connections/ConnectionInfo.vue
index 6c73706a6..1abfb9b5f 100644
--- a/src/views/connections/ConnectionInfo.vue
+++ b/src/views/connections/ConnectionInfo.vue
@@ -146,7 +146,6 @@ export default class ConnectionInfo extends Vue {
         { required: true, message: this.$t('common.inputRequired') },
         { validator: this.validateName, trigger: 'blur' },
       ],
-      clientId: [{ required: true, message: this.$t('common.inputRequired') }],
     }
   }
 
diff --git a/web/src/views/connections/ConnectionForm.vue b/web/src/views/connections/ConnectionForm.vue
index 3b5ec2fb1..bc502a08b 100644
--- a/web/src/views/connections/ConnectionForm.vue
+++ b/web/src/views/connections/ConnectionForm.vue
@@ -61,35 +61,6 @@
                 </a>
               </el-tooltip>
             </el-col>
-            <el-col :span="22">
-              <el-form-item label-width="93px" label="Client ID" prop="clientId">
-                <el-input size="mini" v-model="record.clientId"></el-input>
-              </el-form-item>
-            </el-col>
-            <el-col :span="1">
-              <a href="javascript:;" class="icon-oper" @click="setClientID">
-                <i class="el-icon-refresh-right"></i>
-              </a>
-            </el-col>
-            <!-- add clientID timestamp check icon -->
-            <el-col :span="1">
-              <el-tooltip
-                placement="top"
-                :effect="theme !== 'light' ? 'light' : 'dark'"
-                :open-delay="500"
-                :offset="80"
-                :content="$t('connections.clientIdWithTimeTip')"
-              >
-                <a
-                  href="javascript:;"
-                  class="icon-oper-pure"
-                  @click="reverseClientIDWithTime"
-                  :class="{ 'icon-oper-active': clientIdWithTime }"
-                >
-                  <i class="el-icon-time"></i>
-                </a>
-              </el-tooltip>
-            </el-col>
             <el-col :span="22">
               <el-form-item class="host-item" label-width="93px" :label="$t('connections.brokerIP')" prop="host">
                 <el-col :span="6">
@@ -156,6 +127,35 @@
                 </el-input-number>
               </el-form-item>
             </el-col>
+            <el-col :span="22">
+              <el-form-item label-width="93px" label="Client ID" prop="clientId">
+                <el-input size="mini" v-model="record.clientId" clearable></el-input>
+              </el-form-item>
+            </el-col>
+            <el-col :span="1">
+              <a href="javascript:;" class="icon-oper" @click="setClientID">
+                <i class="el-icon-refresh-right"></i>
+              </a>
+            </el-col>
+            <!-- add clientID timestamp check icon -->
+            <el-col :span="1">
+              <el-tooltip
+                placement="top"
+                :effect="theme !== 'light' ? 'light' : 'dark'"
+                :open-delay="500"
+                :offset="80"
+                :content="$t('connections.clientIdWithTimeTip')"
+              >
+                <a
+                  href="javascript:;"
+                  class="icon-oper-pure"
+                  @click="reverseClientIDWithTime"
+                  :class="{ 'icon-oper-active': clientIdWithTime }"
+                >
+                  <i class="el-icon-time"></i>
+                </a>
+              </el-tooltip>
+            </el-col>
 
             <template v-if="record.protocol === 'ws' || record.protocol === 'wss'">
               <el-col :span="22">
@@ -614,7 +614,6 @@ export default class ConnectionCreate extends Vue {
         { required: true, message: this.$t('common.inputRequired') },
         { validator: this.validateName, trigger: 'blur' },
       ],
-      clientId: [{ required: true, message: this.$t('common.inputRequired') }],
       path: [{ required: true, message: this.$t('common.inputRequired') }],
       host: [{ required: true, message: this.$t('common.inputRequired') }],
       port: [{ required: true, message: this.$t('common.inputRequired') }],
diff --git a/web/src/views/connections/ConnectionInfo.vue b/web/src/views/connections/ConnectionInfo.vue
index 27113481e..3b0e158e7 100644
--- a/web/src/views/connections/ConnectionInfo.vue
+++ b/web/src/views/connections/ConnectionInfo.vue
@@ -131,7 +131,6 @@ export default class ConnectionInfo extends Vue {
         { required: true, message: this.$t('common.inputRequired') },
         { validator: this.validateName, trigger: 'blur' },
       ],
-      clientId: [{ required: true, message: this.$t('common.inputRequired') }],
     }
   }