[$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!

[johnmlee101]

I'm HYPED for this! Thanks for pushing this forward!

[NikkiWines]

Yess, this'll look so great!! 🚀

[cristipaval]

I'll work on this late this week.

[cristipaval]

I'll offload this to Callstack since it is only front-end work.

[BeeMargarida]

Hi, I'm Ana from Callstack, I'll pick this up!

[JmillsExpensify]

Woo! Can't wait to get this one in product. It looks soooooo good.

[BeeMargarida]

Proposal

Please re-state the problem that we are trying to solve in this issue.

Currently the magic code input is just a text input with a number pad keyboard. It would be interesting to follow the same pattern set by other apps, and have a specific input type for magic codes.

What is the root cause of that problem?

The current solution looks like a typical text input. This does not make it clear what is the structure of the magic code and it allows for pasting other content that is not only a 6 digit code.

What changes do you think we should make in order to solve the problem?

Create a MagicCodeInput that:

• contains 6 text inputs (using numeric keyboard)
  • each input should only allow for one number
• receives a number as a prop and only allows numeric input
• handles the focus logic
  • auto-focus on the first input
  • focus on the next input when the previous is complete
  • once all inputs are complete, it submits
  • when pressing backspace, it should delete and focus on the previous input
  • if an input with a value is focused, when adding another value it should replace it
• handles paste events to fill the input correctly
• show error message
• use the same callbacks onChangeText, onSubmitEditing and prop value

Implementation steps

1. Create the component using 6 TextInput components
2. Implement the focus logic
3. Implement remove logic when pressing backspace, it should focus on previous input
4. Implement the paste logic that should complete the input
   1. handle cases where the number is not complete
5. Implement the error message
6. Test the implementation on all platforms (Android, Web, iOS, Desktop)

What alternative solutions did you explore? (Optional)

None.

[cristipaval]

Looks good to me 👍

Create a MagicCodeInput that:

• contains 6 text inputs (using numeric keyboard)
  • each input should only allow for one number
• receives a number as a prop and only allows numeric input
• handles the focus logic
  • auto-focus on the first input
  • focus on the next input when the previous is complete
  • once all inputs are complete, it submits
  • when pressing backspace, it should delete and focus on the previous input
  • if an input with a value is focused, when adding another value it should replace it
• handles paste events to fill the input correctly
• show error message
• use the same callbacks onChangeText, onSubmitEditing and prop value

@shawnborton Could you also have a look at the above?

[shawnborton]

Looks pretty good to me!

[cristipaval]

Thank you!

@BeeMargarida , you're good to go with the implementation!

[BeeMargarida]

Thank you, on it!

[BeeMargarida]

Almost ready, just working on some optimization problems with the focusing logic in Android phones

[BeeMargarida]

Update: Just reviewing/testing the code, should be ready today or monday

[BeeMargarida]

The PR is ready for review

[MelvinBot]

@shawnborton, @cristipaval, @BeeMargarida Whoops! This issue is 2 days overdue. Let's get this updated quick!

[aimane-chnaif]

PR is in review Melvin

[MelvinBot]

@shawnborton, @cristipaval, @BeeMargarida Eep! 4 days overdue now. Issues have feelings too...

[cristipaval]

@aimane-chnaif has to review the PR.

[aimane-chnaif]

Sorry, reviewing PR today

[MelvinBot]

@shawnborton, @cristipaval, @BeeMargarida, @aimane-chnaif Whoops! This issue is 2 days overdue. Let's get this updated quick!

[MelvinBot]

@shawnborton, @cristipaval, @BeeMargarida, @aimane-chnaif 6 days overdue. This is scarier than being forced to listen to Vogon poetry!

[BeeMargarida]

Waiting for another review on the PR

[MelvinBot]

@shawnborton, @cristipaval, @BeeMargarida, @aimane-chnaif Whoops! This issue is 2 days overdue. Let's get this updated quick!

[MelvinBot]

@shawnborton, @cristipaval, @BeeMargarida, @aimane-chnaif Eep! 4 days overdue now. Issues have feelings too...

[BeeMargarida]

Waiting for a review on the PR

[MelvinBot]

@shawnborton, @cristipaval, @BeeMargarida, @aimane-chnaif 8 days overdue is a lot. Should this be a Weekly issue? If so, feel free to change it!

[melvin-bot[bot]]

@shawnborton, @cristipaval, @BeeMargarida, @aimane-chnaif 10 days overdue. I'm getting more depressed than Marvin.

[cristipaval]

This will get into production soon, Melv.

[melvin-bot[bot]]

Reviewing label has been removed, please complete the "BugZero Checklist".

[melvin-bot[bot]]

The solution for this issue has been :rocket: deployed to production :rocket: in version 1.3.12-0 and is now subject to a 7-day regression period :calendar:. Here is the list of pull requests that resolve this issue:

• https://github.com/Expensify/App/pull/16076

If no regressions arise, payment will be issued on 2023-05-16. :confetti_ball:

After the hold period is over and BZ checklist items are completed, please complete any of the applicable payments for this issue, and check them off once done.

• [x] External issue reporter
• [x] Contributor that fixed the issue
• [x] Contributor+ that helped on the issue and/or PR

As a reminder, here are the bonuses/penalties that should be applied for any External issue:

• Merged PR within 3 business days of assignment - 50% bonus
• Merged PR more than 9 business days after assignment - 50% penalty

[shawnborton]

Not overdue

[aimane-chnaif]

Can someone add New Feature label to assign BZ member?

[shawnborton]

Can do!

[melvin-bot[bot]]

Triggered auto assignment to @joekaufmanexpensify (NewFeature), see https://stackoverflowteams.com/c/expensify/questions/14418#:~:text=BugZero%20process%20steps%20for%20feature%20requests for more details.

[aimane-chnaif]

Thanks @shawnborton

[joekaufmanexpensify]

Okay, since @BeeMargarida is with Callstack, their payment will be handled separately. So we just need to pay @aimane-chnaif $1,000 for their C+ review.

[melvin-bot[bot]]

Job added to Upwork: https://www.upwork.com/jobs/~018a8f57a7a625d18f

[melvin-bot[bot]]

Current assignee @joekaufmanexpensify is eligible for the External assigner, not assigning anyone new.

[melvin-bot[bot]]

Current assignee @aimane-chnaif is eligible for the External assigner, not assigning anyone new.

[melvin-bot[bot]]

Current assignee @cristipaval is eligible for the External assigner, not assigning anyone new.

[joekaufmanexpensify]

@aimane-chnaif offer sent for $1000!

[joekaufmanexpensify]

@aimane-chnaif $1,000 sent and contract ended!

[joekaufmanexpensify]

Upwork job closed.

[joekaufmanexpensify]

This was a new feature, so BZ checklist is not necessary. Feature is implemented, and all payment issued. Closing as this is all set, thanks everyone!