pi-hole/web
1
0
Fork 0
mirror of https://github.com/pi-hole/web.git synced 2024-12-06 19:36:21 +01:00
Code Issues Actions Packages Projects Releases Wiki Activity

Port wrong-password login from server-side to client-side. This avoids having to reload the page on failed password attempts.

Browse Source 
Signed-off-by: DL6ER <dl6er@dl6er.de>
This commit is contained in:
DL6ER
2023-05-02 20:57:33 +02:00
parent 7156cc541f
commit 99aafc537e
2 changed files with 25 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files
login.lp
+6 -9
View File
@@ -8,7 +8,6 @@
--]]
mg.include('scripts/pi-hole/lua/header.lp','r')
wrongpassword = false
?>
<body class="hold-transition layout-boxed login-page">
@@ -25,14 +24,12 @@ wrongpassword = false
<div class="card">
<div class="card-body login-card-body">
<div id="cookieInfo" class="panel-title text-center text-red" style="font-size: 150%" hidden>Verify that cookies are allowed</div>
<? if wrongpassword then mg.write('\
<div class="form-group has-error login-box-msg">\
<label class="control-label"><i class="fa fa-times-circle"></i> Wrong password!</label>\
</div>\
') end ?>
<div class="form-group has-error login-box-msg" id="error-label" style="display: none;">
<label class="control-label"><i class="fa fa-times-circle"></i> Wrong password!</label>
</div>
<form id="loginform">
<div class="login-options has-feedback<? if wrongpassword then mg.write(" has-error") end ?>">
<div class="login-options has-feedback" id="pw-field">
<input type="text" id="username" value="pi.hole" autocomplete="username" hidden>
<div class="pwd-field form-group">
<!-- hidden username input field to help password managers to autfill the password -->
@@ -56,12 +53,12 @@ wrongpassword = false
<br>
<div class="row">
<div class="col-xs-12">
<div class="box box-<? if not wrongpassword then mg.write("info collapsed-box") else mg.write("danger") end ?>">
<div class="box box-info collapsed-box" id="forgot-pw-box">
<div class="box-header with-border pointer no-user-select" data-widget="collapse">
<h3 class="box-title">Forgot password?</h3>
<div class="box-tools pull-right">
<button type="button" class="btn btn-box-tool">
<i class="fa <? if wrongpassword then mg.write("fa-minus") else mg.write("fa-plus") end ?>"></i>
<i class="fa fa-plus" id="forgot-pw-toggle-icon"></i>
</button>
</div>
</div>
scripts/pi-hole/js/login.js
+19 -3
View File
@@ -40,7 +40,24 @@ function redirect() {
window.location.replace(target);
}
function wrongPassword(is_wrong) {
if (is_wrong) {
$("#pw-field").addClass("has-error");
$("#error-label").show();
$("#forgot-pw-box").removeClass("box-info").removeClass("collapsed-box").addClass("box-danger");
$("#forgot-pw-box .box-body").show();
$("#forgot-pw-toggle-icon").removeClass("fa-plus").addClass("fa-minus");
} else {
$("#pw-field").removeClass("has-error");
$("#error-label").hide();
$("#forgot-pw-box").addClass("box-info").addClass("collapsed-box").removeClass("box-danger");
$("#forgot-pw-box .box-body").hide();
$("#forgot-pw-toggle-icon").removeClass("fa-minus").addClass("fa-plus");
}
}
function doLogin(response) {
wrongPassword(false);
$.ajax({
url: "/api/auth",
method: "POST",
@@ -51,9 +68,8 @@ function doLogin(response) {
})
.fail(function (data) {
if (data.status === 401) {
// Login failed
$("#pw-field").addClass("has-error");
$("#error-label").show();
// Login failed, show error message
wrongPassword(true);
}
});
}