2fa code in the login page

4 files changed, 31 insertions, 11 deletions

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,18 +49,29 @@
         <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>
                 <button class="key" id="login-button">Login</button>
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,12 +11,18 @@ 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]
 
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:<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();
 }