Merge pull request #48 from Omniaevo/develop

Add Flatpak packaging and custom client ID per connection

Author: MedaiP90

README.md

@@ -46,7 +46,7 @@ npm run lint
 
 ## Compiles and minifies for production
 
-**N.B.**: the build process includes **electron publish**, a *.env* file with the `GITHUB_TOKEN` environment variable set is required.
+**N.B.**: the build process includes **electron publish**, a _.env_ file with the `GITHUB_TOKEN` environment variable set is required.
 
 ```bash
 # Linux
@@ -60,6 +60,12 @@ npm run electron:build -- --mac -p always # With GitHub publish
 # Windows
 npm run electron:build -- --win # Without publish
 npm run electron:build -- --win -p always # With GitHub publish
+
+# Flatpak
+# ⚠️ The flatpak and flatpak-builder packages need to be installed in order to build Flatpak bundles. ⚠️
+npm run electron:build -- --linux flatpak
+# Install and run the flatpak package
+flatpak install --user mqtt5-explorer-[VERSION]-linux-x86_64.flatpak && flatpak run com.omniaevo.mqtt5_explorer
 ```
 
 ## Customize configuration

package.json

@@ -1,6 +1,6 @@
 {
   "name": "mqtt5-explorer",
-  "version": "1.15.0",
+  "version": "1.16.0",
   "private": false,
   "license": "GPLv3",
   "description": "A simple MQTT client that supports MQTT5 protocol.",

src/components/ConnectionForm.vue

@@ -125,6 +125,23 @@
                 </div>
               </div>
               <v-divider class="mb-2" />
+              <div row>
+                <v-text-field
+                  v-bind:value="clientId"
+                  v-bind:outlined="outline"
+                  label="Current client ID"
+                  style="max-width: 35%"
+                  readonly
+                  disabled
+                />
+                <v-text-field
+                  v-model="connectionData.clientId"
+                  v-bind:outlined="outline"
+                  label="Override client ID"
+                  clearable
+                />
+              </div>
+              <v-divider class="mb-2" />
               <div row>
                 <v-combobox
                   v-model="connectionData.topics"

src/models/ConnectionProperties.js

@@ -13,6 +13,7 @@ class ConnectionProperties {
   password = undefined;
   tls = false;
   caCert = undefined;
+  clientId = undefined;
   clientCert = undefined;
   clientKey = undefined;
   caCertPath = undefined;
@@ -53,6 +54,7 @@ class ConnectionProperties {
     this.username = properties.username;
     this.password = properties.password;
     this.caCert = properties.caCert;
+    this.clientId = properties.clientId;
     this.clientCert = properties.clientCert;
     this.clientKey = properties.clientKey;
     this.caCertPath = properties.caCertPath;

src/utils/Connection.js

@@ -53,7 +53,7 @@ class Connection {
 
   connect(clientProps, onConnect, onClose) {
     const options = {
-      clientId: clientProps.clientId,
+      clientId: this.#properties.clientId || clientProps.clientId,
       protocolVersion: this.#properties.version,
       rejectUnauthorized: this.#properties.validateCertificate,
       keepalive: clientProps.keepalive,
@@ -63,6 +63,8 @@ class Connection {
       clean: true,
     };
 
+    console.log(options);
+
     if (this.#properties.username) {
       options.username = this.#properties.username;
     }

vue.config.js

@@ -54,7 +54,7 @@ module.exports = {
       nodeIntegration: true,
       contextIsolation: true,
       builderOptions: {
-        appId: "com.omniaevo.${name}",
+        appId: `com.omniaevo.${builderOpts.appStrings.executableName}`,
         artifactName: "${name}-${version}-${platform}-${arch}.${ext}",
         productName: "MQTT5 Explorer",
         publish: [...builderOpts.appRepos],
@@ -63,6 +63,25 @@ module.exports = {
           icon: "build/icon/",
           target: ["AppImage"],
         },
+        flatpak: {
+          runtime: "org.freedesktop.Platform",
+          runtimeVersion: "23.08",
+          sdk: "org.freedesktop.Sdk",
+          base: "org.electronjs.Electron2.BaseApp",
+          baseVersion: "23.08",
+          category: builderOpts.appCategories.linux,
+          description: builderOpts.appStrings.description,
+          desktop: {
+            StartupWMClass: builderOpts.appStrings.executableName,
+          },
+          finishArgs: [
+            "--share=ipc",
+            "--socket=x11",
+            "--socket=pulseaudio",
+            "--share=network",
+          ],
+          synopsis: builderOpts.appStrings.synopsis,
+        },
         appImage: {
           category: builderOpts.appCategories.linux,
           description: builderOpts.appStrings.description,