Add setup/configuration tool, add "no connection" UI and handling

index.html

@@ -30,9 +30,22 @@ file, You can obtain one at http://mozilla.org/MPL/2.0/.
 <script src="assets/js/popper.min.js"></script>
 <script src="assets/js/bootstrap.min.js"></script>
 <script src="assets/js/fontawesome-all.min.js"></script>
+<script src="js/init.js"></script>
 <script src="js/functions.js"></script>
 <script src="js/settings.js"></script>
 <script src="js/session.js"></script>
 <script>
+    validateSettings(function (resp) {
+        if (resp === true) {
             openScreen("login");
+        } else if (resp === false) {
+            openScreen("noconnection");
+        } else {
+            openScreen("setup");
+        }
+    });
+
+    if (kioskmode == "true") {
+        nw.Window.get().enterKioskMode();
+    }
 </script>

js/init.js

@@ -0,0 +1,10 @@
+/* 
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/.
+ */
+
+
+$.ajaxSetup({
+    timeout: 10000
+});

js/settings.js

@@ -5,9 +5,42 @@
  */
 
 
-var accounthubapi = "http://localhost/accounthub/api.php";
+var accounthubapi = localStorage.getItem("apiurl");
-var apikey = "123";
+var apikey = localStorage.getItem("apikey");
+var kioskmode = localStorage.getItem("kioskmode");
+var largebtns = localStorage.getItem("largebtns");
 
 function getAPIKey() {
     return apikey;
 }
+
+/**
+ * Validate the connection settings.  Callback will be run with `true` an error message, or `false` for a connection failure.
+ * @param function callback(resp) a function to receive whether or not the settings are valid.
+ * @returns {undefined}
+ */
+function validateSettings(callback) {
+    $.post(accounthubapi, {
+        key: apikey,
+        action: "ping"
+    }, function (resp) {
+        if (resp.status == "OK") {
+            callback(true);
+        } else {
+            callback(resp.msg);
+        }
+    }, "json").fail(function (data) {
+        if (data.readyState == 4) {
+            callback(data.statusText);
+        } else {
+            callback(false);
+        }
+    });
+}
+
+function reloadSettings() {
+    accounthubapi = localStorage.getItem("apiurl");
+    apikey = localStorage.getItem("apikey");
+    kioskmode = localStorage.getItem("kioskmode");
+    largebtns = localStorage.getItem("largebtns");
+}

js/setup.js

@@ -0,0 +1,22 @@
+/* 
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/.
+ */
+
+
+$("#settings_form").submit(function (event) {
+    event.preventDefault();
+    localStorage.setItem("apiurl", $("#url").val());
+    localStorage.setItem("apikey", $("#key").val());
+    localStorage.setItem("kioskmode", $("#kioskmode").is(":checked") ? true : null);
+    localStorage.setItem("largebtns", $("#largebtns").is(":checked") ? true : null);
+    reloadSettings();
+    validateSettings(function (resp) {
+        if (resp !== true) {
+            showmsg("Error", "danger", "Something is wrong.  Check the settings you entered.");
+            return;
+        }
+        document.location.href = "index.html";
+    });
+});

pages/login.html

@@ -3,7 +3,7 @@
         <div class="col-12 col-sm-10 col-md-8 col-lg-6">
             <div class="card" style="width: 100%;">
                 <h3 class="card-header"><i class="fas fa-lock"></i> Login</h3>
-                <ul class="nav nav-tabs">
+                <ul class="nav nav-tabs justify-content-center">
                     <li class="nav-item">
                         <a class="nav-link active" data-toggle="tab" href="#userlist">Quick Access</a>
                     </li>
@@ -16,6 +16,8 @@
                 </ul>
                 <div class="card-body">
                     <div class="tab-content">
+                        
+                        
                         <div class="tab-pane fade active show" id="userlist">
                             <div class="row justify-content-around">
                             </div>
@@ -24,13 +26,15 @@
 
                         <div class="tab-pane fade" id="userpass">
                             <div id="userpass_form">
+                                <input style="display:none" type="text" name="fakeusernameremembered"/>
+                                <input style="display:none" type="password" name="fakepasswordremembered"/>
                                 <div class="input-group">
                                     <span class="input-group-addon"><i class="far fa-user"></i></span>
                                     <input type="text" class="form-control" id="username" placeholder="Username" />
                                 </div>
                                 <div class="input-group">
                                     <span class="input-group-addon"><i class="fas fa-key"></i></span>
-                                    <input type="password" class="form-control" id="password" placeholder="Password" />
+                                    <input type="text" style="-webkit-text-security: disc;" class="form-control" id="password" placeholder="Password" />
                                 </div>
                                 <br />
                                 <button class="btn btn-primary" id="userpassloginbtn">Log In</button>
@@ -49,7 +53,7 @@
                                 <button class="btn btn-primary" id="mobilecodeloginbtn">Log In</button>
                             </div>
                         </div>
-                        <div class="tab-pane fade" id="userlist">
+                        
                         
                     </div>
                 </div>
@@ -57,5 +61,4 @@
         </div>
     </div>
 </div>
-</div>
 <script src="js/login.js"></script>

pages/noconnection.html

@@ -0,0 +1,82 @@
+<!--
+This Source Code Form is subject to the terms of the Mozilla Public
+License, v. 2.0. If a copy of the MPL was not distributed with this
+file, You can obtain one at http://mozilla.org/MPL/2.0/.
+-->
+<style>
+    .noconnection {
+        position: fixed;
+        left: 50%;
+        top: 50%;
+        transform: translate(-50%, -50%);
+        max-width: 60vw;
+        max-height: 50vh;
+        z-index: 0;
+    }
+
+    #text {
+        z-index: 100;
+        position: fixed;
+        left: 50%;
+        top: 50%;
+        transform: translate(-50%, -50%);
+        background-color: rgba(240,240,240,.7);
+        padding: 10px;
+        text-align: center;
+    }
+
+    #text p {
+        font-size: 110%;
+    }
+
+    #noconnection-horiz {
+        display: none;
+    }
+    #noconnection-vert {
+        display: block;
+    }
+    @media (orientation: landscape) {
+        #noconnection-horiz {
+            display: block;
+        }
+
+        #noconnection-vert {
+            display: none;
+        }
+
+        #text {
+            max-width: 20vw;
+        }
+    }
+
+    @media (min-width: 1200px) and (orientation: landscape) {
+        #noconnection-horiz {
+            max-width: 40vw;
+        }
+        #text {
+            max-width: 15vw;
+        }
+    }
+    
+    @media (min-width: 2100px) and (orientation: landscape) {
+        #noconnection-horiz {
+            max-width: 35vw;
+        }
+        #text {
+            max-width: 20vw;
+        }
+    }
+    
+    @media (min-height: 800px) and (orientation: portrait) {
+        #text {
+            max-height: 25vw;
+        }
+    }
+</style>
+<img src="assets/img/no-connection-horizontal.svg" id="noconnection-horiz" class="noconnection" />
+<img src="assets/img/no-connection-vertical.svg" id="noconnection-vert" class="noconnection" />
+<div id="text">
+    <h2>No connection</h2>
+    <p>Could not communicate with the server.</p>
+    <a href="index.html" class="btn btn-lg btn-primary">Try again</a>
+</div>

pages/setup.html

@@ -0,0 +1,47 @@
+<!--
+This Source Code Form is subject to the terms of the Mozilla Public
+License, v. 2.0. If a copy of the MPL was not distributed with this
+file, You can obtain one at http://mozilla.org/MPL/2.0/.
+-->
+<div class="container">
+    <div class="row justify-content-center align-items-center">
+        <div class="col-12 col-sm-10 col-md-8 col-lg-6">
+            <div class="card">
+                <h3 class="card-header">
+                    <i class="fas fa-cog"></i> Settings
+                </h3>
+                <div class="card-body">
+                    <div class="alert alert-info">
+                        The connection settings are invalid.  Please set them.
+                    </div>
+                    <form id="settings_form">
+                        <div class="input-group">
+                            <span class="input-group-addon"><i class="fas fa-server"></i></span>
+                            <input type="text" class="form-control" id="url" placeholder="AccountHub API URL" />
+                        </div>
+                        <div class="input-group">
+                            <span class="input-group-addon"><i class="fas fa-key"></i></span>
+                            <input type="text" class="form-control" id="key" placeholder="API Key" />
+                        </div>
+                        <br />
+                        <div class="form-check">
+                            <label class="form-check-label">
+                                <input class="form-check-input" value="1" type="checkbox" id="kioskmode">
+                                Kiosk mode (run in fullscreen)
+                            </label>
+                        </div>
+                        <div class="form-check">
+                            <label class="form-check-label">
+                                <input class="form-check-input" value="1" type="checkbox" id="largebtns">
+                                Use larger buttons if available
+                            </label>
+                        </div>
+                        <br />
+                        <button type="submit" class="btn btn-primary" id="settings_save">Save Settings</button>
+                    </form>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+<script src="js/setup.js"></script>