2fa code in the login page

This commit is contained in:
Maxim Devaev 2023-01-23 03:18:56 +02:00
parent cef6497375
commit cbebc1fa52
4 changed files with 31 additions and 11 deletions

View File

@ -49,17 +49,28 @@
<div id="login">
<table>
<tr>
<td>Username:</td>
<td>Username:&nbsp;</td>
<td>
<input type="text" id="user-input">
</td>
</tr>
<tr>
<td>Password:</td>
<td>Password:&nbsp;</td>
<td>
<input type="password" id="passwd-input">
</td>
</tr>
<tr>
<td>2FA code:&nbsp;</td>
<td>
<input type="text" id="code-input" placeholder="if enabled">
</td>
</tr>
<tr>
<td colspan="2">
<hr>
</td>
</tr>
<tr>
<td></td>
<td>

View File

@ -11,11 +11,17 @@ block body
div(id="login")
table
tr
td Username:
td Username:&nbsp;
td #[input(type="text" id="user-input")]
tr
td Password:
td Password:&nbsp;
td #[input(type="password" id="passwd-input")]
tr
td 2FA code:&nbsp;
td #[input(type="text" id="code-input" placeholder="if enabled")]
tr
td(colspan=2)
hr
tr
td
td #[button(id="login-button" class="key") Login]

View File

@ -43,7 +43,8 @@ div#login {
}
input[type="text"]#user-input,
input[type="password"]#passwd-input {
input[type="password"]#passwd-input,
input[type="text"]#code-input {
text-align: center;
border: thin;
}

View File

@ -33,7 +33,7 @@ export function main() {
initWindowManager();
tools.el.setOnClick($("login-button"), __login);
$("user-input").onkeyup = $("passwd-input").onkeyup = function(event) {
$("user-input").onkeyup = $("passwd-input").onkeyup = $("code-input").onkeyup = function(event) {
if (event.code === "Enter") {
event.preventDefault();
$("login-button").click();
@ -49,21 +49,21 @@ function __login() {
if (user.length === 0) {
$("user-input").focus();
} else {
let passwd = $("passwd-input").value;
let passwd = $("passwd-input").value + $("code-input").value;
let body = `user=${encodeURIComponent(user)}&passwd=${encodeURIComponent(passwd)}`;
let http = tools.makeRequest("POST", "/api/auth/login", function() {
if (http.readyState === 4) {
if (http.status === 200) {
document.location.href = "/";
} else if (http.status === 403) {
wm.error("Invalid username or password").then(__tryAgain);
wm.error("Invalid credentials").then(__tryAgain);
} else {
let error = "";
if (http.status === 400) {
try { error = JSON.parse(http.responseText)["result"]["error"]; } catch (_) { /* Nah */ }
}
if (error === "ValidatorError") {
wm.error("Invalid username or password characters").then(__tryAgain);
wm.error("Invalid characters in credentials").then(__tryAgain);
} else {
wm.error("Login error:<br>", http.responseText).then(__tryAgain);
}
@ -77,11 +77,13 @@ function __login() {
function __setEnabled(enabled) {
tools.el.setEnabled($("user-input"), enabled);
tools.el.setEnabled($("passwd-input"), enabled);
tools.el.setEnabled($("code-input"), enabled);
tools.el.setEnabled($("login-button"), enabled);
}
function __tryAgain() {
__setEnabled(true);
$("passwd-input").focus();
$("passwd-input").select();
let el = ($("code-input").value.length ? $("code-input") : $("passwd-input"));
el.focus();
el.select();
}