new action resetMQTT, called from MQTT Settings page

interface/src/app/settings/MqttSettings.tsx

@@ -1,8 +1,11 @@
 import { useCallback, useMemo, useState } from 'react';
+import { toast } from 'react-toastify';
 
 import CancelIcon from '@mui/icons-material/Cancel';
+import SettingsBackupRestoreIcon from '@mui/icons-material/SettingsBackupRestore';
 import WarningIcon from '@mui/icons-material/Warning';
 import {
+  Box,
   Button,
   Checkbox,
   Grid,
@@ -30,6 +33,8 @@ import type { MqttSettingsType } from 'types';
 import { numberValue, updateValueDirty, useRest } from 'utils';
 import { createMqttSettingsValidator, validate } from 'validators';
 
+import { callAction } from '../../api/app';
+
 const MqttSettings = () => {
   const {
     loadData,
@@ -52,6 +57,16 @@ const MqttSettings = () => {
 
   const [fieldErrors, setFieldErrors] = useState<ValidateFieldsError>();
 
+  const sendResetMQTT = useCallback(() => {
+    void callAction({ action: 'resetMQTT' })
+      .then(() => {
+        toast.success('MQTT ' + LL.REFRESH() + ' successful');
+      })
+      .catch((error) => {
+        toast.error(String(error.error?.message || 'An error occurred'));
+      });
+  }, []);
+
   const updateFormValue = useMemo(
     () =>
       updateValueDirty(
@@ -114,16 +129,28 @@ const MqttSettings = () => {
     <SectionContent>
       {blocker ? <BlockNavigation blocker={blocker} /> : null}
       <>
-        <BlockFormControlLabel
+        <Box display="flex" gap={2} mb={1}>
-          control={
+          <BlockFormControlLabel
-            <Checkbox
+            control={
-              name="enabled"
+              <Checkbox
-              checked={data.enabled}
+                name="enabled"
-              onChange={updateFormValue}
+                checked={data.enabled}
-            />
+                onChange={updateFormValue}
-          }
+              />
-          label={LL.ENABLE_MQTT()}
+            }
-        />
+            label={LL.ENABLE_MQTT()}
+          />
+          {data.enabled && (
+            <Button
+              startIcon={<SettingsBackupRestoreIcon />}
+              color="secondary"
+              variant="outlined"
+              onClick={sendResetMQTT}
+            >
+              {LL.REFRESH() + ' MQTT'}
+            </Button>
+          )}
+        </Box>
         <Grid container spacing={2} rowSpacing={0}>
           <Grid>
             <ValidatedTextField

mock-api/restServer.ts

@@ -5106,6 +5106,10 @@ router
         // upload URL
         console.log('upload File from URL', content.param);
         return status(200);
+      } else if (action === 'resetMQTT') {
+        // reset MQTT
+        console.log('resetting MQTT...');
+        return status(200);
       }
     }
     return status(404); // cmd not found

src/core/mqtt.cpp

@@ -321,8 +321,12 @@ void Mqtt::on_publish(uint16_t packetId) const {
     LOG_DEBUG("Packet %d sent successful", packetId);
 }
 
-// called when MQTT settings have changed via the Web forms
+// called when MQTT settings have changed via the MQTT Settings or Application Settings Web pages
 void Mqtt::reset_mqtt() {
+    if (!enabled()) {
+        return;
+    }
+
     if (!mqttClient_) {
         return;
     }

src/web/WebStatusService.cpp

@@ -195,6 +195,9 @@ void WebStatusService::action(AsyncWebServerRequest * request, JsonVariant json)
         ok = uploadURL(param.c_str());
     } else if (action == "systemStatus" && is_admin) {
         ok = setSystemStatus(param.c_str());
+    } else if (action == "resetMQTT" && is_admin) {
+        emsesp::EMSESP::mqtt_.reset_mqtt();
+        ok = true;
     }
 
 #if defined(EMSESP_STANDALONE) && !defined(EMSESP_UNITY)