Page MenuHomePhabricator

Update login interface
Closed, ResolvedPublic

Description

We need to update the design of the login screen to accommodate improvements to our authentication APIs. The login screen also needs a little visual update, as its design has not been update for our new app look-and-feel and brand standards.

Specifically:

  • Add password reset option
  • Add input field/flow for 2 factor authentication code
  • Update text and visual style to match app 5.0, dynamic type and brand colors ---

Related ticket

https://phabricator.wikimedia.org/T103373

Prototype

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

Zeplin

https://zpl.io/Z21KiN7
Tags: 2FA, Log in, Create account

This comment as a doc

https://docs.google.com/document/d/1dM09Tg9_2uOqEcx7PQZPEqeDGKFtfh-6jwJhLcJpcHs/edit?usp=sharing

User stories

Users with accounts
As a user with a Wikipedia account I would like to be able to log in to my account on the iOS app, even if I have 2FA enabled. When I forget my password, I would like to be able to reset my password through the app.

Users creating new accounts
When creating a new account through the app I would like to receive clear messaging from the system when an error occurs. Additionally, I would like to be able to learn about other ways to create an account if I cannot complete the CAPTCHA verification.

Design constraints

Design details

Inline error messaging and validation

When possible, place messaging inline with where the error occurred and explain to users what caused the error / how it can be fixed.

Log in

Action MessageLocationColor
User enters incorrect passwordInvalid passwordUnder password input fieldRed
User enters incorrect 2FA keyVerification failedUnder 2FA code input fieldRed

Create an account

Action MessageLocationColor
Users password confirmation field does not match password fieldPasswords do not matchUnder verify password fieldYellow
User correctly verifies passwordPasswords matchUnder verify password fieldGreen

CAPTCHA

Action MessageLocationColor
User incorrectly enters CAPTCHAWrong code. Please try again.Under CAPTCHA text fieldRed

2FA

Action MessageLocationColor
User incorrectly enters 2FA keyVerification failedUnder 2FA fieldRed
Other system messages

Submission attempts exceed pre-set threshold

Action MessageColor
User exceeds number of login attemptsYou have made too many recent login attempts. Please wait 5 minutes before trying again.Red
User exceeds number of 2FA attemptsYou have made too many recent login attempts. Please wait 5 minutes before trying again.Red

In sign-up flow user enters username that is already in use

Action MessageColor
User enters a username that is already in useSystem defined message re: usernameRed

Reset password email confirmation

Action MessageColor
User resets their passwordTemporary password sent via emailGreen

Other errors not related to form submission should also be shown as system messages.

Event Timeline

JMinor lowered the priority of this task from High to Medium.Nov 17 2016, 8:12 PM
JMinor created this task.
cmadeo added a subscriber: cmadeo.Nov 17 2016, 8:48 PM
JMinor renamed this task from Update login interface to support 2FA and passowrd reset to Update login interface to support 2FA and password reset.Nov 17 2016, 9:18 PM

What's there for MediaWiki-extensions-OATHAuth to do here? Isn't action=clientlogin supposed to handle this sort of thing?

Tgr added a comment.Nov 18 2016, 3:47 AM

Yeah, no extension changes are required. Still nice to track related tasks.

cmadeo claimed this task.Nov 21 2016, 5:46 PM
cmadeo removed cmadeo as the assignee of this task.
cmadeo claimed this task.
This comment was removed by cmadeo.

Made a small change to the design to remove the W above the forms as it meant that the CTA / forward progress button was pushed below the keyboard for many screens.

Josve05a moved this task from Backlog to iOS App on the User-Josve05a board.Nov 28 2016, 5:23 AM
cmadeo updated the task description. (Show Details)
Kaartic added a subscriber: Kaartic.EditedDec 30 2016, 2:28 PM

I just wanted to make a little suggestion. I saw that the Reset Password screen asks the user to enter either his User name or his Email address, that would be helpful. But I have seen many users who always fill in the details asked for in a page without reading the text. Hence it is possible possible for someone to unknowingly type details for both the fields when only one is required (a few other Reset password implementations in other places require the user to enter both the details)

So, I thought it would be nice to restrict the user from doing that, like having a radio button near the fields of Username and Email address fields and enabling only the selected field ( Username could possibly be made the default). That would prevent the user from entering details for both the fields (knowingly or unknowingly). Just a little suggestion that came to my mind, may not be such a good idea :).

Another alternative I thought is to merge both the fields into one field probably named Username or Email address and allowing the user to enter his username or password into the same field. That would be even more straight forward. Anyway, it's just a suggestion.

cmadeo added a comment.Jan 3 2017, 5:04 PM

@Kaartic Hi! Thanks for the suggestion. I'd be great to have the fields merged, I'll check-in today to see if that's possible.

@Kaartic Hi! Thanks for the suggestion. I'd be great to have the fields merged, I'll check-in today to see if that's possible.

You're welcome! I also noticed that the Mediawiki also had a similar way of asking for Username or Email address in the Reset password page and hence filed it in T154505

Mhurd added a subscriber: Mhurd.Jan 5 2017, 8:12 PM

@JMinor

Looks like the description mentions the following tasks:

  • Add password reset option
  • Add input field/flow for 2 factor authentication code
  • Update text / typography / brand colors / visual style to match app 5.0
  • Utilize both labels and placeholder text
  • Dynamic type
  • Other ways to create an account if I cannot complete the CAPTCHA verification
  • Specify errors inline
  • Error message updates (mapping system reported errors to those in ticket)
JMinor renamed this task from Update login interface to support 2FA and password reset to Update login interface.Jan 6 2017, 12:10 AM
JMinor updated the task description. (Show Details)

Thanks @Mhurd. I created subtasks based on this breakdown and put them into Needs Sync. For 2FA specifically, note that task already existed as (annoyingly) a parent task of this one, the rest are subtasks.

I will work with Carolyn to make sure assets are sorted to the right tasks.

cmadeo removed cmadeo as the assignee of this task.Jan 24 2017, 7:40 PM
Kaartic removed a subscriber: Kaartic.Feb 16 2017, 12:14 PM

@Mhurd after the creation of tickets T158142 + T158253, update of T154725 (to include log in + CAPTCHA screen) and our conversations yesterday, are there any remaining design blockers on this ticket or can I move it to Needs Acceptance Criteria? Thanks!

cmadeo updated the task description. (Show Details)Feb 16 2017, 10:46 PM
cmadeo updated the task description. (Show Details)

Per @cmadeo I'm parking this in "Blocked or waiting" because it's really just the master list (Epic?) of login related tickets. We weren't sure of the best column for now.