Skip to content

Login/Register UX upgrade

username-removed-408230 requested to merge login-ui-improvements into master

What does this MR do?

This merge request makes several upgrades to the existing login/register workflow. The most prominent changes are:

  1. Transitioning to tabbing between login/registration screens
  2. Introducing front-end validation with field-specific validation errors
  3. Async username availability checking for new users

There are also a number of stylistic updates to authentication/session-related forms that use .login-box styling (see https://gitlab.com/gitlab-org/gitlab-ce/issues/13937).

Are there points in the code the reviewer needs to double check?

I'm not sure what to do with current error messages from Rails (devise_error_messages) in our UI. I read [a bit on this] (http://guides.rubyonrails.org/v2.3.11/activerecord_validations_callbacks.html#displaying-validation-errors-in-the-view), but I'd especially appreciate feedback on this.

Notes:

  1. Async username validation was initially written/reviewed here (https://gitlab.com/gitlab-org/gitlab-ce/merge_requests/4773) although a fair number of changes have been made on top of it.
  2. The project description will need to be updated by GitLab project admins.

Why was this MR needed?

Improves Login/Registration UX.

Screenshots (if relevant)

57e82d6f1b32d479903999

57e82e3d6b259918827424

Sign in preview: http://localhost:3000/admin/appearance then change something, http://localhost:3000/admin/appearance/preview Signin Preview

Resend Confirmation: http://localhost:3000/users/confirmation/new Resend Confirmation

Reset Password Request: http://localhost:3000/users/password/new Screen_Shot_2016-09-27_at_2.17.11_PM

Change your password (new password and confirm): Must submit Reset Password Requests and follow Reset Password Link in http://localhost:3000/rails/letter_opener/ Email Screen_Shot_2016-09-27_at_2.18.08_PM

Two Factor Auth: Enable 2-factor auth and then sign in

Screen_Shot_2016-09-27_at_2.19.36_PM

Does this MR meet the acceptance criteria?

Omniauth: (got its own box)

Screen_Shot_2016-09-27_at_5.05.54_PM

What are the relevant issue numbers?

https://gitlab.com/gitlab-org/gitlab-ce/issues/13937

TODO:

  • Write tests for GlFieldErrors
  • Add screenshots of all screens affected by these changes
  • Verify that UX completely matches design with @cperessini.
  • Visually test omniauth buttons, ensure styling isn't broken.
  • Get tests passing.

cc: @jschatz1

Merge request reports