UI Migration to Webpack+Bootstrap etc latest version

.github/workflows/esp-idf-v4.3-build.yml

@@ -74,9 +74,9 @@ jobs:
         echo "artifact_file_name=${artifact_file_name}" >> $GITHUB_ENV
         echo "PROJECT_VER=${TARGET_BUILD_NAME}-${{ steps.buildnumber.outputs.build_number }} " >> $GITHUB_ENV
         echo "artifact_bin_file_name=${artifact_bin_file_name}" >> $GITHUB_ENV
-        description=""
-        description=${description}$'------------------------------\n### Revision Log\n\n'
-        description="$description$(git log --pretty=format:'%h %s (%cI) <%an>' --abbrev-commit --max-count=15 | sed --r 's/(^[\*]+)/\\\1/g') "        
+        description=$'### Revision Log\n'
+        githist="$(git log --pretty=format:'%h %s (%cI) <%an>' --abbrev-commit --max-count=15 | sed --r 's/(^[\*]+)/\\\1/g')"
+        description="$description$githist"
         echo 'description<<~EOD' >> $GITHUB_ENV
         echo ${description}>> $GITHUB_ENV
         echo '~EOD' >> $GITHUB_ENV        

Dockerfile

@@ -3,9 +3,8 @@ FROM ubuntu:20.04
 
 ARG DEBIAN_FRONTEND=noninteractive
 
-COPY components/wifi-manager/webapp/package.json /opt
-
 # We need libpython2.7 due to GDB tools
+# we also need npm 8 for the webapp to work
 RUN : \
   && apt-get update \
   && apt-get install -y \
@@ -31,7 +30,7 @@ RUN : \
     wget \
     xz-utils \
     zip \
-	npm \
+    	npm \
 	nodejs \
   && apt-get autoremove -y \
   && rm -rf /var/lib/apt/lists/* \
@@ -39,8 +38,6 @@ RUN : \
   && python -m pip install --upgrade \
     pip \
     virtualenv \
-  && cd /opt \
-  && npm install -g \
   && :
 
 # To build the image for a branch or a tag of IDF, pass --build-arg IDF_CLONE_BRANCH_OR_TAG=name.
@@ -53,7 +50,8 @@ RUN : \
 # docker build . --build-arg IDF_CHECKOUT_REF=8bf14a9238329954c7c5062eeeda569529aedf75  -t sle118/squeezelite-esp32-idfv4-master
 # To run the image interactive (windows): docker run --rm -v %cd%:/project -w /project -it sle118/squeezelite-esp32-idfv4-master
 # to build the web app inside of the interactive session
-# pushd components/wifi-manager/webapp/ && npm rebuild node-sass && npm run-script build && popd
+# pushd components/wifi-manager/webapp/ && npm install && npm run-script build && popd
+
 
 ARG IDF_CLONE_URL=https://github.com/espressif/esp-idf.git
 ARG IDF_CLONE_BRANCH_OR_TAG=master
@@ -88,5 +86,40 @@ RUN : \
 ENV IDF_CCACHE_ENABLE=1
 COPY docker/entrypoint.sh /opt/esp/entrypoint.sh
 
+# Now install nodejs, npm and the packages we need
+COPY components/wifi-manager/webapp/package.json /opt
+
+ENV NODE_VERSION 8
+
+SHELL ["/bin/bash", "--login", "-c"]
+# Install nvm with node and npm
+# RUN wget -qO- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.1/install.sh | bash \
+#     && export NVM_DIR="$([ -z "${XDG_CONFIG_HOME-}" ] && printf %s "${HOME}/.nvm" || printf %s "${XDG_CONFIG_HOME}/nvm")" \
+#     && [ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh" \
+#     && nvm install $NODE_VERSION \
+#     && nvm alias default $NODE_VERSION \
+#     && nvm use default \
+#     && echo installing nodejs version 16  \
+#     && curl -sL https://deb.nodesource.com/setup_16.x | bash - \
+#     && echo installing node modules  \
+#     && cd /opt \
+#     && nvm use default \
+#     && npm install -g \  
+#     && :    
+
+RUN : \
+  && curl -fsSL https://deb.nodesource.com/setup_16.x | bash - \
+  && apt-get install -y nodejs \
+    && echo installing node modules  \
+    && cd /opt \
+    && npm i -g npm \
+    && node --version \
+    && npm install -g \  
+    && :      
+
+ENV NODE_PATH $NVM_DIR/v$NODE_VERSION/lib/node_modules
+ENV PATH      $NVM_DIR/v$NODE_VERSION/bin:$PATH
+
+
 ENTRYPOINT [ "/opt/esp/entrypoint.sh" ]
 CMD [ "/bin/bash" ]

components/wifi-manager/webapp/dist/js/index.79297e.bundle.js.LICENSE.txt → components/wifi-manager/webapp/dist/js/index.6409a9.bundle.js.LICENSE.txt

@@ -1,5 +1,5 @@
 /*!
-  * Bootstrap v4.6.1 (https://getbootstrap.com/)
+  * Bootstrap v5.1.3 (https://getbootstrap.com/)
   * Copyright 2011-2021 The Bootstrap Authors (https://github.com/twbs/bootstrap/graphs/contributors)
   * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
   */
@@ -47,27 +47,4 @@
 
 /*! https://mths.be/he v1.2.0 by @mathias | MIT license */
 
-/**!
- * @fileOverview Kickass library to create and place poppers near their reference elements.
- * @version 1.16.1
- * @license
- * Copyright (c) 2016 Federico Zivolo and contributors
- *
- * Permission is hereby granted, free of charge, to any person obtaining a copy
- * of this software and associated documentation files (the "Software"), to deal
- * in the Software without restriction, including without limitation the rights
- * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
- * copies of the Software, and to permit persons to whom the Software is
- * furnished to do so, subject to the following conditions:
- *
- * The above copyright notice and this permission notice shall be included in all
- * copies or substantial portions of the Software.
- *
- * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
- * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
- * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
- * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
- * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
- * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
- * SOFTWARE.
- */
+/*! js-cookie v3.0.1 | MIT */

components/wifi-manager/webapp/package.json

@@ -11,30 +11,38 @@
     "watch": "webpack --progress --watch  --mode=development ",
     "dev": "webpack serve --open  --mode=development"
   },
+  "sideEffects": [
+    "**/*.css",
+    "**/*.scss",
+    "**/index.ejs",
+    "**/index.js",
+    "**/*.js"
+  ],
   "devDependencies": {
-    "@babel/core": "^7.12.10",
-    "@babel/plugin-transform-runtime": "^7.16.8",
-    "@babel/preset-env": "^7.12.11",
+    "@babel/core": "^7.16.12",
+    "@babel/plugin-transform-runtime": "^7.16.10",
+    "@babel/preset-env": "^7.16.11",
     "@babel/preset-typescript": "^7.16.7",
     "@squoosh/lib": "^0.4.0",
-    "autoprefixer": "^10.2.4",
+    "autoprefixer": "^10.4.2",
     "babel": "^6.23.0",
-    "babel-loader": "^8.2.2",
+    "babel-loader": "^8.2.3",
     "bootswatch": "^5.1.3",
-    "clean-webpack-plugin": "^3.0.0",
+    "clean-webpack-plugin": "^4.0.0",
     "commander": "^8.3.0",
-    "compression-webpack-plugin": "^7.1.2",
-    "copy-webpack-plugin": "^10.2.0",
-    "css-loader": "^5.0.1",
-    "css-minimizer-webpack-plugin": "^1.2.0",
+    "compression-webpack-plugin": "^9.2.0",
+    "copy-webpack-plugin": "^10.2.1",
+    "css-loader": "^6.5.1",
+    "css-minimizer-webpack-plugin": "^3.4.1",
     "ejs-loader": "^0.5.0",
     "es6-promise": "^4.2.8",
     "file-loader": "^6.2.0",
     "glob": "^7.2.0",
+    "glob-all": "^3.2.1",
     "google-fonts-webpack-plugin": "^0.4.4",
-    "html-loader": "^1.3.2",
+    "html-loader": "^3.1.0",
     "html-minimizer-webpack-plugin": "^3.5.0",
-    "html-webpack-plugin": "^4.5.2",
+    "html-webpack-plugin": "^5.5.0",
     "image-minimizer-webpack-plugin": "^3.2.3",
     "imagemin": "^8.0.1",
     "imagemin-gifsicle": "^7.0.0",
@@ -43,29 +51,33 @@
     "imagemin-optipng": "^8.0.0",
     "imagemin-pngquant": "^9.0.2",
     "imagemin-svgo": "^10.0.1",
+    "js-cookie": "^3.0.1",
     "lodash": "^4.17.21",
     "lodash-webpack-plugin": "^0.11.6",
-    "mini-css-extract-plugin": "^1.3.5",
-    "node-sass": "^5.0.0",
-    "postcss": "^8.2.4",
-    "postcss-loader": "^4.2.0",
+    "mini-css-extract-plugin": "^2.5.2",
+    "node-sass": "^7.0.1",
+    "postcss": "^8.4.5",
+    "postcss-loader": "^6.2.1",
     "purgecss-webpack-plugin": "^4.1.3",
+    "purify-css": "^1.2.5",
+    "purifycss-webpack": "^0.7.0",
     "remixicon": "^2.5.0",
-    "sass-loader": "^10.1.1",
+    "sass-loader": "^12.4.0",
     "string-argv": "^0.3.1",
-    "style-loader": "^2.0.0",
-    "terser-webpack-plugin": "^5.1.1",
+    "style-loader": "^3.3.1",
+    "terser-webpack-plugin": "^5.3.0",
     "ts-loader": "^9.2.6",
-    "typescript": "^4.5.4",
-    "webpack": "^5.19.0",
+    "typescript": "^4.5.5",
+    "webpack": "^5.67.0",
     "webpack-bundle-analyzer": "^4.5.0",
-    "webpack-cli": "^4.4.0",
-    "webpack-dev-server": "^3.11.2"
+    "webpack-cli": "^4.9.2",
+    "webpack-dev-server": "^4.7.3"
   },
   "dependencies": {
     "@babel/runtime": "^7.16.7",
-    "bootstrap": "^4.6.0",
-    "jquery": "^3.5.1",
+    "async-mutex": "^0.3.2",
+    "bootstrap": "^5.1.3",
+    "jquery": "^3.6.0",
     "popper.js": "^1.16.1"
   },
   "keywords": [

components/wifi-manager/webapp/src/index.ejs

@@ -14,23 +14,23 @@
 <body class="d-flex flex-column">
 	<header class="navbar navbar-expand-sm navbar-dark  bg-primary sticky-top border-bottom border-dark" id="mainnav">
 		<a class="navbar-brand" id="navtitle" href="#"></a>
-		<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
+		<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent"
 			aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
 			<span class="navbar-toggler-icon"></span>
 		</button>
 		<div class="collapse navbar-collapse" id="navbarSupportedContent">
 			<ul class="nav navbar-nav mr-auto" role="tablist">
-				<li class="nav-item"><a class="nav-link active" data-toggle="tab" aria-controls="profile" role="tab" href="#tab-wifi">WiFi</a></li>
-				<li class="nav-item omsg"><a class="nav-link" data-toggle="tab" aria-controls="profile" role="tab" href="#tab-syslog">Status<span
+				<li class="nav-item"><a class="nav-link active" data-bs-toggle="tab" aria-controls="profile" role="tab" href="#tab-wifi">WiFi</a></li>
+				<li class="nav-item omsg"><a class="nav-link" data-bs-toggle="tab" aria-controls="profile" role="tab" href="#tab-syslog">Status<span
 							class="badge badge-pill badge-success" id="msgcnt"></span></a></li>
-				<li class="nav-item orec"><a class="nav-link" data-toggle="tab" aria-controls="profile" role="tab" href="#tab-cfg-audio">Audio</a></li>
-				<li class="nav-item orec"><a class="nav-link" data-toggle="tab" aria-controls="profile" role="tab" href="#tab-cfg-syst">System</a></li>
-				<li class="nav-item orec"><a class="nav-link" data-toggle="tab" aria-controls="profile" role="tab" href="#tab-cfg-hw">Hardware</a></li>
-				<li class="nav-item"><a class="nav-link" data-toggle="tab"  aria-controls="profile" role="tab" href="#tab-cfg-fw">Updates</a></li>
+				<li class="nav-item orec"><a class="nav-link" data-bs-toggle="tab" aria-controls="profile" role="tab" href="#tab-cfg-audio">Audio</a></li>
+				<li class="nav-item orec"><a class="nav-link" data-bs-toggle="tab" aria-controls="profile" role="tab" href="#tab-cfg-syst">System</a></li>
+				<li class="nav-item orec"><a class="nav-link" data-bs-toggle="tab" aria-controls="profile" role="tab" href="#tab-cfg-hw">Hardware</a></li>
+				<li class="nav-item"><a class="nav-link" data-bs-toggle="tab"  aria-controls="profile" role="tab" href="#tab-cfg-fw">Updates</a></li>
 				<div class="dropdown-divider"></div>
-				<li class="nav-item"><a class="nav-link" data-toggle="tab"  aria-controls="profile" role="tab" href="#tab-nvs">NVS Editor</a></li>
-				<li class="nav-item"><a class="nav-link" data-toggle="tab"  aria-controls="profile" role="tab" href="#tab-commands">Advanced</a></li>
-				<li class="nav-item"><a class="nav-link" data-toggle="tab"  aria-controls="profile" role="tab" href="#tab-credits">Credits</a></li>
+				<li class="nav-item"><a class="nav-link" data-bs-toggle="tab"  aria-controls="profile" role="tab" href="#tab-nvs">NVS Editor</a></li>
+				<li class="nav-item"><a class="nav-link" data-bs-toggle="tab"  aria-controls="profile" role="tab" href="#tab-commands">Advanced</a></li>
+				<li class="nav-item"><a class="nav-link" data-bs-toggle="tab"  aria-controls="profile" role="tab" href="#tab-credits">Credits</a></li>
 			</ul>
 
 		</div>
@@ -40,7 +40,7 @@
 			<span id="o_jack" class="material-icons" style="fill:white; display: none">headphones</span>
 			<span id="s_airplay" class="material-icons"  style="fill:white; display: none">airplay</span>
 			<em id="s_cspot" class="fab fa-spotify" style="fill:white; display: inline"></em>
-			<span data-toggle="tooltip" id="o_type" data-placement="top" title="">
+			<span data-bs-toggle="tooltip" id="o_type" data-bs-placement="top" title="">
 				<span id="o_bt" class="material-icons" style="fill:white; display: none" >bluetooth</span>
 				<span id="o_spdif" class="material-icons" style="fill:white; display: none" >graphic_eq</span>
 				<span id="o_i2s" class="material-icons" style="fill:white; display: none" >speaker</span>
@@ -54,14 +54,13 @@
 		<!-- Button trigger modal -->
   
   <!-- Modal -->
-  <div class="modal fade" id="otadiv" tabindex="-1" role="dialog" aria-labelledby="fwProgressLabel" aria-hidden="true">
-	<div class="modal-dialog" role="document">
+  
+  <div class="modal" id="otadiv" aria-hidden="true">
+	<div class="modal-dialog" >
 	  <div class="modal-content">
 		<div class="modal-header">
 		  <h5 class="modal-title" id="fwProgressLabel">Upgrade Progress</h5>
-		  <button type="button" class="close" data-dismiss="modal" aria-label="Close">
-			<span aria-hidden="true">&times;</span>
-		  </button>
+		  <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
 		</div>
 		<div class="modal-body">
 			<span id="flash-status"></span>
@@ -72,7 +71,7 @@
 			</div>
 		</div>
 		<div class="modal-footer">
-		  <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
+		  <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
 		</div>
 	  </div>
 	</div>
@@ -126,8 +125,8 @@
 									placeholder="select entry from list or enter known url" id="fw-url-input">
 							</div>
 							<div class="col-auto">
-								<button type="button" id='start-flash' data-toggle="modal" data-target="#uCnfrm"
-									class="btn btn-warning btn-sm" style="display: none;">Flash Firmware</button>
+								<button type="button" id='start-flash' data-bs-toggle="modal" data-bs-target="#uCnfrm"
+									class="btn btn-warning btn-sm flact" style="display: none;">Flash Firmware</button>
 							</div>
 							
 							<div class="col-auto">
@@ -142,16 +141,14 @@
 						<div class="modal-content">
 							<div class="modal-header">
 								<h5 class="modal-title">Firmware Flash</h5>
-								<button type="button" class="close" data-dismiss="modal" aria-label="Close">
-									<span aria-hidden="true">&times;</span>
-								</button>
+								<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
 							</div>
 							<div class="modal-body">
 								<p>Flash URL <span id="selectedFWURL" class="text-break"></span> to device?</p>
 							</div>
 							<div class="modal-footer  ">
-								<button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
-								<button id="btn_flash" type="button" class="btn btn-warning" data-dismiss="modal" >Ok</button>
+								<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
+								<button id="btn_flash" type="button" class="btn btn-warning" data-bs-dismiss="modal" >Ok</button>
 							</div>
 						</div>
 					</div>
@@ -159,14 +156,14 @@
 				<div class="card text-white mb-3" >
 					<div class="card-header">Local Firmware Upload</div>
 					<div class="card-body">
-							<div id="uploaddiv" class="form-group row">
+							<div id="uploaddiv" class="form-group row ">
 									<label for="flashfilename" class="col-auto col-form-label">Local File</label>
 									<div class="col">
 										<input type="file" class="form-control-file" id="flashfilename" aria-describedby="fileHelp">
 								</div>
 								<div class="col-auto">
 									<div class="buttons">
-										<button type="button" class="btn btn-danger" id="fwUpload">Upload!</button>
+										<button type="button" class="btn btn-danger flact" id="fwUpload">Upload!</button>
 									</div>
 								</div>
 							</div>
@@ -237,13 +234,13 @@
 								</label>
 							</div>
 						</div>
-						<div class="toast show" role="alert" aria-live="assertive" aria-atomic="true"
-							style="display: none;" id="toast_cfg-audio-tmpl">
-							<div class="toast-header"><strong class="mr-auto">Result</strong><button type="button"
-									class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close"
-									onclick="hideSurrounding(this)"><span aria-hidden="true">×</span></button></div>
+						<div style="margin-top: 16px;">
+						<div class="toast hide" role="alert" aria-live="assertive" aria-atomic="true"  id="toast_cfg-audio-tmpl">
+							<div class="toast-header"><strong class="mr-auto">Result</strong>
+								<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button></div>
 							<div class="toast-body" id="msg_cfg-audio-tmpl"></div>
 						</div>
+						</div>
 						<button id="save-autoexec1" type="submit" class="btn btn-info" cmdname="cfg-audio-tmpl">Save</button>
 						<button id="commit-autoexec1" type="submit" class="btn btn-warning" cmdname="cfg-audio-tmpl">Apply</button>
 					</fieldset>
@@ -253,6 +250,7 @@
 		<div class="tab-pane fade active show" id="tab-wifi">
 			<div class="card text-white  mb-3">
 				<div class="card-header">WiFi Status</div>
+				
 				<div class="card-body if_eth" style="display: none">
 					<h2>Connected to Ethernet</h2>
 					<p>WiFi is inactive while connected to a wired network.
@@ -277,9 +275,7 @@
 						<div class="modal-content">
 							<div class="modal-header">
 								<h5 class="modal-title">Disconnect</h5>
-								<button type="button" class="close" data-dismiss="modal" aria-label="Close">
-									<span aria-hidden="true">&times;</span>
-								</button>
+								<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
 							</div>
 							<div class="modal-body">
 								<p>Disconnect from network? After disconnecting, the system won't be accessible from
@@ -287,22 +283,19 @@
 										id="apName"></span> with password <span id="apPass"></span> </p>
 							</div>
 							<div class="modal-footer connecting-success connecting-status">
-								<button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
-								<button id="btn_disconnect" type="button" class="btn btn-warning" data-dismiss="modal">Ok</button>
+								<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
+								<button id="btn_disconnect" type="button" class="btn btn-warning" data-bs-dismiss="modal">Ok</button>
 							</div>
 						</div>
 					</div>
 				</div>
-				<div class="modal" id="WifiConnectDialog">
-					<div class="modal-dialog modal-dialog-centered" role="document">
+				<div class="modal" id="WifiConnectDialog" aria-hidden="true">
+					<div class="modal-dialog ">
 						<div class="modal-content">
 							<div class="modal-header">
-								<h5 class="modal-title connecting connecting-init connecting-fail">Connect to WiFi
-								</h5>
+								<h5 class="modal-title connecting connecting-init connecting-fail">Connect to WiFi</h5>
 								<h5 class="modal-title connecting-status connecting-success">Status</h5>
-								<button type="button" class="close" data-dismiss="modal" aria-label="Close">
-									<span aria-hidden="true">&times;</span>
-								</button>
+								<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
 							</div>
 							<div class="modal-body">
 								<fieldset class="connecting-init connecting-fail">
@@ -336,7 +329,7 @@
 							<div class="modal-footer ">
 								<button type="button"
 									class="btn btn-secondary connecting-init connecting-fail connecting"
-									data-dismiss="modal">Close</button>
+									data-bs-dismiss="modal">Close</button>
 								<button type="button" id="btnJoin"
 									class="btn btn-primary connecting-init connecting-fail">Join</button>
 								<button type="button" class="connecting btn btn-primary" disabled>
@@ -346,8 +339,8 @@
 							</div>
 
 							<div class="modal-footer connecting-success connecting-status justify-content-between" style=""><button type="button"
-									class="btn btn-primary" data-dismiss="modal">Ok</button><button type="button" class="btn btn-danger"
-									data-toggle="modal" data-dismiss="modal" data-target="#WiFiDisconnectConfirm">Disconnect</button> 
+									class="btn btn-primary" data-bs-dismiss="modal">Ok</button><button type="button" class="btn btn-danger"
+									data-bs-toggle="modal" data-bs-dismiss="modal" data-bs-target="#WiFiDisconnectConfirm">Disconnect</button> 
 							</div>
 						</div>
 					</div>

components/wifi-manager/webapp/src/sass/main.scss

@@ -1,6 +1,42 @@
 
 @import "~bootswatch/dist/darkly/variables";
 @import "utils/variables";
-@import "~bootstrap/scss/bootstrap";
+// @import "~bootstrap/scss/bootstrap";
+@import "~bootstrap/scss/functions";
+@import "~bootstrap/scss/variables";
+@import "~bootstrap/scss/mixins";
+@import "~bootstrap/scss/utilities";
+
+// Layout & components
+@import "~bootstrap/scss/root";
+@import "~bootstrap/scss/reboot";
+@import "~bootstrap/scss/type";
+@import "~bootstrap/scss/images";
+@import "~bootstrap/scss/containers";
+@import "~bootstrap/scss/grid";
+@import "~bootstrap/scss/tables";
+@import "~bootstrap/scss/forms";
+@import "~bootstrap/scss/buttons";
+@import "~bootstrap/scss/transitions";
+@import "~bootstrap/scss/dropdown";
+@import "~bootstrap/scss/button-group";
+@import "~bootstrap/scss/nav";
+@import "~bootstrap/scss/navbar";
+@import "~bootstrap/scss/card";
+@import "~bootstrap/scss/badge";
+@import "~bootstrap/scss/alert";
+@import "~bootstrap/scss/progress";
+//@import "~bootstrap/scss/list-group";
+@import "~bootstrap/scss/close";
+@import "~bootstrap/scss/toasts";
+@import "~bootstrap/scss/modal";
+@import "~bootstrap/scss/tooltip";
+@import "~bootstrap/scss/placeholders";
+
+// Helpers
+@import "~bootstrap/scss/helpers";
+
+// Utilities
+@import "~bootstrap/scss/utilities/api";
 @import "~bootswatch/dist/darkly/bootswatch";
 @import "utils/style";     

components/wifi-manager/webapp/webapp.cmake

@@ -1,4 +1,4 @@
-target_add_binary_data( __idf_wifi-manager webapp/dist/css/index.04bd6e438114e559773d.css.gz BINARY)
+target_add_binary_data( __idf_wifi-manager webapp/dist/css/index.eb4a1bb223a59c656f2c.css.gz BINARY)
 target_add_binary_data( __idf_wifi-manager webapp/dist/favicon-32x32.png BINARY)
 target_add_binary_data( __idf_wifi-manager webapp/dist/index.html.gz BINARY)
-target_add_binary_data( __idf_wifi-manager webapp/dist/js/index.79297e.bundle.js.gz BINARY)
+target_add_binary_data( __idf_wifi-manager webapp/dist/js/index.6409a9.bundle.js.gz BINARY)

components/wifi-manager/webapp/webpack.c

@@ -1,29 +1,29 @@
 // Automatically generated. Do not edit manually!.
 #include <inttypes.h>
-extern const uint8_t _index_04bd6e438114e559773d_css_gz_start[] asm("_binary_index_04bd6e438114e559773d_css_gz_start");
-extern const uint8_t _index_04bd6e438114e559773d_css_gz_end[] asm("_binary_index_04bd6e438114e559773d_css_gz_end");
+extern const uint8_t _index_eb4a1bb223a59c656f2c_css_gz_start[] asm("_binary_index_eb4a1bb223a59c656f2c_css_gz_start");
+extern const uint8_t _index_eb4a1bb223a59c656f2c_css_gz_end[] asm("_binary_index_eb4a1bb223a59c656f2c_css_gz_end");
 extern const uint8_t _favicon_32x32_png_start[] asm("_binary_favicon_32x32_png_start");
 extern const uint8_t _favicon_32x32_png_end[] asm("_binary_favicon_32x32_png_end");
 extern const uint8_t _index_html_gz_start[] asm("_binary_index_html_gz_start");
 extern const uint8_t _index_html_gz_end[] asm("_binary_index_html_gz_end");
-extern const uint8_t _index_79297e_bundle_js_gz_start[] asm("_binary_index_79297e_bundle_js_gz_start");
-extern const uint8_t _index_79297e_bundle_js_gz_end[] asm("_binary_index_79297e_bundle_js_gz_end");
+extern const uint8_t _index_6409a9_bundle_js_gz_start[] asm("_binary_index_6409a9_bundle_js_gz_start");
+extern const uint8_t _index_6409a9_bundle_js_gz_end[] asm("_binary_index_6409a9_bundle_js_gz_end");
 const char * resource_lookups[] = {
-	"/css/index.04bd6e438114e559773d.css.gz",
+	"/css/index.eb4a1bb223a59c656f2c.css.gz",
 	"/favicon-32x32.png",
 	"/index.html.gz",
-	"/js/index.79297e.bundle.js.gz",
+	"/js/index.6409a9.bundle.js.gz",
 ""
 };
 const uint8_t * resource_map_start[] = {
-	_index_04bd6e438114e559773d_css_gz_start,
+	_index_eb4a1bb223a59c656f2c_css_gz_start,
 	_favicon_32x32_png_start,
 	_index_html_gz_start,
-	_index_79297e_bundle_js_gz_start
+	_index_6409a9_bundle_js_gz_start
 };
 const uint8_t * resource_map_end[] = {
-	_index_04bd6e438114e559773d_css_gz_end,
+	_index_eb4a1bb223a59c656f2c_css_gz_end,
 	_favicon_32x32_png_end,
 	_index_html_gz_end,
-	_index_79297e_bundle_js_gz_end
+	_index_6409a9_bundle_js_gz_end
 };

components/wifi-manager/webapp/webpack.config.js

@@ -18,7 +18,6 @@ const fs = require('fs');
 const zlib = require("zlib");
 const PurgeCSSPlugin = require('purgecss-webpack-plugin')
 
-
 const PATHS = {
   src: path.join(__dirname, 'src')
 }
@@ -65,28 +64,69 @@ module.exports = (env, options) => (
               }
             ]
           }, 
-          {
-            test: /\.s[ac]ss$/i,
+          // {
+          //   test: /\.s[ac]ss$/i,
             
-            use:  [
-               {
-                  loader: MiniCssExtractPlugin.loader,
-                  options: {
-                    publicPath: "../",
-                  },
-                },
-              "css-loader",
+          //   use:  [{
+          //     loader: 'style-loader', // inject CSS to page
+          //   },
+          //      {
+          //         loader: MiniCssExtractPlugin.loader,
+          //         options: {
+          //           publicPath: "../",
+          //         },
+          //       },
+          //     "css-loader",
+          //     {
+          //       loader: "postcss-loader",
+          //       options: {
+          //         postcssOptions: {
+          //           plugins: [["autoprefixer"]],
+          //         },
+          //       },
+          //     },
+          //     "sass-loader",
+          //   ]
+          // },
+          {
+            test: /\.(scss)$/,
+            use: [
+              
               {
-                loader: "postcss-loader",
+                loader: MiniCssExtractPlugin.loader,
                 options: {
-                  postcssOptions: {
-                    plugins: [["autoprefixer"]],
-                  },
+                  publicPath: "../",
                 },
               },
-              "sass-loader",
-            ]
-          },
+            //   {
+            //   // inject CSS to page
+            //   loader: 'style-loader'
+            // }, 
+            {
+              // translates CSS into CommonJS modules
+              loader: 'css-loader'
+            },
+                 
+           {
+              // Run postcss actions
+              loader: 'postcss-loader',
+              options: {
+                // `postcssOptions` is needed for postcss 8.x;
+                // if you use postcss 7.x skip the key
+                postcssOptions: {
+                  // postcss plugins, can be exported to postcss.config.js
+                  plugins: function () {
+                    return [
+                      require('autoprefixer')
+                    ];
+                  }
+                }
+              }
+            }, {
+              // compiles Sass to CSS
+              loader: 'sass-loader'
+            }]
+          },          
           {
             test: /\.js$/,
             exclude: /(node_modules|bower_components)/,
@@ -113,30 +153,6 @@ module.exports = (env, options) => (
             
           }
         },
-          //          {
-          //   test: /\.html$/i,
-          //   use: [
-          //     "html-loader",
-          //     {
-          //       loader: 'markup-inline-loader',
-          //       options: {
-          //         svgo: {
-          //           plugins: [
-          //             {
-          //               removeTitle: true,
-          //             },
-          //             {
-          //               removeUselessStrokeAndFill: false,
-          //             },
-          //             {
-          //               removeUnknownsAndDefaults: false,
-          //             },
-          //           ],
-          //         },
-          //       },
-          //     },
-          //   ]
-          // },
           {
             test: /\.tsx?$/,
             use: 'ts-loader',
@@ -203,9 +219,15 @@ module.exports = (env, options) => (
           threshold: 100,
           minRatio: 0.8,
       }),
+      
         new BuildEventsHook('Update C App', 
           function (stats, arguments) {
+
             if (options.mode !== "production") return;
+            let wifiManagerPath=path.posix.resolve(process.cwd(),'..','..');
+            let buildCRootPath=path.posix.resolve(process.cwd(),'..','..','..','..');
+            let distPath = path.posix.resolve('dist');
+            let posixWebAppPath=path.posix.resolve(process.cwd(),'..');
             fs.appendFileSync('./dist/index.html.gz', 
               zlib.gzipSync(fs.readFileSync('./dist/index.html'), 
               {
@@ -214,11 +236,11 @@ module.exports = (env, options) => (
              }));
             
             var getDirectories = function (src, callback) {
-              var searchPath = path.posix.relative(process.cwd(), path.posix.join(__dirname, src, '/**/*(*.gz|favicon-32x32.png)'));
+              var searchPath = path.posix.join(src, '/**/*(*.gz|favicon-32x32.png)');
               console.log(`Post build: Getting file list from ${searchPath}`);
               glob(searchPath, callback);
             };
-            var cleanUpPath = path.posix.relative(process.cwd(), path.posix.join(__dirname, '../../../build/*.S'));
+            var cleanUpPath = path.posix.join(buildCRootPath, '/build/*.S');
             console.log(`Post build: Cleaning up previous builds in ${cleanUpPath}`);
             glob(cleanUpPath, function (err, list) {
               if (err) {
@@ -239,11 +261,11 @@ module.exports = (env, options) => (
             );
             console.log('Generating C include files from webpack build output');
             getDirectories('./dist', function (err, list) {
+              console.log(`Post build: found ${list.length} files. Relative path: ${wifiManagerPath}.`);
               if (err) {
                 console.log('Error', err);
               } else {
-                const regex = /^(.*\/)([^\/]*)$/
-                const relativeRegex = /((\w+(?<!dist)\/){0,1}[^\/]*)$/
+              
                 let exportDefHead =
 `/***********************************
 webpack_headers
@@ -259,17 +281,18 @@ extern const uint8_t * resource_map_end[];`;
                 let lookupDef = 'const char * resource_lookups[] = {\n';
                 let lookupMapStart = 'const uint8_t * resource_map_start[] = {\n';
                 let lookupMapEnd = 'const uint8_t * resource_map_end[] = {\n';
-                let cMake = '';
-                list.forEach(fileName => {
-
-                  let exportName = fileName.match(regex)[2].replace(/[\. \-]/gm, '_');
-                  let relativeName = fileName.match(relativeRegex)[1];
+                let cMake='';
+                
+                list.forEach(foundFile => {
+                  let exportName = path.basename(foundFile).replace(/[\. \-]/gm, '_');
+                  let cmakeFileName = path.posix.relative(wifiManagerPath,foundFile);
+                  let httpRelativePath=path.posix.join('/',path.posix.relative('dist',foundFile));
                   exportDef += `extern const uint8_t _${exportName}_start[] asm("_binary_${exportName}_start");\nextern const uint8_t _${exportName}_end[] asm("_binary_${exportName}_end");\n`;
-                  lookupDef += '\t"/' + relativeName + '",\n';
+                  lookupDef += `\t"${httpRelativePath}",\n`;
                   lookupMapStart += '\t_' + exportName + '_start,\n';
                   lookupMapEnd += '\t_' + exportName + '_end,\n';
-                  cMake += `target_add_binary_data( __idf_wifi-manager ${path.posix.relative(path.posix.resolve(process.cwd(),'..','..'),fileName)} BINARY)\n`;
-                  console.log(`Post build: adding cmake file reference to ${path.posix.relative(path.posix.resolve(process.cwd(),'..','..'),fileName)} from C project.`);
+                  cMake += `target_add_binary_data( __idf_wifi-manager ${cmakeFileName} BINARY)\n`;
+                  console.log(`Post build: adding cmake file reference to ${cmakeFileName} from C project, with web path ${httpRelativePath}.`);
                 });
 
                 lookupDef += '""\n};\n';
@@ -335,16 +358,16 @@ extern const uint8_t * resource_map_end[];`;
           //new BundleAnalyzerPlugin()
 
         ],
-        splitChunks: {
-          cacheGroups: {
-            styles: {
-              name: 'styles',
-              test: /\.css$/,
-              chunks: 'all',
-              enforce: true
-            }
-          }
-        }
+        // splitChunks: {
+        //   cacheGroups: {
+        //     styles: {
+        //       name: 'styles',
+        //       test: /\.css$/,
+        //       chunks: 'all',
+        //       enforce: true
+        //     }
+        //   }
+        // }
       },
       //   output: {
       //     filename: "[name].js",

components/wifi-manager/webapp/webpack.h

@@ -1,6 +1,6 @@
 /***********************************
 webpack_headers
-dist/css/index.04bd6e438114e559773d.css.gz,dist/favicon-32x32.png,dist/index.html.gz,dist/js/index.79297e.bundle.js.gz
+dist/css/index.eb4a1bb223a59c656f2c.css.gz,dist/favicon-32x32.png,dist/index.html.gz,dist/js/index.6409a9.bundle.js.gz
 ***********************************/
 #pragma once
 #include <inttypes.h>

components/wifi-manager/webapp/webpack/webpack.dev.js

@@ -22,7 +22,11 @@ const data = {
     status: require("../mock/status.json"),
     messages_ota_fail: require("../mock/messages_ota_fail.json"),
     messages_ota_flash: require("../mock/messages_ota_flash.json"),
-    messages_ota: require("../mock/messages_ota.json")
+    messages_ota: require("../mock/messages_ota.json"),
+    rebooting: false,
+    reboottime: Date.now(),
+    devServer:{}
+
 };
 const messagingTypes= {
 	MESSAGING_INFO : 'MESSAGING_INFO',
@@ -36,6 +40,31 @@ const messagingClass= {
 	MESSAGING_CLASS_CFGCMD: 'MESSAGING_CLASS_CFGCMD',
 	MESSAGING_CLASS_BT: 'MESSAGING_CLASS_BT'
 } ;
+
+function rebooting(){
+    let duration=10000;
+    console.log(`Simulating a reboot of ${duration}ms`);
+    data.reboottime = Date.now() + duration;
+    data.rebooting=true;
+    setTimeout(() => {  
+        data.rebooting=false; 
+        console.log("Reboot completed!"); 
+    }, duration);
+}
+function sleep(milliseconds) {
+    const date = Date.now();
+    let currentDate = null;
+    do {
+      currentDate = Date.now();
+    } while (currentDate - date < milliseconds);
+  }
+function waitForReboot(){
+    while(Date.now() < data.reboottime){
+        sleep(500);
+        console.log(`Waiting for reboot to finish.`);
+    }
+}
+
 function requeueMessages(){
     data.messagequeue = [];
     data.messagequeue.push(...data.messages);
@@ -109,23 +138,60 @@ module.exports ={
     devtool:"source-map",
     devServer: {
 
-        contentBase: path.resolve(__dirname, './dist'),
-        publicPath: '/',
+        
+        static: {
+            directory: path.resolve(__dirname, './dist'),
+            staticOptions: {},
+            // Don't be confused with `devMiddleware.publicPath`, it is `publicPath` for static directory
+            // Can be:
+            // publicPath: ['/static-public-path-one/', '/static-public-path-two/'],
+            publicPath: "/",
+            // Can be:
+            // serveIndex: {} (options for the `serveIndex` option you can find https://github.com/expressjs/serve-index)
+            serveIndex: true,
+            // Can be:
+            // watch: {} (options for the `watch` option you can find https://github.com/paulmillr/chokidar)
+            watch: true,
+          },        
+        devMiddleware: {
+            publicPath: "/",
+
+          },
         open: true,
         compress: true,
-        port: 9100,
+        port: 9100, 
         host: '127.0.0.1',//your ip address
-        disableHostCheck: true,
+        allowedHosts: "all",
         headers: {'Access-Control-Allow-Origin': '*',
     'Accept-Encoding': 'identity'},
+    client: {
+        logging: "verbose",
+        // Can be used only for `errors`/`warnings`
+        //
+        // overlay: {
+        //   errors: true,
+        //   warnings: true,
+        // }
         overlay: true,
+        progress: true,
+      },
+      onListening: function (devServer) {
+        if (!devServer) {
+          throw new Error('webpack-dev-server is not defined');
+        }
+  
+        const port = devServer.server.address().port;
+        console.log('Listening on port:', port);
+      },
 
-        before: function(app) {
-            app.use(bodyParser.json()) // for parsing application/json
-            app.use(bodyParser.urlencoded({ extended: true })) // for parsing application/x-www-form-urlencoded
-            app.get('/ap.json', function(req, res) { res.json( data.ap ); });
-            app.get('/scan.json', function(req, res) { res.json( data.scan ); });
-            app.get('/config.json', function(req, res) { 
+        onBeforeSetupMiddleware: function (devServer) {
+            data.devServer=devServer;
+            devServer.app.use(bodyParser.json()) // for parsing application/json
+            devServer.app.use(bodyParser.urlencoded({ extended: true })) // for parsing application/x-www-form-urlencoded
+            devServer.app.get('/ap.json', function(req, res) {  waitForReboot(); res.json( data.ap ); });
+            devServer.app.get('/scan.json', function(req, res) { waitForReboot(); res.json( data.scan ); });
+            devServer.app.get('/config.json', function(req, res) { 
+                waitForReboot();
                 if(data.status.recovery==1 && (data.status.mock_old_recovery??'')!==''){
                     res.json( data.config.config ); 
                     console.log('Mock old recovery - return config structure without gpio');
@@ -135,7 +201,8 @@ module.exports ={
                 }
             });
 
-            app.get('/status.json', function(req, res) { 
+            devServer.app.get('/status.json', function(req, res) { 
+                waitForReboot();
                 if(data.status_queue_sequence.length>0){
                     const curstatus = JSON.parse(data.status_queue_sequence_queue_sequence.shift());
                     data.status.ota_pct=curstatus.ota_pct??0;
@@ -166,13 +233,15 @@ module.exports ={
                 }                                
                 res.json( data.status ); 
             });
-            app.get('/plugins/SqueezeESP32/firmware/-99', function(req, res) { 
+            devServer.app.get('/plugins/SqueezeESP32/firmware/-99', function(req, res) { 
+                waitForReboot();
                 let has_proxy=  data.status.mock_plugin_has_proxy ?? 'n';
                 const statusCode='xy'.includes((has_proxy).toLowerCase())?200:500;
                 console.log(`Checking if plugin has proxy enabled with option mock_plugin_has_proxy = ${data.status.mock_plugin_has_proxy}. Returning status ${statusCode} `);
                 res.status(statusCode ).json(); 
             });
-            app.get('/messages.json', function(req, res) { 
+            devServer.app.get('/messages.json', function(req, res) { 
+                waitForReboot();
                 if(data.status.recovery==1 && (data.status.mock_old_recovery??'')!==''){
                     console.log('Mocking old recovery, with no commands backend' );
                     res.status(404).end(); 
@@ -189,8 +258,12 @@ module.exports ={
                 data.messagequeue=[];
             });
             
-            app.get('/statusdefinition.json', function(req, res) { res.json( data.statusdefinition ); });
-            app.get('/commands.json', function(req, res) { 
+            devServer.app.get('/statusdefinition.json', function(req, res) { 
+                waitForReboot();
+                res.json( data.statusdefinition ); 
+            });
+            devServer.app.get('/commands.json', function(req, res) { 
+                waitForReboot();
                 if(data.status.recovery==1 && (data.status.mock_old_recovery??'')!==''){
                     console.log('Mocking old recovery, with no commands backend' );
                     res.status(404).end(); 
@@ -200,7 +273,8 @@ module.exports ={
                 }
                 
             });
-            app.post('/commands.json', function(req, res) { 
+            devServer.app.post('/commands.json', function(req, res) { 
+                waitForReboot();
                 if(data.status.recovery==1 && (data.status.mock_old_recovery??'')!==''){
                     console.log('Mocking old recovery, with no commands backend' );
                     res.status(404).end(); 
@@ -226,7 +300,8 @@ module.exports ={
                 }
                 res.json( { 'Result' : 'Success' } ); 
             });
-            app.post('/config.json', function(req, res) { 
+            devServer.app.post('/config.json', function(req, res) { 
+                waitForReboot();
                 var fwurl='';
                 console.log(`Processing config.json with request body: ${req.body}`);
                 console.log(data.config.config);
@@ -260,6 +335,7 @@ module.exports ={
                         }
                         
                     }
+                    
                     var targetQueue='message_queue_sequence';
                     var targetPostEmpty='message_queue_sequence_post_empty';
                     if((data.status.mock_old_recovery??'')!==''){
@@ -275,8 +351,8 @@ module.exports ={
                     }
                 }
             });
-            app.post('/status.json', function(req, res) { 
-
+            devServer.app.post('/status.json', function(req, res) { 
+                waitForReboot();
                 for (const property in req.body.status) {
                     if(data.status[property]=== undefined){
                         console.log(`Added status value ${property} [${req.body.status[property]}]`);
@@ -289,7 +365,8 @@ module.exports ={
                 }
                 res.json( {"result" : "OK" } ); 
             });            
-            app.post('/connect.json', function(req, res) { 
+            devServer.app.post('/connect.json', function(req, res) { 
+                waitForReboot();
                 setTimeout(function(r){
                 if(r.body.ssid.search('fail')>=0){
                     if(data.status.ssid){
@@ -307,27 +384,33 @@ module.exports ={
                 }, 1000, req);
                 res.json( {"result" : "OK" } );
              });
-            app.post('/reboot_ota.json', function(req, res) { 
+            devServer.app.post('/reboot_ota.json', function(req, res) { 
+                waitForReboot();
                 data.status.recovery=0;
                 requeueMessages();
+                rebooting();
                 res.json( {"result" : "OK" } ); 
             });
-            app.post('/reboot.json', function(req, res) { 
+            devServer.app.post('/reboot.json', function(req, res) { 
+                waitForReboot();
                 res.json( {"result" : "OK" } ); 
+                rebooting();
                 requeueMessages();
             });
-            app.post('/recovery.json', function(req, res) { 
+            devServer.app.post('/recovery.json', function(req, res) { 
+                waitForReboot();
                 if((data.status.mock_fail_recovery ?? '')!==''){
                     res.status(404).end(); 
                 }
                 else {
                     data.status.recovery=1;
                     requeueMessages();
+                    rebooting();
                     res.json( {"result" : "OK" } ); 
                 }                
             });
-            app.post('/flash.json', function(req, res) { 
-                
+            devServer.app.post('/flash.json', function(req, res) { 
+                waitForReboot();
                 if(data.status.recovery>0){
                     if((data.status.mock_fail_fw_update ?? '')!=='' || (data.status.mock_old_recovery??'')!==''){
                         console.log('Old recovery mock, or fw fail requested' );
@@ -338,8 +421,8 @@ module.exports ={
                         data.message_queue_sequence.push(...data.messages_ota_flash);
                         data.message_queue_sequence_post_empty = function(){
                             data.status.recovery=0;
+                            rebooting();
                             requeueMessages();
-                            
                         }   
                         res.json({"result" : "OK" });                  
                     }
@@ -349,10 +432,13 @@ module.exports ={
                     res.status(404).end(); 
                 }  
             });                  
-            app.delete('/connect.json', function(req, res) { 
+            devServer.app.delete('/connect.json', function(req, res) { 
+                waitForReboot();
                 data.status.ssid='';
                 res.json({"result" : "OK" }); });
-            app.get('/reboot', function(req, res) { res.json({"result" : "OK" }); });
+            devServer.app.get('/reboot', function(req, res) {
+                waitForReboot();
+                res.json({"result" : "OK" }); });
         },
     },
     plugins: [
@@ -360,7 +446,7 @@ module.exports ={
         new HtmlWebPackPlugin({
             title: 'SqueezeESP32-test',
             template: './src/test.ejs',
-            filename: 'test',
+            filename: 'test.html',
             minify: false,
             inject: 'body',
             excludeChunks: ['index','main'],

docker/entrypoint.sh

@@ -2,5 +2,8 @@
 set -e
 
 . $IDF_PATH/export.sh
-
+echo "npm version is $(npm --version)"
+echo "node version is $(node --version)"
+echo "To build the web application, run:"
+echo "pushd components/wifi-manager/webapp/ && npm rebuild node-sass && npm run-script build && popd"
 exec "$@"

sdkconfig

@@ -548,7 +548,8 @@ CONFIG_ESP_TLS_USING_MBEDTLS=y
 # CONFIG_ESP_TLS_USE_SECURE_ELEMENT is not set
 # CONFIG_ESP_TLS_SERVER is not set
 # CONFIG_ESP_TLS_PSK_VERIFICATION is not set
-# CONFIG_ESP_TLS_INSECURE is not set
+CONFIG_ESP_TLS_INSECURE=y
+CONFIG_ESP_TLS_SKIP_SERVER_CERT_VERIFY=y
 # end of ESP-TLS
 
 #
@@ -742,7 +743,7 @@ CONFIG_ESP_EVENT_POST_FROM_IRAM_ISR=y
 #
 # ESP HTTP client
 #
-# CONFIG_ESP_HTTP_CLIENT_ENABLE_HTTPS is not set
+CONFIG_ESP_HTTP_CLIENT_ENABLE_HTTPS=y
 # CONFIG_ESP_HTTP_CLIENT_ENABLE_BASIC_AUTH is not set
 # end of ESP HTTP client