From 3e8479981de6bd9085e2a46d84cf307fc98addf6 Mon Sep 17 00:00:00 2001
From: eMadman <emadman@gmail.com>
Date: Tue, 7 Nov 2023 22:20:08 -0500
Subject: [PATCH] html updates

reformatted wifi list - this should be refactored because I did a lazy solution, creating a table for every line.

Added line break for show password

fixed text alignment of ssid/password form
---
 data/HTML_testing_template.html | 49 ++++++++++++++++++++++-----------
 include/Builtin_Pages.h         | 16 +++++------
 src/HTTP_Server_Basic.cpp       |  3 +-
 3 files changed, 43 insertions(+), 25 deletions(-)

diff --git a/data/HTML_testing_template.html b/data/HTML_testing_template.html
index 8c455c87..6cb26727 100644
--- a/data/HTML_testing_template.html
+++ b/data/HTML_testing_template.html
@@ -399,7 +399,7 @@
             a {
                 color: #000;
                 font-weight: 700;
-                text-decoration: none
+                text-decoration: underline
             }
 
             a:hover {
@@ -423,29 +423,46 @@ <h1>
                 <strong>WiFi Setup</strong>
             </h1>
             <div class='wrap'>
-                <div>
-                    <a href='#p' onclick='c(this)' data-ssid='NetwalkerLair'>NetwalkerLair</a>
-                    <div role='img' aria-label='86%' title='86%' class='q q-3 l {h}'></div>
-                    <div class='q {h}'>86%</div>
-                </div>
-                <div>
+                <table align="center">
+                <tr>
+                    <td><div>
+                        <a href='#p' onclick='c(this)' data-ssid='NetwalkerLair'>NetwalkerLair</a>
+                        <div role='img' aria-label='86%' title='86%' class='q q-3 l {h}'></div>
+                        <div class='q {h}'>86%</div>
+                    </div></td>
+                </tr>
+                <tr><td><div>
                     <a href='#p' onclick='c(this)' data-ssid='danger55-plus'>danger55-plus</a>
                     <div role='img' aria-label='34%' title='34%' class='q q-2 l {h}'></div>
                     <div class='q {h}'>34%</div>
-                </div>
-                <div>
+                </div></td>
+                </tr>
+                <tr><td><div>
                     <a href='#p' onclick='c(this)' data-ssid='Emily'>Emily</a>
                     <div role='img' aria-label='18%' title='18%' class='q q-1 l {h}'></div>
                     <div class='q {h}'>18%</div>
-                </div>
+                </div></td>
+                </tr>
+                </table>
                 <br/>
                 <form method='POST' action='send_settings'>
-                    <label for='ssid'>SSID</label>
-                    <input id='ssid' name='ssid' maxlength='32' autocorrect='off' autocapitalize='none' placeholder='NetwalkerLair'>
-                    <br/>
-                    <label for='password'>Password</label>
-                    <input id='password' name='password' maxlength='64' type='password' placeholder='password'>
-                    <input type='checkbox' onclick='f()'>
+                <table align="center">
+                    <tr>
+                        <td align="right">
+                            <label for='ssid'>SSID</label>
+                        </td>
+                        <td><input id='ssid' name='ssid' maxlength='32' autocorrect='off' autocapitalize='none' placeholder='NetwalkerLair'></td>
+                    </tr>
+                    <tr>
+                        <td align="right">
+                            <label for='password'>Password</label>
+                        </td>
+                        <td>
+                            <input id='password' name='password' maxlength='64' type='password' placeholder='password'>
+                        </td>
+                    </tr>
+                </table>
+                    <br/><input type='checkbox' onclick='f()'>
                     Show Password<br/>
                     <br/>
                     <br/>
diff --git a/include/Builtin_Pages.h b/include/Builtin_Pages.h
index 6d869950..a32d71f7 100644
--- a/include/Builtin_Pages.h
+++ b/include/Builtin_Pages.h
@@ -18,7 +18,7 @@ const char HTTP_STYLE[] =
     "label {font-size: medium;}"
     "div {font-size: medium;}"
     "a{color: #000000;text-decoration:underline}"
-    "a:visited {color: #000000;}"
+    "a:visited {color: #000000;text-decoration:underline}"
     "h1{color: #03245c;padding: 0.5rem;line-height: 1em;}"
     "h2{color: #000000;font-size: 1.5rem;font-weight: bold;}"
     "p{font-size: 1rem;}"
@@ -199,7 +199,7 @@ const char HTTP_STYLE[] =
     "button.D{background-color:#dc3630}"
     "button:active{opacity:50% !important;cursor:wait;transition-delay: 0s}"
     // links
-    "a{color:#000;font-weight:700;text-decoration:none}a:hover{color:#1fa3ec;text-decoration:underline}"
+    "a{color:#000;font-weight:700;text-decoration:underline}a:hover{color:#1fa3ec;text-decoration:underline}"
     "</style>";
 
 /* Login page */
@@ -307,16 +307,16 @@ const char* const HTTP_PORTAL_MENU[] = {
 
 // const char HTTP_PORTAL_OPTIONS[]    = strcat(HTTP_PORTAL_MENU[0] , HTTP_PORTAL_MENU[3] , HTTP_PORTAL_MENU[7]);
 const char HTTP_PORTAL_OPTIONS[] = "";
-const char HTTP_ITEM_QI[]        = "<div role='img' aria-label='{r}%' title='{r}%' class='q q-{q} {i} {h}'></div>";  // rssi icons
-const char HTTP_ITEM_QP[]        = "<div class='q {h}'>{r}%</div>";                                                  // rssi percentage {h} = hidden showperc pref
-const char HTTP_ITEM[]           = "<div><a href='#p' onclick='c(this)' data-ssid='{V}'>{v}</a>{qi}{qp}</div>";      // {q} = HTTP_ITEM_QI, {r} = HTTP_ITEM_QP
+const char HTTP_ITEM_QI[]        = "<div role='img' aria-label='{r}%' title='{r}%' class='q q-{q} {i} {h}'></div></td></tr></table>";  // rssi icons
+// const char HTTP_ITEM_QP[]        = "<div class='q {h}'>{r}%</div>";                                                  // rssi percentage {h} = hidden showperc pref
+const char HTTP_ITEM[]           = "<table align=center><tr><td><div><a href='#p' onclick='c(this)' data-ssid='{V}'>{v}</a>{qi}</div>";      // {q} = HTTP_ITEM_QI, {r} = HTTP_ITEM_QP
 // const char HTTP_ITEM[]             = "<div><a href='#p' onclick='c(this)'>{v}</a> {R} {r}% {q} {e}</div>"; // test all tokens
 
 const char HTTP_FORM_START[] = "<form method='POST' action='{v}'>";
 const char HTTP_FORM_WIFI[] =
-    "<label for='ssid'>SSID</label><input id='ssid' name='ssid' maxlength='32' autocorrect='off' autocapitalize='none' placeholder='{v}'><br/><label "
-    "for='password'>Password</label><input id='password' "
-    "name='password' maxlength='64' type='password' placeholder='password'><input type='checkbox' onclick='f()'> Show Password";
+    "<table align=center><tr><td align=right><label for='ssid'>SSID</label></td><td><input id='ssid' name='ssid' maxlength='32' autocorrect='off' autocapitalize='none' placeholder='{v}'></td><tr><td align=right><label "
+    "for='password'>Password</label></td><td><input id='password' "
+    "name='password' maxlength='64' type='password' placeholder='password'></td></tr></table><br/><input type='checkbox' onclick='f()'> Show Password";
 const char HTTP_FORM_WIFI_END[]    = "";
 const char HTTP_FORM_STATIC_HEAD[] = "<hr><br/>";
 const char HTTP_FORM_END[]         = "<br/><br/><button type='submit'>Save</button></form>";
diff --git a/src/HTTP_Server_Basic.cpp b/src/HTTP_Server_Basic.cpp
index 571fa3ef..884b1574 100644
--- a/src/HTTP_Server_Basic.cpp
+++ b/src/HTTP_Server_Basic.cpp
@@ -605,11 +605,12 @@ String getScanItemOut() {
       }
     }
 
+    
     // token precheck, to speed up replacements on large ap lists
     String HTTP_ITEM_STR = FPSTR(HTTP_ITEM);
 
     // toggle icons with percentage
-    HTTP_ITEM_STR.replace("{qp}", FPSTR(HTTP_ITEM_QP));
+    // HTTP_ITEM_STR.replace("{qp}", FPSTR(HTTP_ITEM_QP));
     HTTP_ITEM_STR.replace("{qi}", FPSTR(HTTP_ITEM_QI));
 
     // set token precheck flags