Page MenuHomePhabricator

Update styles for login and create account flows
Closed, ResolvedPublic

Assigned To
Authored By
cmadeo
Feb 15 2017, 12:39 AM
Referenced Files
F6083952: Screen Shot 2017-03-03 at 3.35.18 PM.png
Mar 3 2017, 11:35 PM
F6079484: Login - Set password.png
Mar 3 2017, 6:51 PM
F6079482: info.pdf
Mar 3 2017, 6:51 PM
F6079483: Refresh.pdf
Mar 3 2017, 6:51 PM
F5905179: Create account 00.png
Feb 28 2017, 12:35 AM
F5905184: Create account 02.png
Feb 28 2017, 12:35 AM
F5659347: Failed login with keyboard up.png
Feb 16 2017, 10:42 PM
F5659348: Failed login.png
Feb 16 2017, 10:42 PM

Description

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 (786×375 px, 52 KB)
Create account 02.png (828×375 px, 53 KB)
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 ;)

Login - Set password.png (667×375 px, 30 KB)

@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...

Screen Shot 2017-03-03 at 3.35.18 PM.png (1×984 px, 97 KB)

@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.