Page MenuHomePhabricator

Update styles for login and create account flows
Closed, ResolvedPublic

Description

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 formForm validation example
Dynamic text styles and colors
SectionType styleColor
Form titleHeadline#54595D
Form description textSubhead#000
LabelCaption#72777D
Placeholder textBody#EAECF0
Form validation progressiveCaption#00af89
Form validation destructiveCaption#d33
Form validation warningCaption#fc3

Checklist to help me track progress...

  • Move progressive buttons out of nav bar
  • Update title labels and placeholder text
  • Update captcha box styling adding border and side buttons
  • Move invalid password alert inline if we can detect error type
  • Make password alert and placeholder dots red on invalid password
  • Move account creation username exists alert inline if we can detect error type
  • Make username alert and placeholder dots red on username exists
  • Move confirm pwd alert inline
  • Make confirm pwd alert placeholder dots yellow on confirm pwd error

Related Objects

Event Timeline

This comment was removed by Mhurd.

@cmadeo hey couple quick notes:

  • we'll probably want to use "two factor authentication" instead of "2FA" to make things easier on translators
  • missing mock for the "change pwd" screen - the one they see after they log in with a temp pwd, but i think i can update it in the mean time to be close

@cmadeo oh i can haz the refresh and info icons? :)

@Mhurd good call on the 2FA vs two factor authentication, it's going to be a long string though...
Here are the assets / mocks you asked for :) also just as a friendly reminder they're also in Zeplin ;)

@cmadeo heads-up the refresh icon (partial) circle and the info icon circles have slightly different radii so they look a little odd together...

@cmadeo

Tap image below to see... it's only a pixel or 2...

@Mhurd These are from the iOS app icon set in Lingo, so let's put this as a design bug and when I'm refreshing the full icon set I'll make sure these are more compatible.