Multifactor authentication input styling
Hi all!
I am looking for a way to style a form input box for MFA. Attached is what it looks like currently, but basically just a password input field.
I would like to separate the text in this field into groups of
**** *** *** to make mis-entry a little more obvious, or even cooler would be **** 123 456 where the initial pin of the token is hidden but the remaining token from the app is visible...
I've been looking off and on for some guide on setting this up but have not been able to find anything I can understand.
4 Replies
there's no reason to hide one time password tokens
if you want to separate them, I think the only option is to fake the input with a
contenteditable element and use input events to reformat the string as people typeAgreed. They do require a pin (which is the first 4 numbers) together with the token
Ah, so store whatever is entered into a JS variable and submit that final data as a hidden field?
basically yeah
a lot of the time, those are a pain to use and implement though. I'd recommend having a field for the pin that's
type="password" and then a separate simple text input field for the OTPThank you! I'll look around for some tutorials in that area 🙂