2FA on login page

slowcord/login/public/js/handler.js

@@ -16,6 +16,18 @@ const handleSubmit = async (path, body) => {
 		return;
 	}
 
+	if (json.ticket) {
+		// my terrible solution to 2fa
+		const twoFactorForm = document.forms["2fa"];
+		const loginForm = document.forms["login"];
+
+		twoFactorForm.style.display = "flex";
+		loginForm.style.display = "none";
+
+		twoFactorForm.ticket.value = json.ticket;
+		return;
+	}
+
 	// Very fun error message here lol
 	const error =
 		json.errors

slowcord/login/public/login.html

@@ -27,8 +27,7 @@
 				<p id="failure">Login failed</p>
 			</div>
 
-
+			<form action="javascript:void(0);" name="login">
-			<form action="javascript:void(0);">
 				<label for="email">Email</label>
 				<input type="email" name="email" />
 
@@ -42,9 +41,18 @@
 					Login with Discord
 				</a>
 
-				<div class="h-captcha" data-sitekey="fa3163ea-79a7-4b7b-b752-b58c545906c8"></div>
+				<div class="h-captcha" data-sitekey="fa3163ea-79a7-4b7b-b752-b58c545906c8" data-theme="dark"></div>
 				<script src="https://js.hcaptcha.com/1/api.js" async defer></script>
 			</form>
+
+			<form action="javascript:void(0);" name="2fa" style="display: none">
+				<label for="code">2FA Code</label>
+				<input type="number" name="code" />
+
+				<input type="hidden" name="ticket" />
+
+				<input type="submit" value="Login"/>
+			</form>
 		</div>
 	</div>
 
@@ -66,7 +74,7 @@
 		token = window.localStorage.getItem("token");
 		if (token) window.location.href = "/app";
 
-		document.forms[0].addEventListener("submit", async (e) => {
+		document.forms["login"].addEventListener("submit", async (e) => {
 			const data = new FormData(e.target);
 			const email = data.get("email");
 			const password = data.get("password");
@@ -78,6 +86,17 @@
 				captcha_key: hcaptcha,
 			});
 		})
+
+		document.forms["2fa"].addEventListener("submit", async (e) => {
+			const data = new FormData(e.target);
+			const code = data.get("code");
+			const ticket = data.get("ticket");
+
+			await handleSubmit("/api/v9/auth/mfa/totp", {
+				code: code,
+				ticket: ticket,
+			});
+		})
 	</script>
 </body>