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

Kaartic removed a subscriber: Kaartic.Feb 25 2017, 11:58 AM
Mhurd claimed this task.Feb 26 2017, 12:35 AM
This comment was removed by Mhurd.
Mhurd updated the task description. (Show Details)Feb 28 2017, 12:27 AM
cmadeo updated the task description. (Show Details)Feb 28 2017, 12:35 AM
Mhurd added a comment.Mar 3 2017, 2:32 AM

@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
Mhurd added a comment.Mar 3 2017, 4:39 AM

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

Mhurd updated the task description. (Show Details)Mar 3 2017, 5:52 AM
cmadeo added a comment.Mar 3 2017, 6:51 PM

@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 ;)

Mhurd added a comment.Mar 3 2017, 11:34 PM

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

Mhurd added a comment.EditedMar 3 2017, 11:35 PM

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

Mhurd added a comment.Mar 4 2017, 1:04 AM

@cmadeo sounds good thx!

Josve05a moved this task from Backlog to iOS App on the User-Josve05a board.Mar 4 2017, 12:46 PM
Josve05a removed a project: User-Josve05a.
Mhurd updated the task description. (Show Details)Mar 7 2017, 6:41 AM
JMinor closed this task as Resolved.Mar 22 2017, 4:55 PM