mirror of
https://github.com/bitwarden/android.git
synced 2025-02-22 16:49:13 +03:00
PM-17384 PM-17386 - Create Account Design Audit (#4647)
This commit is contained in:
parent
76c7f8c41d
commit
c09b02f1d0
6 changed files with 73 additions and 62 deletions
app/src
main/java/com/x8bit/bitwarden/ui/auth/feature
landing
startregistration
test/java/com/x8bit/bitwarden/ui/auth/feature/startregistration
|
@ -185,7 +185,6 @@ fun LandingScreen(
|
|||
onCreateAccountClick = remember(viewModel) {
|
||||
{ viewModel.trySendAction(LandingAction.CreateAccountClick) }
|
||||
},
|
||||
modifier = Modifier.fillMaxSize(),
|
||||
)
|
||||
}
|
||||
}
|
||||
|
@ -204,6 +203,7 @@ private fun LandingScreenContent(
|
|||
Column(
|
||||
horizontalAlignment = Alignment.CenterHorizontally,
|
||||
modifier = modifier
|
||||
.fillMaxSize()
|
||||
.imePadding()
|
||||
.verticalScroll(rememberScrollState())
|
||||
.statusBarsPadding(),
|
||||
|
|
|
@ -13,7 +13,6 @@ import androidx.compose.foundation.layout.imePadding
|
|||
import androidx.compose.foundation.layout.navigationBarsPadding
|
||||
import androidx.compose.foundation.layout.offset
|
||||
import androidx.compose.foundation.layout.padding
|
||||
import androidx.compose.foundation.layout.size
|
||||
import androidx.compose.foundation.rememberScrollState
|
||||
import androidx.compose.foundation.verticalScroll
|
||||
import androidx.compose.material3.ExperimentalMaterial3Api
|
||||
|
@ -25,6 +24,7 @@ import androidx.compose.runtime.getValue
|
|||
import androidx.compose.runtime.remember
|
||||
import androidx.compose.ui.Alignment
|
||||
import androidx.compose.ui.Modifier
|
||||
import androidx.compose.ui.graphics.ColorFilter
|
||||
import androidx.compose.ui.input.nestedscroll.nestedScroll
|
||||
import androidx.compose.ui.platform.LocalContext
|
||||
import androidx.compose.ui.platform.testTag
|
||||
|
@ -157,30 +157,21 @@ fun StartRegistrationScreen(
|
|||
BitwardenTopAppBar(
|
||||
title = stringResource(id = R.string.create_account),
|
||||
scrollBehavior = scrollBehavior,
|
||||
navigationIcon = rememberVectorPainter(id = R.drawable.ic_back),
|
||||
navigationIconContentDescription = stringResource(id = R.string.back),
|
||||
onNavigationIconClick = handler.onBackClick,
|
||||
navigationIcon = rememberVectorPainter(id = R.drawable.ic_close),
|
||||
navigationIconContentDescription = stringResource(id = R.string.close),
|
||||
onNavigationIconClick = handler.onCloseClick,
|
||||
)
|
||||
},
|
||||
) {
|
||||
Column(
|
||||
modifier = Modifier
|
||||
.imePadding()
|
||||
.fillMaxSize()
|
||||
.verticalScroll(rememberScrollState()),
|
||||
) {
|
||||
StartRegistrationContent(
|
||||
emailInput = state.emailInput,
|
||||
selectedEnvironmentType = state.selectedEnvironmentType,
|
||||
nameInput = state.nameInput,
|
||||
isReceiveMarketingEmailsToggled = state.isReceiveMarketingEmailsToggled,
|
||||
isContinueButtonEnabled = state.isContinueButtonEnabled,
|
||||
isNewOnboardingUiEnabled = state.showNewOnboardingUi,
|
||||
handler = handler,
|
||||
)
|
||||
Spacer(modifier = Modifier.height(height = 16.dp))
|
||||
Spacer(modifier = Modifier.navigationBarsPadding())
|
||||
}
|
||||
StartRegistrationContent(
|
||||
emailInput = state.emailInput,
|
||||
selectedEnvironmentType = state.selectedEnvironmentType,
|
||||
nameInput = state.nameInput,
|
||||
isReceiveMarketingEmailsToggled = state.isReceiveMarketingEmailsToggled,
|
||||
isContinueButtonEnabled = state.isContinueButtonEnabled,
|
||||
isNewOnboardingUiEnabled = state.showNewOnboardingUi,
|
||||
handler = handler,
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -196,31 +187,31 @@ private fun StartRegistrationContent(
|
|||
isNewOnboardingUiEnabled: Boolean,
|
||||
modifier: Modifier = Modifier,
|
||||
) {
|
||||
Column(modifier = modifier) {
|
||||
Column(
|
||||
horizontalAlignment = Alignment.CenterHorizontally,
|
||||
modifier = modifier
|
||||
.fillMaxSize()
|
||||
.imePadding()
|
||||
.verticalScroll(rememberScrollState()),
|
||||
) {
|
||||
Spacer(modifier = Modifier.height(height = 12.dp))
|
||||
|
||||
if (isNewOnboardingUiEnabled) {
|
||||
Spacer(modifier = Modifier.weight(1f))
|
||||
Image(
|
||||
painter = rememberVectorPainter(id = R.drawable.vault),
|
||||
painter = rememberVectorPainter(id = R.drawable.bitwarden_logo),
|
||||
colorFilter = ColorFilter.tint(BitwardenTheme.colorScheme.icon.secondary),
|
||||
contentDescription = null,
|
||||
modifier = Modifier
|
||||
.size(132.dp)
|
||||
.align(Alignment.CenterHorizontally),
|
||||
.standardHorizontalMargin()
|
||||
.fillMaxWidth(),
|
||||
)
|
||||
Spacer(modifier = Modifier.height(48.dp))
|
||||
Spacer(modifier = Modifier.weight(1f))
|
||||
}
|
||||
Spacer(modifier = Modifier.height(12.dp))
|
||||
|
||||
BitwardenTextField(
|
||||
label = stringResource(id = R.string.name),
|
||||
value = nameInput,
|
||||
onValueChange = handler.onNameInputChange,
|
||||
textFieldTestTag = "NameEntry",
|
||||
cardStyle = CardStyle.Top(dividerPadding = 0.dp),
|
||||
modifier = Modifier
|
||||
.fillMaxWidth()
|
||||
.standardHorizontalMargin(),
|
||||
)
|
||||
BitwardenTextField(
|
||||
label = stringResource(id = R.string.email_address),
|
||||
placeholder = stringResource(R.string.email_address_required),
|
||||
label = stringResource(id = R.string.email_address_required),
|
||||
value = emailInput,
|
||||
onValueChange = handler.onEmailInputChange,
|
||||
keyboardType = KeyboardType.Email,
|
||||
|
@ -252,14 +243,27 @@ private fun StartRegistrationContent(
|
|||
}
|
||||
}
|
||||
},
|
||||
cardStyle = CardStyle.Bottom,
|
||||
cardStyle = CardStyle.Full,
|
||||
modifier = Modifier
|
||||
.fillMaxWidth()
|
||||
.standardHorizontalMargin(),
|
||||
)
|
||||
|
||||
Spacer(modifier = Modifier.height(8.dp))
|
||||
|
||||
BitwardenTextField(
|
||||
label = stringResource(id = R.string.name),
|
||||
value = nameInput,
|
||||
onValueChange = handler.onNameInputChange,
|
||||
textFieldTestTag = "NameEntry",
|
||||
cardStyle = CardStyle.Full,
|
||||
modifier = Modifier
|
||||
.fillMaxWidth()
|
||||
.standardHorizontalMargin(),
|
||||
)
|
||||
Spacer(modifier = Modifier.height(24.dp))
|
||||
|
||||
if (selectedEnvironmentType != Environment.Type.SELF_HOSTED) {
|
||||
Spacer(modifier = Modifier.height(8.dp))
|
||||
ReceiveMarketingEmailsSwitch(
|
||||
isChecked = isReceiveMarketingEmailsToggled,
|
||||
onCheckedChange = handler.onReceiveMarketingEmailsToggle,
|
||||
|
@ -268,9 +272,10 @@ private fun StartRegistrationContent(
|
|||
.fillMaxWidth()
|
||||
.standardHorizontalMargin(),
|
||||
)
|
||||
Spacer(modifier = Modifier.height(24.dp))
|
||||
}
|
||||
|
||||
Spacer(modifier = Modifier.height(24.dp))
|
||||
|
||||
BitwardenFilledButton(
|
||||
label = stringResource(id = R.string.continue_text),
|
||||
onClick = handler.onContinueClick,
|
||||
|
@ -280,13 +285,17 @@ private fun StartRegistrationContent(
|
|||
.standardHorizontalMargin()
|
||||
.fillMaxWidth(),
|
||||
)
|
||||
Spacer(modifier = Modifier.height(16.dp))
|
||||
|
||||
Spacer(modifier = Modifier.height(12.dp))
|
||||
|
||||
TermsAndPrivacyText(
|
||||
onTermsClick = handler.onTermsClick,
|
||||
onPrivacyPolicyClick = handler.onPrivacyPolicyClick,
|
||||
modifier = Modifier.standardHorizontalMargin(),
|
||||
)
|
||||
Spacer(modifier = Modifier.height(4.dp))
|
||||
|
||||
Spacer(modifier = Modifier.height(12.dp))
|
||||
Spacer(modifier = Modifier.navigationBarsPadding())
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -395,7 +404,7 @@ private fun StartRegistrationContentFilledOut_preview() {
|
|||
onReceiveMarketingEmailsToggle = {},
|
||||
onUnsubscribeMarketingEmailsClick = {},
|
||||
onServerGeologyHelpClick = {},
|
||||
onBackClick = {},
|
||||
onCloseClick = {},
|
||||
),
|
||||
)
|
||||
}
|
||||
|
@ -422,7 +431,7 @@ private fun StartRegistrationContentEmpty_preview() {
|
|||
onReceiveMarketingEmailsToggle = {},
|
||||
onUnsubscribeMarketingEmailsClick = {},
|
||||
onServerGeologyHelpClick = {},
|
||||
onBackClick = {},
|
||||
onCloseClick = {},
|
||||
),
|
||||
)
|
||||
}
|
||||
|
@ -449,7 +458,7 @@ private fun StartRegistrationContentNewOnboardingUi_preview() {
|
|||
onReceiveMarketingEmailsToggle = {},
|
||||
onUnsubscribeMarketingEmailsClick = {},
|
||||
onServerGeologyHelpClick = {},
|
||||
onBackClick = {},
|
||||
onCloseClick = {},
|
||||
),
|
||||
)
|
||||
}
|
||||
|
|
|
@ -12,7 +12,7 @@ import com.x8bit.bitwarden.data.platform.manager.model.FlagKey
|
|||
import com.x8bit.bitwarden.data.platform.repository.EnvironmentRepository
|
||||
import com.x8bit.bitwarden.data.platform.repository.model.Environment
|
||||
import com.x8bit.bitwarden.data.platform.repository.model.Environment.Type
|
||||
import com.x8bit.bitwarden.ui.auth.feature.startregistration.StartRegistrationAction.BackClick
|
||||
import com.x8bit.bitwarden.ui.auth.feature.startregistration.StartRegistrationAction.CloseClick
|
||||
import com.x8bit.bitwarden.ui.auth.feature.startregistration.StartRegistrationAction.ContinueClick
|
||||
import com.x8bit.bitwarden.ui.auth.feature.startregistration.StartRegistrationAction.EmailInputChange
|
||||
import com.x8bit.bitwarden.ui.auth.feature.startregistration.StartRegistrationAction.EnvironmentTypeSelect
|
||||
|
@ -94,7 +94,7 @@ class StartRegistrationViewModel @Inject constructor(
|
|||
is ContinueClick -> handleContinueClick()
|
||||
is EmailInputChange -> handleEmailInputChanged(action)
|
||||
is NameInputChange -> handleNameInputChanged(action)
|
||||
is BackClick -> handleBackClick()
|
||||
is CloseClick -> handleCloseClick()
|
||||
is ErrorDialogDismiss -> handleDialogDismiss()
|
||||
is ReceiveMarketingEmailsToggle -> handleReceiveMarketingEmailsToggle(
|
||||
action,
|
||||
|
@ -173,7 +173,7 @@ class StartRegistrationViewModel @Inject constructor(
|
|||
}
|
||||
}
|
||||
|
||||
private fun handleBackClick() {
|
||||
private fun handleCloseClick() {
|
||||
sendEvent(StartRegistrationEvent.NavigateBack)
|
||||
}
|
||||
|
||||
|
@ -383,9 +383,9 @@ sealed class StartRegistrationAction {
|
|||
data object ContinueClick : StartRegistrationAction()
|
||||
|
||||
/**
|
||||
* User clicked back.
|
||||
* Indicates that the top-bar close button was clicked.
|
||||
*/
|
||||
data object BackClick : StartRegistrationAction()
|
||||
data object CloseClick : StartRegistrationAction()
|
||||
|
||||
/**
|
||||
* Email input changed.
|
||||
|
|
|
@ -20,7 +20,7 @@ data class StartRegistrationHandler(
|
|||
val onReceiveMarketingEmailsToggle: (Boolean) -> Unit,
|
||||
val onUnsubscribeMarketingEmailsClick: () -> Unit,
|
||||
val onServerGeologyHelpClick: () -> Unit,
|
||||
val onBackClick: () -> Unit,
|
||||
val onCloseClick: () -> Unit,
|
||||
) {
|
||||
@Suppress("UndocumentedPublicClass")
|
||||
companion object {
|
||||
|
@ -71,7 +71,9 @@ data class StartRegistrationHandler(
|
|||
onServerGeologyHelpClick = {
|
||||
viewModel.trySendAction(StartRegistrationAction.ServerGeologyHelpClick)
|
||||
},
|
||||
onBackClick = { viewModel.trySendAction(StartRegistrationAction.BackClick) },
|
||||
onCloseClick = {
|
||||
viewModel.trySendAction(StartRegistrationAction.CloseClick)
|
||||
},
|
||||
)
|
||||
}
|
||||
}
|
||||
|
|
|
@ -14,7 +14,7 @@ import androidx.compose.ui.test.performTextInput
|
|||
import androidx.core.net.toUri
|
||||
import com.x8bit.bitwarden.data.platform.repository.model.Environment
|
||||
import com.x8bit.bitwarden.data.platform.repository.util.bufferedMutableSharedFlow
|
||||
import com.x8bit.bitwarden.ui.auth.feature.startregistration.StartRegistrationAction.BackClick
|
||||
import com.x8bit.bitwarden.ui.auth.feature.startregistration.StartRegistrationAction.CloseClick
|
||||
import com.x8bit.bitwarden.ui.auth.feature.startregistration.StartRegistrationAction.EmailInputChange
|
||||
import com.x8bit.bitwarden.ui.platform.base.BaseComposeTest
|
||||
import com.x8bit.bitwarden.ui.platform.base.util.asText
|
||||
|
@ -69,9 +69,9 @@ class StartRegistrationScreenTest : BaseComposeTest() {
|
|||
}
|
||||
|
||||
@Test
|
||||
fun `close click should send BackClick action`() {
|
||||
composeTestRule.onNodeWithContentDescription("Back").performClick()
|
||||
verify { viewModel.trySendAction(BackClick) }
|
||||
fun `close click should send CloseClick action`() {
|
||||
composeTestRule.onNodeWithContentDescription("Close").performClick()
|
||||
verify { viewModel.trySendAction(CloseClick) }
|
||||
}
|
||||
|
||||
@Test
|
||||
|
@ -133,7 +133,7 @@ class StartRegistrationScreenTest : BaseComposeTest() {
|
|||
|
||||
@Test
|
||||
fun `email input change should send EmailInputChange action`() {
|
||||
composeTestRule.onNodeWithText("Email address").performTextInput(TEST_INPUT)
|
||||
composeTestRule.onNodeWithText("Email address (required)").performTextInput(TEST_INPUT)
|
||||
verify { viewModel.trySendAction(EmailInputChange(TEST_INPUT)) }
|
||||
}
|
||||
|
||||
|
|
|
@ -11,7 +11,7 @@ import com.x8bit.bitwarden.data.platform.manager.FeatureFlagManager
|
|||
import com.x8bit.bitwarden.data.platform.manager.model.FlagKey
|
||||
import com.x8bit.bitwarden.data.platform.repository.model.Environment
|
||||
import com.x8bit.bitwarden.data.platform.repository.util.FakeEnvironmentRepository
|
||||
import com.x8bit.bitwarden.ui.auth.feature.startregistration.StartRegistrationAction.BackClick
|
||||
import com.x8bit.bitwarden.ui.auth.feature.startregistration.StartRegistrationAction.CloseClick
|
||||
import com.x8bit.bitwarden.ui.auth.feature.startregistration.StartRegistrationAction.ContinueClick
|
||||
import com.x8bit.bitwarden.ui.auth.feature.startregistration.StartRegistrationAction.EmailInputChange
|
||||
import com.x8bit.bitwarden.ui.auth.feature.startregistration.StartRegistrationAction.EnvironmentTypeSelect
|
||||
|
@ -308,7 +308,7 @@ class StartRegistrationViewModelTest : BaseViewModelTest() {
|
|||
featureFlagManager = featureFlagManager,
|
||||
)
|
||||
viewModel.eventFlow.test {
|
||||
viewModel.trySendAction(BackClick)
|
||||
viewModel.trySendAction(CloseClick)
|
||||
assertEquals(NavigateBack, awaitItem())
|
||||
}
|
||||
}
|
||||
|
|
Loading…
Add table
Reference in a new issue