From 4fd81ed3b896eb9a3f824c71cf58dcd9cd40ab91 Mon Sep 17 00:00:00 2001 From: David Perez Date: Wed, 2 Oct 2024 08:59:26 -0500 Subject: [PATCH] PM-10628: Update Pin Input Dialog UI (#4013) --- .../accountsecurity/PinInputDialog.kt | 45 +++++++++---------- app/src/main/res/values/strings.xml | 2 +- .../accountsetup/SetupUnlockScreenTest.kt | 2 +- .../AccountSecurityScreenTest.kt | 2 +- .../feature/addedit/VaultAddEditScreenTest.kt | 2 +- .../itemlisting/VaultItemListingScreenTest.kt | 2 +- 6 files changed, 25 insertions(+), 30 deletions(-) diff --git a/app/src/main/java/com/x8bit/bitwarden/ui/platform/feature/settings/accountsecurity/PinInputDialog.kt b/app/src/main/java/com/x8bit/bitwarden/ui/platform/feature/settings/accountsecurity/PinInputDialog.kt index 49148f60d..52d8f5f27 100644 --- a/app/src/main/java/com/x8bit/bitwarden/ui/platform/feature/settings/accountsecurity/PinInputDialog.kt +++ b/app/src/main/java/com/x8bit/bitwarden/ui/platform/feature/settings/accountsecurity/PinInputDialog.kt @@ -1,9 +1,9 @@ package com.x8bit.bitwarden.ui.platform.feature.settings.accountsecurity import androidx.compose.foundation.background -import androidx.compose.foundation.layout.Box import androidx.compose.foundation.layout.Column import androidx.compose.foundation.layout.Row +import androidx.compose.foundation.layout.Spacer import androidx.compose.foundation.layout.fillMaxWidth import androidx.compose.foundation.layout.height import androidx.compose.foundation.layout.padding @@ -33,6 +33,7 @@ import androidx.compose.ui.window.Dialog import com.x8bit.bitwarden.R import com.x8bit.bitwarden.ui.platform.components.button.BitwardenFilledButton import com.x8bit.bitwarden.ui.platform.components.button.BitwardenTextButton +import com.x8bit.bitwarden.ui.platform.components.divider.BitwardenHorizontalDivider import com.x8bit.bitwarden.ui.platform.components.field.BitwardenTextField import com.x8bit.bitwarden.ui.platform.components.util.maxDialogHeight import com.x8bit.bitwarden.ui.platform.theme.BitwardenTheme @@ -52,7 +53,7 @@ fun PinInputDialog( onSubmitClick: (String) -> Unit, onDismissRequest: () -> Unit, ) { - var pin by remember { mutableStateOf("") } + var pin by remember { mutableStateOf(value = "") } Dialog( onDismissRequest = onDismissRequest, ) { @@ -74,38 +75,35 @@ fun PinInputDialog( ), horizontalAlignment = Alignment.End, ) { + Spacer(modifier = Modifier.height(height = 24.dp)) Text( modifier = Modifier - .testTag("AlertTitleText") - .padding(24.dp) + .testTag(tag = "AlertTitleText") + .padding(horizontal = 24.dp) .fillMaxWidth(), text = stringResource(id = R.string.enter_pin), color = MaterialTheme.colorScheme.onSurface, style = BitwardenTheme.typography.headlineSmall, ) + Spacer(modifier = Modifier.height(height = 16.dp)) if (scrollState.canScrollBackward) { - Box( - modifier = Modifier - .fillMaxWidth() - .height(1.dp) - .background(MaterialTheme.colorScheme.outlineVariant), - ) + BitwardenHorizontalDivider() } Column( modifier = Modifier .weight(1f, fill = false) - .verticalScroll(scrollState), + .padding(horizontal = 24.dp) + .verticalScroll(state = scrollState), ) { Text( modifier = Modifier - .testTag("AlertContentText") - .padding(24.dp) + .testTag(tag = "AlertContentText") .fillMaxWidth(), text = stringResource(id = R.string.set_pin_description), color = MaterialTheme.colorScheme.onSurfaceVariant, style = BitwardenTheme.typography.bodyMedium, ) - + Spacer(modifier = Modifier.height(height = 16.dp)) BitwardenTextField( label = stringResource(id = R.string.pin), value = pin, @@ -113,35 +111,32 @@ fun PinInputDialog( onValueChange = { pin = it }, keyboardType = KeyboardType.Number, modifier = Modifier - .testTag("AlertInputField") - .padding(16.dp) + .testTag(tag = "AlertInputField") .fillMaxWidth(), ) + Spacer(modifier = Modifier.height(height = 16.dp)) } if (scrollState.canScrollForward) { - Box( - modifier = Modifier - .fillMaxWidth() - .height(1.dp) - .background(MaterialTheme.colorScheme.outlineVariant), - ) + BitwardenHorizontalDivider() } + Spacer(modifier = Modifier.height(height = 16.dp)) Row( + modifier = Modifier.padding(horizontal = 24.dp), verticalAlignment = Alignment.CenterVertically, - modifier = Modifier.padding(24.dp), ) { BitwardenTextButton( label = stringResource(id = R.string.cancel), onClick = onCancelClick, - modifier = Modifier.testTag("DismissAlertButton"), + modifier = Modifier.testTag(tag = "DismissAlertButton"), ) BitwardenFilledButton( label = stringResource(id = R.string.submit), onClick = { onSubmitClick(pin) }, - modifier = Modifier.testTag("AcceptAlertButton"), + modifier = Modifier.testTag(tag = "AcceptAlertButton"), ) } + Spacer(modifier = Modifier.height(height = 24.dp)) } } } diff --git a/app/src/main/res/values/strings.xml b/app/src/main/res/values/strings.xml index 96d9c234b..0f999b8a5 100644 --- a/app/src/main/res/values/strings.xml +++ b/app/src/main/res/values/strings.xml @@ -21,7 +21,7 @@ Email address Email us Email us directly to get help or leave feedback. - Enter your PIN code. + Enter your PIN code Favorites File a bug report Open an issue at our GitHub repository. diff --git a/app/src/test/java/com/x8bit/bitwarden/ui/auth/feature/accountsetup/SetupUnlockScreenTest.kt b/app/src/test/java/com/x8bit/bitwarden/ui/auth/feature/accountsetup/SetupUnlockScreenTest.kt index e9891b1df..0b0eb67bc 100644 --- a/app/src/test/java/com/x8bit/bitwarden/ui/auth/feature/accountsetup/SetupUnlockScreenTest.kt +++ b/app/src/test/java/com/x8bit/bitwarden/ui/auth/feature/accountsetup/SetupUnlockScreenTest.kt @@ -244,7 +244,7 @@ class SetupUnlockScreenTest : BaseComposeTest() { .performClick() composeTestRule - .onAllNodesWithText(text = "Enter your PIN code.") + .onAllNodesWithText(text = "Enter your PIN code") .filterToOne(hasAnyAncestor(isDialog())) .assertIsDisplayed() composeTestRule diff --git a/app/src/test/java/com/x8bit/bitwarden/ui/platform/feature/settings/accountsecurity/AccountSecurityScreenTest.kt b/app/src/test/java/com/x8bit/bitwarden/ui/platform/feature/settings/accountsecurity/AccountSecurityScreenTest.kt index 232048e45..8bd2b410a 100644 --- a/app/src/test/java/com/x8bit/bitwarden/ui/platform/feature/settings/accountsecurity/AccountSecurityScreenTest.kt +++ b/app/src/test/java/com/x8bit/bitwarden/ui/platform/feature/settings/accountsecurity/AccountSecurityScreenTest.kt @@ -270,7 +270,7 @@ class AccountSecurityScreenTest : BaseComposeTest() { .performClick() composeTestRule - .onAllNodesWithText("Enter your PIN code.") + .onAllNodesWithText("Enter your PIN code") .filterToOne(hasAnyAncestor(isDialog())) .assertIsDisplayed() composeTestRule diff --git a/app/src/test/java/com/x8bit/bitwarden/ui/vault/feature/addedit/VaultAddEditScreenTest.kt b/app/src/test/java/com/x8bit/bitwarden/ui/vault/feature/addedit/VaultAddEditScreenTest.kt index 70fcc79a6..589d28d86 100644 --- a/app/src/test/java/com/x8bit/bitwarden/ui/vault/feature/addedit/VaultAddEditScreenTest.kt +++ b/app/src/test/java/com/x8bit/bitwarden/ui/vault/feature/addedit/VaultAddEditScreenTest.kt @@ -360,7 +360,7 @@ class VaultAddEditScreenTest : BaseComposeTest() { @Test fun `fido2 pin set up prompt dialog should display based on state`() { - val dialogMessage = "Enter your PIN code." + val dialogMessage = "Enter your PIN code" composeTestRule.onNode(isDialog()).assertDoesNotExist() composeTestRule.onNodeWithText(dialogMessage).assertDoesNotExist() diff --git a/app/src/test/java/com/x8bit/bitwarden/ui/vault/feature/itemlisting/VaultItemListingScreenTest.kt b/app/src/test/java/com/x8bit/bitwarden/ui/vault/feature/itemlisting/VaultItemListingScreenTest.kt index c5f3f2ef5..e93269fe9 100644 --- a/app/src/test/java/com/x8bit/bitwarden/ui/vault/feature/itemlisting/VaultItemListingScreenTest.kt +++ b/app/src/test/java/com/x8bit/bitwarden/ui/vault/feature/itemlisting/VaultItemListingScreenTest.kt @@ -1678,7 +1678,7 @@ class VaultItemListingScreenTest : BaseComposeTest() { @Test fun `fido2 pin set up dialog should display and function according to state`() { val selectedCipherId = "selectedCipherId" - val dialogMessage = "Enter your PIN code." + val dialogMessage = "Enter your PIN code" composeTestRule.onNode(isDialog()).assertDoesNotExist() composeTestRule.onNodeWithText(dialogMessage).assertDoesNotExist()