Designs - 2 step login for username/password based logins

Tracking stub to be populated once we close out the UX for 2 step login, using username/passwords for first cohort of Protocells

Solution

• See attached designs
• 🖼️ Figma design file
• 📺 video walkthrough

Requirements

See attached designs for more visual and content details.

• Global sign-in page:
  • GitLab.com heading changes to Sign in to GitLab.com
  • By default, Sign in button reads Continue
  • Some elements are hidden until the system checks the user association with an org:
    • Password field
    • Forgot your password? link
    • Remember me checkbox
  • While the system checks the user association with an org:
    • Continue button is in loading state
  • If the username/email is associated with the default org:
    • Show the hidden elements
    • Change Continue button to Sign in
  • If the username/email is associated with a specific org:
    • Change Continue button to Continue to organization
• Org sign-in page:
  • Block search engine indexing
  • Show org custom avatar, else show GitLab logo
    • Other sign-in-related pages should be branded as well: 2FA, forgot your password
  • All fields and elements are shown by default
• Common to both sign-in approaches:
  • Compatible with 2FA
  • Compatible with password managers autofill
  • Compliant with WCAG 2.2 level AA accessibility standards
  • Error states are shown (e.g. invalid username and password)