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"> <div id="login">
<table> <table>
<tr> <tr>
<td>Username:</td> <td>Username:&nbsp;</td>
<td> <td>
<input type="text" id="user-input"> <input type="text" id="user-input">
</td> </td>
</tr> </tr>
<tr> <tr>
<td>Password:</td> <td>Password:&nbsp;</td>
<td> <td>
<input type="password" id="passwd-input"> <input type="password" id="passwd-input">
</td> </td>
</tr> </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> <tr>
<td></td> <td></td>
<td> <td>

View File

@@ -11,11 +11,17 @@ block body
div(id="login") div(id="login")
table table
tr tr
td Username: td Username:&nbsp;
td #[input(type="text" id="user-input")] td #[input(type="text" id="user-input")]
tr tr
td Password: td Password:&nbsp;
td #[input(type="password" id="passwd-input")] 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 tr
td td
td #[button(id="login-button" class="key") Login] td #[button(id="login-button" class="key") Login]

View File

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

View File

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