MFA pairing UI/accessibility tweaks - design changes

[wesleyboar]

Overview

Tweaked design. Simplified markup and text. (Not yet) Used modal to offer copy/paste of QR verification code.

Related

• TUP-535
• updates design of TUP-517 and TUP-472: MFA pairing UI/accessibility tweaks #265
• requires fix: button text alignment, excess button markup & space #271
• requires feat(components): c-nav demo & "--piped" modifier Core-Styles#191
• requires refactor: s-affixed-input-wrapper, also adds prepend & append Core-Styles#199
• requires feat: s-affixed-input-wrapper from cms to base Core-Styles#200
• expects fix: less specific c-button not selector Core-Styles#204

Changes / Testing

"Changes from Dev Confirmed by Design" (source)

1. Do not use a modal for "alternative verification code" "one-time password".

"Direction from Design Meetings" (source)

1. ⓧ ¹
2. Tweaked layout:
   1. Changed QR error message to "Can't scan QR code? View Alternative Verification Code".
   2. Moved QR messages to under and between both steps.
   3. Change code copy to be a modal (like Core Portal shared link)
3. Add more space between text links that have a pipe e.g. Get Help | Exit Pairing Process.
   ^{⚠️ Must prematurely use https://github.com/TACC/Core-Styles/releases/tag/v2.13.0 c-nav.}
4. Replaced " | Exit Pairing Process" with link to " | MFA Documentation".
5. Removed MFA Documentation in Manage Account section (screenshot).
6. Replaced "If you do not receive …" message with "Didn't receive a message within 5 minutes? Get help."

"Additional Changes" (source)

1. Moved SMS messages to under and between both steps.

Other

I followed general rules from Designers:

• Error messages are shorter (but still grammatically correct sentences).
• Messages do not say "please".

UI

1. Manage Acct.:
   
2. MFA options:
   
3. QR:
   1. required field:
      
   2. loading QR:
      
   3. qr generation:
      
   4. validation error:
      
   5. OTP copy success:
      
   6. alt. message if data.optkey.value_b32 is missing:
      
4. SMS:
   1. form:
      
   2. validation error:
      
5. success:
   I think I am unable to screenshot success, because I am unable to pair locally, because I am already paired on production. I am scared to unpair and re-pair locally, for fear of confusing the backend.

Footnotes

1. This request from the Design ticket was stricken out. ↩

[wesleyboar]

@jarosenb Since new dev and design direction, I moved now-unrelated changes to smaller PRs:

• fix: FieldWrapper misc improvements #276
• feat: add TextCopyField and TextCopyModal #277
• feat: <Button> support all <button> attributes #278

[wesleyboar]

GitHub is not showing, on this PR, my latest pushed commit 04e6c6d, which restores TextCopyField, and thus would fix the failing check.

[wesleyboar]

Comment on new changes:

• Install Core-Styles v2.15 and load s-form.
• Load form.css instead of form.cms.css (renamed).

[jarosenb]

Diff is much improved and passed CMD spot-check in dev.

[wesleyboar]

✅ After fixing layout inconsistencies and my bugs, I approve on behalf of CMD.¹

I found and fixed various UI bugs (I had caused).

I also finally looked outside the QR panels.

I found and fixed layout inconsistencies:

• Use <SectionHeader>* which MFA CSS was re-inventing in isolation.
• Use consistent spacing above MFA section action buttons.
• Removed now-unnecessary <br /> in an MFA modal form.

^{* J.R. and I agreed to move away from <Section>. Other layouts still use <SectionHeader>.}

Footnotes

1. The unpairing UX could use some love, but it's less popular a feature. The improvements we have need to get out the door. ↩