1.6.1

#44 Adding define to reenable WS BasicAuth
#44 Adding Basic Auth
2025-07-03 09:40:19 +00:00 · 2018-12-27 11:37:50 +01:00 · 2018-12-27 11:34:28 +01:00 · 2018-12-26 13:38:38 +01:00 · 2018-12-26 12:35:35 +01:00 · 2018-12-02 14:22:43 +01:00
8 changed files with 298 additions and 179 deletions
--- a/examples/gui/data/js/controls.js
+++ b/examples/gui/data/js/controls.js
@ -1,3 +1,4 @@
+const UI_INITIAL_GUI = 100;
 const UI_TITEL = 0;

 const UI_LABEL = 1;
@ -112,26 +113,37 @@ function handleVisibilityChange() {
 function start() {
  document.addEventListener("visibilitychange", handleVisibilityChange, false);
  websock = new WebSocket("ws://" + window.location.hostname + "/ws");
-  websock.onopen = function(evt) {
+  websock.onopen = function (evt) {
    console.log("websock open");
    $("#conStatus").addClass("color-green");
    $("#conStatus").text("Connected");
    websockConnected = true;
  };
-  websock.onclose = function(evt) {
+
+  websock.onclose = function (evt) {
    console.log("websock close");
    conStatusError();
  };
-  websock.onerror = function(evt) {
+
+  websock.onerror = function (evt) {
    console.log(evt);
    conStatusError();
  };
-  websock.onmessage = function(evt) {
-    console.log(evt);
+
+  var handleEvent = function (evt) {
+    //console.log(evt);
    var data = JSON.parse(evt.data);
    var e = document.body;
    var center = "";
    switch (data.type) {
+      case UI_INITIAL_GUI:
+        data.controls.forEach(element => {
+          var fauxEvent = {
+            data: JSON.stringify(element)
+          };
+          handleEvent(fauxEvent);
+        });
+        break;
      case UI_TITEL:
        document.title = data.label;
        $("#mainHeader").html(data.label);
@ -139,42 +151,42 @@ function start() {
      case UI_LABEL:
        $("#row").append(
          "<div class='two columns card tcenter " +
-            colorClass(data.color) +
-            "'><h5 id='" +
-            data.id +
-            "'>" +
-            data.label +
-            "</h5><hr /><span id='l" +
-            data.id +
-            "' class='label label-wrap'>" +
-            data.value +
-            "</span></div>"
+          colorClass(data.color) +
+          "'><h5 id='" +
+          data.id +
+          "'>" +
+          data.label +
+          "</h5><hr /><span id='l" +
+          data.id +
+          "' class='label label-wrap'>" +
+          data.value +
+          "</span></div>"
        );
        break;
      case UI_BUTTON:
        $("#row").append(
          "<div class='one columns card tcenter " +
-            colorClass(data.color) +
-            "'><h5>" +
-            data.label +
-            "</h5><hr/><button onmousedown='buttonclick(" +
-            data.id +
-            ", true)' onmouseup='buttonclick(" +
-            data.id +
-            ", false)' id='" +
-            data.id +
-            "'>" +
-            data.value +
-            "</button></div>"
+          colorClass(data.color) +
+          "'><h5>" +
+          data.label +
+          "</h5><hr/><button onmousedown='buttonclick(" +
+          data.id +
+          ", true)' onmouseup='buttonclick(" +
+          data.id +
+          ", false)' id='" +
+          data.id +
+          "'>" +
+          data.value +
+          "</button></div>"
        );
        $("#" + data.id).on({
-          touchstart: function(e) {
+          touchstart: function (e) {
            e.preventDefault();
            buttonclick(data.id, true);
          }
        });
        $("#" + data.id).on({
-          touchend: function(e) {
+          touchend: function (e) {
            e.preventDefault();
            buttonclick(data.id, false);
          }
@ -199,16 +211,16 @@ function start() {
        }
        $("#row").append(
          "<div id='" +
-            data.id +
-            "' class='one columns card tcenter " +
-            colorClass(data.color) +
-            "'><h5>" +
-            data.label +
-            "</h5><hr/>" +
-            label +
-            input +
-            "</label>" +
-            "</div>"
+          data.id +
+          "' class='one columns card tcenter " +
+          colorClass(data.color) +
+          "'><h5>" +
+          data.label +
+          "</h5><hr/>" +
+          label +
+          input +
+          "</label>" +
+          "</div>"
        );
        break;
      case UI_CPAD:
@ -220,106 +232,106 @@ function start() {
          ", false)' href='#' id='pc" +
          data.id +
          "'>OK</a>";
-      //NO BREAK
+        //NO BREAK
      case UI_PAD:
        $("#row").append(
          "<div class='two columns card tcenter " +
-            colorClass(data.color) +
-            "'><h5>" +
-            data.label +
-            "</h5><hr/>" +
-            "<nav class='control'>" +
-            "<ul>" +
-            "<li><a onmousedown='padclick(FOR, " +
-            data.id +
-            ", true)' onmouseup='padclick(FOR, " +
-            data.id +
-            ", false)' href='#' id='pf" +
-            data.id +
-            "'>▲</a></li>" +
-            "<li><a onmousedown='padclick(RIGHT, " +
-            data.id +
-            ", true)' onmouseup='padclick(RIGHT, " +
-            data.id +
-            ", false)' href='#' id='pr" +
-            data.id +
-            "'>▲</a></li>" +
-            "<li><a onmousedown='padclick(LEFT, " +
-            data.id +
-            ", true)' onmouseup='padclick(LEFT, " +
-            data.id +
-            ", false)' href='#' id='pl" +
-            data.id +
-            "'>▲</a></li>" +
-            "<li><a onmousedown='padclick(BACK, " +
-            data.id +
-            ", true)' onmouseup='padclick(BACK, " +
-            data.id +
-            ", false)' href='#' id='pb" +
-            data.id +
-            "'>▲</a></li>" +
-            "</ul>" +
-            center +
-            "</nav>" +
-            "</div>"
+          colorClass(data.color) +
+          "'><h5>" +
+          data.label +
+          "</h5><hr/>" +
+          "<nav class='control'>" +
+          "<ul>" +
+          "<li><a onmousedown='padclick(FOR, " +
+          data.id +
+          ", true)' onmouseup='padclick(FOR, " +
+          data.id +
+          ", false)' href='#' id='pf" +
+          data.id +
+          "'>▲</a></li>" +
+          "<li><a onmousedown='padclick(RIGHT, " +
+          data.id +
+          ", true)' onmouseup='padclick(RIGHT, " +
+          data.id +
+          ", false)' href='#' id='pr" +
+          data.id +
+          "'>▲</a></li>" +
+          "<li><a onmousedown='padclick(LEFT, " +
+          data.id +
+          ", true)' onmouseup='padclick(LEFT, " +
+          data.id +
+          ", false)' href='#' id='pl" +
+          data.id +
+          "'>▲</a></li>" +
+          "<li><a onmousedown='padclick(BACK, " +
+          data.id +
+          ", true)' onmouseup='padclick(BACK, " +
+          data.id +
+          ", false)' href='#' id='pb" +
+          data.id +
+          "'>▲</a></li>" +
+          "</ul>" +
+          center +
+          "</nav>" +
+          "</div>"
        );

        $("#pf" + data.id).on({
-          touchstart: function(e) {
+          touchstart: function (e) {
            e.preventDefault();
            padclick(FOR, data.id, true);
          }
        });
        $("#pf" + data.id).on({
-          touchend: function(e) {
+          touchend: function (e) {
            e.preventDefault();
            padclick(FOR, data.id, false);
          }
        });
        $("#pl" + data.id).on({
-          touchstart: function(e) {
+          touchstart: function (e) {
            e.preventDefault();
            padclick(LEFT, data.id, true);
          }
        });
        $("#pl" + data.id).on({
-          touchend: function(e) {
+          touchend: function (e) {
            e.preventDefault();
            padclick(LEFT, data.id, false);
          }
        });
        $("#pr" + data.id).on({
-          touchstart: function(e) {
+          touchstart: function (e) {
            e.preventDefault();
            padclick(RIGHT, data.id, true);
          }
        });
        $("#pr" + data.id).on({
-          touchend: function(e) {
+          touchend: function (e) {
            e.preventDefault();
            padclick(RIGHT, data.id, false);
          }
        });
        $("#pb" + data.id).on({
-          touchstart: function(e) {
+          touchstart: function (e) {
            e.preventDefault();
            padclick(BACK, data.id, true);
          }
        });
        $("#pb" + data.id).on({
-          touchend: function(e) {
+          touchend: function (e) {
            e.preventDefault();
            padclick(BACK, data.id, false);
          }
        });
        $("#pc" + data.id).on({
-          touchstart: function(e) {
+          touchstart: function (e) {
            e.preventDefault();
            padclick(CENTER, data.id, true);
          }
        });
        $("#pc" + data.id).on({
-          touchend: function(e) {
+          touchend: function (e) {
            e.preventDefault();
            padclick(CENTER, data.id, false);
          }
@ -336,23 +348,23 @@ function start() {
      case UI_SLIDER:
        $("#row").append(
          "<div class='two columns card tcenter card-slider " +
-            colorClass(data.color) +
-            "'>" +
-            "<h5 id='" +
-            data.id +
-            "'>" +
-            data.label +
-            "</h5><hr />" +
-            "<div id='sl" +
-            data.id +
-            "' class='rkmd-slider slider-discrete slider-" +
-            colorClass(data.color) +
-            "'>" +
-            "<input type='range' min='0' max='100' value='" +
-            data.value +
-            "'>" +
-            "</div>" +
-            "</div>"
+          colorClass(data.color) +
+          "'>" +
+          "<h5 id='" +
+          data.id +
+          "'>" +
+          data.label +
+          "</h5><hr />" +
+          "<div id='sl" +
+          data.id +
+          "' class='rkmd-slider slider-discrete slider-" +
+          colorClass(data.color) +
+          "'>" +
+          "<input type='range' min='0' max='100' value='" +
+          data.value +
+          "'>" +
+          "</div>" +
+          "</div>"
        );
        $("#row").append(
          "<script>" + "rkmd_rangeSlider('#sl" + data.id + "');" + "</script>"
@ -366,21 +378,21 @@ function start() {
      case UI_NUMBER:
        $("#row").append(
          "<div class='two columns card tcenter " +
-            colorClass(data.color) +
-            "'>" +
-            "<h5 id='" +
-            data.id +
-            "'>" +
-            data.label +
-            "</h5><hr />" +
-            "<input style='color:black;' id='num" +
-            data.id +
-            "' type='number' value='" +
-            data.value +
-            "' onchange='numberchange(" +
-            data.id +
-            ")' />" +
-            "</div>"
+          colorClass(data.color) +
+          "'>" +
+          "<h5 id='" +
+          data.id +
+          "'>" +
+          data.label +
+          "</h5><hr />" +
+          "<input style='color:black;' id='num" +
+          data.id +
+          "' type='number' value='" +
+          data.value +
+          "' onchange='numberchange(" +
+          data.id +
+          ")' />" +
+          "</div>"
        );
        break;

@ -391,21 +403,21 @@ function start() {
      case UI_TEXT_INPUT:
        $("#row").append(
          "<div class='two columns card tcenter " +
-            colorClass(data.color) +
-            "'>" +
-            "<h5 id='" +
-            data.id +
-            "'>" +
-            data.label +
-            "</h5><hr />" +
-            "<input style='color:black;' id='text" +
-            data.id +
-            "' value='" +
-            data.value +
-            "' onchange='textchange(" +
-            data.id +
-            ")' />" +
-            "</div>"
+          colorClass(data.color) +
+          "'>" +
+          "<h5 id='" +
+          data.id +
+          "'>" +
+          data.label +
+          "</h5><hr />" +
+          "<input style='color:black;' id='text" +
+          data.id +
+          "' value='" +
+          data.value +
+          "' onchange='textchange(" +
+          data.id +
+          ")' />" +
+          "</div>"
        );
        break;

@ -418,6 +430,8 @@ function start() {
        break;
    }
  };
+
+  websock.onmessage = handleEvent;
 }

 function numberchange(number) {
@ -478,4 +492,4 @@ function switcher(number, state) {
    $("#sl" + number).removeClass("checked");
    $("#sl" + number).prop("checked", false);
  }
-}
+}
--- a/examples/gui/data/js/controls.min.js
+++ b/examples/gui/data/js/controls.min.js
@ -1,8 +1,8 @@
-const UI_TITEL=0;const UI_LABEL=1;const UPDATE_LABEL=6;const UI_BUTTON=2;const UI_SWITCHER=3;const UPDATE_SWITCHER=7;const UI_PAD=4;const UI_CPAD=5;const UI_SLIDER=8;const UPDATE_SLIDER=9;const UI_NUMBER=10;const UPDATE_NUMBER=11;const UI_TEXT_INPUT=12;const UPDATE_TEXT_INPUT=13;const UI_GRAPH=14;const CLEAR_GRAPH=15;const ADD_GRAPH_POINT=16;const FOR=0;const BACK=1;const LEFT=2;const RIGHT=3;const CENTER=4;const C_TURQUOISE=0;const C_EMERALD=1;const C_PETERRIVER=2;const C_WETASPHALT=3;const C_SUNFLOWER=4;const C_CARROT=5;const C_ALIZARIN=6;const C_NONE=7;function colorClass(colorId){colorId=Number(colorId);switch(colorId){case C_TURQUOISE:return"turquoise";break;case C_EMERALD:return"emerald";break;case C_PETERRIVER:return"peterriver";break;case C_WETASPHALT:return"wetasphalt";break;case C_SUNFLOWER:return"sunflower";break;case C_CARROT:return"carrot";break;case C_ALIZARIN:return"alizarin";break;case C_NONE:return"";break;default:return"";}}
+const UI_INITIAL_GUI=100;const UI_TITEL=0;const UI_LABEL=1;const UPDATE_LABEL=6;const UI_BUTTON=2;const UI_SWITCHER=3;const UPDATE_SWITCHER=7;const UI_PAD=4;const UI_CPAD=5;const UI_SLIDER=8;const UPDATE_SLIDER=9;const UI_NUMBER=10;const UPDATE_NUMBER=11;const UI_TEXT_INPUT=12;const UPDATE_TEXT_INPUT=13;const UI_GRAPH=14;const CLEAR_GRAPH=15;const ADD_GRAPH_POINT=16;const FOR=0;const BACK=1;const LEFT=2;const RIGHT=3;const CENTER=4;const C_TURQUOISE=0;const C_EMERALD=1;const C_PETERRIVER=2;const C_WETASPHALT=3;const C_SUNFLOWER=4;const C_CARROT=5;const C_ALIZARIN=6;const C_NONE=7;function colorClass(colorId){colorId=Number(colorId);switch(colorId){case C_TURQUOISE:return"turquoise";break;case C_EMERALD:return"emerald";break;case C_PETERRIVER:return"peterriver";break;case C_WETASPHALT:return"wetasphalt";break;case C_SUNFLOWER:return"sunflower";break;case C_CARROT:return"carrot";break;case C_ALIZARIN:return"alizarin";break;case C_NONE:return"";break;default:return"";}}
 var websock;var websockConnected=false;function restart(){$(document).add("*").off();$("#row").html("");websock.close();start();}
 function conStatusError(){websockConnected=false;$("#conStatus").removeClass("color-green");$("#conStatus").addClass("color-red");$("#conStatus").html("Error / No Connection &#8635;");$("#conStatus").off();$("#conStatus").on({click:restart});}
 function handleVisibilityChange(){if(!websockConnected&&!document.hidden){restart();}}
-function start(){document.addEventListener("visibilitychange",handleVisibilityChange,false);websock=new WebSocket("ws://"+window.location.hostname+"/ws");websock.onopen=function(evt){console.log("websock open");$("#conStatus").addClass("color-green");$("#conStatus").text("Connected");websockConnected=true;};websock.onclose=function(evt){console.log("websock close");conStatusError();};websock.onerror=function(evt){console.log(evt);conStatusError();};websock.onmessage=function(evt){console.log(evt);var data=JSON.parse(evt.data);var e=document.body;var center="";switch(data.type){case UI_TITEL:document.title=data.label;$("#mainHeader").html(data.label);break;case UI_LABEL:$("#row").append("<div class='two columns card tcenter "+
+function start(){document.addEventListener("visibilitychange",handleVisibilityChange,false);websock=new WebSocket("ws://"+window.location.hostname+"/ws");websock.onopen=function(evt){console.log("websock open");$("#conStatus").addClass("color-green");$("#conStatus").text("Connected");websockConnected=true;};websock.onclose=function(evt){console.log("websock close");conStatusError();};websock.onerror=function(evt){console.log(evt);conStatusError();};var handleEvent=function(evt){var data=JSON.parse(evt.data);var e=document.body;var center="";switch(data.type){case UI_INITIAL_GUI:data.controls.forEach(element=>{var fauxEvent={data:JSON.stringify(element)};handleEvent(fauxEvent);});break;case UI_TITEL:document.title=data.label;$("#mainHeader").html(data.label);break;case UI_LABEL:$("#row").append("<div class='two columns card tcenter "+
 colorClass(data.color)+
 "'><h5 id='"+
 data.id+
@ -134,7 +134,7 @@ data.value+
 "' onchange='textchange("+
 data.id+
 ")' />"+
-"</div>");break;case UPDATE_TEXT_INPUT:$("#text"+data.id).val(data.value);break;default:console.error("Unknown type or event");break;}};}
+"</div>");break;case UPDATE_TEXT_INPUT:$("#text"+data.id).val(data.value);break;default:console.error("Unknown type or event");break;}};websock.onmessage=handleEvent;}
 function numberchange(number){var val=$("#num"+number).val();websock.send("nvalue:"+val+":"+number);console.log(val);}
 function textchange(number){var val=$("#text"+number).val();websock.send("tvalue:"+val+":"+number);console.log(val);}
 function buttonclick(number,isdown){if(isdown)websock.send("bdown:"+number);else websock.send("bup:"+number);}
--- a/examples/gui/gui.ino
+++ b/examples/gui/gui.ino
@ -157,11 +157,19 @@ void setup(void) {

  /*
     .begin loads and serves all files from PROGMEM directly.
-     If you want to serve the files from SPIFFS use .beginSPIFFS
+     If you want to serve the files from SPIFFS use ESPUI.beginSPIFFS
     (.prepareFileSystem has to be run in an empty sketch before)
   */

  dnsServer.start(DNS_PORT, "*", apIP);
+
+  /*
+   * Optionally you can use HTTP BasicAuth. Keep in mind that this is NOT a
+   SECURE way of limiting access.
+   * Anyone who is able to sniff traffic will be able to intercept your password
+   since it is transmitted in cleartext ESPUI.begin("ESPUI Control", "myuser",
+   "mypassword");
+  */
  ESPUI.begin("ESPUI Control");
 }

--- a/library.json
+++ b/library.json
@ -6,16 +6,13 @@
    "type": "git",
    "url": "https://github.com/s00500/ESPUI.git"
  },
-  "authors": [
-    {
-      "name": "Lukas Bachschwell",
-      "email": "lukas@lbsfilm.at",
-      "url": "https://lbsfilm.at",
-      "maintainer": true
-    }
-  ],
-  "dependencies": [
-    {
+  "authors": [{
+    "name": "Lukas Bachschwell",
+    "email": "lukas@lbsfilm.at",
+    "url": "https://lbsfilm.at",
+    "maintainer": true
+  }],
+  "dependencies": [{
      "name": "ESP Async WebServer",
      "authors": "Hristo Gochkov",
      "frameworks": "arduino"
@ -26,7 +23,7 @@
      "frameworks": "arduino"
    }
  ],
-  "version": "1.6.0",
+  "version": "1.6.1",
  "frameworks": "arduino",
  "platforms": "*"
-}
+}
--- a/library.properties
+++ b/library.properties
@ -1,5 +1,5 @@
 name=ESPUI
-version=1.6.0
+version=1.6.1
 author=Lukas Bachschwell
 maintainer=Lukas Bachschwell <lukas@lbsfilm.at>
 sentence=ESP32 and ESP8266 Web Interface Library
--- a/src/ESPUI.cpp
+++ b/src/ESPUI.cpp
@ -492,6 +492,16 @@ void ESPUIClass::updateSlider(int id, int nValue, int clientId) {
  }
 }

+void ESPUIClass::updateSlider(String label, int nValue, int clientId) {
+  if (!labelExists(label)) {
+    if (DEBUG_ESPUI)
+      Serial.println("UI ERROR: Element does not " + String(label) +
+                     " exist, cannot update!");
+    return;
+  }
+  updateSlider(getIdByLabel(label), nValue, clientId);
+}
+
 void ESPUIClass::updateSwitcher(int id, bool nValue, int clientId) {
  if (id < cIndex && controls[id]->type == UI_SWITCHER) {
    controls[id]->value = nValue ? 1 : 0;
@ -603,28 +613,48 @@ bool ESPUIClass::labelExists(String label) {
  return false;
 }

-// Convert & Transfer Arduino elements to JSON elements
+/*
+Convert & Transfer Arduino elements to JSON elements
+Initially this function used to send the control element data individually.
+Due to a change in the ESPAsyncWebserver library this had top be changed to be
+sent as one blob at the beginning. Therefore a new type is used as well
+*/
 void ESPUIClass::jsonDom(AsyncWebSocketClient *client) {
+  String json;
+  DynamicJsonBuffer jsonBuffer(2000);
+  JsonObject &root = jsonBuffer.createObject();
+  root["type"] = UI_INITIAL_GUI;
+  JsonArray &items = jsonBuffer.createArray();
+
  for (int i = -1; i < cIndex; i++) {
-    String json;
-    StaticJsonBuffer<200> jsonBuffer;
-    JsonObject &root = jsonBuffer.createObject();
+    JsonObject &item = jsonBuffer.createObject();
+
    if (i == -1) {
-      root["type"] = UI_TITEL;
-      root["label"] = String(ui_title);
+      item["type"] = UI_TITEL;
+      item["label"] = String(ui_title);
    } else {
-      root["type"] = controls[i]->type;
-      root["label"] = String(controls[i]->label);
-      root["value"] = String(controls[i]->value);
-      root["color"] = String(controls[i]->color);
-      root["id"] = String(i);
+      item["type"] = controls[i]->type;
+      item["label"] = String(controls[i]->label);
+      item["value"] = String(controls[i]->value);
+      item["color"] = String(controls[i]->color);
+      item["id"] = String(i);
    }
-    root.printTo(json);
-    client->text(json);
+    items.add(item);
  }
+
+  // Send as one big bunch
+  root["controls"] = items;
+  root.printTo(json);
+  client->text(json);
 }

 void ESPUIClass::beginSPIFFS(const char *_title) {
+  begin(_title, NULL, NULL);
+  basicAuth = false;
+}
+
+void ESPUIClass::beginSPIFFS(const char *_title, const char *username,
+                             const char *password) {
  ui_title = _title;
  server = new AsyncWebServer(80);
  ws = new AsyncWebSocket("/ws");
@ -646,10 +676,29 @@ void ESPUIClass::beginSPIFFS(const char *_title) {

  ws->onEvent(onWsEvent);
  server->addHandler(ws);
-  server->serveStatic("/", SPIFFS, "/").setDefaultFile("index.htm");
+
+  if (basicAuth && username != NULL && password != NULL) {
+    basicAuthPassword = password;
+    basicAuthUsername = username;
+    basicAuth = true;
+    if (WS_AUTHENTICATION)
+      ws->setAuthentication(this->basicAuthUsername, this->basicAuthPassword);
+    server->serveStatic("/", SPIFFS, "/")
+        .setDefaultFile("index.htm")
+        .setAuthentication(ESPUI.basicAuthUsername, ESPUI.basicAuthPassword);
+
+  } else if (basicAuth) {
+    Serial.println(
+        "Could not enable BasicAuth: Username or password are not set");
+  } else {
+    server->serveStatic("/", SPIFFS, "/").setDefaultFile("index.htm");
+  }

  // Heap for general Servertest
  server->on("/heap", HTTP_GET, [](AsyncWebServerRequest *request) {
+    if (ESPUI.basicAuth && !request->authenticate(ESPUI.basicAuthUsername,
+                                                  ESPUI.basicAuthPassword))
+      return request->requestAuthentication();
    request->send(200, "text/plain",
                  String(ESP.getFreeHeap()) + " In SPIFFSmode");
  });
@ -657,26 +706,50 @@ void ESPUIClass::beginSPIFFS(const char *_title) {
  server->onNotFound(
      [](AsyncWebServerRequest *request) { request->send(404); });

-  server->on("/zepto.js", HTTP_GET, [](AsyncWebServerRequest *request) {
-    AsyncWebServerResponse *response = request->beginResponse_P(
-        200, "application/javascript", JS_ZEPTO_GZIP, sizeof(JS_ZEPTO_GZIP));
-    response->addHeader("Content-Encoding", "gzip");
-    request->send(response);
-  });
-
  server->begin();
  if (DEBUG_ESPUI) Serial.println("UI Initialized");
 }

 void ESPUIClass::begin(const char *_title) {
+  begin(_title, NULL, NULL);
+  basicAuth = false;
+}
+
+void ESPUIClass::begin(const char *_title, const char *username,
+                       const char *password) {
+  if (basicAuth && username != NULL && password != NULL) {
+    basicAuthPassword = password;
+    basicAuthUsername = username;
+    basicAuth = true;
+  } else if (basicAuth) {
+    Serial.println(
+        "Could not enable BasicAuth: Username or password are not set");
+  }
+
  ui_title = _title;
+
  server = new AsyncWebServer(80);
  ws = new AsyncWebSocket("/ws");

  ws->onEvent(onWsEvent);
  server->addHandler(ws);

+  if (basicAuth && username != NULL && password != NULL) {
+    basicAuthPassword = password;
+    basicAuthUsername = username;
+    basicAuth = true;
+    if (WS_AUTHENTICATION)
+      ws->setAuthentication(this->basicAuthUsername, this->basicAuthPassword);
+
+  } else if (basicAuth) {
+    Serial.println(
+        "Could not enable BasicAuth: Username or password are not set");
+  }
+
  server->on("/", HTTP_GET, [](AsyncWebServerRequest *request) {
+    if (ESPUI.basicAuth && !request->authenticate(ESPUI.basicAuthUsername,
+                                                  ESPUI.basicAuthPassword))
+      return request->requestAuthentication();
    AsyncWebServerResponse *response =
        request->beginResponse_P(200, "text/html", HTML_INDEX);
    request->send(response);
@ -685,6 +758,9 @@ void ESPUIClass::begin(const char *_title) {
  // Javascript files

  server->on("/js/zepto.min.js", HTTP_GET, [](AsyncWebServerRequest *request) {
+    if (ESPUI.basicAuth && !request->authenticate(ESPUI.basicAuthUsername,
+                                                  ESPUI.basicAuthPassword))
+      return request->requestAuthentication();
    AsyncWebServerResponse *response = request->beginResponse_P(
        200, "application/javascript", JS_ZEPTO_GZIP, sizeof(JS_ZEPTO_GZIP));
    response->addHeader("Content-Encoding", "gzip");
@ -692,6 +768,9 @@ void ESPUIClass::begin(const char *_title) {
  });

  server->on("/js/controls.js", HTTP_GET, [](AsyncWebServerRequest *request) {
+    if (ESPUI.basicAuth && !request->authenticate(ESPUI.basicAuthUsername,
+                                                  ESPUI.basicAuthPassword))
+      return request->requestAuthentication();
    AsyncWebServerResponse *response =
        request->beginResponse_P(200, "application/javascript",
                                 JS_CONTROLS_GZIP, sizeof(JS_CONTROLS_GZIP));
@ -700,6 +779,9 @@ void ESPUIClass::begin(const char *_title) {
  });

  server->on("/js/slider.js", HTTP_GET, [](AsyncWebServerRequest *request) {
+    if (ESPUI.basicAuth && !request->authenticate(ESPUI.basicAuthUsername,
+                                                  ESPUI.basicAuthPassword))
+      return request->requestAuthentication();
    AsyncWebServerResponse *response = request->beginResponse_P(
        200, "application/javascript", JS_SLIDER_GZIP, sizeof(JS_SLIDER_GZIP));
    response->addHeader("Content-Encoding", "gzip");
@ -709,6 +791,9 @@ void ESPUIClass::begin(const char *_title) {
  // Stylesheets

  server->on("/css/style.css", HTTP_GET, [](AsyncWebServerRequest *request) {
+    if (ESPUI.basicAuth && !request->authenticate(ESPUI.basicAuthUsername,
+                                                  ESPUI.basicAuthPassword))
+      return request->requestAuthentication();
    AsyncWebServerResponse *response = request->beginResponse_P(
        200, "text/css", CSS_STYLE_GZIP, sizeof(CSS_STYLE_GZIP));
    response->addHeader("Content-Encoding", "gzip");
@ -717,6 +802,9 @@ void ESPUIClass::begin(const char *_title) {

  server->on(
      "/css/normalize.css", HTTP_GET, [](AsyncWebServerRequest *request) {
+        if (ESPUI.basicAuth && !request->authenticate(ESPUI.basicAuthUsername,
+                                                      ESPUI.basicAuthPassword))
+          return request->requestAuthentication();
        AsyncWebServerResponse *response = request->beginResponse_P(
            200, "text/css", CSS_NORMALIZE_GZIP, sizeof(CSS_NORMALIZE_GZIP));
        response->addHeader("Content-Encoding", "gzip");
@ -725,6 +813,9 @@ void ESPUIClass::begin(const char *_title) {

  // Heap for general Servertest
  server->on("/heap", HTTP_GET, [](AsyncWebServerRequest *request) {
+    if (ESPUI.basicAuth && !request->authenticate(ESPUI.basicAuthUsername,
+                                                  ESPUI.basicAuthPassword))
+      return request->requestAuthentication();
    request->send(200, "text/plain",
                  String(ESP.getFreeHeap()) + " In Memorymode");
  });
--- a/src/ESPUI.h
+++ b/src/ESPUI.h
@ -2,6 +2,7 @@
 #define ESPUI_h

 #define DEBUG_ESPUI true
+#define WS_AUTHENTICATION false

 #include "Arduino.h"
 #include "ArduinoJson.h"
@ -40,6 +41,7 @@ typedef struct Control {
 } Control;

 // Message Types (and control types)
+#define UI_INITIAL_GUI 100
 #define UI_TITEL 0

 #define UI_LABEL 1
@ -100,8 +102,12 @@ typedef struct Control {

 class ESPUIClass {
 public:
-  void begin(const char *_title);        // Setup servers and page in Memorymode
+  void begin(const char *_title);  // Setup servers and page in Memorymode
+  void begin(const char *_title, const char *username, const char *password);
+
  void beginSPIFFS(const char *_title);  // Setup servers and page in SPIFFSmode
+  void beginSPIFFS(const char *_title, const char *username,
+                   const char *password);

  void prepareFileSystem();  // Initially preps the filesystem and loads a lot
                             // of stuff into SPIFFS
@ -159,6 +165,9 @@ class ESPUIClass {
  bool labelExists(String label);

 private:
+  const char *basicAuthUsername;
+  const char *basicAuthPassword;
+  bool basicAuth = true;
  AsyncWebServer *server;
  AsyncWebSocket *ws;
 };
--- a/src/dataControlsJS.h
+++ b/src/dataControlsJS.h
Author	SHA1	Message	Date
Lukas Bachschwell	b21c5d3b2c	1.6.1	2018-12-27 11:37:50 +01:00
Lukas Bachschwell	98d1215d7a	#44 Adding define to reenable WS BasicAuth	2018-12-27 11:34:28 +01:00
Lukas Bachschwell	7a10457f99	#44 Adding Basic Auth - Also authing websockets - Implemented on begin and beginSpiffs - Added notes to Gui example	2018-12-26 13:38:38 +01:00
Lukas Bachschwell	f31575b50c	#43 Sending Initial GUI as one big array - Added new INITIAL_GUI Type - spliting GUI Blob to events in controls js - formating the json in jsonDom into one big array	2018-12-26 12:35:35 +01:00
Lukas Bachschwell	980e20818f	Merge pull request #42 from don41382/patch-2 udpateSlider implementation with label was missing	2018-12-02 14:22:43 +01:00
Felix Eckhardt	e9aca78c9c	udpateSlider implementation with label was missing	2018-12-02 11:41:45 +01:00