From ff27a76794b33d591fad8b21c6d2170048f411c5 Mon Sep 17 00:00:00 2001
From: David Baetge <david.baetge@gmail.com>
Date: Tue, 21 Nov 2023 23:46:17 +0100
Subject: [PATCH] Added MQTT connection with username/password. Fixes GH-225

---
 changelog.md                           | 1 +
 skins/weewx-wdc/index.html.tmpl        | 2 ++
 skins/weewx-wdc/skin.conf              | 2 ++
 skins/weewx-wdc/src/js/live-updates.ts | 4 ++++
 4 files changed, 9 insertions(+)

diff --git a/changelog.md b/changelog.md
index baaa9cfd..11accd4b 100644
--- a/changelog.md
+++ b/changelog.md
@@ -752,3 +752,4 @@ See https://github.com/Daveiano/weewx-wdc/compare/v3.3.0...580071ca175a03fe4924b
 - Bugfixed Added missing `nl.conf` in `install.py` GH-221
 - Bugfix: Fixed Gauge tiles daily reset (via MQTT)
 - Bugfix: Max Rain Rate Does Not Reset GH-224
+- Added MQTT connection with username/password GH-225
diff --git a/skins/weewx-wdc/index.html.tmpl b/skins/weewx-wdc/index.html.tmpl
index eb788c8e..1952c7df 100644
--- a/skins/weewx-wdc/index.html.tmpl
+++ b/skins/weewx-wdc/index.html.tmpl
@@ -79,6 +79,8 @@
       var mqtt_port = "$Extras['mqtt']['mqtt_websockets_port']";
       var mqtt_topic = "$Extras['mqtt']['mqtt_websockets_topic']";
       var mqtt_ssl = "$Extras['mqtt']['mqtt_websockets_ssl']";
+      var mqtt_username = "$Extras['mqtt']['mqtt_websockets_username']";
+      var mqtt_password = "$Extras['mqtt']['mqtt_websockets_password']";
     </script>
     <script src="$get_base_path(path='dist/live-updates.js')" defer></script>
     #end if
diff --git a/skins/weewx-wdc/skin.conf b/skins/weewx-wdc/skin.conf
index 465d4ade..5e1b994c 100644
--- a/skins/weewx-wdc/skin.conf
+++ b/skins/weewx-wdc/skin.conf
@@ -44,6 +44,8 @@ SKIN_VERSION = 3.4.0
         mqtt_websockets_port = 9001
         mqtt_websockets_ssl = 0
         mqtt_websockets_topic = "weather/loop"
+        mqtt_websockets_username = ""
+        mqtt_websockets_password = ""
 
     # For instructions, see https://github.com/Daveiano/weewx-wdc/wiki/Webcams-and-Externals-Page
     # Include various external sources (eg. webcams) here.
diff --git a/skins/weewx-wdc/src/js/live-updates.ts b/skins/weewx-wdc/src/js/live-updates.ts
index 8793f6cb..8686387b 100644
--- a/skins/weewx-wdc/src/js/live-updates.ts
+++ b/skins/weewx-wdc/src/js/live-updates.ts
@@ -14,6 +14,8 @@ const mqtt_host: string = (window as any).mqtt_host;
 const mqtt_port: string = (window as any).mqtt_port;
 const mqtt_topic: string = (window as any).mqtt_topic;
 const mqtt_ssl: string = (window as any).mqtt_ssl;
+const mqtt_username: string = (window as any).mqtt_username;
+const mqtt_password: string = (window as any).mqtt_password;
 
 const websiteMessageContainer = document.getElementById(
   "notification-container-mqtt"
@@ -640,4 +642,6 @@ client.connect({
   onFailure: onFailure,
   useSSL: mqtt_ssl === "1",
   reconnect: true,
+  userName: mqtt_username && mqtt_username !== "" ? mqtt_username : undefined,
+  password: mqtt_password && mqtt_password !== "" ? mqtt_password : undefined,
 });