Login

Owned by Matt Birtch
Last updated: Oct 13, 2021 by Marina Karpenko (Deactivated)
4 min read

In-progress

Important Links

https://mattermost.atlassian.net/browse/MM-22822

Figma Design File

Background

In the current app, we have two separate screens for authentication: A “login method” screen and the email/password login screen. The new layout outlined here combines both screens into one screen, similar to how the web app does.

Design

iOS

 

Android

 

Back button

The back button in the header will bring users back to the server screen with the previously entered server details prepopulated. The transition will be a standard pop transition.

Create an account

If a server enables account creation, this button displays in the top-right. See the page dedicated to this.

NOTE: a ticket is out there to include account creation in the mobile app as part of v1.

“Welcome back” messaging

For the majority of cases, users will be returning users. In cases where it’s the user’s first time ever logging in to the server through the app, we simply display “Welcome”.

Forgot password

The screens for this flow will also be updated as part of phase 1. See the Reset Password confluence page dedicated to this.

Other Login Methods

This login screen has been designed for cases where the number of login methods is no more than 3. This will accommodate the majority of use cases. If more login methods are enabled on a server, the buttons then would stack on top of each other at full width.

States

 

 

Default state

Before users enter any information, the Log in button is disabled

 

Keyboard up / Focus state

 

Button enabled

Loading state

 

Error state

 

Login with email is off

Theming and Dark UI

Since this screen is viewed prior to authenticating, we don’t know the user’s preferences for themes. So we will use the following themes based on the user’s OS settings:

Light Mode: Uses the ‘Sapphire’ theme (formerly ‘default’)

Dark mode: Uses the ‘Midnight’ theme (formerly ‘Windows Dark’)

 

 

Transition to Login Screen from Adding the First Server

The transition from the First Server Screen to the Login screen is a standard push transition.

 

Transition to Home Screen

Once the user has successfully logged in to their first server, we do a push transition to the ‘Home’ Screen with the bottom tab bar animating up simultaneously.

 

 

Other Login Scenarios

With multi-server support, there are a few other scenarios to consider for authentication:

  1. When a session has expired for a server that is in the user’s Server List

  2. A user has logged out of a server that is in their Servers List

  3. A user has just added a new server to their Servers List (but it’s not their first server)

In all the cases above, the user will need to log in again to that Server. For these cases, the Login Screen opens in a modal.

 

Tablet Layout