firmware WIP - html css stuff :)

Arduino/CanGrow/CanGrow.ino

@@ -62,7 +62,8 @@ IPAddress WIFIip(192,168,4,20);
 IPAddress WIFInetmask(255,255,255,0);
 IPAddress WIFIgateway(192,168,4,254);
 IPAddress WIFIdns(0,0,0,0);
-
+char WebUiUsername[16] = "cangrow";
+char WebUiPassword[32] = "cangrow";
 //
 // Grow Stuff
 //
@@ -157,10 +158,12 @@ const char HTMLheader[] PROGMEM = R"EOF(
 	<li><a href="#">Menu item 3</a></li>
 	<li><a href="#">Menu item 4</a></li>
   </ul>
+  <div class="center">
   
 )EOF";
 
 const char HTMLfooter[] PROGMEM = R"EOF(
+  </div>
   </body>
 </html>
 )EOF";
@@ -172,6 +175,12 @@ body {
   font-family: helvetica;
 }
 
+.center {
+  width: 60%; min-width: 200px; 
+  margin: auto;
+  
+} 
+
 a:link, a:visited {
   color: #04AA6D;
 }
@@ -184,36 +193,55 @@ a:active {
   color: #04AA6D;
 }
 
+.infomsg {
+  background: #04AA6D;
+  color: #fff;
+  border-radius: 3px;
+  padding: 4px;
+  width: fit-content; min-width: 200px; max-width: 420px;
+  margin: auto;
+  font-weight: bold;
+  text-align: center;
+  text-decoration: none;
+  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.5);
+}
+
 /* from https://gist.github.com/iamhelenliu/5755179 - thank you! */
 .nav {
   background: #333;
-  margin:0;
+  width: 60%; min-width: 200px; 
-	padding: 0;
+  margin: auto;
+  margin-bottom: 10px;
+  padding: 0;
   position: relative;
+  border-radius: 3px;
 }
+
 .nav li {
-	display: inline-block;
+  display: inline-block;
-	list-style: none;
+  list-style: none;
-	margin:0;
 }
+
 .nav li a {
-	color: #ddd;
+  color: #ddd;
-	display: block;
+  display: block;
-	font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
+  font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
-	font-size:0.8em;
+  font-size:0.8em;
-	padding: 10px 20px;
+  padding: 10px 20px;
-	text-decoration: none;
+  text-decoration: none;
-	text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.5);
+  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.5);
 }
 .nav li a:hover {
-	background: #04AA6D;
+  background: #04AA6D;
-	color: #fff;
+  color: #fff;
 }
 
 .nav li a:active {
-	color: #cae0d0;
+  color: #cae0d0;
 }
 
+
+
 )EOF";
 
 /*
@@ -535,7 +563,7 @@ bool loadEEPROM() {
   // when configured is > 1 (it should == 1) then read EEPROM furher data
   if(configured > 0) {
     /*
-     * WIFI data
+     * WIFI settings
      */
    
     // read var WIFIssid from address 0, 32 byte long  
@@ -553,8 +581,16 @@ bool loadEEPROM() {
     // read var WIFIuseDHCP from Address 510, 1 byte long
     EEPROM.get(510, WIFIuseDHCP);
     
+    
     /*
-     * Grow data
+     * System settings
+     */
+     
+    EEPROM.get(160, WebUiUsername);
+    EEPROM.get(176, WebUiPassword); 
+    
+    /*
+     * Grow settings
      */
     
     //TBD
@@ -611,6 +647,7 @@ void wifiAp() {
     Serial.println(APssid);
     Serial.print("CanGrow IP address: ");
     Serial.println(WiFi.softAPIP());
+    Serial.println("The login credentials for the WebUI are 'cangrow' for username and password");
 }
 
 /*
@@ -761,7 +798,13 @@ void WebHandler_general() {
   webserver.on("/wifiConfig", HTTP_GET, WEBwifiConfig);
   webserver.on("/wifiConfig/save", HTTP_POST, POSTwifiConfig);
   webserver.on("/style.css", HTTP_GET, WEBstyleCSS);
+  
+  webserver.on("/logout", [](){ webserver.send(401, "text/html", "logged out!"); });
+  
   // 404 handling
+  // favicon.ico is a special one, because its requested everytime and i dont wont to deliver the
+  // failed whole page every call. we can save up this 0,5kb traffic :o) 
+  webserver.on("/favicon.ico", [](){ webserver.send(404, "text/html", "404 - not found"); });
   webserver.onNotFound(WEB404);
 }
 
@@ -782,6 +825,36 @@ void WebHandler_configured() {
    */
   webserver.on("/", HTTP_GET, WEBroot);
 }
+
+void WebAuth() {
+  /*
+   * TODO
+   * DOES NOT WORK WHEN CONNECTED TO EXISTING WIFI
+   * IDK WHY
+   * 
+   */
+  char webAuthRealm[] = "CanGrowRealm";
+  if(!webserver.authenticate(WebUiUsername, WebUiPassword)) {
+    String body = FPSTR(HTMLheader);
+    body += "<h1>Login failed.</h1>";
+    body += FPSTR(HTMLfooter);
+    webserver.requestAuthentication(DIGEST_AUTH, webAuthRealm, body);
+  }
+}
+
+void WebAuthApi() {
+  /*
+   * TODO
+   * DOES NOT WORK WHEN CONNECTED TO EXISTING WIFI
+   * IDK WHY
+   * 
+   */
+  char webAuthRealm[] = "CanGrowRealm";
+  if(!webserver.authenticate(WebUiUsername, WebUiPassword)) {
+    webserver.requestAuthentication(DIGEST_AUTH, webAuthRealm);
+  }
+}
+
   
 /*
  * 
@@ -796,9 +869,18 @@ void WEBstyleCSS() {
 
 void WEB404() {
   String body = FPSTR(HTMLheader);
-  body += "404 - not found";
+  body += "<h1>404 - not found</h1>";
   body += FPSTR(HTMLfooter);
-  webserver.send(200, "text/html", body);
+  webserver.send(404, "text/html", body);
+}
+
+void WEBlogout() {
+  String body = FPSTR(HTMLheader);
+  body += "<h1>you are logged out.</h1>";
+  body += FPSTR(HTMLfooter);
+  
+  // TODO does not work atm
+  webserver.send(401, "text/html", body);  
 }
 
 
@@ -810,9 +892,13 @@ void WEBwifiConfig() {
   byte ssidsAvail = WiFi.scanNetworks();
   String body = FPSTR(HTMLheader);
   body += "<h1>WiFi config</h1>\n";
+  if(webserver.hasArg("success")) {
+    body += "<div class='infomsg'>Successfully saved!</div>";
+  }
   body += "<p>Select your wifi network from the SSID list.<br>To use DHCP leave IP, Subnet, Gateway and DNS fields blank!</p>";
   body += "<form method='post' action='/wifiConfig/save'>\n";
-  body += "SSID: <select id='WIFIssid' name='WIFIssid'>\n";
+  body += "SSID: <select id='WIFIssid' name='WIFIssid' required>\n";
+  body += "<option disabled value='' selected hidden>-Select your network-</option>";
   // build option list for selecting wifi
   Serial.println("Available Wifis: ");
   for(int i = 0 ; i < ssidsAvail; i++) {
@@ -838,7 +924,6 @@ void WEBwifiConfig() {
 } 
 
 void WEBroot() {
-  
   String body = FPSTR(HTMLheader);
   body += "<h1>configured!</h1>";
   body += "<p>";
@@ -850,10 +935,12 @@ void WEBroot() {
 }  
 
 void WEBrootUnconfigured() {
-  
   String body = FPSTR(HTMLheader);
   body += "<h1>CanGrow</h1>";
-  body += "<p>CanGrow is actually unconfigured. <a href='./wifiConfig'>Configure WiFi</a></p>";
+  body += "<p>CanGrow is actually unconfigured. You need to <a href='./wifiConfig'>Configure WiFi</a>.<br>";
+  body += "<br>After you configured the WiFi connection successfully, you can start your grow &#129382;";
+  body += "<br>";
+  body += "</p>";
   body += FPSTR(HTMLfooter);
   
   webserver.send(200, "text/html", body);