diff --git a/web/login/index.html b/web/login/index.html index 99ce323b..413cd793 100644 --- a/web/login/index.html +++ b/web/login/index.html @@ -49,17 +49,28 @@
- + - + + + + + + + +
Username:Username: 
Password:Password: 
2FA code:  + +
+
+
diff --git a/web/login/index.pug b/web/login/index.pug index 00bb61e9..712f2ee8 100644 --- a/web/login/index.pug +++ b/web/login/index.pug @@ -11,11 +11,17 @@ block body div(id="login") table tr - td Username: + td Username:  td #[input(type="text" id="user-input")] tr - td Password: + td Password:  td #[input(type="password" id="passwd-input")] + tr + td 2FA code:  + 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] diff --git a/web/share/css/login/login.css b/web/share/css/login/login.css index 5a69aa30..17a5cd10 100644 --- a/web/share/css/login/login.css +++ b/web/share/css/login/login.css @@ -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; } diff --git a/web/share/js/login/main.js b/web/share/js/login/main.js index 2b5af5e3..1fdc383b 100644 --- a/web/share/js/login/main.js +++ b/web/share/js/login/main.js @@ -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:
", 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(); }