Merge pull request #223 from emqx/develop

v1.3.1

package.json

@@ -1,7 +1,7 @@
 {
   "name": "MQTTX",
   "author": "EMQ X Team",
-  "version": "1.3.0",
+  "version": "1.3.1",
   "license": "Apache",
   "description": "MQTT desktop client",
   "repository": "https://github.com/emqx/MQTTX",
@@ -30,6 +30,7 @@
     "mqtt": "^3.0.0",
     "vue": "^2.6.10",
     "vue-class-component": "^7.0.2",
+    "vue-clipboard2": "^0.3.1",
     "vue-i18n": "^8.11.2",
     "vue-property-decorator": "^8.1.0",
     "vue-router": "^3.0.3",

src/assets/scss/theme/dark.scss

@@ -3,6 +3,8 @@ body.dark {
   --color-bg-normal: #282828;
   --color-bg-primary: #232323;
   --color-bg-topics: #484848;
+  --color-bg-topics_active: #353535;
+  --color-bg-topics_shadow: #1b1b1bd1;
   --color-bg-leftbar: #282828;
   --color-bg-leftbar_item: #303030;
   --color-bg-item: #395449;

src/assets/scss/theme/light.scss

@@ -3,6 +3,8 @@ body.light {
   --color-bg-normal: #ffffff;
   --color-bg-primary: #F9FAFD;
   --color-bg-topics: #F8F8F8;
+  --color-bg-topics_active: #efefef;
+  --color-bg-topics_shadow: #e2e2e2d1;
   --color-bg-leftbar: #333844;
   --color-bg-leftbar_item: #232731;
   --color-bg-item: #EBF8F2;

src/assets/scss/theme/night.scss

@@ -3,6 +3,8 @@ body.night {
   --color-bg-normal: #292B33;
   --color-bg-primary: #212328;
   --color-bg-topics: #414556;
+  --color-bg-topics_active: #323544;
+  --color-bg-topics_shadow: #231d1dd1;
   --color-bg-leftbar: #333844;
   --color-bg-leftbar_item: #31333F;
   --color-bg-item: #31333F;

src/components/MsgPublish.vue

@@ -126,15 +126,14 @@ export default class MsgPublish extends Vue {
   private handleInputBlur() {
     ipcRenderer.removeAllListeners('sendPayload')
   }
-
-  private beforeDestroy() {
-    ipcRenderer.removeAllListeners('sendPayload')
-  }
-
   private handleLayout() {
     const editorRef: EditorRef = this.$refs.payloadEditor as EditorRef
     editorRef.editorLayout()
   }
+
+  private beforeDestroy() {
+    ipcRenderer.removeAllListeners('sendPayload')
+  }
 }
 </script>
 

src/components/SubscriptionsList.vue

@@ -1,10 +1,5 @@
 <template>
   <div>
-    <!-- Hide copy text -->
-    <input
-      v-model="clipboardContent"
-      type="text"
-      id="clipboard">
     <left-panel>
       <el-card
         v-if="subsVisible"
@@ -23,19 +18,24 @@
           </a>
         </div>
         <div
-          class="topics-item"
           v-for="(sub, index) in subsList"
           :key="index"
+          :class="['topics-item', index === topicActiveIndex ? 'active' : '']"
           :style="{
             borderLeft: `4px solid ${sub.color}`,
           }"
-          @click.stop="handleClickTopic(sub)">
+          @click="handleClickTopic(sub, index)">
           <el-tooltip
             :effect="theme !== 'light' ? 'light' : 'dark'"
             :content="copySuccess ? $t('connections.topicCopied') : sub.topic"
             :open-delay="!copySuccess ? 0 : 500"
             placement="top">
-            <a href="javascript:;" class="topic" @click.stop="handleCopyTopic(sub.topic)">
+            <a
+              v-clipboard:copy="sub.topic"
+              v-clipboard:success="onCopySuccess"
+              href="javascript:;"
+              class="topic"
+              @click.stop="stopClick">
               {{ sub.topic }}
             </a>
           </el-tooltip>
@@ -143,7 +143,7 @@ export default class SubscriptionsList extends Vue {
   private qosOption: qosList = [0, 1, 2]
   private subsList: SubscriptionModel[] = []
   private copySuccess = false
-  private clipboardContent = ''
+  private topicActiveIndex: number | null = null
 
   get rules() {
     return {
@@ -162,6 +162,7 @@ export default class SubscriptionsList extends Vue {
 
   @Watch('record')
   private handleRecordChanged(val: ConnectionModel) {
+    this.topicActiveIndex = null
     this.getCurrentConnection(val.id as string)
   }
 
@@ -297,27 +298,27 @@ export default class SubscriptionsList extends Vue {
     }
   }
 
-  private handleCopyTopic(topic: string): void | boolean {
-    this.clipboardContent = topic
+  private onCopySuccess() {
     this.copySuccess = true
     setTimeout(() => {
-      const clipboard = document.querySelector('#clipboard') as HTMLInputElement
-      if (!clipboard) {
-        return false
-      }
-      clipboard.select()
-      document.execCommand('Copy')
-      setTimeout(() => {
-        this.copySuccess = false
-      }, 1000)
-    }, 500)
+      this.copySuccess = false
+    }, 1000)
+  }
+  private stopClick(): boolean {
+    return false
   }
 
-  private handleClickTopic(item: SubscriptionModel) {
-    this.$emit('onClickTopic', item)
+  private handleClickTopic(item: SubscriptionModel, index: number) {
+    if (this.topicActiveIndex === null || this.topicActiveIndex !== index) {
+      this.topicActiveIndex = index
+      this.$emit('onClickTopic', item, false)
+    } else if (this.topicActiveIndex === index) {
+      this.topicActiveIndex = null
+      this.$emit('onClickTopic', item, true)
+    }
   }
 
-  private created(): void {
+  private created() {
     this.getCurrentConnection(this.connectionId)
   }
 }
@@ -356,14 +357,22 @@ export default class SubscriptionsList extends Vue {
       position: relative;
       clear: both;
       border-radius: 2px;
+      -moz-user-select: none;
+      -khtml-user-select: none;
+      user-select: none;
+      transition: all .3s ease;
+      box-shadow: 1px 1px 2px 0px var(--color-bg-topics_shadow);
+      &.active {
+        background: var(--color-bg-topics_active);
+        box-shadow: none;
+      }
       .topic {
         max-width: 120px;
         margin-left: 5px;
         display: inline-block;
         white-space: nowrap;
         text-overflow: ellipsis;
         overflow: hidden;
-        user-select: all;
         color: var(--color-text-default);
       }
       .qos {
@@ -403,9 +412,4 @@ export default class SubscriptionsList extends Vue {
     }
   }
 }
-#clipboard {
-  position: absolute;
-  z-index: -1;
-  visibility: hidden;
-}
 </style>

src/lang/connections.ts

@@ -155,6 +155,18 @@ export default {
     zh: '接收最大数值',
     en: 'Receive Maximum',
   },
+  topicAliasMaximum: {
+    zh: '主题别名最大值',
+    en: 'Topic Alias Maximum',
+  },
+  requestResponseInformation: {
+    zh: '请求响应信息',
+    en: 'Request Response Information',
+  },
+  requestProblemInformation: {
+    zh: '请求失败信息',
+    en: 'Request Problem Information',
+  },
   topicReuired: {
     zh: '请输入 Topic',
     en: 'Topic is required',
@@ -171,4 +183,8 @@ export default {
     zh: '遗嘱消息',
     en: 'Last Will and Testament',
   },
+  strictValidateCertificate: {
+    zh: '严格证书验证',
+    en: 'Strict validate Certificate',
+  },
 }

src/main.ts

@@ -2,16 +2,17 @@ import Vue from 'vue'
 
 import 'element-ui/lib/theme-chalk/index.css'
 import ElementLocale from 'element-ui/lib/locale'
-
 import App from './App.vue'
 import router from './router/index'
 import store from './store/index'
 import VueI18n from 'vue-i18n'
+import VueClipboard from 'vue-clipboard2'
 import Lang from './lang'
 import element from './utils/element'
 
 Vue.use(element)
 Vue.use(VueI18n)
+Vue.use(VueClipboard)
 
 const locale: Language = store.state.app.currentLang
 const vueI18n: VueI18n = new VueI18n({

src/main/updateChecker.ts

@@ -1,7 +1,7 @@
 import { dialog, shell } from 'electron'
 import axios from 'axios'
 
-const version = 'v1.3.0'
+const version = 'v1.3.1'
 const release = 'https://api.github.com/repos/emqx/MQTTX/releases/latest'
 const downloadUrl = 'https://github.com/emqx/MQTTX/releases/latest'
 

src/store/modules/app.ts

@@ -1,17 +1,17 @@
 import Vue from 'vue'
 import { loadSettings, setSettings } from '@/utils/api/setting'
 
-const TOGGLE_THEME: string = 'TOGGLE_THEME'
-const TOGGLE_LANG: string = 'TOGGLE_LANG'
-const TOGGLE_AUTO_CHECK: string = 'TOGGLE_AUTO_CHECK'
+const TOGGLE_THEME = 'TOGGLE_THEME'
+const TOGGLE_LANG = 'TOGGLE_LANG'
+const TOGGLE_AUTO_CHECK = 'TOGGLE_AUTO_CHECK'
 const SET_MAX_RECONNECT_TIMES = 'SET_MAX_RECONNECT_TIMES'
-const CHANGE_ACTIVE_CONNECTION: string = 'CHANGE_ACTIVE_CONNECTION'
-const PUSH_MESSAGE: string = 'PUSH_MESSAGE'
-const REMOVE_ACTIVE_CONNECTION: string = 'REMOVE_ACTIVE_CONNECTION'
-const CHANGE_SUBSCRIPTIONS: string = 'CHANGE_SUBSCRIPTIONS'
-const SHOW_CLIENT_INFO: string = 'SHOW_CLIENT_INFO'
-const SHOW_SUBSCRIPTIONS: string = 'SHOW_SUBSCRIPTIONS'
-const UNREAD_MESSAGE_COUNT_INCREMENT: string = 'UNREAD_MESSAGE_COUNT_INCREMENT'
+const CHANGE_ACTIVE_CONNECTION = 'CHANGE_ACTIVE_CONNECTION'
+const PUSH_MESSAGE = 'PUSH_MESSAGE'
+const REMOVE_ACTIVE_CONNECTION = 'REMOVE_ACTIVE_CONNECTION'
+const CHANGE_SUBSCRIPTIONS = 'CHANGE_SUBSCRIPTIONS'
+const SHOW_CLIENT_INFO = 'SHOW_CLIENT_INFO'
+const SHOW_SUBSCRIPTIONS = 'SHOW_SUBSCRIPTIONS'
+const UNREAD_MESSAGE_COUNT_INCREMENT = 'UNREAD_MESSAGE_COUNT_INCREMENT'
 
 const stateRecord: App = loadSettings()
 

src/utils/getFiles.ts

@@ -1,13 +1,12 @@
 import fs from 'fs'
-import path from 'path'
 import { SSLPath, SSLContent } from '@/views/connections/types'
 
 export const getSSLFile = (sslPath: SSLPath): SSLContent | undefined => {
   const { ca, cert, key } = sslPath
   const res: SSLContent = {
-    ca: ca !== '' ? [fs.readFileSync(path.join(ca), 'utf-8')] : undefined,
-    cert: cert !== '' ? fs.readFileSync(path.join(cert), 'utf-8') : undefined,
-    key: key !== '' ? fs.readFileSync(path.join(key), 'utf-8') : undefined,
+    ca: ca !== '' ? [fs.readFileSync(ca)] : undefined,
+    cert: cert !== '' ? fs.readFileSync(cert) : undefined,
+    key: key !== '' ? fs.readFileSync(key) : undefined,
   }
   return res
 }

src/utils/mqttUtils.ts

@@ -1,7 +1,7 @@
 import { IClientOptions } from 'mqtt'
 import time from '@/utils/time'
 import { getSSLFile } from '@/utils/getFiles'
-import { ConnectionModel, SSLPath, SSLContent } from '@/views/connections/types'
+import { ConnectionModel, SSLContent } from '@/views/connections/types'
 
 const setMQTT5Properties = (
   option: IClientOptions['properties'],
@@ -18,6 +18,10 @@ const setMQTT5Properties = (
     option.sessionExpiryInterval === 0) {
     properties.receiveMaximum = option.receiveMaximum
   }
+  if (option.topicAliasMaximum ||
+    option.topicAliasMaximum === 0) {
+    properties.topicAliasMaximum = option.topicAliasMaximum
+  }
   return properties
 }
 
@@ -30,7 +34,7 @@ export const getClientOptions = (
   }
   const {
     clientId, username, password, keepalive, clean, connectTimeout,
-    ssl, certType, mqttVersion, reconnect, will,
+    ssl, certType, mqttVersion, reconnect, will, rejectUnauthorized,
   } = record
   // reconnectPeriod = 0 disabled automatic reconnection in the client
   const reconnectPeriod = reconnect ? 4000 : 0
@@ -52,28 +56,33 @@ export const getClientOptions = (
   }
   // MQTT Version
   if (protocolVersion === 5) {
-    const { sessionExpiryInterval, receiveMaximum } = record
+    const { sessionExpiryInterval, receiveMaximum, topicAliasMaximum,
+    } = record
     const properties = setMQTT5Properties({
       sessionExpiryInterval,
       receiveMaximum,
+      topicAliasMaximum,
     })
     if (properties && Object.keys(properties).length > 0) {
       options.properties =  properties
     }
   }
   // SSL
   if (ssl && certType === 'self') {
-    const filePath: SSLPath = {
+    const sslRes: SSLContent | undefined = getSSLFile({
       ca: record.ca,
       cert: record.cert,
       key: record.key,
-    }
-    const sslRes: SSLContent | undefined = getSSLFile(filePath)
+    })
     if (sslRes) {
-      options.rejectUnauthorized = false
       options.ca = sslRes.ca
       options.cert = sslRes.cert
       options.key = sslRes.key
+      if (rejectUnauthorized === undefined) {
+        options.rejectUnauthorized = false
+      } else {
+        options.rejectUnauthorized = rejectUnauthorized
+      }
     }
   }
   // Will Message