2FA Settings

[lewismoten]

General

• [x] Localize all languages
• [ ] Split off to own route and settings menu action
• [ ] Separate into own npm package

Secret

• [x] Add button to copy secret to clipboard

QR Code

• [x] QR Code takes on @mui theme colors
• [x] QR Code is too big to see on larger displays. Fix this...
  • [x] QR Code hidden when iPhone rotated. Display QR Code / OTP Token input side-by-side
• [x] display logo on qr code
• [x] customize site name sent via qr code
• [x] customize user name sent via qr code
• [x] review memory caching packages for qr code image
• [ ] auto-cancel if taking too long to setup (5 min?)

Token

• [ ] split otp entry as six text boxes and focus as each one is entered
• [ ] clear token when it fails verification
• [ ] clear token when timer runs out
• [ ] prevent more than six digits
• [x] reset otp token after 6th digit entered
• [ ] Add button to paste otp from clipboard
  • [ ] Detect if clipboard has token when browser activated again (task switching from authenticator)
  • [ ] detect pasting otp token

    Timer

• [x] show countdown timer for next otp code
• [x] Timer getting squeezed when progress bar is small
• [x] Move logic to redux saga

Performance

• [x] Split into separate 2FA slice so actions do not include "otp" in names
• [x] chunk so secret generation and qr code not loaded unless needed

Integration

• [x] Autocomplete for password managers
  • [x] 1Password not filling out generated code (works over https, not http on localhost)
• [ ] Support/use WebOTP API https://wicg.github.io/web-otp/

[lewismoten]

Current progress.

[lewismoten]

Progress with reactive landscape view and copy button