UI for WebAuthn

[jumde]

Touch Key - This dialog will be displayed when the user should interact with the key.

On Brave Desktop the dialog looks like:

Allow site to read key data - This dialog will be displayed when the site is requesting access to the security key data.

On Brave Desktop it looks like:

PIN Required - This dialog will be displayed when the YubiKey is protected by a PIN

On Brave Desktop it looks like:

[karenkliu]

iOS Designs

User flow:

Designs:

Assets

Insert key:
(animation preview) https://lottiefiles.com/share/zL8bnh
https://assets1.lottiefiles.com/packages/lf20_zL8bnh.json
insertkey.json.zip

Enter PIN:
enter pin.zip

Verifying key:
(animation preview) https://lottiefiles.com/share/PsnbwB
https://assets5.lottiefiles.com/packages/lf20_PsnbwB.json
authenticating.json.zip

Touch the key:
(animation preview) https://lottiefiles.com/share/c2gtfd
https://assets5.lottiefiles.com/packages/lf20_c2gtfd.json
touchthekey.json.zip

Lottie player:
lottie player.zip

[kjozwiak]

@EyanGoldman @anthonypkeane because this includes a lot of new UI/UX components, can someone run through the above and make sure it's working on iPhone X? Hopefully someone has a Yubico key that they can use in the office.

[EyanGoldman]

Passed on iPhone X

[jumde]

The new UIs are missing the site URLs. Will create a PR to add the URLs back.

[iccub]

I removed them because there were not present here :D

@jumde please also replace with Enter your security key PIN with Enter your security PIN

[karenkliu]

We can add it to the first screen:

Also the second screen with updated string:

[LaurenWags]

Verified passed with iPad 5th Gen using 1.11.1 (19.08.13.17)

• Verified screens displayed as per UI for WebAuthn #1335 (comment)
• missing URLs to be handled by Add site url to the touch key modal #1359 (comment)
• Screenshots from the iPad (note, unable to get 'Verifying your PIN...' screenshot, it was too quick.
  
  
  

[kjozwiak]

Verification PASSED on iPhone 6s+ iOS 12.4 using 1.11.1 (19.08.13.17).