Prevent the form being submitted twice

The code insertion from the iOS/macOS keychain immediately submits the form, combined with our code this causes a double submission.

This possibly affects other platforms too. `requestSubmit()` works different by simulating what the submit button would do including triggering the `submit` event.

See https://www.woltlab.com/community/thread/314276/
See https://www.woltlab.com/community/thread/314872/

Author: dtdesign

com.woltlab.wcf/templates/multifactorAuthentication.tpl

@@ -42,14 +42,24 @@
 
 <script data-relocate="true">
 	{
-		const code = document.getElementById('code') ?? document.getElementById('onetimecode');
-		if (code) {
-			code.addEventListener('input', () => {
-				if (code.value.length == code.maxLength) {
-					code.form.submit();	
+		let wasSubmitted = false;
+		const form = document.getElementById("multifactorAuthentication");
+		form.addEventListener("submit", () => {
+			document.getElementById("submitButton").disabled = true;
+			wasSubmitted = true;
+		});
+		const code = document.getElementById("code") ?? document.getElementById("onetimecode");
+		code?.addEventListener("input", () => {
+			if (!wasSubmitted && code.value.length === code.maxLength) {
+				if (form.requestSubmit) {
+					form.requestSubmit();
+				} else {
+					form.submit();
 				}
-			});
-		}
+
+				wasSubmitted = true;
+			}
+		});
 	}
 </script>
 

wcfsetup/install/files/acp/templates/multifactorAuthentication.tpl

@@ -47,14 +47,24 @@
 
 <script data-relocate="true">
 	{
-		const code = document.getElementById('code') ?? document.getElementById('onetimecode');
-		if (code) {
-			code.addEventListener('input', () => {
-				if (code.value.length == code.maxLength) {
-					code.form.submit();	
+		let wasSubmitted = false;
+		const form = document.getElementById("multifactorAuthentication");
+		form.addEventListener("submit", () => {
+			document.getElementById("submitButton").disabled = true;
+			wasSubmitted = true;
+		});
+		const code = document.getElementById("code") ?? document.getElementById("onetimecode");
+		code?.addEventListener("input", () => {
+			if (!wasSubmitted && code.value.length === code.maxLength) {
+				if (form.requestSubmit) {
+					form.requestSubmit();
+				} else {
+					form.submit();
 				}
-			});
-		}
+
+				wasSubmitted = true;
+			}
+		});
 	}
 </script>