feat(ux): improve

[D-Nice]

Important

• enforce allowing only lowercase input in verify mnemonic part... this is apparently a big pain point for users so far, on mobile it auto capitalizes first... ab4c4c6#diff-cdf5b28a79e8b577952a76da20b29922d2a6a22b00a7cc484a5fa55911409148R3

Normal

• must have modal asking if user is new or existing, and send to different page depending on it
• make note on the verify mnemonic page that the user should refresh the page if they didn't save the backup phrase in last step, and READ & FOLLOW THE INSTRUCTIONS CAREFULLY! Could consider more lax UX and just not locking them from going back.
• verify the FULL phrase... multiple times users have only correctly saved 11 of 12 phrases (this was already in over a month prior to this request, at least in prod side: bc40ad9#diff-b73fd971951b4448fedf156cdf3399fcbe53e67f4d9442977e46c1584b513673R47)
  - [ ] OR number the words, to avoid users missing them... however, still not foolproof (could become AND if problems again noted)
  - [ ] dont let user enter anything that matches the backup phrase for their unlock password, make clearer this is user generated pass (reinvestigating this)
  user might use a password from bip39 words, aka not collision resistant, so this may be worse than better
• on prompt 7 user was asking if they are done with the process, make clear they may now continue to the rest of the application c1b766a
• confused by url, maybe mention in tooltip, website name or change url to website? c1b766a

maybe

• look at old modal for inspiration to improve visual acuity of the setup https://github.com/SrsSec/SrsPass-pwa/blob/develop/src/modal/WelcomeModal.svelte
• mixing of nav buttons + verify/confirm etc... may be confusing. Consider hiding them when disabled or reworking it
  - [ ] providing a QR code hover or save as on backup phrase
• prompt/alert regarding nav keys such ash h l enter, maybe identify if pc/keybaord user or non-mobile for this prompt
• some users get confused by disabled nav, might be bad non-obvious disable coloring on device/browser
• autofocus on inputs for users, some users have trouble clicking them ab4c4c6
  - [ ] TAB or some other key to autofocus on current prevalent input on page? Would be useful for pass for key users
  superceded by above autofucs
  - [ ] alert if user is clearly not reading, maybe allow prev on verify, but tell user to make sure they save it... they shouldn't be going back to check
  too invasive
• tell users setup will take 5 mins c1b766a

if pushback or complaints
- [ ] regarding autofocus, as per https://stackoverflow.com/a/57258701 it may affect impaired users, may be useful to add option or choice to disable this somehow upon setup...
minimize choices unless complaints voiced

2020-12-20 priority

• add skip button to verification, based on user review. User's have indicated they would normally not do a step like that, as it feels far too cumbersome. Warn users on the reprecussions of a wrong password, and guide them to a page in the docs or the like, where it explains on testing the backup phrase on another device, to get the same srs pass output. Do it via a confirm, requiring confirmation that user understands reprecussions of skipping... and maybe add localStore variable noting this... or consider adding later backup option via quick-start as backport
• add a counter to note how many more words must be verified, or a table of words numbered 1 - 12 on a table getting crossed out
• consider a step tracker, step 1 of 8 etc..., maybe as a sidebar if not mobile, or just go mobile first and have it in the modal, on header or footer of it... this could cause difficulties when it comes to quick start implementation, as we'd be skipping steps.... so going from step 2 to 8 may seem weird and confuse
• Sidebar would still be very nice

These 2 points are smaller solutions to the ultimate problem we may run into, the ultimate solution may be to allow skipping of the initial setup, except for the master password... to be explained in a seperate issue to be linked back here as it will be a heavier feature

• feat(ux): provide quick-start option, instead of full forced setup #30

• add additional advOpt for showing the custom format definitions, or link to docs with it?

• consider popover elements, as replacements for the current tooltips style, for benefit of mobile users... or find some other alternative that makes the tooltips work there, without being as invasive as popovers.

• make instructions more concise, now that docs page is up, and instead see about linking to docs page, with ? hyperlink, where appropriate