JSON config bug fix for pwd

Author: abratchik

README.md

@@ -57,7 +57,7 @@ the first steam will freeze.
 ### Wiring for AI-THINKER Boards (and similar clone-alikes)
 
 Is pretty simple, You just need jumper wires, no soldering really required, see the diagram below.
-![Hoockup](https://github.com/abratchik/esp32-cam-webserver/blob/master/assets/hookup.png)
+![Hoockup](assets/hookup.png)
 
 * Connect the **RX** line from the serisal adapter to the **TX** pin on ESP32
 * The adapters **TX** line goes to the ESP32 **RX** pin
@@ -83,7 +83,7 @@ can be either a micro SD flash memory card or the built-in flash memory with Lit
 #### Using micro SD flash memory card
 You will need a blank SD card, which must be formatted as FAT32. Insert it into the micro SD slot of your computer and copy all the files from the **data** folder. The structure of files on the SD card should be 
 like this: 
-![Data Folder](https://github.com/abratchik/esp32-cam-webserver/blob/master/assets/data-folder.png)
+![Data Folder](assets/data-folder.png)
 
 After that, insert the card in the slot of your ESP32CAM board and restart it. The Server should start normally.
 
@@ -127,12 +127,12 @@ Connected
 
 Connected to the access point and open the url http://192.168.4.1/. You should see the following page: 
 <div align="center">
-<img src="https://github.com/abratchik/esp32-cam-webserver/blob/master/assets/wifi-setup-ap.png" width="250">
+<img src="assets/wifi-setup-ap.png" width="350">
 </div>
 
 Switch the Access Point Mode off. The screen will change as follows: 
 <div align="center">
-<img src="https://github.com/abratchik/esp32-cam-webserver/blob/master/assets/wifi-setup.png" width="250">
+<img src="assets/wifi-setup.png" width="350">
 </div>
 
 Specify SSID and Password for your WiFi setup. This board supports only 2.4 GHz band so you will need to ensure you wifi router has this band enabled.
@@ -147,7 +147,7 @@ and connect to your wifi automatically. The assigned IP address can be seen in t
 Open the browser and navigate to http://<YOUR_IP_ADDRESS:YOUR_PORT>/ (for example, http://192.168.0.2:8080)
 
 You should see the following screen: 
-![Index](https://github.com/abratchik/esp32-cam-webserver/blob/master/assets/index.png). 
+![Index](assets/index.png). 
 
 Here you can take still images or start the video streaming from the camera installed on ESP32CAM.
 
@@ -246,9 +246,9 @@ The parameter `mapping` allows to configure folders with static content for the
 
 Assuming you are using the latest Espressif Arduino core the `ESP32 Dev Module` board 
 will appear in the ESP32 Arduino section of the boards list. Select this (do not use 
-the `AI-THINKER` entry listed in the boiards menu, it is not OTA compatible, and will 
+the `AI-THINKER` entry listed in the boards menu, it is not OTA compatible, and will 
 cause the module to crash and reboot rather than updating if you use it.
-![IDE board config](https://github.com/abratchik/esp32-cam-webserver/blob/master/assets/ota-board-selection.png)
+![IDE board config](assets/ota-board-selection.png)
 
 Make sure you select the `Minimal SPIFFS (1.9MB APP with OTA/190KB SPIFFS)` partition 
 scheme and turn `PSRAM` on.

data/default_httpd.json

@@ -3,8 +3,7 @@
     "autolamp":true,
     "flashlamp":100,
     "pwm": [{"pin":4, "frequency":50000, "resolution":9}],
-    "mapping":[ {"uri":"/dump", "path": "/www/dump.html"},
-                {"uri":"/img", "path": "/www/img"},
+    "mapping":[ {"uri":"/img", "path": "/www/img"},
                 {"uri":"/css", "path": "/www/css"},
                 {"uri":"/js", "path": "/www/js"}],
     "debug_mode": false

data/www/js/utils.js

@@ -211,6 +211,10 @@ const addTextInput = (parent, field) => {
       input.setAttribute("placeholder", "xxx.xxx.xxx.xxx");
       input.classList.add("ipv4");
     }
+    else if(field.type == "password") {
+      input.setAttribute("type", field.type);
+      input.setAttribute("autocomplete", "off");
+    }
     else {
       input.setAttribute("type", field.type);
     }
@@ -371,17 +375,21 @@ function submitChanges (el) {
     }
 
     if(el.id == "reboot") {
-      setTimeout(function() {
-        location.replace(document.URL);
-      }, 30000);
+      var rebootToUrl = el.getAttribute("data-reboot_to");
+      if(!rebootToUrl) {
+        rebootToUrl = document.URL;
+      }
+      setTimeout(function(url) {
+        location.replace(url);
+      }, 30000, rebootToUrl);
     } 
   }
   else if(el.type == "range") {
     el.setAttribute("data-updating", "");
   }
 
   let host = document.location.origin;
-  let value = refreshControl(el);
+  let value = encodeURIComponent(refreshControl(el));
 
   const query = `${host}/control?var=${el.id}&val=${value}`;
 

data/www/setup.html

@@ -85,17 +85,25 @@
                                 if(submitChanges(el)) {
                                     if(el.id == "reboot") {
                                         hide(settings);
-                                        header.innerHTML = '<h1>Rebooting!</h1>';
+                                        header.innerHTML = '<h1>Rebooting!</h1><hr>Page will reload after 30 seconds.';
+                                    }
+                                    else if(el.id == "save_prefs") {
+                                        rebootBtn = document.getElementById("reboot");
+                                        portField = document.getElementById("port");
+                                        if(rebootBtn && portField) {
+                                            rebootUrl = location.protocol + '//' + location.hostname + ':' + portField.value + '/';
+                                            rebootBtn.setAttribute("data-reboot_to", rebootUrl);
+                                        }
                                     }
                                 }
                             }
-                        else
+                        else {
                             el.onchange = () => submitChanges(el);
-
+                        }    
                     });
 
                 cameraButton.onclick = () => {
-                    window.location.href = '/';
+                    window.location.href = '/index';
                 }
 
                 monitorButton.onclick = () => {

src/app_component.cpp

@@ -70,4 +70,66 @@ int CLAppComponent::parsePrefs(jparse_ctx_t *jctx) {
   }
 
   return ret;
+}
+
+int CLAppComponent::urlDecode(char * decoded, char * source, size_t len) {
+  char temp[] = "0x00";
+  int i=0;
+  char * ptr = decoded;
+  while (i < len){
+    char decodedChar;
+    char encodedChar = *(source+i);
+    i++;
+    if ((encodedChar == '%') && (i + 1 < len)){
+      temp[2] = *(source+i); i++;
+      temp[3] = *(source+i); i++;
+      decodedChar = strtol(temp, NULL, 16);
+    } else if (encodedChar == '+') {
+      decodedChar = ' ';
+    } else {
+      decodedChar = encodedChar;  // normal ascii char
+    }
+    *ptr = decodedChar;
+    ptr++;
+    if(decodedChar == '\0') break;
+  }
+  return OS_SUCCESS;
+}
+
+int CLAppComponent::urlEncode(char * encoded, char * source, size_t len) {
+  char c, code0, code1, code2;
+
+  char * ptr = encoded;
+
+  for(int i=0; i < len; i++) {
+    c = *(source+i);
+    if(c == '\0') {
+      break;
+    }
+    else if(c == ' ') {
+      *ptr = '+'; ptr++;
+    }
+    else if(isalnum(c)) {
+      *ptr = c; ptr++;
+    }
+    else {
+
+        code1 = (c & 0xf)+'0';
+        if ((c & 0xf) > 9) {
+            code1 = (c & 0xf) - 10 + 'A';
+        }
+        c = (c >> 4) & 0xf;
+        code0 = c + '0';
+        if (c > 9) {
+            code0 = c - 10 + 'A';
+        }
+
+        *ptr = '%'; ptr++;
+        *ptr = code0; ptr++;
+        *ptr = code1; ptr++;
+
+    }
+  }
+  *ptr = '\0';
+  return OS_SUCCESS;
 }

src/app_component.h

@@ -8,7 +8,7 @@
 #include "storage.h"
 
 /**
- * @brief Abstract root class for the appication components.
+ * @brief Abstract root class for the application components.
  * 
  */
 class CLAppComponent {
@@ -44,6 +44,9 @@ class CLAppComponent {
 
         int parsePrefs(jparse_ctx_t *jctx);
 
+        int urlDecode(char * decoded, char * source, size_t len); 
+        int urlEncode(char * encoded, char * source, size_t len);
+
 
     private:
         // prefix for forming preference file name of this class

src/app_conn.cpp

@@ -201,6 +201,8 @@ int CLAppConn::loadPrefs() {
         json_obj_get_bool(&jctx, (char*)"dhcp", &dhcp);
     }
 
+    char dbuf[192];
+
     if (ret == OS_SUCCESS && json_obj_get_array(&jctx, (char*)"stations", &stationCount) == OS_SUCCESS) {
         Serial.print("Known external SSIDs: ");
         if(stationCount>0)
@@ -209,8 +211,9 @@ int CLAppConn::loadPrefs() {
                 if(json_arr_get_object(&jctx, i) == OS_SUCCESS) {
                     Station *s = (Station*) malloc(sizeof(Station));
                     if(json_obj_get_string(&jctx, (char*)"ssid", s->ssid, sizeof(s->ssid)) == OS_SUCCESS &&
-                       json_obj_get_string(&jctx, (char*)"pass", s->password, sizeof(s->password)) == OS_SUCCESS) {
+                       json_obj_get_string(&jctx, (char*)"pass", dbuf, sizeof(dbuf)) == OS_SUCCESS) {
                         Serial.printf("%s\r\n", s->ssid);
+                        urlDecode(s->password, dbuf, sizeof(dbuf));
                         stationList[i] = s;
                     } 
                     else {
@@ -236,7 +239,8 @@ int CLAppConn::loadPrefs() {
     }
 
     json_obj_get_string(&jctx, (char*)"ap_ssid", apName, sizeof(apName));
-    json_obj_get_string(&jctx, (char*)"ap_pass", apPass, sizeof(apPass));
+    json_obj_get_string(&jctx, (char*)"ap_pass", dbuf, sizeof(dbuf));
+    urlDecode(apPass, dbuf, sizeof(dbuf));
     if(json_obj_get_int(&jctx, (char*)"ap_channel", &ap_channel) != OS_SUCCESS)
         ap_channel = 1;
     if(json_obj_get_bool(&jctx, (char*)"ap_dhcp", &ap_dhcp) != OS_SUCCESS)
@@ -251,7 +255,8 @@ int CLAppConn::loadPrefs() {
 
     // OTA
     json_obj_get_bool(&jctx, (char*)"ota_enabled", &otaEnabled);   
-    json_obj_get_string(&jctx, (char*)"ota_password", otaPassword, sizeof(otaPassword)); 
+    json_obj_get_string(&jctx, (char*)"ota_password", dbuf, sizeof(dbuf)); 
+    urlDecode(otaPassword, dbuf, sizeof(dbuf));
 
     // NTP
     json_obj_get_string(&jctx, (char*)"ntp_server", ntpServer, sizeof(ntpServer)); 
@@ -305,23 +310,29 @@ int CLAppConn::savePrefs() {
     if(index < 0 && count == MAX_KNOWN_STATIONS) {
         count--;
     }
-    
+    char ebuf[192]; 
+
     if(index < 0 || count > 0) {
         json_gen_push_array(&jstr, "stations");
         if(index < 0) {
             json_gen_start_object(&jstr);
             json_gen_obj_set_string(&jstr, "ssid", ssid);
-            json_gen_obj_set_string(&jstr, "pass", password);
+            urlEncode(ebuf, password, sizeof(password));
+            json_gen_obj_set_string(&jstr, "pass", ebuf);
             json_gen_end_object(&jstr);
         }
 
         for(int i=0; i < count; i++) {
             json_gen_start_object(&jstr);
             json_gen_obj_set_string(&jstr, "ssid", stationList[i]->ssid);
-            if(index >= 0 && i == index)
-                json_gen_obj_set_string(&jstr, "pass", password);
-            else
-                json_gen_obj_set_string(&jstr, "pass", stationList[i]->password);
+            if(index >= 0 && i == index) {
+                urlEncode(ebuf, password, sizeof(password));
+                json_gen_obj_set_string(&jstr, "pass", ebuf);
+            }
+            else {
+                urlEncode(ebuf, stationList[i]->password, sizeof(stationList[i]->password));
+                json_gen_obj_set_string(&jstr, "pass", ebuf);
+            }
             json_gen_end_object(&jstr);
         }
         json_gen_pop_array(&jstr);
@@ -337,10 +348,13 @@ int CLAppConn::savePrefs() {
     json_gen_pop_object(&jstr);    
     json_gen_obj_set_int(&jstr, "http_port", httpPort);
     json_gen_obj_set_bool(&jstr, "ota_enabled", otaEnabled);
-    json_gen_obj_set_string(&jstr, "ota_password", otaPassword);
+    urlEncode(ebuf, otaPassword, sizeof(otaPassword));
+    Serial.println(ebuf);
+    json_gen_obj_set_string(&jstr, "ota_password", ebuf);
 
     json_gen_obj_set_string(&jstr, "ap_ssid", apName);
-    json_gen_obj_set_string(&jstr, "ap_pass", apPass);
+    urlEncode(ebuf, apPass, sizeof(apPass));
+    json_gen_obj_set_string(&jstr, "ap_pass", ebuf);
     json_gen_obj_set_bool(&jstr, "ap_dhcp", ap_dhcp);
     json_gen_push_object(&jstr, "ap_ip");
     if(apIP.ip) json_gen_obj_set_string(&jstr, "ip", apIP.ip->toString().c_str());
@@ -483,5 +497,4 @@ int CLAppConn::getSSIDIndex() {
     return -1;
 }
 
-
 CLAppConn AppConn;

src/app_conn.h

@@ -96,8 +96,7 @@ class CLAppConn : public CLAppComponent {
         void updateTimeStr();
 
         void printLocalTime(bool extraData=false);
-    
-        
+
     private:
         int getSSIDIndex();
         void calcURLs();