update frontent to include inputs for mqtt auth

rust/src/config.rs

@@ -11,6 +11,8 @@ pub struct NetworkConfig {
     pub password: Option<heapless::String<64>>,
     pub mqtt_url: Option<heapless::String<128>>,
     pub base_topic: Option<heapless::String<64>>,
+    pub mqtt_user: Option<heapless::String<32>>,
+    pub mqtt_password: Option<heapless::String<64>>,
     pub max_wait: u32,
 }
 impl Default for NetworkConfig {
@@ -21,6 +23,8 @@ impl Default for NetworkConfig {
             password: None,
             mqtt_url: None,
             base_topic: None,
+            mqtt_user: None,
+            mqtt_password: None,
             max_wait: 10000,
         }
     }

rust/src/hal/esp.rs

@@ -419,6 +419,8 @@ impl Esp<'_> {
             }),
             client_id: Some("plantctrl"),
             keep_alive_interval: Some(Duration::from_secs(60 * 60 * 2)),
+            username: network_config.mqtt_user.as_ref().map(|v| &**v),
+            password: network_config.mqtt_password.as_ref().map(|v| &**v),
             //room for improvement
             ..Default::default()
         };

rust/src_webpack/src/api.ts

@@ -29,6 +29,8 @@ export interface NetworkConfig {
     password: string,
     mqtt_url: string,
     base_topic: string,
+    mqtt_user: string | null,
+    mqtt_password: string | null,
     max_wait: number
 }
 

rust/src_webpack/src/network.html

@@ -72,8 +72,20 @@
                 </div>
                 <input class="mqttvalue" type="text" id="base_topic" placeholder="plants/one">        
             </div>
+            <div class="flexcontainer">
+                <div class="mqttkey">
+                    MQTT User
+                </div>
+                <input class="mqttvalue" type="text" id="mqtt_user" placeholder="">
+            </div>
+            <div class="flexcontainer">
+                <div class="mqttkey">
+                    MQTT Password
+                </div>
+                <input class="mqttvalue" type="text" id="mqtt_password" placeholder="">
+            </div>
         </div>
     </div>
     
 
-</div>
+</div>

rust/src_webpack/src/network.ts

@@ -16,6 +16,8 @@ export class NetworkConfigView {
     private readonly mqtt_url: HTMLInputElement;
     private readonly base_topic: HTMLInputElement;
     private readonly max_wait: HTMLInputElement;
+    private readonly mqtt_user: HTMLInputElement;
+    private readonly mqtt_password: HTMLInputElement;
     private readonly ssidlist: HTMLElement;
     
     constructor(controller: Controller, publicIp: string) {
@@ -37,6 +39,10 @@ export class NetworkConfigView {
       this.mqtt_url.onchange = controller.configChanged
       this.base_topic = document.getElementById("base_topic") as HTMLInputElement;
       this.base_topic.onchange = controller.configChanged
+      this.mqtt_user = document.getElementById("mqtt_user") as HTMLInputElement;
+      this.mqtt_user.onchange = controller.configChanged
+      this.mqtt_password = document.getElementById("mqtt_password") as HTMLInputElement;
+      this.mqtt_password.onchange = controller.configChanged
 
       this.ssidlist = document.getElementById("ssidlist") as HTMLElement
 
@@ -52,6 +58,8 @@ export class NetworkConfigView {
       this.password.value = network.password;
       this.mqtt_url.value = network.mqtt_url;
       this.base_topic.value = network.base_topic;
+      this.mqtt_user.value = network.mqtt_user ?? "";
+      this.mqtt_password.value = network.mqtt_password ?? "";
       this.max_wait.value = network.max_wait.toString();
     }
     
@@ -62,7 +70,9 @@ export class NetworkConfigView {
         ssid: this.ssid.value ?? null,
         password: this.password.value ?? null,
         mqtt_url: this.mqtt_url.value ?? null,
+        mqtt_user: this.mqtt_user.value ? this.mqtt_user.value : null,
+        mqtt_password: this.mqtt_password.value ? this.mqtt_password.value : null,
         base_topic: this.base_topic.value ?? null
       }
     }
-  }
+  }