mirror of
https://github.com/bitwarden/android.git
synced 2024-10-31 07:05:35 +03:00
PM-10628: Update Pin Input Dialog UI (#4013)
This commit is contained in:
parent
8e092ef860
commit
4fd81ed3b8
6 changed files with 25 additions and 30 deletions
|
@ -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))
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -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>
|
||||||
|
|
|
@ -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
|
||||||
|
|
|
@ -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
|
||||||
|
|
|
@ -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()
|
||||||
|
|
||||||
|
|
|
@ -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()
|
||||||
|
|
||||||
|
|
Loading…
Reference in a new issue