Merge pull request #15 from Omniaevo/develop

TLS and fixed sizes bug
Omniaevo · May 25, 2022 · ef3fe95 · ef3fe95
2 parents cca53f4 + e212897
commit ef3fe95
Show file tree

Hide file tree

Showing 4 changed files with 112 additions and 12 deletions.
diff --git a/src/components/ConnectionForm.vue b/src/components/ConnectionForm.vue
@@ -13,9 +13,8 @@
           v-model="connectionData.version"
           v-bind:items="versions"
           v-bind:outlined="outline"
-          class="me-4"
           label="Version"
-          style="max-width: 10ch"
+          style="max-width: 12ch"
         />
       </div>
       <div row>
@@ -25,7 +24,7 @@
           v-bind:outlined="outline"
           v-bind:rules="staticConnectionProperties.rules.protocol"
           label="Protocol"
-          style="max-width: 10ch"
+          style="max-width: 15ch"
           required
         />
         <v-text-field
@@ -40,7 +39,7 @@
           v-bind:outlined="outline"
           v-bind:rules="staticConnectionProperties.rules.port"
           label="Port"
-          style="max-width: 10ch"
+          style="max-width: 12ch"
           required
         />
       </div>
@@ -109,6 +108,45 @@
               inset
             />
           </div>
+          <div row>
+            <div v-on:click="selectFile('caCert')" class="d-flex align-center">
+              <v-text-field
+                v-model="connectionData.caCert"
+                label="CA cert file"
+                disabled
+              />
+              <v-btn v-on:click.stop="deselectFile('caCert')" icon>
+                <v-icon>mdi-close</v-icon>
+              </v-btn>
+            </div>
+            <div
+              v-on:click="selectFile('clientCert')"
+              class="d-flex align-center"
+            >
+              <v-text-field
+                v-model="connectionData.clientCert"
+                label="Client cert file"
+                disabled
+              />
+              <v-btn v-on:click.stop="deselectFile('clientCert')" icon>
+                <v-icon>mdi-close</v-icon>
+              </v-btn>
+            </div>
+            <div
+              v-on:click="selectFile('clientKey')"
+              class="d-flex align-center"
+            >
+              <v-text-field
+                v-model="connectionData.clientKey"
+                label="Client key file"
+                disabled
+              />
+              <v-btn v-on:click.stop="deselectFile('clientKey')" icon>
+                <v-icon>mdi-close</v-icon>
+              </v-btn>
+            </div>
+          </div>
+          <v-divider class="mb-2" />
           <div row>
             <v-combobox
               v-model="connectionData.topics"
@@ -154,7 +192,7 @@
 }
 
 .dialog-text-container {
-  max-height: 35ch;
+  max-height: 40ch;
 }
 
 div[row] {
@@ -217,6 +255,22 @@ export default {
       clone.init(this.connectionData);
       this.$emit(event, clone);
     },
+    selectFile(destination) {
+      const fakeInput = document.createElement("input");
+
+      fakeInput.type = "file";
+      fakeInput.multiple = false;
+      fakeInput.onchange = () => {
+        this.connectionData[destination] = fakeInput.files[0].name;
+        this.connectionData[`${destination}Path`] = fakeInput.files[0].path;
+      };
+
+      fakeInput.click();
+    },
+    deselectFile(destination) {
+      this.connectionData[destination] = undefined;
+      this.connectionData[`${destination}Path`] = undefined;
+    },
   },
 };
 </script>
diff --git a/src/models/ConnectionProperties.js b/src/models/ConnectionProperties.js
@@ -8,6 +8,13 @@ class ConnectionProperties {
   host = undefined;
   username = undefined;
   password = undefined;
+  tls = false;
+  caCert = undefined;
+  clientCert = undefined;
+  clientKey = undefined;
+  caCertPath = undefined;
+  clientCertPath = undefined;
+  clientKeyPath = undefined;
   saved = false;
 
   static rules = {
@@ -41,6 +48,14 @@ class ConnectionProperties {
     this.host = properties.host;
     this.username = properties.username;
     this.password = properties.password;
+    this.caCert = properties.caCert;
+    this.clientCert = properties.clientCert;
+    this.clientKey = properties.clientKey;
+    this.caCertPath = properties.caCertPath;
+    this.clientCertPath = properties.clientCertPath;
+    this.clientKeyPath = properties.clientKeyPath;
+
+    this.tls = this.protocol.replace("mqtt", "").replace("ws", "") === "s";
   }
 }
 

diff --git a/src/utils/Connection.js b/src/utils/Connection.js
@@ -1,6 +1,7 @@
 import mqtt from "mqtt";
 import TreeNode from "../models/TreeNode";
 import ConnectionProperties from "../models/ConnectionProperties";
+import fs from "fs";
 
 class Connection {
   static connectionStates = {
@@ -42,16 +43,40 @@ class Connection {
 
   connect(onConnect, onClose, onError) {
     const options = {
-      username: this.#properties.username,
-      password: this.#properties.password,
       protocolVersion: this.#properties.version,
       rejectUnauthorized: this.#properties.validateCertificate,
       keepalive: 120,
       reconnectPeriod: 0,
       connectTimeout: 15000,
     };
 
-    this.#client = mqtt.connect(this.#url, options);
+    if (this.#properties.username) {
+      options.username = this.#properties.username;
+    }
+
+    if (this.#properties.password) {
+      options.password = this.#properties.password;
+    }
+
+    if (this.#properties.tls) {
+      options.ca = this.#properties.caCertPath
+        ? [fs.readFileSync(this.#properties.caCertPath)]
+        : undefined;
+      options.cert = this.#properties.clientCertPath
+        ? fs.readFileSync(this.#properties.clientCertPath)
+        : undefined;
+      options.key = this.#properties.clientKeyPath
+        ? fs.readFileSync(this.#properties.clientKeyPath)
+        : undefined;
+
+      options.protocol = this.#properties.protocol;
+      options.host = this.#properties.host;
+      options.port = this.#properties.port;
+    }
+
+    this.#client = this.#properties.tls
+      ? mqtt.connect(options)
+      : mqtt.connect(this.#url, options);
 
     this.#client.on("error", onError);
     this.#client.on("close", onClose);

diff --git a/src/views/Home.vue b/src/views/Home.vue
@@ -163,7 +163,7 @@
           </v-tabs>
         </div>
 
-        <v-tabs-items v-model="tabId">
+        <v-tabs-items v-model="tabId" class="tab-items-container">
           <v-tab-item
             v-for="(connection, i) in connectionsAvailable"
             v-bind:key="i"
@@ -226,20 +226,26 @@ div[row] {
 }
 
 .card-width {
-  width: 70ch;
+  width: 80ch;
 }
 
 .tab-width {
   width: 16ch;
 }
 
+.tab-items-container {
+  width: 100%;
+}
+
 .tab-no-overflow-false {
-  height: 33ch !important;
+  min-height: 33ch !important;
+  max-height: 40ch !important;
   overflow: hidden !important;
 }
 
 .tab-no-overflow-true {
-  height: 38ch !important;
+  min-height: 38ch !important;
+  max-height: 42ch !important;
   overflow: hidden !important;
 }