Add mqtt settings options

package.json

@@ -15,7 +15,7 @@
     "@floating-ui/react-dom": "^0.4.3",
     "@headlessui/react": "^1.4.2",
     "@meshtastic/components": "^1.0.15",
-    "@meshtastic/meshtasticjs": "^0.6.37",
+    "@meshtastic/meshtasticjs": "^0.6.38",
     "@reduxjs/toolkit": "^1.7.1",
     "base64-js": "^1.5.1",
     "boring-avatars": "^1.6.1",

pnpm-lock.yaml

@@ -4,7 +4,7 @@ specifiers:
   '@floating-ui/react-dom': ^0.4.3
   '@headlessui/react': ^1.4.2
   '@meshtastic/components': ^1.0.15
-  '@meshtastic/meshtasticjs': ^0.6.37
+  '@meshtastic/meshtasticjs': ^0.6.38
   '@reduxjs/toolkit': ^1.7.1
   '@types/mapbox-gl': ^2.6.0
   '@types/react': ^17.0.38
@@ -63,7 +63,7 @@ dependencies:
   '@floating-ui/react-dom': 0.4.3_b3482aaf5744fc7c2aeb7941b0e0a78f
   '@headlessui/react': 1.4.2_react-dom@17.0.2+react@17.0.2
   '@meshtastic/components': 1.0.15_@types+react@17.0.38
-  '@meshtastic/meshtasticjs': 0.6.37
+  '@meshtastic/meshtasticjs': 0.6.38
   '@reduxjs/toolkit': 1.7.1_react-redux@7.2.6+react@17.0.2
   base64-js: 1.5.1
   boring-avatars: 1.6.1
@@ -1537,8 +1537,8 @@ packages:
       - '@types/react'
     dev: false
 
-  /@meshtastic/meshtasticjs/0.6.37:
-    resolution: {integrity: sha512-HXl8/eTvZAW9b4MfNxoZa2/qrKP4Y2RlyPP8jQOO+FHy5u/BLuMwAEbA69YqsOZMF9SK5/xNwHlrBnMXwWKHDA==}
+  /@meshtastic/meshtasticjs/0.6.38:
+    resolution: {integrity: sha512-oNx3zCaxGKQ1RoPvXPveNmtsIbKQKjSxX46yCRPfvvlFcA7SLiEWhhJFePNt+U2lYBeGL4J56g9L7fGp2zJQLw==}
     dependencies:
       '@protobuf-ts/runtime': 2.2.1
       sub-events: 1.8.9

src/pages/settings/Index.tsx

@@ -75,8 +75,8 @@ export const Settings = (): JSX.Element => {
     if (hasWifi) {
       panels.unshift(<WiFi key={2} />);
       sidebarItems.unshift({
-        title: 'WiFi',
-        description: 'WiFi credentials and mode',
+        title: 'WiFi & MQTT',
+        description: 'WiFi & MQTT settings',
         icon: <FiWifi className="flex-shrink-0 w-6 h-6" />,
       });
     }

src/pages/settings/WiFi.tsx

@@ -36,6 +36,12 @@ export const WiFi = ({ navOpen, setNavOpen }: WiFiProps): JSX.Element => {
     defaultValue: false,
   });
 
+  const watchMQTTDisabled = useWatch({
+    control,
+    name: 'mqttDisabled',
+    defaultValue: false,
+  });
+
   React.useEffect(() => {
     reset(preferences);
   }, [reset, preferences]);
@@ -49,7 +55,7 @@ export const WiFi = ({ navOpen, setNavOpen }: WiFiProps): JSX.Element => {
   });
   return (
     <PrimaryTemplate
-      title="WiFi"
+      title="WiFi & MQTT"
       tagline="Settings"
       leftButton={
         <IconButton
@@ -93,6 +99,24 @@ export const WiFi = ({ navOpen, setNavOpen }: WiFiProps): JSX.Element => {
               disabled={watchWifiApMode}
               {...register('wifiPassword')}
             />
+            <Checkbox label="Disable MQTT" {...register('mqttDisabled')} />
+            <Input
+              label="MQTT Server Address"
+              disabled={watchMQTTDisabled}
+              {...register('mqttServer')}
+            />
+            <Input
+              label="MQTT Username"
+              disabled={watchMQTTDisabled}
+              {...register('mqttUsername')}
+            />
+            <Input
+              label="MQTT Password"
+              type="password"
+              autoComplete="off"
+              disabled={watchMQTTDisabled}
+              {...register('mqttPassword')}
+            />
           </form>
         </div>
       </Card>