[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>
This commit is contained in:
Jorge Martin Espinosa 2023-07-07 10:08:38 +02:00 committed by GitHub
parent ea381cda2c
commit 5ee2418a1c
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
25 changed files with 89 additions and 74 deletions

1
changelog.d/792.bugfix Normal file
View file

@ -0,0 +1 @@
Use the `Outlined` version of M3 textfields for the login screen.

View file

@ -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)

View file

@ -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(),

View file

@ -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>

View file

@ -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>

View file

@ -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>

View file

@ -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>

View file

@ -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>

View file

@ -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>

View file

@ -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>

View file

@ -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>

View file

@ -10,11 +10,14 @@
<string name="screen_room_attachment_source_files">"Attachment"</string>
<string name="screen_room_attachment_source_gallery">"Photo &amp; Video Library"</string>
<string name="screen_room_attachment_source_location">"Location"</string>
<string name="screen_room_encrypted_history_banner">"Message history is currently unavailable in this room"</string>
<string name="screen_room_error_failed_retrieving_user_details">"Could not retrieve user details"</string>
<string name="screen_room_invite_again_alert_message">"Would you like to invite them back?"</string>
<string name="screen_room_invite_again_alert_title">"You are alone in this chat"</string>
<string name="screen_room_message_copied">"Message copied"</string>
<string name="screen_room_no_permission_to_post">"You do not have permission to post to this room"</string>
<string name="screen_room_reactions_show_less">"Show less"</string>
<string name="screen_room_reactions_show_more">"Show more"</string>
<string name="screen_room_retry_send_menu_send_again_action">"Send again"</string>
<string name="screen_room_retry_send_menu_title">"Your message failed to send"</string>
<string name="screen_room_error_failed_processing_media">"Failed processing media to upload, please try again."</string>

View file

@ -13,7 +13,7 @@
<string name="screen_room_details_encryption_enabled_subtitle">"Messages are secured with locks. Only you and the recipients have the unique keys to unlock them."</string>
<string name="screen_room_details_encryption_enabled_title">"Message encryption enabled"</string>
<string name="screen_room_details_invite_people_title">"Invite people"</string>
<string name="screen_room_details_notification_title">"Notification"</string>
<string name="screen_room_details_notification_title">"Notifications"</string>
<string name="screen_room_details_room_name_label">"Room name"</string>
<string name="screen_room_details_share_room_title">"Share room"</string>
<string name="screen_room_details_updating_room">"Updating room…"</string>

View file

@ -2,6 +2,6 @@
<resources xmlns:xliff="urn:oasis:names:tc:xliff:document:1.2">
<string name="screen_roomlist_a11y_create_message">"Create a new conversation or room"</string>
<string name="screen_roomlist_main_space_title">"All Chats"</string>
<string name="session_verification_banner_message">"Looks like youre using a new device. Verify its you to access your encrypted messages."</string>
<string name="session_verification_banner_title">"Access your message history"</string>
<string name="session_verification_banner_message">"Looks like youre using a new device. Verify with another device to access your encrypted messages moving forwards."</string>
<string name="session_verification_banner_title">"Verify its you"</string>
</resources>

View file

@ -140,7 +140,10 @@
<string name="emoji_picker_category_places">"Travel &amp; Places"</string>
<string name="emoji_picker_category_symbols">"Symbols"</string>
<string name="error_failed_creating_the_permalink">"Failed creating the permalink"</string>
<string name="error_failed_loading_map">"Element could not load the map. Please try again later."</string>
<string name="error_failed_loading_messages">"Failed loading messages"</string>
<string name="error_failed_locating_user">"Element could not access your location. Please try again later."</string>
<string name="error_missing_location_auth">"Element does not have permission to access your location. You can enable access in Settings > Location"</string>
<string name="error_some_messages_have_not_been_sent">"Some messages have not been sent"</string>
<string name="error_unknown">"Sorry, an error occurred"</string>
<string name="invite_friends_rich_title">"🔐️ Join me on %1$s"</string>
@ -166,6 +169,11 @@
<string name="screen_media_upload_preview_error_failed_sending">"Failed uploading media, please try again."</string>
<string name="screen_migration_message">"This is a one time process, thanks for waiting."</string>
<string name="screen_migration_title">"Setting up your account."</string>
<string name="screen_notification_settings_enable_notifications">"Enable notifications on this device"</string>
<string name="screen_notification_settings_system_notifications_action_required">"To receive notifications, please change your %1$s."</string>
<string name="screen_notification_settings_system_notifications_action_required_content_link">"system settings"</string>
<string name="screen_notification_settings_system_notifications_turned_off">"System notifications turned off"</string>
<string name="screen_notification_settings_title">"Notifications"</string>
<string name="screen_report_content_block_user_hint">"Check if you want to hide all current and future messages from this user"</string>
<string name="screen_share_location_title">"Share location"</string>
<string name="screen_share_my_location_action">"Share my location"</string>
@ -174,6 +182,18 @@
<string name="screen_share_open_osm_maps">"Open in OpenStreetMap"</string>
<string name="screen_share_this_location_action">"Share this location"</string>
<string name="screen_view_location_title">"Location"</string>
<string name="screen_waitlist_message">"There\'s a high demand for %1$s on %2$s at the moment. Come back to the app in a few days and try again.
Thanks for your patience!"</string>
<string name="screen_waitlist_message_success">"Welcome to %1$s!"</string>
<string name="screen_waitlist_title">"Youre almost there."</string>
<string name="screen_waitlist_title_success">"You\'re in."</string>
<string name="screen_welcome_bullet_1">"Calls, location sharing, search and more will be added later this year."</string>
<string name="screen_welcome_bullet_2">"Message history for encrypted rooms wont be available in this update."</string>
<string name="screen_welcome_bullet_3">"Wed love to hear from you, let us know what you think via the settings page."</string>
<string name="screen_welcome_button">"Let\'s go!"</string>
<string name="screen_welcome_subtitle">"Heres what you need to know:"</string>
<string name="screen_welcome_title">"Welcome to %1$s!"</string>
<string name="settings_rageshake">"Rageshake"</string>
<string name="settings_rageshake_detection_threshold">"Detection threshold"</string>
<string name="settings_title_general">"General"</string>

View file

@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
oid sha256:d5a518949ddf27ba4a4f4139a3a227486a342a5627c08e52150e0e76fde68e7f
size 30001
oid sha256:7628df19a3da31d3f75219c74fad7f2c813c35cec60902d760bd6895939f8e59
size 37389

View file

@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
oid sha256:5dabfe0f8aac581d004be23d46f736d99cfe662fd4d523cb058e61605fb3e619
size 30336
oid sha256:4fa945bba719a8e04508f49042ee71064605c8b5315a822435f4fa15ccd8c551
size 38570

View file

@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
oid sha256:d5a518949ddf27ba4a4f4139a3a227486a342a5627c08e52150e0e76fde68e7f
size 30001
oid sha256:7628df19a3da31d3f75219c74fad7f2c813c35cec60902d760bd6895939f8e59
size 37389

View file

@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
oid sha256:2f77f1cb022aba56240a6df7c040675be0bd8374e708962214e9aac9c66a9f61
size 31771
oid sha256:4c3eafbca803a46cbac24db0f61d51f3e14bced8fff98c0eee171f522fbd66d1
size 39258

View file

@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
oid sha256:3b61c5af512bfd1087ba62ae24b9677225fb29201795e38354bef00e82ccd95e
size 32132
oid sha256:40ef3fb32c107aa751304de44faf5c78f0faaf6b330c61e9d7618858498aab75
size 40430

View file

@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
oid sha256:2f77f1cb022aba56240a6df7c040675be0bd8374e708962214e9aac9c66a9f61
size 31771
oid sha256:4c3eafbca803a46cbac24db0f61d51f3e14bced8fff98c0eee171f522fbd66d1
size 39258

View file

@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
oid sha256:871933869e264855de16d6dc9c361f3d600e66de18f326ddcaecfc01e311c819
size 27710
oid sha256:fb5440a19523667659d0cfb45841ba3acfe820e0e22a47ef4bbeb2506d5ce039
size 28898

View file

@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
oid sha256:4796e01c900c7695df98f88ee79b0a6b90c43a26a18d2808b02c41982d519f2e
size 27936
oid sha256:94c4f3ec17d3521d546b49a732c263c31ecf17b6c7a19d6820c41466dd1562bb
size 29047

View file

@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
oid sha256:9ae5fe88c5cef58fa8714b5cdbfe03f17b105f7dab98b2efd34c41fda5a6125d
size 56790
oid sha256:3370bdbb9e67c7223a1fa4ccde20e249f2fecac9fdb350c11c00cc0171156db7
size 58503

View file

@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
oid sha256:41245ea4be3afa1241d3593b9c5b7861d6a2bc547b69be82795105ff801791ba
size 59818
oid sha256:2eb712a4523956af6c4a32020caffe3952c5395dd39effcfef3b4a3ac16f1374
size 61866