Browse Source

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

master
Skylar Ittner 4 years ago
parent
commit
f73fdf9b94
  1. 15
      assets/css/other.css
  2. 72
      js/login.js
  3. 95
      pages/login.html

15
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%;
}

72
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"));
setname($(this).data("name"));
setuid($(this).data("uid"));
openScreen("home");
doQuickLogin($(this).data("username"), $(this).data("name"), $(this).data("uid"), $(this).data("pin") == "1");
});
} 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');
})

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

Loading…
Cancel
Save