Building the login screen

To build the login screen, we will start creating a LoginScreen composable with Jetpack Compose. We will have to include the app’s logo, fields to introduce the email and password, and a Login button. We can also include a text to show whether there are any errors when the user tries to log in.

This login screen is going to have four states (Idle, Loading, Success, and Error), so let’s start modeling the overall ViewState:

sealed class LoginState {
    object Idle : LoginState()
    object Loading : LoginState()
    object Success : LoginState()
    data class Error(val message: String?) : LoginState()
}

Now, let’s create the LoginScreen composable:

@Composable
fun LoginScreen() {
    val loginViewModel: LoginViewModel = hiltViewModel()
    val loginState =
        loginViewModel...