Page MenuHomePhabricator

Update visual style of login flow for 5.0 and brand standards
Closed, DuplicatePublic

Description

Update visual design of login screens for:

  • text styles (see also ticket for dynamic type support)
  • brand/AA compliant colors
  • remove unique glyphs or symbols and replace them with standard assets (see related ticket T147730)

Prototype:
https://wikimedia.invisionapp.com/share/7J9FKPNPW

Log in flow

Login 00.png (667×375 px, 25 KB)
reset.png (667×375 px, 27 KB)
2fa.png (667×375 px, 29 KB)
Log in formReset password form2FA varification

Log in with CAPTCHA
After the system sends an error requesting a CAPTCHA security check (due to number of invalid log in attempts) the CAPTCHA element will be added after the UN/PW fields, the 'log in' button will move below the CAPTCHA element and the focus will be placed on the PW field.

Login 00.png (667×375 px, 25 KB)
Failed login.png (667×375 px, 47 KB)
Failed login with keyboard up.png (667×375 px, 49 KB)
Failed loginFailed login with CAPTCHA and CAPTCHA system alertFailed login with CAPTCHA and CAPTCHA system alert + keyboard

Create account flow

Create account 00.png (667×375 px, 27 KB)
Create account 04.png (667×375 px, 33 KB)
Create account form. ,Selecting 'Next' scrolls down to CAPTCHACaptcha validation (on same screen as create account form)

Event Timeline

@cmadeo Reminder from planning meeting: consider overall form vertical height impact on layout when used in combination with larger dynamic text sizes. (i.e. moving progressive button down from title bar, landscape on phone - for larger keyboard - but longer form needing more scrolling, etc)

Also here: https://phabricator.wikimedia.org/T154727

Added mocks for login screen with CAPTCHA (after system requests CAPTCHA due to number of failed login attempts) and created tickets T158142 + T158253