Browse Source

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

master
Skylar Ittner 4 years ago
parent
commit
6cdc9acb6a
  1. 120
      assets/img/no-connection-horizontal.svg
  2. 116
      assets/img/no-connection-vertical.svg
  3. 15
      index.html
  4. 10
      js/init.js
  5. 37
      js/settings.js
  6. 22
      js/setup.js
  7. 21
      pages/login.html
  8. 82
      pages/noconnection.html
  9. 47
      pages/setup.html

120
assets/img/no-connection-horizontal.svg
File diff suppressed because it is too large
View File

116
assets/img/no-connection-vertical.svg
File diff suppressed because it is too large
View File

15
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>
openScreen("login");
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>

10
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
});

37
js/settings.js

@ -5,9 +5,42 @@
*/
var accounthubapi = "http://localhost/accounthub/api.php";
var apikey = "123";
var accounthubapi = localStorage.getItem("apiurl");
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");
}

22
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";
});
});

21
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,28 +16,32 @@
</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>
</div>
<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>
</div>
</div>
<div class="tab-pane fade" id="mobilecode">
<div class="alert alert-info">Open the Business app on your phone, <br />then press the <i class="fas fa-desktop"></i> button to get a code.</div>
<div id="mobilecode_form">
@ -49,9 +53,8 @@
<button class="btn btn-primary" id="mobilecodeloginbtn">Log In</button>
</div>
</div>
<div class="tab-pane fade" id="userlist">
</div>
</div>
</div>
</div>

82
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>

47
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>
Loading…
Cancel
Save