ESPIoTBase/src/html_confWeb.h

/* clang-format off */

//<script>
//  function g(i) { return document.getElementById(i) };
//  function sp(i){g(i).type=(g(i).type==='text'?'password':'text');}
//  var xhttp, reqTime, reqFin;
//  function setCbx(el, da) {
//    if(el !== null) {
//      if(da == '1') {
//        el.checked = true;
//        el.style.visibility = 'visible';
//      }
//      else {
//        el.checked = false;
//        el.style.visibility = 'visible';
//      }
//    }
//  }
//  function updCbxVal(el) {
//    if(el !== null) {
//      if (el.checked) el.value = '1';
//      else {
//        el.checked = true;
//      el.value = '0';
//        el.style.visibility = 'hidden';
//      }
//    }
//  }

static const char html_confweb_script[] PROGMEM = R"=====(
  function transmit(f) {
    if (!xhttp) {   
    reqTime = 0;
    reqFin = false;
    updCbxVal(g('httpAuth'));
    updCbxVal(g('wConsole'));
    updCbxVal(g('wsConsole'));
    updCbxVal(g('enableOTA'));
    updCbxVal(g('FSbrowser'));
    xhttp = new XMLHttpRequest();
    xhttp.timeout = 1000;
    xhttp.overrideMimeType('application/json');
    xhttp.open('POST', 'confDataWeb');
    xhttp.send(f ? (new FormData(f)) : '');
    xhttp.onreadystatechange = function () {
      if (xhttp.readyState === XMLHttpRequest.DONE && xhttp.status === 200) {
        var data = JSON.parse(xhttp.responseText);
        g('apiToken').value = data.apiToken;
        g('httpUA').value = data.httpUA;
        g('httpPA').value = data.httpPA;
        setCbx(g('httpAuth'), data.httpAuth);
        g('httpU1').value = data.httpU1;
        g('httpP1').value = data.httpP1;
        g('httpU2').value = data.httpU2;
        g('httpP2').value = data.httpP2;
        setCbx(g('wConsole'), data.wConsole);
        setCbx(g('wsConsole'), data.wsConsole);
        setCbx(g('enableOTA'), data.enableOTA);
        setCbx(g('FSbrowser'), data.FSbrowser);
        xhttp = null;
        reqFin = true;
       }
       else {
         if(!reqFin && reqTime > 10) {
           xhttp = null;
           reqFin = true;
         }
       }
     }
   }
    return false;
  }
  //transmit();
  function saveConf() {
    updCbxVal(g('httpAuth'));
    updCbxVal(g('wConsole'));
    updCbxVal(g('wsConsole'));
    updCbxVal(g('enableOTA'));
    updCbxVal(g('FSbrowser'));
    if(g('httpPASet').checked && g('httpPA').value != g('httpPAC').value) {
      alert("Admin password verification failed!");
    }
    else g('frmConf').submit();
  }
  function init() {
    transmit();
    setCbx(g('httpPASet'), 0);
    setCbx(g('httpP1Set'), 0);
    setCbx(g('httpP2Set'), 0);
    setCbx(g('apiTokenSet'), 0);
  }
)====="; // html_confweb_script
//  setInterval(function () { ++reqTime; }, 1000);
//</script>


static const char html_confweb_body[] PROGMEM = R"=====(
<p><b>Configuration - Web</b></p>
<div class='config'>
<form id='frmConf' action='setConfWeb' method='POST'>
<fieldset>
<legend>HTTP-API</legend>
<p><b>API Token</b><br><input type='text' name='apiToken' id='apiToken'></p>
</fieldset>
<br>
<fieldset>
<legend>Admin</legend>
<p><b>Set</b>&nbsp;<input type='checkbox' id='httpPASet' name='httpPASet'></p>
<p><b>Username *</b><br><input type='text' name='httpUA' id='httpUA'></p>
<p><b>Password *</b>&nbsp;<input type='checkbox' onclick='sp("httpPA")'>&nbsp;show<br><input type='password' name='httpPA' id='httpPA'></p>
<p><b>Confirm Password *</b><br><input type='password' name='httpPAC' id='httpPAC'></p>
<p class='n'>Admin Password can only be set but is not displayed for security reasons.</p>
</fieldset>
<br>
<fieldset>
<legend>Users</legend>
<p><b>Enable User-Authentication *</b>&nbsp;<input type='checkbox' name='httpAuth' id='httpAuth'></p>
<p class='n'>If User-Auth is off and Admin-PW is set, <br>
Web-Interface can only be accessed by Admin.<br>
Enable User-Auth and set User 1 with emtpy username and password to <br>
make usaccessible without Auth.</p>
<div></div>
<p><b>Set</b>&nbsp;<input type='checkbox' id='httpP1Set' name='httpP1Set'></p>
<p><b>User 1 *</b><br><input type='text' name='httpU1' id='httpU1'></p>
<p><b>User 1 Password *</b>&nbsp;<input type='checkbox' onclick='sp("httpP1")'>&nbsp;show<br><input type='password' name='httpP1' id='httpP1'></p>
<div></div>
<p><b>Set</b>&nbsp;<input type='checkbox' id='httpP2Set' name='httpP2Set'></p>
<p><b>User 2 *</b><br><input type='text' name='httpU2' id='httpU2'></p>
<p><b>User 2 Password *</b>&nbsp;<input type='checkbox' onclick='sp("httpP2")'>&nbsp;show<br><input type='password' name='httpP2' id='httpP2'></p>
</fieldset>
<br>
<fieldset>
<legend>Console</legend>
<p><b>Enable Web Console</b>&nbsp;<input type='checkbox' name='wConsole' id='wConsole'></p>
)====="; // html_confweb_body

#ifdef ENABLE_FEATURE_WSCONSOLE
static const char html_confweb_body_wsconsole[] PROGMEM = R"=====(
<p><b>Enable WebSockets Console</b>&nbsp;<input type='checkbox' name='wsConsole' id='wsConsole'></p>
)====="; // html_confweb_body_wsconsole
#endif



static const char html_confweb_body2[] PROGMEM = R"=====(
</fieldset>
<br>
<fieldset>
<legend>More Features</legend>
<p><b>OTA Update (ESP8266)</b>&nbsp;<input type='checkbox' name='enableOTA' id='enableOTA'></p>
<p class='n'>Enable ESP8266 OTA-Update in Web-Interface</p>
)====="; // html_confweb_body2

#ifdef ENABLE_FEATURE_FILESYSTEM_BROWSER
static const char html_confweb_body_fsbrowser[] PROGMEM = R"=====(
<br>
<p><b>Filesystem Browser</b>&nbsp;<input type='checkbox' name='FSbrowser' id='FSbrowser'/></p>
<p class='n'>Simple Browser for SPIFFS/LittleFS.</p>
</fieldset>
)====="; // html_confweb_body_fsbrowser
#endif

static const char html_confweb_body3[] PROGMEM = R"=====(
</form>
<div></div>
<table style='width:100%'>
<td style='width:50%'><button onclick='location="conf";' class='bgrey'>Cancel</button></td>
<td style='width:50%'><button onclick='return saveConf()' class='bred'>Save</button></td>
</tr></table>
<div></div>
</div>
)====="; // html_confweb_body3