Design Complete |
|
Figma Design File (Updated) |
If a server enables account creation, the mobile app will now have a flow to accommodate for user account creation through the app.
The layout and aesthetics for this screen follow the Login and Add Server Screens.
iOS
Android
Tapping the Back button will push back to the Login Screen.
Must be a valid email address. Emails will be verified as next step.
Valid usernames must follow pattern identified in system console.
This button is disabled until all required fields are valid.
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)
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.
By default, the ‘Create Account’ button is disabled until all inputs have valid info
An error message with icon replaces the help text.
Once all inputs have valid info, the ‘Create Account’ button is enabled.
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.
Tapping this button will open the user’s default email app.
Tapping this button will send another verification email. The same toast will show at the bottom (see next screen)
When landing on this screen, a ‘Verification email sent’ toast will show at the bottom. This toast will automatically disappear after 4 seconds.
When tapping on the “Verify Email” button from the verification email, ideally we open up the login screen directly within the Mattermost mobile app.
When landing on this screen, a ‘Email verified’ toast will show at the bottom. This toast will automatically disappear after 4 seconds.
When coming from the verification email, the email address should ideally be prepopulated.