Improve "Enter PIN for pairing"-workflow

[tibroc]

Motivation

The user experience of entering the PIN and pairing with the room is currently neither nice nor practical. It lacks visual clarity and feedback on what is happening. We want to improve this.

Proposed Solution

The new way to enter the PIN should look something like this:

Here, each Number (6 in total) has its own visually separate field.

The flow of events should then be like this:

1. Enter PIN:
   • When starting, the cursor should be in the first field.
   • Each time a digit was entered by the user the cursor automatically moves on to the next field.
   • When all 6 digits were entered you either press enter (less preferred solution) or the plugin automatically understands if the PIN is correct and moves on to the next step without the need to press enter (preferred solution).
2. Corrrect PIN -> Pairing
   • Move to a "Pairing..." Display, that might look something like this with pulsating points while waiting or something similar (look up what is the default in BBB):

3. Wrong PIN ->
   • If a wrong PIN was entered show again blank input fields with the notification that the previous PIN was wrong:

[tibroc]

Mockup: react-mockup.zip