Change Details

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 Will work on defining these requirements a bit more, but this should be enough to get started.

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 Will work on defining these requirements a bit more, but this should be enough to get started. --- ==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== - Typography and type styles should follow the iOS style guide and defined type styles - Follows best practices of form design (https://uxdesign.cc/design-better-forms-96fadca0f49c#.yuly66gci) - Utilize both labels and placeholder text (https://www.nngroup.com/articles/form-design-placeholders/) - Specify errors inline when possible ==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 ** | **Message** | **Location** | **Color**| | User enters incorrect password | Invalid password | Under password input field | Red | User enters incorrect 2FA key | Verification failed | Under 2FA code input field | Red //Create an account// | ** Action ** | **Message** | **Location** | **Color**| | User enters a username that is already in use | Username already in use | Under username input field | Red | Users password confirmation field does not match password field | Passwords do not match| Under verify password field | Yellow | User correctly verifies password | Passwords match | Under verify password field | Green //CAPTCHA// | ** Action ** | **Message** | **Location** | **Color**| |User incorrectly enters CAPTCHA | Wrong code. Please try again. | Under CAPTCHA text field | Red //2FA// | ** Action ** | **Message** | **Location** | **Color**| | User incorrectly enters 2FA key | Verification failed | Under 2FA field | Red ====Other system messages==== //Submission attempts exceed pre-set threshold// | ** Action ** | **Message** | **Color**| | User exceeds number of login attempts | You have made too many recent login attempts. Please wait 5 minutes before trying again. | Red | User exceeds number of 2FA attempts | You have made too many recent login attempts. Please wait 5 minutes before trying again. | Red //Reset password email confirmation// | ** Action ** | **Message** | **Color**| | User resets their password | Temporary password sent via email | Green Other errors not related to form submission should also be shown as system messages.

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 Will work on defining these requirements a bit more, but this should be enough to get started. --- ==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== - Typography and type styles should follow the iOS style guide and defined type styles - Follows best practices of form design (https://uxdesign.cc/design-better-forms-96fadca0f49c#.yuly66gci) - Utilize both labels and placeholder text (https://www.nngroup.com/articles/form-design-placeholders/) - Specify errors inline when possible ==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 ** | **Message** | **Location** | **Color**| | User enters incorrect password | Invalid password | Under password input field | Red | User enters incorrect 2FA key | Verification failed | Under 2FA code input field | Red //Create an account// | ** Action ** | **Message** | **Location** | **Color**| | User enters a username that is already in use | Username already in use | Under username input field | Red | Users password confirmation field does not match password field | Passwords do not match| Under verify password field | Yellow | User correctly verifies password | Passwords match | Under verify password field | Green //CAPTCHA// | ** Action ** | **Message** | **Location** | **Color**| |User incorrectly enters CAPTCHA | Wrong code. Please try again. | Under CAPTCHA text field | Red //2FA// | ** Action ** | **Message** | **Location** | **Color**| | User incorrectly enters 2FA key | Verification failed | Under 2FA field | Red ====Other system messages==== //Submission attempts exceed pre-set threshold// | ** Action ** | **Message** | **Color**| | User exceeds number of login attempts | You have made too many recent login attempts. Please wait 5 minutes before trying again. | Red | User exceeds number of 2FA attempts | You have made too many recent login attempts. Please wait 5 minutes before trying again. | Red //Reset password email confirmation// | ** Action ** | **Message** | **Color**| | User resets their password | Temporary password sent via email | Green Other errors not related to form submission should also be shown as system messages.