| Note |
|---|
In-progress |
Important Links
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 ticketis 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:
When a session has expired for a server that is in the user’s Server List
A user has logged out of a server that is in their Servers List
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
