View Model Live Data with Jetpack Compose

LoginScreen.kt

@AndroidEntryPoint
class LoginScreen : Fragment() {
    @Inject
    lateinit var viewModel: AuthViewModel
    override fun onCreateView(
        inflater: LayoutInflater,
        container: ViewGroup?,
        savedInstanceState: Bundle?
    ) = FrameLayout(requireContext()).apply {
        var signInLiveData: LiveData<Resource<User>> = MutableLiveData<Resource<User>>()
        setContent(Recomposer.current()) {
            MyAppTheme {
                Surface {
                    LoginContainer(signInLiveData) { email, password ->
                        signInLiveData = viewModel.signIn(email, password)
                    }
                }
            }
        }
    }
}

@Composable
fun LoginContainer(
    signInLiveData: LiveData<Resource<User>>,
    onLogin: (email: String, password: String) -> Unit
) {
    var emailValue by state { TextFieldValue("") }
    var passwordValue by state { TextFieldValue("") }
    val loginState by signInLiveData.observeAsState()

    VerticalScroller(modifier = Modifier.fillMaxHeight() + Modifier.fillMaxWidth()) {
        Column(
            verticalArrangement = Arrangement.Center,
            horizontalGravity = Alignment.CenterHorizontally,
            modifier = Modifier.fillMaxWidth()
        ) {
            if (loginState is Resource.Loading<*>) CircularProgressIndicator()
            else if (loginState is Resource.Failure<*>) {
                val error = (loginState.value as Resource.Failure).throwable.message
                    ?: ContextAmbient.current.getString(R.string.something_went_wrong)
                Snackbar(text = {
                    Text(text = error)
                })
            }

            EmailInputComponent(emailValue) {
                emailValue = it
            }

            PasswordInputComponent(passwordValue) {
                passwordValue = it
            }

            LoginButtonComponent(emailValue, passwordValue) {
                onLogin(emailValue.text, passwordValue.text)
            }
        }
    }
}

@Composable
fun EmailInputComponent(
    emailValue: TextFieldValue,
    onValueChange: (textField: TextFieldValue) -> Unit
) {
    val context = ContextAmbient.current
    val emailLabel = context.getString(R.string.enter_your_email)

    FilledTextField(
        textStyle = TextStyle(color = Color.White),
        label = { Text(emailLabel, color = Color.White) },
        value = emailValue,
        keyboardType = KeyboardType.Email,
        modifier = Modifier.padding(16.dp) + Modifier.fillMaxWidth(),
        onValueChange = onValueChange
    )
}

@Composable
fun PasswordInputComponent(
    passwordValue: TextFieldValue,
    onValueChange: (textField: TextFieldValue) -> Unit
) {
    val context = ContextAmbient.current
    val passwordLabel = context.getString(R.string.enter_your_password)

    FilledTextField(
        label = { Text(passwordLabel, color = Color.LightGray) },
        value = passwordValue,
        modifier = Modifier.padding(16.dp) + Modifier.fillMaxWidth(),
        visualTransformation = PasswordVisualTransformation(),
        onValueChange = onValueChange
    )
}

@Composable
fun LoginButtonComponent(
    emailValue: TextFieldValue,
    passwordValue: TextFieldValue,
    onLogin: () -> Unit
) {
    val valid = emailValue.text.count() > 0 && passwordValue.text.count() > 0
    val context = ContextAmbient.current
    val buttonLabel = context.getString(R.string.login)

    OutlinedButton(
        onClick = onLogin,
        enabled = valid,
        backgroundColor = Color(0x22FFFFFF),
        modifier = Modifier.padding(16.dp)
    ) {
        Text(buttonLabel, modifier = Modifier.padding(horizontal = 16.dp, vertical = 8.dp))
    }
}

val green = Color(0xFF009688)
private val themeColors = lightColorPalette(
    primary = green,
    surface = green
)

@Composable
fun MyAppTheme(content: @Composable() () -> Unit) {
    MaterialTheme(colors = themeColors) {
        content()
    }
}