[$1000] [HOLD for payment 2023-05-16] [Passwordless Polish] Implement new magic code input: 6-boxes

[Beamanator]

cc @twisterdotcom as this was your idea

cc @johnmlee101 @NikkiWines as y'all are the passwordless pros!

Problem

The currently magic code input is very boring, lets spice it up!

Solution

Implement a cool magic code entry with individual fields per digit.

Note: We should plan out exactly how we want this to work before implementing, example:

1. Auto-focus first input field
2. When you type a number, it auto-focuses the next field
3. No characters allowed, only digits
4. If you paste a 6 digit code (maybe even 1 - 5 digit code) on the page, it auto-fills the appropriate digits

We might even want to implement something like "Resend code in " so users can only try to resend magic codes once per... minute?

Here's an idea we can start with, from another website:

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~018a8f57a7a625d18f
• Upwork Job ID: 1659181366874152960
• Last Price Increase: 2023-05-18

[MelvinBot]

Triggered auto assignment to @shawnborton (Design), see these Stack Overflow questions for more details.

[shawnborton]

If we use our existing input style and break it out into 6 inputs like your example above, we'd get something like this:

It would be nice to rethink this flow a bit in the future and add in more branding elements and animations though:

[cristipaval]

I'll take over this one.

I love the above design. Do we want to also use it to 2fa input field?

[shawnborton]

Oh that would make sense as well, yeah!