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

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.

Failed loginFailed login with CAPTCHA and CAPTCHA system alertFailed login with CAPTCHA and CAPTCHA system alert + keyboard

Create account flow

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