Add mqtt settings options

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>