How to change login2fa page?

PHPMaker General Discussion (PHPMaker)
1

v2026
is there a way to change the login2fa page like you can with client script > other > login pgae > startup script.
trying to make the page have 6 small boxes instead of a text field.

2

OTP inputs are typically created using either multiple separate input fields or a single input field styled to look like multiple boxes. If you use multiple separate input fields, you'll break the orignal code, so you better use the latter. You may google "single otp input" and add your CSS to the OTP input.

3

improved by

// Startup script (global)
document.addEventListener("input", function (e) {
	const input = e.target;
	if (!input.matches('.ew-verify-2fa input[name="securitycode"]')) return;

	input.placeholder = "Code";
	input.value = (input.value || "").replace(/\D/g, "").slice(0, 6);
});

/* OTP */
.ew-verify-2fa #securitycode {
max-width: 12rem;
margin: 0 auto;
text-align: center;
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Courier New", monospace !important;
font-variant-numeric: tabular-nums;
font-size: 2rem !important;
font-weight: 600;
letter-spacing: .45em;
padding: .85rem 1rem !important;
border-radius: .6rem !important;
}

.ew-verify-2fa #securitycode::placeholder {
letter-spacing: .45em;
color: #adb5bd;
}

.ew-verify-2fa #securitycode:focus {
box-shadow: 0 0 0 .2rem rgba(13,110,253,.15) !important;
}

.ew-verify-2fa .invalid-feedback,
.ew-verify-2fa .valid-feedback {
text-align: center;
}