Add user custom header/footer functions (#1769)

* Added setCustomTopBodyElement allowing to define custom HTML to be added at the top of the "<body>" tag.

* Change custom top body element to 'header'

This will make more sense once a footer is added. No functional changes.

* Make custom header concat conditional

Matching the _bodyClass comparison above

* Create getHTTPEnd function

* Add custom body footer functionality

* Fix <small> close tag on update page

* Add missing HTTP ends to exit and close

* Remove 'immediately' from header/footer desc

It's not immediate, the 'wrap' div is added before/after.

---------

Co-authored-by: Andreas Breitschopp <a-breitschopp@ab-tools.com>

WiFiManager.cpp

@@ -1290,9 +1290,23 @@ String WiFiManager::getHTTPHead(String title, String classes){
   p.replace(FPSTR(T_c), classes);
   page += p;
 
+  if (_customBodyHeader) {
+    page += _customBodyHeader;
+  }
+
   return page;
 }
 
+String WiFiManager::getHTTPEnd() {
+  String end = FPSTR(HTTP_END);
+
+  if (_customBodyFooter) {
+    end = String(_customBodyFooter) + end;
+  }
+
+  return end;
+}
+
 void WiFiManager::HTTPSend(const String &content){
   server->send(200, FPSTR(HTTP_HEAD_CT), content);
 }
@@ -1341,7 +1355,7 @@ void WiFiManager::handleRoot() {
   page += FPSTR(HTTP_PORTAL_OPTIONS);
   page += getMenuOut();
   reportStatus(page);
-  page += FPSTR(HTTP_END);
+  page += getHTTPEnd();
 
   HTTPSend(page);
   if(_preloadwifiscan) WiFi_scanNetworks(_scancachetime,true); // preload wifiscan throttled, async
@@ -1397,7 +1411,7 @@ void WiFiManager::handleWifi(boolean scan) {
   page += FPSTR(HTTP_SCAN_LINK);
   if(_showBack) page += FPSTR(HTTP_BACKBTN);
   reportStatus(page);
-  page += FPSTR(HTTP_END);
+  page += getHTTPEnd();
 
   HTTPSend(page);
 
@@ -1426,7 +1440,7 @@ void WiFiManager::handleParam(){
   page += FPSTR(HTTP_FORM_END);
   if(_showBack) page += FPSTR(HTTP_BACKBTN);
   reportStatus(page);
-  page += FPSTR(HTTP_END);
+  page += getHTTPEnd();
 
   HTTPSend(page);
 
@@ -1888,7 +1902,7 @@ void WiFiManager::handleWifiSave() {
   }
 
   if(_showBack) page += FPSTR(HTTP_BACKBTN);
-  page += FPSTR(HTTP_END);
+  page += getHTTPEnd();
 
   server->sendHeader(FPSTR(HTTP_HEAD_CORS), FPSTR(HTTP_HEAD_CORS_ALLOW_ALL)); // @HTTPHEAD send cors
   HTTPSend(page);
@@ -1915,7 +1929,7 @@ void WiFiManager::handleParamSave() {
   String page = getHTTPHead(FPSTR(S_titleparamsaved), FPSTR(C_param)); // @token titleparamsaved
   page += FPSTR(HTTP_PARAMSAVED);
   if(_showBack) page += FPSTR(HTTP_BACKBTN); 
-  page += FPSTR(HTTP_END);
+  page += getHTTPEnd();
 
   HTTPSend(page);
 
@@ -2072,7 +2086,7 @@ void WiFiManager::handleInfo() {
   if(_showInfoErase) page += FPSTR(HTTP_ERASEBTN);
   if(_showBack) page += FPSTR(HTTP_BACKBTN);
   page += FPSTR(HTTP_HELP);
-  page += FPSTR(HTTP_END);
+  page += getHTTPEnd();
 
   HTTPSend(page);
 
@@ -2325,6 +2339,7 @@ void WiFiManager::handleExit() {
   handleRequest();
   String page = getHTTPHead(FPSTR(S_titleexit), FPSTR(C_exit)); // @token titleexit
   page += FPSTR(S_exiting); // @token exiting
+  page += getHTTPEnd();
   // ('Logout', 401, {'WWW-Authenticate': 'Basic realm="Login required"'})
   server->sendHeader(F("Cache-Control"), F("no-cache, no-store, must-revalidate")); // @HTTPHEAD send cache
   HTTPSend(page);
@@ -2342,7 +2357,7 @@ void WiFiManager::handleReset() {
   handleRequest();
   String page = getHTTPHead(FPSTR(S_titlereset), FPSTR(C_restart)); //@token titlereset
   page += FPSTR(S_resetting); //@token resetting
-  page += FPSTR(HTTP_END);
+  page += getHTTPEnd();
 
   HTTPSend(page);
 
@@ -2377,7 +2392,7 @@ void WiFiManager::handleErase(boolean opt) {
     #endif
   }
 
-  page += FPSTR(HTTP_END);
+  page += getHTTPEnd();
   HTTPSend(page);
 
   if(ret){
@@ -2472,6 +2487,7 @@ void WiFiManager::handleClose(){
   handleRequest();
   String page = getHTTPHead(FPSTR(S_titleclose), FPSTR(C_close)); // @token titleclose
   page += FPSTR(S_closing); // @token closing
+  page += getHTTPEnd();
   HTTPSend(page);
 }
 
@@ -2896,6 +2912,26 @@ void WiFiManager::setCustomHeadElement(const char* html) {
   _customHeadElement = html;
 }
 
+/**
+ * set custom html at the top of the body
+ * custom element will be added after the body tag is opened, eg. to show a logo etc.
+ * @access public
+ * @param char element
+ */
+void WiFiManager::setCustomBodyHeader(const char* html) {
+    _customBodyHeader = html;
+}
+
+/**
+ * set custom html at the bottom of the body
+ * custom element will be added before the body tag is closed
+ * @access public
+ * @param char element
+ */
+void WiFiManager::setCustomBodyFooter(const char* html) {
+    _customBodyFooter = html;
+}
+
 /**
  * set custom menu html
  * custom element will be added to menu under custom menu item.
@@ -3882,7 +3918,7 @@ void WiFiManager::handleUpdate() {
 	page += str;
 
 	page += FPSTR(HTTP_UPDATE);
-	page += FPSTR(HTTP_END);
+	page += getHTTPEnd();
 
 	HTTPSend(page);
 
@@ -4004,7 +4040,7 @@ void WiFiManager::handleUpdateDone() {
 		page += FPSTR(HTTP_UPDATE_SUCCESS);
 		DEBUG_WM(F("[OTA] update ok"));
 	}
-	page += FPSTR(HTTP_END);
+	page += getHTTPEnd();
 
 	HTTPSend(page);
 

WiFiManager.h

@@ -373,6 +373,12 @@ class WiFiManager
     //add custom html at inside <head> for all pages
     void          setCustomHeadElement(const char* html);
 
+    //add custom html at start of <body> for all pages
+    void          setCustomBodyHeader(const char* html);
+
+    //add custom html at end of <body> for all pages
+    void          setCustomBodyFooter(const char* html);
+
     //if this is set, customise style
     void          setCustomMenuHTML(const char* html);
 
@@ -595,8 +601,10 @@ class WiFiManager
     boolean       _disableConfigPortal    = true;  // FOR autoconnect - stop config portal if cp wifi save
     String        _hostname               = "";    // hostname for esp8266 for dhcp, and or MDNS
 
-    const char*   _customHeadElement      = ""; // store custom head element html from user isnide <head>
+    const char*   _customHeadElement      = ""; // store custom head element html from user inside <head>
-    const char*   _customMenuHTML         = ""; // store custom head element html from user inside <>
+    const char*   _customBodyHeader       = ""; // store custom top body element html from user inside <body>
+    const char*   _customBodyFooter       = ""; // store custom bottom body element html from user inside <body>
+    const char*   _customMenuHTML         = ""; // store custom menu html from user
     String        _bodyClass              = ""; // class to add to body
     String        _title                  = FPSTR(S_brand); // app title -  default WiFiManager
 
@@ -752,6 +760,7 @@ protected:
     String        getScanItemOut();
     String        getStaticOut();
     String        getHTTPHead(String title, String classes = "");
+    String        getHTTPEnd();
     String        getMenuOut();
     //helpers
     boolean       isIp(String str);

wm_strings_en.h

@@ -150,7 +150,7 @@ const char HTTP_HELP[]             PROGMEM =
 const char HTTP_HELP[]             PROGMEM = "";
 #endif
 
-const char HTTP_UPDATE[] PROGMEM = "Upload new firmware<br/><form method='POST' action='u' enctype='multipart/form-data' onchange=\"(function(el){document.getElementById('uploadbin').style.display = el.value=='' ? 'none' : 'initial';})(this)\"><input type='file' name='update' accept='.bin,application/octet-stream'><button id='uploadbin' type='submit' class='h D'>Update</button></form><small><a href='http://192.168.4.1/update' target='_blank'>* May not function inside captive portal, open in browser http://192.168.4.1</a><small>";
+const char HTTP_UPDATE[] PROGMEM = "Upload new firmware<br/><form method='POST' action='u' enctype='multipart/form-data' onchange=\"(function(el){document.getElementById('uploadbin').style.display = el.value=='' ? 'none' : 'initial';})(this)\"><input type='file' name='update' accept='.bin,application/octet-stream'><button id='uploadbin' type='submit' class='h D'>Update</button></form><small><a href='http://192.168.4.1/update' target='_blank'>* May not function inside captive portal, open in browser http://192.168.4.1</a></small>";
 const char HTTP_UPDATE_FAIL[] PROGMEM = "<div class='msg D'><strong>Update failed!</strong><Br/>Reboot device and try again</div>";
 const char HTTP_UPDATE_SUCCESS[] PROGMEM = "<div class='msg S'><strong>Update successful.  </strong> <br/> Device rebooting now...</div>";
 

wm_strings_es.h

@@ -157,7 +157,7 @@ const char HTTP_HELP[]             PROGMEM =
 const char HTTP_HELP[]             PROGMEM = "";
 #endif
 
-const char HTTP_UPDATE[] PROGMEM = "Upload New Firmware<br/><form method='POST' action='u' enctype='multipart/form-data' onchange=\"(function(el){document.getElementById('uploadbin').style.display = el.value=='' ? 'none' : 'initial';})(this)\"><input type='file' name='update' accept='.bin,application/octet-stream'><button id='uploadbin' type='submit' class='h D'>Update</button></form><small><a href='http://192.168.4.1/update' target='_blank'>* May not function inside captive portal, Open in browser http://192.168.4.1</a><small>";
+const char HTTP_UPDATE[] PROGMEM = "Upload New Firmware<br/><form method='POST' action='u' enctype='multipart/form-data' onchange=\"(function(el){document.getElementById('uploadbin').style.display = el.value=='' ? 'none' : 'initial';})(this)\"><input type='file' name='update' accept='.bin,application/octet-stream'><button id='uploadbin' type='submit' class='h D'>Update</button></form><small><a href='http://192.168.4.1/update' target='_blank'>* May not function inside captive portal, Open in browser http://192.168.4.1</a></small>";
 const char HTTP_UPDATE_FAIL[] PROGMEM = "<div class='msg D'><strong>Update Failed!</strong><Br/>Reboot device and try again</div>";
 const char HTTP_UPDATE_SUCCESS[] PROGMEM = "<div class='msg S'><strong>Update Successful.  </strong> <br/> Device Rebooting now...</div>";
 

wm_strings_fr.h

@@ -150,7 +150,7 @@ const char HTTP_HELP[]             PROGMEM =
 const char HTTP_HELP[]             PROGMEM = "";
 #endif
 
-const char HTTP_UPDATE[] PROGMEM = "Charger le nouveau firmware<br/><form method='POST' action='u' enctype='multipart/form-data' onchange=\"(function(el){document.getElementById('uploadbin').style.display = el.value=='' ? 'none' : 'initial';})(this)\"><input type='file' name='update' accept='.bin,application/octet-stream'><button id='uploadbin' type='submit' class='h D'>Mise à jour</button></form><small><a href='http://192.168.4.1/update' target='_blank'>* Peut ne pas fonctionner à l'intérieur du portail captif, ouvrir dans le navigateur http://192.168.4.1</a><small>";
+const char HTTP_UPDATE[] PROGMEM = "Charger le nouveau firmware<br/><form method='POST' action='u' enctype='multipart/form-data' onchange=\"(function(el){document.getElementById('uploadbin').style.display = el.value=='' ? 'none' : 'initial';})(this)\"><input type='file' name='update' accept='.bin,application/octet-stream'><button id='uploadbin' type='submit' class='h D'>Mise à jour</button></form><small><a href='http://192.168.4.1/update' target='_blank'>* Peut ne pas fonctionner à l'intérieur du portail captif, ouvrir dans le navigateur http://192.168.4.1</a></small>";
 const char HTTP_UPDATE_FAIL[] PROGMEM = "<div class='msg D'><strong>Echec de la mise à jour !</strong><Br/>Redémarrer l'appareil et réessayer</div>";
 const char HTTP_UPDATE_SUCCESS[] PROGMEM = "<div class='msg S'><strong>Mise à jour réussie. </strong> <br/> L'appareil redémarre maintenant...</div>";