[Design] Use outlined textfields in login screen (#801)

* Use outlined textfields in the login screen * Fix enabled status * Fix loading state for button in `ConfirmAccountProviderView` too * Update subtitle string * Remove no longer used translation --------- Co-authored-by: ElementBot <benoitm+elementbot@element.io>
2023-07-07 10:08:38 +02:00 · 2023-07-07 10:08:38 +02:00 · df8f447e23
commit df8f447e23
parent f98427a41a
25 changed files with 89 additions and 74 deletions
--- a/features/login/impl/src/main/kotlin/io/element/android/features/login/impl/screens/confirmaccountprovider/ConfirmAccountProviderView.kt
+++ b/features/login/impl/src/main/kotlin/io/element/android/features/login/impl/screens/confirmaccountprovider/ConfirmAccountProviderView.kt
@ -91,7 +91,7 @@ fun ConfirmAccountProviderView(
                    text = stringResource(id = R.string.screen_account_provider_continue),
                    showProgress = isLoading,
                    onClick = { eventSink.invoke(ConfirmAccountProviderEvents.Continue) },
-                    enabled = state.submitEnabled,
+                    enabled = state.submitEnabled || isLoading,
                    modifier = Modifier
                        .fillMaxWidth()
                        .testTag(TestTags.loginContinue)
--- a/features/login/impl/src/main/kotlin/io/element/android/features/login/impl/screens/loginpassword/LoginPasswordView.kt
+++ b/features/login/impl/src/main/kotlin/io/element/android/features/login/impl/screens/loginpassword/LoginPasswordView.kt
@ -16,7 +16,6 @@

 package io.element.android.features.login.impl.screens.loginpassword

-import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.ExperimentalLayoutApi
 import androidx.compose.foundation.layout.Spacer
@ -69,9 +68,9 @@ import io.element.android.libraries.designsystem.preview.ElementPreviewDark
 import io.element.android.libraries.designsystem.preview.ElementPreviewLight
 import io.element.android.libraries.designsystem.theme.components.Icon
 import io.element.android.libraries.designsystem.theme.components.IconButton
+import io.element.android.libraries.designsystem.theme.components.OutlinedTextField
 import io.element.android.libraries.designsystem.theme.components.Scaffold
 import io.element.android.libraries.designsystem.theme.components.Text
-import io.element.android.libraries.designsystem.theme.components.TextField
 import io.element.android.libraries.designsystem.theme.components.TopAppBar
 import io.element.android.libraries.designsystem.theme.components.autofill
 import io.element.android.libraries.designsystem.theme.components.onTabOrEnterKeyFocusNext
@ -110,49 +109,48 @@ fun LoginPasswordView(
            )
        }
    ) { padding ->
-        Box(
+        val scrollState = rememberScrollState()
+
+        Column(
            modifier = Modifier
                .fillMaxSize()
                .imePadding()
                .padding(padding)
                .consumeWindowInsets(padding)
+                .verticalScroll(state = scrollState)
+                .padding(horizontal = 16.dp),
        ) {
-            val scrollState = rememberScrollState()
-
-            Column(
+            // Title
+            IconTitleSubtitleMolecule(
+                modifier = Modifier.padding(top = 20.dp, start = 16.dp, end = 16.dp),
+                iconImageVector = Icons.Filled.AccountCircle,
+                title = stringResource(
+                    id = R.string.screen_account_provider_signin_title,
+                    state.accountProvider.title
+                ),
+                subTitle = stringResource(id = R.string.screen_login_subtitle)
+            )
+            Spacer(Modifier.height(40.dp))
+            LoginForm(
+                state = state,
+                isLoading = isLoading,
+                onSubmit = ::submit
+            )
+            // Min spacing
+            Spacer(Modifier.height(24.dp))
+            // Flexible spacing to keep the submit button at the bottom
+            Spacer(modifier = Modifier.weight(1f))
+            // Submit
+            ButtonWithProgress(
+                text = stringResource(R.string.screen_login_submit),
+                showProgress = isLoading,
+                onClick = ::submit,
+                enabled = state.submitEnabled || isLoading,
                modifier = Modifier
-                    .verticalScroll(state = scrollState)
-                    .padding(horizontal = 16.dp),
-            ) {
-                // Title
-                IconTitleSubtitleMolecule(
-                    modifier = Modifier.padding(top = 20.dp),
-                    iconImageVector = Icons.Filled.AccountCircle,
-                    title = stringResource(
-                        id = R.string.screen_account_provider_signin_title,
-                        state.accountProvider.title
-                    ),
-                    subTitle = stringResource(id = R.string.screen_login_form_header)
-                )
-                Spacer(Modifier.height(32.dp))
-                LoginForm(
-                    state = state,
-                    isLoading = isLoading,
-                    onSubmit = ::submit
-                )
-                Spacer(Modifier.height(28.dp))
-                // Submit
-                ButtonWithProgress(
-                    text = stringResource(R.string.screen_login_submit),
-                    showProgress = isLoading,
-                    onClick = ::submit,
-                    enabled = state.submitEnabled,
-                    modifier = Modifier
-                        .fillMaxWidth()
-                        .testTag(TestTags.loginContinue)
-                )
-                Spacer(modifier = Modifier.height(32.dp))
-            }
+                    .fillMaxWidth()
+                    .testTag(TestTags.loginContinue)
+            )
+            Spacer(modifier = Modifier.height(60.dp))

            if (state.loginAction is Async.Failure) {
                when {
@ -192,7 +190,7 @@ internal fun LoginForm(
        )

        Spacer(modifier = Modifier.height(8.dp))
-        TextField(
+        OutlinedTextField(
            value = loginFieldState,
            readOnly = isLoading,
            modifier = Modifier
@ -203,7 +201,7 @@ internal fun LoginForm(
                    loginFieldState = it
                    eventSink(LoginPasswordEvents.SetLogin(it))
                }),
-            label = {
+            placeholder = {
                Text(text = stringResource(R.string.screen_login_username_hint))
            },
            onValueChange = {
@ -235,7 +233,7 @@ internal fun LoginForm(
            passwordVisible = false
        }
        Spacer(Modifier.height(20.dp))
-        TextField(
+        OutlinedTextField(
            value = passwordFieldState,
            readOnly = isLoading,
            modifier = Modifier
@ -250,7 +248,7 @@ internal fun LoginForm(
                passwordFieldState = it
                eventSink(LoginPasswordEvents.SetPassword(it))
            },
-            label = {
+            placeholder = {
                Text(text = stringResource(R.string.screen_login_password_hint))
            },
            visualTransformation = if (passwordVisible) VisualTransformation.None else PasswordVisualTransformation(),
--- a/features/login/impl/src/main/res/values-cs/translations.xml
+++ b/features/login/impl/src/main/res/values-cs/translations.xml
@ -24,7 +24,6 @@
  <string name="screen_login_error_invalid_user_id">"Toto není platný identifikátor uživatele. Očekávaný formát: \'@user:homeserver.org\'"</string>
  <string name="screen_login_error_unsupported_authentication">"Vybraný domovský server nepodporuje přihlášení pomocí hesla nebo OIDC. Kontaktujte prosím svého správce nebo vyberte jiný domovský server."</string>
  <string name="screen_login_form_header">"Zadejte své údaje"</string>
-  <string name="screen_login_server_header">"Kde budou vaše konverzace probíhat"</string>
  <string name="screen_login_title">"Vítejte zpět!"</string>
  <string name="screen_login_title_with_homeserver">"Přihlaste se k %1$s"</string>
  <string name="screen_server_confirmation_change_server">"Změnit poskytovatele účtu"</string>
--- a/features/login/impl/src/main/res/values-de/translations.xml
+++ b/features/login/impl/src/main/res/values-de/translations.xml
@ -24,7 +24,6 @@
  <string name="screen_login_error_invalid_user_id">"Dies ist kein gültiger Benutzeridentifikator. Erwartetes Format: \'@user:homeserver.org\'"</string>
  <string name="screen_login_error_unsupported_authentication">"Der ausgewählte Homeserver unterstützt kein Passwort- oder OIDC-Login. Bitte kontaktiere deinen Admin oder wähle einen anderen Homeserver."</string>
  <string name="screen_login_form_header">"Gib deine Daten ein"</string>
-  <string name="screen_login_server_header">"Wo deine Gespräche leben"</string>
  <string name="screen_login_title">"Willkommen zurück!"</string>
  <string name="screen_login_title_with_homeserver">"Bei %1$s anmelden"</string>
  <string name="screen_server_confirmation_change_server">"Kontoanbieter wechseln"</string>
--- a/features/login/impl/src/main/res/values-es/translations.xml
+++ b/features/login/impl/src/main/res/values-es/translations.xml
@ -10,7 +10,6 @@
  <string name="screen_login_error_invalid_user_id">"Este no es un id de usuario válido. Formato esperado: \'@user:homeserver.org\'"</string>
  <string name="screen_login_error_unsupported_authentication">"El servidor seleccionado no admite contraseñas ni inicio de sesión OIDC. Póngase en contacto con su administrador o elija otro homeserver."</string>
  <string name="screen_login_form_header">"Introduce tus datos"</string>
-  <string name="screen_login_server_header">"Donde viven tus conversaciones"</string>
  <string name="screen_login_title">"¡Hola de nuevo!"</string>
  <string name="screen_change_server_submit">"Continuar"</string>
  <string name="screen_change_server_title">"Selecciona tu servidor"</string>
--- a/features/login/impl/src/main/res/values-fr/translations.xml
+++ b/features/login/impl/src/main/res/values-fr/translations.xml
@ -22,7 +22,6 @@
  <string name="screen_login_error_invalid_user_id">"Il ne s\'agit pas d\'un identifiant utilisateur valide. Format attendu : « @user:homeserver.org »"</string>
  <string name="screen_login_error_unsupported_authentication">"Le serveur domestique sélectionné ne prend pas en charge le mot de passe ou la connexion OIDC. Contactez votre administrateur ou choisissez un autre serveur domestique."</string>
  <string name="screen_login_form_header">"Saisir vos informations personnelles"</string>
-  <string name="screen_login_server_header">"Où se déroulent vos conversations"</string>
  <string name="screen_login_title">"Heureux de vous revoir!"</string>
  <string name="screen_change_server_submit">"Continuer"</string>
  <string name="screen_change_server_title">"Sélectionnez votre serveur"</string>
--- a/features/login/impl/src/main/res/values-it/translations.xml
+++ b/features/login/impl/src/main/res/values-it/translations.xml
@ -10,7 +10,6 @@
  <string name="screen_login_error_invalid_user_id">"Questo non è un identificatore utente valido. Formato previsto: \'@user:homeserver.org\'"</string>
  <string name="screen_login_error_unsupported_authentication">"L\'homeserver selezionato non supporta la password o l\'accesso OIDC. Contatta il tuo amministratore o scegli un altro homeserver."</string>
  <string name="screen_login_form_header">"Inserisci i tuoi dati"</string>
-  <string name="screen_login_server_header">"Dove vivono le tue conversazioni"</string>
  <string name="screen_login_title">"Bentornato!"</string>
  <string name="screen_change_server_submit">"Continua"</string>
  <string name="screen_change_server_title">"Seleziona il tuo server"</string>
--- a/features/login/impl/src/main/res/values-ro/translations.xml
+++ b/features/login/impl/src/main/res/values-ro/translations.xml
@ -24,7 +24,6 @@
  <string name="screen_login_error_invalid_user_id">"Acesta nu este un identificator de utilizator valid. Format așteptat: „@user:homeserver.org”"</string>
  <string name="screen_login_error_unsupported_authentication">"Homeserver-ul selectat nu acceptă autentificarea prin parola sau OIDC. Te rugăm să contactezi administratorul sau să alegi un alt homeserver."</string>
  <string name="screen_login_form_header">"Introduceți detaliile"</string>
-  <string name="screen_login_server_header">"Locul unde trăiesc conversațiile tale"</string>
  <string name="screen_login_title">"Bine ați revenit!"</string>
  <string name="screen_login_title_with_homeserver">"Conectați-vă la %1$s"</string>
  <string name="screen_server_confirmation_change_server">"Schimbați furnizorul contului"</string>
--- a/features/login/impl/src/main/res/values-sk/translations.xml
+++ b/features/login/impl/src/main/res/values-sk/translations.xml
@ -24,7 +24,6 @@
  <string name="screen_login_error_invalid_user_id">"Toto nie je platný identifikátor používateľa. Očakávaný formát: \'@pouzivatel:homeserver.sk\'"</string>
  <string name="screen_login_error_unsupported_authentication">"Vybraný domovský server nepodporuje prihlásenie pomocou hesla alebo OIDC. Obráťte sa na správcu alebo vyberte iný domovský server."</string>
  <string name="screen_login_form_header">"Zadajte svoje údaje"</string>
-  <string name="screen_login_server_header">"Kde žijú vaše rozhovory"</string>
  <string name="screen_login_title">"Vitajte späť!"</string>
  <string name="screen_login_title_with_homeserver">"Prihlásiť sa do %1$s"</string>
  <string name="screen_server_confirmation_change_server">"Zmeniť poskytovateľa účtu"</string>
--- a/features/login/impl/src/main/res/values/localazy.xml
+++ b/features/login/impl/src/main/res/values/localazy.xml
@ -24,7 +24,6 @@
  <string name="screen_login_error_invalid_user_id">"This is not a valid user identifier. Expected format: ‘@user:homeserver.org’"</string>
  <string name="screen_login_error_unsupported_authentication">"The selected homeserver doesn\'t support password or OIDC login. Please contact your admin or choose another homeserver."</string>
  <string name="screen_login_form_header">"Enter your details"</string>
-  <string name="screen_login_server_header">"Where your conversations live"</string>
  <string name="screen_login_title">"Welcome back!"</string>
  <string name="screen_login_title_with_homeserver">"Sign in to %1$s"</string>
  <string name="screen_server_confirmation_change_server">"Change account provider"</string>
@ -43,5 +42,6 @@ Thanks for your patience!"</string>
  <string name="screen_change_server_title">"Select your server"</string>
  <string name="screen_login_password_hint">"Password"</string>
  <string name="screen_login_submit">"Continue"</string>
+  <string name="screen_login_subtitle">"Matrix is an open network for secure, decentralised communication."</string>
  <string name="screen_login_username_hint">"Username"</string>
 </resources>