Merge pull request #71 from GJean/master

feat: Can change username and password when autoconnect is disable, and can change path in mqtt broker URI

.changeset/heavy-lamps-punch.md

@@ -0,0 +1,5 @@
+---
+'vue-paho-mqtt': minor
+---
+
+Can change username and password when autoconnect is disable, and can change path in mqtt broker URI

README.md

@@ -49,6 +49,9 @@ This plugin allows you to connect to a MQTT broker and subscribe to topics in yo
   - [publish()](#publish)
   - [host()](#host)
   - [port()](#port)
+  - [path()](#path)
+  - [username()](#username)
+  - [password()](#password)
   - [clientId()](#client-id)
   - [mainTopic()](#main-topic)
   - [unsubscribe()](#unsubscribe)
@@ -586,6 +589,156 @@ onMounted(() => {
 
 ---
 
+## Path
+
+Get or set the path parameter from the [MQTT Options](#mqtt-options).
+
+### Type Definition
+
+```ts
+const path: (e?: string) => string;
+```
+
+### Get Path
+
+```ts
+$mqtt.path(); // ie: "/mqtt"
+```
+
+### Set MQTT path
+
+```ts
+$mqtt.path('/ws/mqtt');
+```
+
+### Example usage
+
+```html
+<template>
+  <label>MQTT path: {{ $mqtt.path() }}</label>
+</template>
+```
+
+```ts
+onMounted(() => {
+  console.log(this.$mqtt.path());
+});
+```
+
+### Composition API
+
+```ts
+import { onMounted } from 'vue';
+import { $mqtt } from 'vue-paho-mqtt';
+
+onMounted(() => {
+  console.log($mqtt.path());
+});
+```
+
+---
+
+## Username
+
+Get or set the username parameter from the [MQTT Options](#mqtt-options).
+
+### Type Definition
+
+```ts
+const username: (e?: string) => string;
+```
+
+### Get Username
+
+```ts
+$mqtt.username(); // ie: ""
+```
+
+### Set MQTT username
+
+```ts
+$mqtt.username('testUsername');
+```
+
+### Example usage
+
+```html
+<template>
+  <label>MQTT username: {{ $mqtt.username() }}</label>
+</template>
+```
+
+```ts
+onMounted(() => {
+  console.log(this.$mqtt.username());
+});
+```
+
+### Composition API
+
+```ts
+import { onMounted } from 'vue';
+import { $mqtt } from 'vue-paho-mqtt';
+
+onMounted(() => {
+  console.log($mqtt.username());
+});
+```
+
+---
+
+## Password
+
+> [!CAUTION]
+> Exposing the password to the client can cause security issues if not used properly.
+
+Get or set the password parameter from the [MQTT Options](#mqtt-options).
+
+### Type Definition
+
+```ts
+const password: (e?: string) => string;
+```
+
+### Get Password
+
+```ts
+$mqtt.password(); // ie: ""
+```
+
+### Set MQTT password
+
+```ts
+$mqtt.password('secret');
+```
+
+### Example usage
+
+```html
+<template>
+  <label>MQTT password: {{ $mqtt.password() }}</label>
+</template>
+```
+
+```ts
+onMounted(() => {
+  console.log(this.$mqtt.password());
+});
+```
+
+### Composition API
+
+```ts
+import { onMounted } from 'vue';
+import { $mqtt } from 'vue-paho-mqtt';
+
+onMounted(() => {
+  console.log($mqtt.password());
+});
+```
+
+---
+
 ## Client ID
 
 Get or set the clientId parameter from the [MQTT Options](#mqtt-options).

src/App.vue

@@ -23,6 +23,10 @@
               <span>Port:</span>
               <input placeholder="enter mqtt port" v-model="port" />
             </span>
+            <span class="field-row">
+              <span>Path:</span>
+              <input placeholder="enter mqtt path" v-model="path" />
+            </span>
             <span class="field-row">
               <span>Use SSL:</span>
               <select class="optionField" v-model="useSSL">
@@ -31,6 +35,14 @@
                 </option>
               </select>
             </span>
+            <span class="field-row">
+              <span>Username:</span>
+              <input placeholder="enter mqtt username" v-model="username" />
+            </span>
+            <span class="field-row">
+              <span>Password:</span>
+              <input placeholder="enter mqtt password" v-model="password" type="password"/>
+            </span>
             <span class="field-row">
               <span>Main Topic:</span>
               <input placeholder="enter main mqtt topic" v-model="mainTopic" />
@@ -112,15 +124,18 @@
 
 <script setup lang="ts">
 import { ref, onMounted } from 'vue';
-import { MqttMode } from './pahoMqttPlugin/types/types';
+import { MqttMode } from '~/types/types';
 // @ts-ignore
 import introJs from 'intro.js/intro';
 import 'intro.js/introjs.css';
-import { $mqtt } from './pahoMqttPlugin';
+import { $mqtt } from '~/index';
 const host = ref<string>('');
 const port = ref<string>('0');
+const path = ref<string | undefined>(undefined);
 const useSSL = ref<boolean>(false);
 const clientId = ref<string>('');
+const username = ref<string>('');
+const password = ref<string>('');
 const mainTopic = ref<string>('');
 const sslOptions = ref([true, false]);
 const options = ref([
@@ -152,8 +167,11 @@ const subscribe = (topic: string, index: number) => {
 const updateAll = () => {
   $mqtt.host(host.value);
   $mqtt.port(parseInt(port.value));
+  $mqtt.path(path.value);
   $mqtt.useSSL(useSSL.value === true);
   $mqtt.clientId(clientId.value);
+  $mqtt.username(username.value);
+  $mqtt.password(password.value);
   $mqtt.mainTopic(mainTopic.value);
 };
 const unsubAll = () => {
@@ -172,7 +190,10 @@ onMounted(() => {
   startIntro();
   host.value = $mqtt.host();
   port.value = String($mqtt.port());
+  path.value = $mqtt.path() ?? '';
   useSSL.value = $mqtt.useSSL() ?? false;
+  username.value = $mqtt.username() ?? '';
+  password.value = $mqtt.password() ?? '';
   mainTopic.value = $mqtt.mainTopic() ?? '';
   clientId.value = $mqtt.clientId();
 });

src/main.ts

@@ -1,7 +1,7 @@
 import { createApp } from 'vue';
 import './style.css';
 import App from './App.vue';
-import { createPahoMqttPlugin } from './pahoMqttPlugin';
+import { createPahoMqttPlugin } from '~/index';
 
 createApp(App)
   .use(

src/pahoMqttPlugin/config/client.ts

@@ -14,6 +14,7 @@ export const createClient = (
   options: MqttOptions = {
     host: getMqttOptions().host,
     port: getMqttOptions().port,
+    path: getMqttOptions().path,
     clientId: getMqttOptions().clientId,
     username: getMqttOptions().username,
     password: getMqttOptions().password,

src/pahoMqttPlugin/config/constants.ts

@@ -35,6 +35,7 @@ export const defaultPluginOptions: PahoMqttPluginOptions = {
 export const defaultMqttOptions: MqttOptions = {
   host: 'localhost',
   port: 9001,
+  path: '/mqtt',
   username: '',
   password: '',
   useSSL: false,

src/pahoMqttPlugin/index.ts

@@ -2,16 +2,21 @@ import 'sweetalert2/dist/sweetalert2.min.css';
 import type { App } from 'vue';
 import { setMqttOptions, setPluginOptions } from './config/options';
 import { MainOptions } from './types/types';
-import { connectClient } from './utils/connectClient';
-import { disconnectClient } from './utils/disconnectClient';
-import { subscribe } from './utils/subscribe';
-import { unsubscribe } from './utils/unsubscribe';
-import { publish } from './utils/publish';
-import { unsubscribeAll } from './utils/unsubscribeAll';
+import {
+  connectClient,
+  disconnectClient,
+  subscribe,
+  unsubscribe,
+  publish,
+  unsubscribeAll
+} from '~/utils';
 import {
   host,
   port,
+  path,
   useSSL,
+  username,
+  password,
   clientId,
   mainTopic,
   status,
@@ -26,7 +31,10 @@ export const $mqtt = {
   publish,
   host,
   port,
+  path,
   useSSL,
+  username,
+  password,
   clientId,
   mainTopic,
   unsubscribe,

src/pahoMqttPlugin/types/types.ts

@@ -28,6 +28,7 @@ export type MsgHandler = Record<string, ((payload: string) => unknown)[]>;
 export interface MqttOptions {
   host: string;
   port: number;
+  path?: string;
   clientId: string;
   useSSL?: boolean;
   mainTopic?: string;

src/pahoMqttPlugin/utils/__tests__/auth.test.ts

@@ -1,15 +1,16 @@
-import { utilClientAuth } from '~/../setupTests';
+import {utilClientAuth} from '~/../setupTests';
 import { createClient } from '~/config/client';
 import { defaultMqttOptions } from '~/config/constants';
-import { getMqttOptions } from '~/config/options';
+import {getMqttOptions, setMqttOptions} from '~/config/options';
 import * as UTILS from '~/utils';
 
 describe.runIf(process.env.NODE_ENV === 'broker')('auth utils', () => {
   test('if status is set right before connection', () => {
     expect(UTILS.status()).toBe('disconnected');
   });
   describe('Client', () => {
-    createClient(utilClientAuth);
+    setMqttOptions(utilClientAuth);
+    createClient(getMqttOptions());
     test('if host set correctly', () => {
       expect(UTILS.host()).toBe(utilClientAuth.host);
     });

src/pahoMqttPlugin/utils/__tests__/secure.test.ts

@@ -2,13 +2,15 @@ import { utilClientWss } from '~/../setupTests';
 import { createClient } from '~/config/client';
 import { defaultMqttOptions } from '~/config/constants';
 import * as UTILS from '~/utils';
+import {getMqttOptions, setMqttOptions} from "~/config/options";
 
 describe.runIf(process.env.NODE_ENV === 'broker')('auth utils', () => {
   test('if status is set right before connection', () => {
     expect(UTILS.status()).toBe('disconnected');
   });
   describe('Client', () => {
-    createClient(utilClientWss);
+    setMqttOptions(utilClientWss);
+    createClient(getMqttOptions());
     test('if host set correctly', () => {
       expect(UTILS.host()).toBe(utilClientWss.host);
     });

src/pahoMqttPlugin/utils/__tests__/utils.test.ts

@@ -2,7 +2,7 @@ import { DoneCallback } from 'vitest';
 import { utilClient } from '~/../setupTests';
 import { createClient } from '~/config/client';
 import { MQTT_STATE, defaultMqttOptions } from '~/config/constants';
-import { getMqttOptions } from '~/config/options';
+import {getMqttOptions, setMqttOptions} from '~/config/options';
 import { MqttMode } from '~/types/types';
 import * as UTILS from '~/utils';
 
@@ -11,7 +11,8 @@ describe.runIf(process.env.NODE_ENV === 'broker')('utils', () => {
     expect(UTILS.status()).toBe('disconnected');
   });
   describe('Client', () => {
-    createClient(utilClient);
+    setMqttOptions(utilClient)
+    createClient(getMqttOptions());
     test('if host set correctly', () => {
       expect(UTILS.host()).toBe(utilClient.host);
     });
@@ -107,9 +108,10 @@ describe.runIf(process.env.NODE_ENV === 'broker')('utils', () => {
   });
 
   test('if all subscribed topics recieved the payload', () => {
-    if (unhandledTopicsList[0] !== 'testFnr')
+    if (unhandledTopicsList[0] !== 'testFnr') {
+      console.log(unhandledTopicsList);
       expect(unhandledTopicsList).toHaveLength(0);
-    else expect(unhandledTopicsList).toHaveLength(1);
+    } else expect(unhandledTopicsList).toHaveLength(1);
   });
   test('if disconnects from the broker and sets correct status', () => {
     expect(UTILS.disconnectClient()).resolves.toBe(true);