Fix setup screen to work with Bootstrap 4.0

package.json

@@ -2,7 +2,7 @@
     "name": "netsyms-business-station",
     "main": "main.js",
     "description": "A kiosk app for easy, fast access to core Business Apps features.",
-    "version": "1.1.0",
+    "version": "1.2.1",
     "license": "MPL-2.0",
     "author": "Netsyms Technologies",
     "contributors": [],

www/assets/css/other.css

@@ -56,6 +56,14 @@ file, You can obtain one at http://mozilla.org/MPL/2.0/.
     font-size: 200%;
 }
 
+.btn-bin {
+    display: flex;
+    flex-wrap: wrap;
+}
+
+.bin-btn {
+    margin: 5px 5px;
+}
 
 .btn-red, .btn-red:hover, .btn-red:active, .btn-red:focus {
     background-color: #f44336;

www/assets/js/jdenticon.min.js

@@ -0,0 +1,38 @@
+// Jdenticon 1.8.0 | jdenticon.com | zlib licensed | (c) 2014-2017 Daniel Mester Pirttijärvi
+/*
+Jdenticon
+Copyright (c) 2014 - {year} Daniel Mester Pirttijärvi
+
+This software is provided 'as-is', without any express or implied
+warranty.  In no event will the authors be held liable for any damages
+arising from the use of this software.
+
+Permission is granted to anyone to use this software for any purpose,
+including commercial applications, and to alter it and redistribute it
+freely, subject to the following restrictions:
+
+1. The origin of this software must not be misrepresented; you must not
+   claim that you wrote the original software. If you use this software
+   in a product, an acknowledgment in the product documentation would be
+   appreciated but is not required.
+
+2. Altered source versions must be plainly marked as such, and must not be
+   misrepresented as being the original software.
+
+3. This notice may not be removed or altered from any source distribution.
+ */
+(function(r,v,w){var m=w(r,r.jQuery);"undefined"!==typeof module&&"exports"in module?module.exports=m:"function"===typeof define&&define.amd?define([],function(){return m}):r[v]=m})(this,"jdenticon",function(r,v){function w(a){this.size=Math.min(Number(a.getAttribute("width"))||100,Number(a.getAttribute("height"))||100);for(this.K=a;a.firstChild;)a.removeChild(a.firstChild);a.setAttribute("viewBox","0 0 "+this.size+" "+this.size);a.setAttribute("preserveAspectRatio","xMidYMid meet")}function m(a){this.size=
+a;this.l='<svg xmlns="http://www.w3.org/2000/svg" width="'+a+'" height="'+a+'" viewBox="0 0 '+a+" "+a+'" preserveAspectRatio="xMidYMid meet">'}function L(a){return function(b){for(var a=[],d=0;d<b.length;d++)for(var f=b[d],e=28;0<=e;e-=4)a.push((f>>>e&15).toString(16));return a.join("")}(function(b){for(var a=1732584193,d=4023233417,f=2562383102,e=271733878,l=3285377520,h=[a,d,f,e,l],k=0;k<b.length;k++){for(var q=b[k],g=16;80>g;g++){var x=q[g-3]^q[g-8]^q[g-14]^q[g-16];q[g]=x<<1|x>>>31}for(g=0;80>
+g;g++)x=(a<<5|a>>>27)+(20>g?(d&f^~d&e)+1518500249:40>g?(d^f^e)+1859775393:60>g?(d&f^d&e^f&e)+2400959708:(d^f^e)+3395469782)+l+q[g],l=e,e=f,f=d<<30|d>>>2,d=a,a=x|0;h[0]=a=h[0]+a|0;h[1]=d=h[1]+d|0;h[2]=f=h[2]+f|0;h[3]=e=h[3]+e|0;h[4]=l=h[4]+l|0}return h}(function(a){function b(a,b){for(var c=[],d=-1,e=0;e<b;e++)d=e/4|0,c[d]=(c[d]||0)+(f[a+e]<<8*(3-(e&3)));for(;16>++d;)c[d]=0;return c}var d=encodeURI(a),f=[];a=0;var e,l=[];for(e=0;e<d.length;e++){if("%"==d[e]){var h=parseInt(d.substr(e+1,2),16);e+=2}else h=
+d.charCodeAt(e);f[a++]=h}f[a++]=128;for(e=0;e+64<=a;e+=64)l.push(b(e,64));d=a-e;e=b(e,d);64<d+8&&(l.push(e),e=b(0,0));e[15]=8*a-8;l.push(e);return l}(a)))}function C(a,b){var c=a.canvas.width,d=a.canvas.height;a.save();this.f=a;b?this.size=b:(this.size=Math.min(c,d),a.translate((c-this.size)/2|0,(d-this.size)/2|0));a.clearRect(0,0,this.size,this.size)}function k(a){return(10*a+.5|0)/10}function I(){this.h=""}function D(a){this.i={};this.L=a;this.size=a.size}function J(a){this.B=a;this.m=t.N}function y(a,
+b){this.x=a;this.y=b}function t(a,b,c,d){this.o=a;this.s=b;this.C=c;this.j=d}function u(a){a|=0;return 0>a?"00":16>a?"0"+a.toString(16):256>a?a.toString(16):"ff"}function E(a,b,c){c=0>c?c+6:6<c?c-6:c;return u(255*(1>c?a+(b-a)*c:3>c?b:4>c?a+(b-a)*(4-c):a))}function M(a,b){return[n.w(0,0,b.H(0)),n.v(a,b.saturation,b.u(.5)),n.w(0,0,b.H(1)),n.v(a,b.saturation,b.u(1)),n.v(a,b.saturation,b.u(0))]}function F(a,b,c,d,f,e,l){function h(e,f,h,l,k){l=l?parseInt(b.charAt(l),16):0;f=f[parseInt(b.charAt(h),16)%
+f.length];a.F(p[m[e]]);for(e=0;e<k.length;e++)q.m=new t(c+k[e][0]*g,d+k[e][1]*g,g,l++%4),f(q,g,e);a.G()}function k(a){if(0<=a.indexOf(n))for(var b=0;b<a.length;b++)if(0<=m.indexOf(a[b]))return!0}e=f*(void 0===e?.08:e)|0;f-=2*e;var q=new J(a),g=0|f/4;c+=0|e+f/2-2*g;d+=0|e+f/2-2*g;var p=M(parseInt(b.substr(-7),16)/268435455,l),m=[];for(f=0;3>f;f++){var n=parseInt(b.charAt(8+f),16)%p.length;if(k([0,4])||k([2,3]))n=1;m.push(n)}h(0,G.I,2,3,[[1,0],[2,0],[2,3],[1,3],[0,1],[3,1],[3,2],[0,2]]);h(1,G.I,4,5,
+[[0,0],[3,0],[3,3],[0,3]]);h(2,G.M,1,null,[[1,1],[2,1],[2,2],[1,2]]);a.finish()}function H(){function a(a,b,e){var d=c[a]instanceof Array?c[a]:[b,e];return function(a){a=d[0]+a*(d[1]-d[0]);return 0>a?0:1<a?1:a}}var b=p.config||r.jdenticon_config||{},c=b.lightness||{};b=b.saturation;return{saturation:"number"==typeof b?b:.5,u:a("color",.4,.8),H:a("grayscale",.3,.9)}}function z(a){return/^[0-9a-f]{11,}$/i.test(a)&&a}function A(a){return L(null==a?"":""+a)}function B(a,b,c){if("string"===typeof a){if(K){a=
+document.querySelectorAll(a);for(var d=0;d<a.length;d++)B(a[d],b,c)}}else if(a&&a.tagName){d=/svg/i.test(a.tagName);var f=/canvas/i.test(a.tagName);if(d||f&&"getContext"in a)if(b=z(b)||b&&A(b)||z(a.getAttribute("data-jdenticon-hash"))||a.hasAttribute("data-jdenticon-value")&&A(a.getAttribute("data-jdenticon-value")))a=d?new D(new w(a)):new C(a.getContext("2d")),F(a,b,0,0,a.size,c,H())}}function p(){K&&B("[data-jdenticon-hash],[data-jdenticon-value]")}w.prototype={append:function(a,b){var c=document.createElementNS("http://www.w3.org/2000/svg",
+"path");c.setAttribute("fill",a);c.setAttribute("d",b);this.K.appendChild(c)}};m.prototype={append:function(a,b){this.l+='<path fill="'+a+'" d="'+b+'"/>'},toString:function(){return this.l+"</svg>"}};C.prototype={F:function(a){this.f.fillStyle=a;this.f.beginPath()},G:function(){this.f.fill()},a:function(a){var b=this.f,c;b.moveTo(a[0].x,a[0].y);for(c=1;c<a.length;c++)b.lineTo(a[c].x,a[c].y);b.closePath()},b:function(a,b,c){var d=this.f;b/=2;d.arc(a.x+b,a.y+b,b,0,2*Math.PI,c);d.closePath()},finish:function(){this.f.restore()}};
+var G={M:[function(a,b){var c=.42*b;a.a([0,0,b,0,b,b-2*c,b-c,b,0,b])},function(a,b){var c=0|.5*b;a.g(b-c,0,c,0|.8*b,2)},function(a,b){var c=0|b/3;a.c(c,c,b-c,b-c)},function(a,b){var c=.1*b;c=1<c?0|c:.5<c?1:c;var d=6>b?1:8>b?2:0|.25*b;a.c(d,d,b-c-d,b-c-d)},function(a,b){var c=0|.15*b,d=0|.5*b;a.b(b-d-c,b-d-c,d)},function(a,b){var c=.1*b,d=4*c;a.c(0,0,b,b);a.a([d,d,b-c,d,d+(b-d-c)/2,b-c],!0)},function(a,b){a.a([0,0,b,0,b,.7*b,.4*b,.4*b,.7*b,b,0,b])},function(a,b){a.g(b/2,b/2,b/2,b/2,3)},function(a,
+b){a.c(0,0,b,b/2);a.c(0,b/2,b/2,b/2);a.g(b/2,b/2,b/2,b/2,1)},function(a,b){var c=.14*b;c=8>b?c:0|c;var d=4>b?1:6>b?2:0|.35*b;a.c(0,0,b,b);a.c(d,d,b-d-c,b-d-c,!0)},function(a,b){var c=.12*b,d=3*c;a.c(0,0,b,b);a.b(d,d,b-c-d,!0)},function(a,b){a.g(b/2,b/2,b/2,b/2,3)},function(a,b){var c=.25*b;a.c(0,0,b,b);a.D(c,c,b-c,b-c,!0)},function(a,b,c){var d=.4*b;c||a.b(d,d,1.2*b)}],I:[function(a,b){a.g(0,0,b,b,0)},function(a,b){a.g(0,b/2,b,b/2,0)},function(a,b){a.D(0,0,b,b)},function(a,b){var c=b/6;a.b(c,c,b-
+2*c)}]};I.prototype={a:function(a){for(var b="M"+k(a[0].x)+" "+k(a[0].y),c=1;c<a.length;c++)b+="L"+k(a[c].x)+" "+k(a[c].y);this.h+=b+"Z"},b:function(a,b,c){c=c?0:1;var d=k(b/2),f=k(b);this.h+="M"+k(a.x)+" "+k(a.y+b/2)+"a"+d+","+d+" 0 1,"+c+" "+f+",0a"+d+","+d+" 0 1,"+c+" "+-f+",0"}};D.prototype={F:function(a){this.A=this.i[a]||(this.i[a]=new I)},G:function(){},a:function(a){this.A.a(a)},b:function(a,b,c){this.A.b(a,b,c)},finish:function(){for(var a in this.i)this.L.append(a,this.i[a].h)}};J.prototype=
+{a:function(a,b){var c=b?-2:2,d=this.m,f=[],e;for(e=b?a.length-2:0;e<a.length&&0<=e;e+=c)f.push(d.J(a[e],a[e+1]));this.B.a(f)},b:function(a,b,c,d){this.B.b(this.m.J(a,b,c,c),c,d)},c:function(a,b,c,d,f){this.a([a,b,a+c,b,a+c,b+d,a,b+d],f)},g:function(a,b,c,d,f,e){a=[a+c,b,a+c,b+d,a,b+d,a,b];a.splice((f||0)%4*2,2);this.a(a,e)},D:function(a,b,c,d,f){this.a([a+c/2,b,a+c,b+d/2,a+c/2,b+d,a,b+d/2],f)}};t.prototype={J:function(a,b,c,d){var f=this.o+this.C,e=this.s+this.C;return 1===this.j?new y(f-b-(d||0),
+this.s+a):2===this.j?new y(f-a-(c||0),e-b-(d||0)):3===this.j?new y(this.o+b,e-a-(c||0)):new y(this.o+a,this.s+b)}};t.N=new t(0,0,0,0);var n={O:function(a,b,c){return"#"+u(a)+u(b)+u(c)},w:function(a,b,c){if(0==b)return a=u(255*c),"#"+a+a+a;b=.5>=c?c*(b+1):c+b-c*b;c=2*c-b;return"#"+E(c,b,6*a+2)+E(c,b,6*a)+E(c,b,6*a-2)},v:function(a,b,c){var d=[.55,.5,.5,.46,.6,.55,.55][6*a+.5|0];return n.w(a,b,.5>c?c*d*2:d+(c-.5)*(1-d)*2)}},K="undefined"!==typeof document&&"querySelectorAll"in document;p.drawIcon=function(a,
+b,c){if(!a)throw Error("No canvas specified.");a=new C(a,c);F(a,z(b)||A(b),0,0,c,0,H())};p.toSvg=function(a,b,c){var d=new m(b);F(new D(d),z(a)||A(a),0,0,b,c,H());return d.toString()};p.update=B;p.version="1.8.0";v&&(v.fn.jdenticon=function(a,b){this.each(function(c,d){B(d,a,b)});return this});"function"===typeof setTimeout&&setTimeout(p,0);return p});

www/cards/js/qwikclock_jobs.js

@@ -28,7 +28,7 @@ function dispCurrent(card, current) {
 $(".card_qwikclock_jobs").each(function () {
     var card = $(this);
     $(this).find(".card_title").prepend("Jobs | ");
-    var btnbin = $(this).find(".job-btn-bin");
+    var btnbin = $(this).find(".btn-bin");
     var current = $(this).find(".current-job");
     var url = $(this).data("apiurl");
     $.post(url, {
@@ -40,9 +40,9 @@ $(".card_qwikclock_jobs").each(function () {
             var jobs = resp.jobs;
             if (jobs.length > 0) {
                 for (var job in jobs) {
-                    btnbin.append('<div class="btn job-btn btn-' + jobs[job]['color'] + '" data-jobid="' + jobs[job]['id'] + '">' + jobs[job]['name'] + '</div>');
+                    btnbin.append('<div class="btn bin-btn btn-' + jobs[job]['color'] + '" data-jobid="' + jobs[job]['id'] + '">' + jobs[job]['name'] + '</div>');
                 }
-                btnbin.append('<div class="btn job-btn btn-red" data-jobid="-1"><i class="fas fa-times"></i> None</div>');
+                btnbin.append('<div class="btn bin-btn btn-red" data-jobid="-1"><i class="fas fa-times"></i> None</div>');
             } else {
                 btnbin.html('<div class="alert alert-primary"><i class="fas fa-info-circle"></i> No jobs available.</div>');
             }
@@ -58,7 +58,7 @@ $(".card_qwikclock_jobs").each(function () {
     }, 2500);
 });
 
-$(".card_qwikclock_jobs").on("click", ".job-btn", function () {
+$(".card_qwikclock_jobs").on("click", ".bin-btn", function () {
     var parent = $(this).parents(".card_app");
     var current = parent.find(".current-job");
     var url = parent.data("apiurl");

www/cards/js/qwikclock_myshifts.js

@@ -1,4 +1,4 @@
-/* 
+/*
  * 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/.
@@ -18,7 +18,7 @@ $(".card_qwikclock_myshifts").each(function () {
 	if (resp.status == "OK") {
 	    var shifts = resp.shifts;
 	    if (shifts.length > 0) {
-		shifttable.html('<thead><tr><th>Shift</th><th><i class="fas fa-play d-sm-none d-lg-inline"></i> Start</th><th><i class="fas fa-stop d-sm-none d-lg-inline"></i> End</th><th><i class="far fa-calendar-alt d-sm-none d-lg-inline"></i> Days</th></tr></thead>');
+		shifttable.html('<thead><tr><th>Shift</th><th style="white-space: nowrap;"><i class="fas fa-play"></i> Start</th><th style="white-space: nowrap;"><i class="fas fa-stop"></i> End</th><th style="white-space: nowrap;"><i class="far fa-calendar-alt"></i> Days</th></tr></thead>');
 		shifttable.append("<tbody>");
 		for (var shift in shifts) {
 		    var days = "";

www/cards/js/taskfloor_viewtasks.js

@@ -5,31 +5,70 @@
  */
 
 
-$(".card_taskfloor_viewtasks").each(function () {
-    var card = $(this);
-    $(this).find(".card_title").prepend("Tasks | ");
-    var tasklist = $(this).find(".task-list");
-    var url = $(this).data("apiurl");
+function loadTaskCards() {
+    $(".card_taskfloor_viewtasks").each(function () {
+        var card = $(this);
+        if (!$(this).find(".card_title").text().startsWith("Tasks | ")) {
+            $(this).find(".card_title").prepend("Tasks | ");
+        }
+        var tasklist = $(this).find(".task-list");
+        var url = $(this).data("apiurl");
+        $.post(url, {
+            username: getuser(),
+            password: getAPIKey(),
+            action: "gettasks"
+        }, function (resp) {
+            if (resp.status == "OK") {
+                tasklist.html("");
+                var tasks = resp.tasks;
+                for (var i = 0; i < tasks.length; i++) {
+                    var taskhtml =
+                            '<div class="list-group-item task" data-taskid="' + tasks[i]['id'] + '">'
+                            + '<div class="d-flex w-100 justify-content-between">'
+                            + '<h5 class="mb-1"><i class="fas fa-' + tasks[i]['icon'] + ' fa-fw"></i> ' + tasks[i]['title'] + '</h5>'
+                            + '</div>'
+                            + '<p>' + tasks[i]['description'] + '</p>'
+                            + '<div class="btn-bin">';
+                    if (tasks[i]['status'] == "0") {
+                        taskhtml += '<div class="btn btn-primary status-btn bin-btn" data-status="start"><i class="fas fa-play"></i> Start</div>';
+                    } else if (tasks[i]['status'] == "1") {
+                        taskhtml += '<div class="btn btn-success status-btn bin-btn" data-status="finish"><i class="fas fa-stop"></i> Finish</div>';
+                        taskhtml += '<div class="btn btn-warning status-btn bin-btn" data-status="pause"><i class="fas fa-pause"></i> Pause</div>';
+                        taskhtml += '<div class="btn btn-danger status-btn bin-btn" data-status="problem"><i class="fas fa-exclamation"></i> Problem</div>';
+                    } else if (tasks[i]['status'] == "3" || tasks[i]['status'] == "4") {
+                        taskhtml += '<div class="btn btn-primary status-btn bin-btn" data-status="resume"><i class="fas fa-play"></i> Continue</div>';
+                    }
+
+                    taskhtml += '</div>\n</div>';
+                    tasklist.append(taskhtml);
+                }
+            } else {
+                showmsg(resp.msg, "danger");
+            }
+        }, "json").fail(function () {
+            card.css("display", "none");
+        });
+    });
+}
+
+loadTaskCards();
+
+$(".card_taskfloor_viewtasks").on("click", ".status-btn", function () {
+    var cardapp = $(this).parents(".card_app");
+    var taskitem = $(this).parents(".task");
+    var url = cardapp.data("apiurl");
     $.post(url, {
-	username: getuser(),
-	password: getAPIKey(),
-	action: "gettasks"
+        username: getuser(),
+        password: getAPIKey(),
+        action: "updatetask",
+        taskid: taskitem.data("taskid"),
+        status: $(this).data("status")
     }, function (resp) {
-	if (resp.status == "OK") {
-	    var tasks = resp.tasks;
-	    for (var i = 0; i < tasks.length; i++) {
-		tasklist.append(
-			'<div class="list-group-item">'
-			+ '<div class="d-flex w-100 justify-content-between">'
-			+ '<h5 class="mb-1"><i class="fas fa-' + tasks[i]['icon'] + ' fa-fw"></i> ' + tasks[i]['title'] + '</h5>'
-			+ '</div>'
-			+ '<p>' + tasks[i]['description'] + '</p>'
-			+ '</div>');
-	    }
-	} else {
-	    showmsg(resp.msg, "danger");
-	}
-    }, "json").fail(function () {
-	card.css("display", "none");
-    });
+        if (resp.status == "OK") {
+            showmsg('<i class="fas fa-check"></i> ' + resp.msg, "success");
+        } else {
+            showmsg('<i class="fas fa-times"></i> ' + resp.msg, "danger");
+        }
+        loadTaskCards();
+    }, "json");
 });

www/cards/qwikclock_jobs.html

@@ -3,21 +3,11 @@ 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>
-    .job-btn-bin {
-        display: flex;
-        flex-wrap: wrap;
-    }
-
-    .job-btn {
-        margin: 5px 5px;
-    }
-</style>
 <h3 class="card-header" style="background-color: #2196F3; color: white;"><i class="fas fa-briefcase"></i> <span class="card_title">QwikClock | Jobs</span></h3>
 <div class="card-body">
     <p>Current Job: <span class="current-job"></span>
     <p>Select a Job:</p>
-    <div class="job-btn-bin" style="width: 100%;">
+    <div class="btn-bin" style="width: 100%;">
 
     </div>
 </div>

www/js/login.js

@@ -1,4 +1,4 @@
-/* 
+/*
  * 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/.
@@ -79,13 +79,14 @@ function loadQuickLogin() {
                 var userhtml = "";
                 for (var user in resp.users) {
                     var u = resp.users[user];
-                    userhtml += '<div class="col-4 col-lg-3 quick-user" data-uid="' + u["uid"] + '" data-username="' + u["username"] + '" data-name="' + u["name"] + '" data-pin="' + (u["pin"] == true ? "1" : "") + '" >\n'
-                            + '<i class="far fa-user fa-3x"></i>\n'
+                    userhtml += '<div class="col-4 col-lg-3 col-xl-2 quick-user" data-uid="' + u["uid"] + '" data-username="' + u["username"] + '" data-name="' + u["name"] + '" data-pin="' + (u["pin"] == true ? "1" : "") + '" >\n'
+                            + '<svg class="identicon" width="60" height="60" data-jdenticon-value="' + u["name"] + '"></svg>\n'
                             + '<br />\n'
                             + u["name"] + "\n"
                             + '</div>\n';
                 }
                 $("#userlist .row").html(userhtml);
+                jdenticon.update(".identicon");
                 $(".quick-user").click(function () {
                     doQuickLogin($(this).data("username"), $(this).data("name"), $(this).data("uid"), $(this).data("pin") == "1");
                 });

www/js/setup.js

@@ -5,6 +5,12 @@
  */
 
 function dlGroups() {
+    if (!$("#url").val().startsWith("http")) {
+        $("#url").val("https://" + $("#url").val());
+    }
+    if (!$("#url").val().endsWith("/api.php")) {
+        $("#url").val($("#url").val() + "/api.php");
+    }
     localStorage.setItem("apiurl", $("#url").val());
     localStorage.setItem("apikey", $("#key").val());
     reloadSettings();

www/licenses.html

@@ -61,7 +61,7 @@ THE SOFTWARE.
         <h2>bassjobsen/Bootstrap-3-Typeahead</h2>
         <pre>MIT License
 
-Copyright (c) 2017 Bass Jobsen
+Copyright (c) 2018 Bass Jobsen
 
 Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the &quot;Software&quot;), 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:
 
@@ -382,7 +382,7 @@ THE FONT SOFTWARE IS PROVIDED &quot;AS IS&quot;, WITHOUT WARRANTY OF ANY KIND, E
 
 MIT License
 
-Copyright (c) 2017 Dave Gandy &amp;lt;dave@fontawesome.io&amp;gt;
+Copyright (c) 2018 Dave Gandy &amp;lt;dave@fontawesome.io&amp;gt;
 
 Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the &quot;Software&quot;), 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:
 
@@ -672,7 +672,7 @@ H THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
     </div>
     <div>
         <h2>guzzle/guzzle</h2>
-        <pre>Copyright (c) 2011-2016 Michael Dowling, https://github.com/mtdowling &lt;mtdowling@gmail.com&gt;
+        <pre>Copyright (c) 2011-2018 Michael Dowling, https://github.com/mtdowling &lt;mtdowling@gmail.com&gt;
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the &quot;Software&quot;), to deal
@@ -3082,4 +3082,29 @@ ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
 SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
         </pre>
     </div>
+    <div>
+        <h2>dmester/jdenticon</h2>
+        <pre>
+Jdenticon
+Copyright (c) 2014 - {year} Daniel Mester Pirttijärvi
+
+This software is provided 'as-is', without any express or implied
+warranty.  In no event will the authors be held liable for any damages
+arising from the use of this software.
+
+Permission is granted to anyone to use this software for any purpose,
+including commercial applications, and to alter it and redistribute it
+freely, subject to the following restrictions:
+
+1. The origin of this software must not be misrepresented; you must not
+   claim that you wrote the original software. If you use this software
+   in a product, an acknowledgment in the product documentation would be
+   appreciated but is not required.
+
+2. Altered source versions must be plainly marked as such, and must not be
+   misrepresented as being the original software.
+
+3. This notice may not be removed or altered from any source distribution.
+        </pre>
+    </div>
 </div>

www/pages/login.html

@@ -85,7 +85,7 @@
 </div>
 <div class="container" style="height: 100%;">
     <div class="row justify-content-center" style="height: 100%;">
-        <div class="col-12 col-sm-10 col-md-8 col-lg-6">
+        <div class="col-12 col-sm-10 col-md-8 col-lg-8 col-xl-8">
             <div class="card" style="width: 100%;">
                 <h3 class="card-header"><i class="fas fa-lock"></i> Login</h3>
                 <ul class="nav nav-tabs justify-content-center">
@@ -114,11 +114,15 @@
                                 <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>
+                                    <div class="input-group-prepend">
+                                        <span class="input-group-text"><i class="far fa-user"></i></span>
+                                    </div>
                                     <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>
+                                    <div class="input-group-prepend">
+                                        <span class="input-group-text"><i class="fas fa-key"></i></span>
+                                    </div>
                                     <input type="text" style="-webkit-text-security: disc;" class="form-control" id="password" placeholder="Password" />
                                 </div>
                                 <br />
@@ -131,7 +135,9 @@
                             <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>
                             <form id="mobilecode_form">
                                 <div class="input-group input-group-lg">
-                                    <span class="input-group-addon">B-</span>
+                                    <div class="input-group-prepend">
+                                        <span class="input-group-text">B -</span>
+                                    </div>
                                     <input type="text" class="form-control" id="code" placeholder="123456" />
                                 </div>
                                 <br />
@@ -146,4 +152,5 @@
         </div>
     </div>
 </div>
-<script src="js/login.js"></script>
+<script src="js/login.js"></script>
+<script src="assets/js/jdenticon.min.js"></script>

www/pages/setup.html

@@ -16,15 +16,21 @@ file, You can obtain one at http://mozilla.org/MPL/2.0/.
                     </div>
                     <form id="settings_form">
                         <div class="input-group">
-                            <span class="input-group-addon"><i class="fas fa-server"></i></span>
+                            <div class="input-group-prepend">
+                                <span class="input-group-text"><i class="fas fa-server"></i></span>
+                            </div>
                             <input type="text" class="form-control" id="url" placeholder="AccountHub API URL" required />
                         </div>
                         <div class="input-group">
-                            <span class="input-group-addon"><i class="fas fa-key"></i></span>
+                            <div class="input-group-prepend">
+                                <span class="input-group-text"><i class="fas fa-key"></i></span>
+                            </div>
                             <input type="text" class="form-control" id="key" placeholder="API Key" required />
                         </div>
                         <div class="input-group">
-                            <span class="input-group-addon"><i class="fas fa-users"></i></span>
+                            <div class="input-group-prepend">
+                                <span class="input-group-text"><i class="fas fa-users"></i></span>
+                            </div>
                             <select class="form-control" id="group">
                                 <option value="">Select a Quick Access Group</option>
                             </select>
@@ -36,14 +42,14 @@ file, You can obtain one at http://mozilla.org/MPL/2.0/.
                         </div>
                         <br />
                         <div class="form-check">
+                            <input class="form-check-input" value="1" type="checkbox" id="kioskmode">
                             <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">
+                            <input class="form-check-input" value="1" type="checkbox" id="largebtns">
                             <label class="form-check-label">
-                                <input class="form-check-input" value="1" type="checkbox" id="largebtns">
                                 Use larger buttons if available
                             </label>
                         </div>