Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Improve TOTP field #2795

Merged
merged 11 commits into from
Nov 10, 2023
Merged

Improve TOTP field #2795

Show file tree
Hide file tree
Changes from 6 commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
64e604d
Fix position of TOTP token
DL6ER Oct 30, 2023
2218257
Only submit form after entering TOTP token when there is something in…
DL6ER Oct 30, 2023
cd28d48
Follow best-practice rules for login pages from https://web.dev/artic…
DL6ER Oct 30, 2023
6f6361c
Add an inline button to show/hide the password
rdwebdesign Nov 3, 2023
b2325c8
Function to toggle password visibility (using jQuery) and icon
rdwebdesign Nov 3, 2023
f56102a
Remove unused style
rdwebdesign Nov 3, 2023
74c10d3
Set the focus to password field after clicking on the button
rdwebdesign Nov 3, 2023
7c3dd92
Show dedicated error mesage on wrong 2FA token
DL6ER Nov 4, 2023
5a3730f
Don't trigger double login on paste event to totp field
yubiuser Nov 5, 2023
a77e299
Show error message from FTL if applicable
DL6ER Nov 6, 2023
832bf94
Show FTL hint if available
DL6ER Nov 6, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
23 changes: 11 additions & 12 deletions login.lp
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -43,21 +43,20 @@ mg.include('scripts/pi-hole/lua/header.lp','r')
<form id="loginform">
<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">
<div class="input-group pwd-field form-group">
<!-- hidden username input field to help password managers to autfill the password -->
<input type="password" id="loginpw" class="form-control" placeholder="Password" value="" spellcheck="false" autocomplete="current-password" autofocus>
<span class="fa fa-key pwd-field form-control-feedback"></span>
</div>
<div class="form-group hidden" id="totp_input">
<input type="text" id="totp" size="6" maxlen="6" class="form-control totp_token" placeholder="" value="" spellcheck="false" autocomplete="current-password" autofocus>
<span class="fa-solid fa-clock-rotate-left pwd-field form-control-feedback"></span>
<input type="password" class="form-control" placeholder="Password" value="" spellcheck="false" autocomplete="current-password" id="current-password" autofocus required>
<span class="input-group-btn">
<button class="btn btn-default" id="toggle-password" type="button" title="Show password as plain text. Warning: this will display your password on the screen.">
<span class="fa fa-fw fa-eye field-icon"></span>
</button>
</span>
</div>
</div>
<!--
<div class="form-group" title="Pi-hole has to set a cookie for the login session to be successful. The cookie will not contain your password nor is it used anywhere outside of you local Pi-hole.">
<input type="checkbox" id="logincookie" checked>
<label for="logincookie">Keep me logged in (uses cookie)</label>
</div> -->
<div class="form-group has-feedback hidden" id="totp_input">
<input type="text" id="totp" size="6" maxlen="6" class="form-control totp_token" placeholder="123456" value="" spellcheck="false" autofocus>
DL6ER marked this conversation as resolved.
Show resolved Hide resolved
<span class="fa fa-clock-rotate-left pwd-field form-control-feedback"></span>
</div>
<div class="form-group">
<button type="submit" class="btn btn-primary form-control"><i class="fas fa-sign-in-alt"></i>&nbsp;&nbsp;&nbsp;Log in (uses cookie)</button>
</div>
Expand Down
34 changes: 29 additions & 5 deletions scripts/pi-hole/js/login.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -87,21 +87,42 @@ $("#loginform").submit(function (e) {
return;
}*/

doLogin($("#loginpw").val());
doLogin($("#current-password").val());
});

// Trigger keyup event when pasting into the TOTP code input field
$("#totp").on("paste", function (e) {
$(e.target).keyup();
});

// Submit form when TOTP code is entered and password is already filled
$("#totp").on("keyup", function () {
var code = $(this).val();
if (code.length === 6) {
const code = $(this).val();
const password = $("#current-password").val();
if (code.length === 6 && password.length > 0) {
$("#loginform").submit();
}
});

// Toggle password visibility button
$("#toggle-password").on("click", function () {
// Toggle font-awesome classes to change the svg icon on the button
$("svg", this).toggleClass("fa-eye fa-eye-slash");

// Password field
var $pwd = $("#current-password");
if ($pwd.attr("type") === "password") {
$pwd.attr("type", "text");
$pwd.attr("title", "Hide password");
} else {
$pwd.attr("type", "password");
$pwd.attr(
"title",
"Show password as plain text. Warning: this will display your password on the screen"
);
}
});

function showDNSfailure() {
$("#dns-failure-label").show();
$("#login-box").addClass("error-box");
Expand All @@ -118,8 +139,11 @@ $(function () {
})
.fail(function (xhr) {
const session = xhr.responseJSON.session;
// If TOPT is enabled, show the input field
if (session.totp === true) $("#totp_input").removeClass("hidden");
// If TOPT is enabled, show the input field and add the required attribute
if (session.totp === true) {
$("#totp_input").removeClass("hidden");
$("#totp").attr("required", "required");
}
});

// Get information about HTTPS port and DNS status
Expand Down