Create an Account

Design Complete

Important Links

MM-33148: RN: Mobile V2 Account Creation FlowBacklog

Figma Design File (Updated)

Introduction

If a server enables account creation, the mobile app will now have a flow to accommodate for user account creation through the app.

Design

The layout and aesthetics for this screen follow the Login and Add Server Screens.

iOS

Android

 

Back button

Tapping the Back button will push back to the Login Screen.

Email

Must be a valid email address. Emails will be verified as next step.

Username

Valid usernames must follow pattern identified in system console.

Create Account button

This button is disabled until all required fields are valid.

Other Account Creation Methods

In the same way that users can log in using other authentication methods, accounts can also be created using other authentication methods. (OAuth, SAML)

Below the standard form fields a section shows with the available authentication methods. If there are more than two, all buttons show full-width and stacked on top of eachother (see next screen)

 

The transition from the Login Screen

Users can access this screen via a button in the top-right of the new Login Screen. Tapping this will push the user to the Create Account screen.

 

States

 

Default State

By default, the ‘Create Account’ button is disabled until all inputs have valid info

Field with Error

An error message with icon replaces the help text.

Button enabled

Once all inputs have valid info, the ‘Create Account’ button is enabled.

Email verification screen

When an account is created, a verification email is sent to the email address provided and the screen below is displayed along with a toast message at the bottom.

Open email app

Tapping this button will open the user’s default email app.

Resend email

Tapping this button will send another verification email. The same toast will show at the bottom (see next screen)

Toast

When landing on this screen, a ‘Verification email sent’ toast will show at the bottom. This toast will automatically disappear after 4 seconds.

Verification email

When tapping on the “Verify Email” button from the verification email, ideally we open up the login screen directly within the Mattermost mobile app.

Email verified

Toast

When landing on this screen, a ‘Email verified’ toast will show at the bottom. This toast will automatically disappear after 4 seconds.

Pre-populate email address

When coming from the verification email, the email address should ideally be prepopulated.

 

 

Tablet Layout