PM-10628: Update Pin Input Dialog UI (#4013)

This commit is contained in:
David Perez 2024-10-02 08:59:26 -05:00 committed by GitHub
parent 8e092ef860
commit 4fd81ed3b8
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
6 changed files with 25 additions and 30 deletions

View file

@ -1,9 +1,9 @@
package com.x8bit.bitwarden.ui.platform.feature.settings.accountsecurity package com.x8bit.bitwarden.ui.platform.feature.settings.accountsecurity
import androidx.compose.foundation.background import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.fillMaxWidth import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding 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.R
import com.x8bit.bitwarden.ui.platform.components.button.BitwardenFilledButton 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.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.field.BitwardenTextField
import com.x8bit.bitwarden.ui.platform.components.util.maxDialogHeight import com.x8bit.bitwarden.ui.platform.components.util.maxDialogHeight
import com.x8bit.bitwarden.ui.platform.theme.BitwardenTheme import com.x8bit.bitwarden.ui.platform.theme.BitwardenTheme
@ -52,7 +53,7 @@ fun PinInputDialog(
onSubmitClick: (String) -> Unit, onSubmitClick: (String) -> Unit,
onDismissRequest: () -> Unit, onDismissRequest: () -> Unit,
) { ) {
var pin by remember { mutableStateOf("") } var pin by remember { mutableStateOf(value = "") }
Dialog( Dialog(
onDismissRequest = onDismissRequest, onDismissRequest = onDismissRequest,
) { ) {
@ -74,38 +75,35 @@ fun PinInputDialog(
), ),
horizontalAlignment = Alignment.End, horizontalAlignment = Alignment.End,
) { ) {
Spacer(modifier = Modifier.height(height = 24.dp))
Text( Text(
modifier = Modifier modifier = Modifier
.testTag("AlertTitleText") .testTag(tag = "AlertTitleText")
.padding(24.dp) .padding(horizontal = 24.dp)
.fillMaxWidth(), .fillMaxWidth(),
text = stringResource(id = R.string.enter_pin), text = stringResource(id = R.string.enter_pin),
color = MaterialTheme.colorScheme.onSurface, color = MaterialTheme.colorScheme.onSurface,
style = BitwardenTheme.typography.headlineSmall, style = BitwardenTheme.typography.headlineSmall,
) )
Spacer(modifier = Modifier.height(height = 16.dp))
if (scrollState.canScrollBackward) { if (scrollState.canScrollBackward) {
Box( BitwardenHorizontalDivider()
modifier = Modifier
.fillMaxWidth()
.height(1.dp)
.background(MaterialTheme.colorScheme.outlineVariant),
)
} }
Column( Column(
modifier = Modifier modifier = Modifier
.weight(1f, fill = false) .weight(1f, fill = false)
.verticalScroll(scrollState), .padding(horizontal = 24.dp)
.verticalScroll(state = scrollState),
) { ) {
Text( Text(
modifier = Modifier modifier = Modifier
.testTag("AlertContentText") .testTag(tag = "AlertContentText")
.padding(24.dp)
.fillMaxWidth(), .fillMaxWidth(),
text = stringResource(id = R.string.set_pin_description), text = stringResource(id = R.string.set_pin_description),
color = MaterialTheme.colorScheme.onSurfaceVariant, color = MaterialTheme.colorScheme.onSurfaceVariant,
style = BitwardenTheme.typography.bodyMedium, style = BitwardenTheme.typography.bodyMedium,
) )
Spacer(modifier = Modifier.height(height = 16.dp))
BitwardenTextField( BitwardenTextField(
label = stringResource(id = R.string.pin), label = stringResource(id = R.string.pin),
value = pin, value = pin,
@ -113,35 +111,32 @@ fun PinInputDialog(
onValueChange = { pin = it }, onValueChange = { pin = it },
keyboardType = KeyboardType.Number, keyboardType = KeyboardType.Number,
modifier = Modifier modifier = Modifier
.testTag("AlertInputField") .testTag(tag = "AlertInputField")
.padding(16.dp)
.fillMaxWidth(), .fillMaxWidth(),
) )
Spacer(modifier = Modifier.height(height = 16.dp))
} }
if (scrollState.canScrollForward) { if (scrollState.canScrollForward) {
Box( BitwardenHorizontalDivider()
modifier = Modifier
.fillMaxWidth()
.height(1.dp)
.background(MaterialTheme.colorScheme.outlineVariant),
)
} }
Spacer(modifier = Modifier.height(height = 16.dp))
Row( Row(
modifier = Modifier.padding(horizontal = 24.dp),
verticalAlignment = Alignment.CenterVertically, verticalAlignment = Alignment.CenterVertically,
modifier = Modifier.padding(24.dp),
) { ) {
BitwardenTextButton( BitwardenTextButton(
label = stringResource(id = R.string.cancel), label = stringResource(id = R.string.cancel),
onClick = onCancelClick, onClick = onCancelClick,
modifier = Modifier.testTag("DismissAlertButton"), modifier = Modifier.testTag(tag = "DismissAlertButton"),
) )
BitwardenFilledButton( BitwardenFilledButton(
label = stringResource(id = R.string.submit), label = stringResource(id = R.string.submit),
onClick = { onSubmitClick(pin) }, onClick = { onSubmitClick(pin) },
modifier = Modifier.testTag("AcceptAlertButton"), modifier = Modifier.testTag(tag = "AcceptAlertButton"),
) )
} }
Spacer(modifier = Modifier.height(height = 24.dp))
} }
} }
} }

View file

@ -21,7 +21,7 @@
<string name="email_address">Email address</string> <string name="email_address">Email address</string>
<string name="email_us">Email us</string> <string name="email_us">Email us</string>
<string name="email_us_description">Email us directly to get help or leave feedback.</string> <string name="email_us_description">Email us directly to get help or leave feedback.</string>
<string name="enter_pin">Enter your PIN code.</string> <string name="enter_pin">Enter your PIN code</string>
<string name="favorites">Favorites</string> <string name="favorites">Favorites</string>
<string name="file_bug_report">File a bug report</string> <string name="file_bug_report">File a bug report</string>
<string name="file_bug_report_description">Open an issue at our GitHub repository.</string> <string name="file_bug_report_description">Open an issue at our GitHub repository.</string>

View file

@ -244,7 +244,7 @@ class SetupUnlockScreenTest : BaseComposeTest() {
.performClick() .performClick()
composeTestRule composeTestRule
.onAllNodesWithText(text = "Enter your PIN code.") .onAllNodesWithText(text = "Enter your PIN code")
.filterToOne(hasAnyAncestor(isDialog())) .filterToOne(hasAnyAncestor(isDialog()))
.assertIsDisplayed() .assertIsDisplayed()
composeTestRule composeTestRule

View file

@ -270,7 +270,7 @@ class AccountSecurityScreenTest : BaseComposeTest() {
.performClick() .performClick()
composeTestRule composeTestRule
.onAllNodesWithText("Enter your PIN code.") .onAllNodesWithText("Enter your PIN code")
.filterToOne(hasAnyAncestor(isDialog())) .filterToOne(hasAnyAncestor(isDialog()))
.assertIsDisplayed() .assertIsDisplayed()
composeTestRule composeTestRule

View file

@ -360,7 +360,7 @@ class VaultAddEditScreenTest : BaseComposeTest() {
@Test @Test
fun `fido2 pin set up prompt dialog should display based on state`() { 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.onNode(isDialog()).assertDoesNotExist()
composeTestRule.onNodeWithText(dialogMessage).assertDoesNotExist() composeTestRule.onNodeWithText(dialogMessage).assertDoesNotExist()

View file

@ -1678,7 +1678,7 @@ class VaultItemListingScreenTest : BaseComposeTest() {
@Test @Test
fun `fido2 pin set up dialog should display and function according to state`() { fun `fido2 pin set up dialog should display and function according to state`() {
val selectedCipherId = "selectedCipherId" val selectedCipherId = "selectedCipherId"
val dialogMessage = "Enter your PIN code." val dialogMessage = "Enter your PIN code"
composeTestRule.onNode(isDialog()).assertDoesNotExist() composeTestRule.onNode(isDialog()).assertDoesNotExist()
composeTestRule.onNodeWithText(dialogMessage).assertDoesNotExist() composeTestRule.onNodeWithText(dialogMessage).assertDoesNotExist()