Add PIN login prompt to Quick Access (close #1)

assets/css/other.css

@@ -39,4 +39,19 @@ file, You can obtain one at http://mozilla.org/MPL/2.0/.
 
 #sign-out-btn, #refresh-btn {
     background-color: rgba(255,255,255,.75);
+}
+
+#pinpad .digits {
+    height: 50px;
+    padding: 10px;
+}
+
+#pinpad .digits p {
+    font-weight: 500;
+    text-align: center;
+    font-size: 20px;
+}
+
+#pincode-box {
+    font-size: 200%;
 }

js/login.js

@@ -30,6 +30,7 @@ function userpasslogin(username, password) {
         } else {
             showmsg(resp.msg, "danger");
         }
+        $(this).data("uid")
     }, "json");
 }
 
@@ -50,6 +51,22 @@ function codelogin(code) {
     }, "json");
 }
 
+function doQuickLogin(username, name, uid, pin) {
+    $('#pinmodal').modal('hide');
+    if (pin) {
+        $('#pinmodal').data("username", username);
+        $('#pinmodal').data("name", name);
+        $('#pinmodal').data("uid", uid);
+        $('#pinmodal').modal('show');
+        $('#pincode-box').val("");
+    } else {
+        setuser(username);
+        setname(name);
+        setuid(uid);
+        openScreen("home");
+    }
+}
+
 function loadQuickLogin() {
     if (!isNaN(group) && group != "") {
         $.post(accounthubapi, {
@@ -62,7 +79,7 @@ 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"] + '">\n'
+                    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'
                             + '<br />\n'
                             + u["name"] + "\n"
@@ -70,10 +87,7 @@ function loadQuickLogin() {
                 }
                 $("#userlist .row").html(userhtml);
                 $(".quick-user").click(function () {
-                    setuser($(this).data("username"));
+                    doQuickLogin($(this).data("username"), $(this).data("name"), $(this).data("uid"), $(this).data("pin") == "1");
-                    setname($(this).data("name"));
-                    setuid($(this).data("uid"));
-                    openScreen("home");
                 });
             } else {
                 $("#quickaccess_tab").tab("dispose");
@@ -104,6 +118,52 @@ $("#mobilecode_form").submit(function (event) {
     }
 });
 
+function tryPinModalLogin(pin) {
+    $.post(accounthubapi, {
+        key: apikey,
+        pin: pin,
+        uid: $('#pinmodal').data("uid"),
+        action: "checkpin"
+    }, function (resp) {
+        if (resp.pinvalid === true || resp.nopinset === true) {
+            doQuickLogin($('#pinmodal').data("username"), $('#pinmodal').data("name"), $('#pinmodal').data("uid"), false);
+        } else if (resp.pinvalid === false) {
+            showmsg("PIN incorrect.", "danger");
+        } else {
+            showmsg(resp.msg, "danger");
+        }
+    }, "json");
+}
+
 $(document).ready(function () {
+    var dials = $("#pinpad .digits");
+    var index;
+    var number = $("#pincode-box");
+
+    dials.click(function () {
+        index = dials.index(this);
+        if (index === 9) {
+            number.val("");
+        } else if (index === 10) {
+            number.val(number.val() + "0");
+        } else if (index === 11) {
+            tryPinModalLogin(number.val());
+        } else {
+            number.val(number.val() + (index + 1));
+        }
+    });
+
+    number.keypress(function (event) {
+        // Handle pressing Enter key
+        if (event.keyCode === 13) {
+            tryPinModalLogin(number.val());
+        }
+    });
+
+
     loadQuickLogin();
-});
+});
+
+$('#pinmodal').on('shown.bs.modal', function () {
+  $('#pincode-box').trigger('focus');
+})

pages/login.html

@@ -1,5 +1,90 @@
+<div class="modal fade" tabindex="-1" role="dialog" id="pinmodal" data-username="" data-uid="" data-name="">
+    <div class="modal-dialog" role="document">
+        <div class="modal-content">
+            <div class="modal-header">
+                <h5 class="modal-title"><i class="fas fa-th"></i> Enter PIN</h5>
+                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+                    <span aria-hidden="true">&times;</span>
+                </button>
+            </div>
+            <div class="modal-body">
+                <input id="pincode-box" type="text" style="-webkit-text-security: disc;" class="form-control" maxlength="8" pattern="[0-9]*" inputmode="numeric" />
+                <br />
+                <div id="main-wrapper">
+                    <div style="width: 60%; margin: 0 auto;">
+                        <div class="row justify-content-center" id="pinpad">
+                            <div class="digits col-4 btn btn-default">
+                                <p>
+                                    1
+                                </p>
+                            </div>
+                            <div class="digits col-4 btn btn-default">
+                                <p>
+                                    2
+                                </p>
+                            </div>
+                            <div class="digits col-4 btn btn-default">
+                                <p>
+                                    3
+                                </p>
+                            </div>
+                            <div class="digits col-4 btn btn-default">
+                                <p>
+                                    4
+                                </p>
+                            </div>
+                            <div class="digits col-4 btn btn-default">
+                                <p>
+                                    5
+                                </p>
+                            </div>
+                            <div class="digits col-4 btn btn-default">
+                                <p>
+                                    6
+                                </p>
+                            </div>
+                            <div class="digits col-4 btn btn-default">
+                                <p>
+                                    7
+                                </p>
+                            </div>
+                            <div class="digits col-4 btn btn-default">
+                                <p>
+                                    8
+                                </p>
+                            </div>
+                            <div class="digits col-4 btn btn-default">
+                                <p>
+                                    9
+                                </p>
+                            </div>
+                            <div class="digits col-4 btn btn-danger">
+                                <p>
+                                    <i class="fas fa-angle-double-left"></i>
+                                </p>
+                            </div>
+                            <div class="digits col-4 btn btn-default">
+                                <p>
+                                    0
+                                </p>
+                            </div>
+                            <div class="digits col-4 btn btn-success">
+                                <p id="pin-action">
+                                    <i class="fas fa-arrow-right"></i>
+                                </p>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="modal-footer">
+                <button type="button" class="btn btn-secondary btn-sm" data-dismiss="modal" onclick="$('#pincode-box').val('');">Cancel</button>
+            </div>
+        </div>
+    </div>
+</div>
 <div class="container" style="height: 100%;">
-    <div class="row justify-content-center align-items-center" 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="card" style="width: 100%;">
                 <h3 class="card-header"><i class="fas fa-lock"></i> Login</h3>
@@ -16,8 +101,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>
@@ -53,8 +138,8 @@
                                 <button type="submit" class="btn btn-primary" id="mobilecodeloginbtn">Log In</button>
                             </form>
                         </div>
-                        
+
-                        
+
                     </div>
                 </div>
             </div>