From 2534515966bbbe106ba9ce5599caee1a5b2dfd7b Mon Sep 17 00:00:00 2001 From: Qinmei Du Date: Wed, 12 Oct 2022 17:13:40 +0000 Subject: Add the initial of the more options page with a toolbar has a return button screencase: https://screencast.googleplex.com/cast/NjY4MjA2MjE3NTA3NjM1Mnw1NTA4YTE0ZS1kMQ Test: deployed locally Bug: 253157211 Change-Id: Iec2a0b4eeda6558483b1b38b6c927acfdba0e07f --- packages/CredentialManager/res/values/strings.xml | 2 + .../credentialmanager/createflow/CreateModel.kt | 1 + .../createflow/CreatePasskeyComponents.kt | 78 ++++++++++++++++++++-- .../createflow/CreatePasskeyViewModel.kt | 14 +++- 4 files changed, 89 insertions(+), 6 deletions(-) diff --git a/packages/CredentialManager/res/values/strings.xml b/packages/CredentialManager/res/values/strings.xml index 2901705d5836..2c24bf14117a 100644 --- a/packages/CredentialManager/res/values/strings.xml +++ b/packages/CredentialManager/res/values/strings.xml @@ -3,6 +3,7 @@ Cancel Continue More options + Create at another place No thanks A simple way to sign in safely Use your fingerprint, face or screen lock to sign in with a unique passkey that can’t be forgotten or stolen. Learn more @@ -10,4 +11,5 @@ This provider will store passkeys and passwords for you and help you easily autofill and sign in. Learn more Create a passkey at Use saved sign in + Create passkey at \ No newline at end of file diff --git a/packages/CredentialManager/src/com/android/credentialmanager/createflow/CreateModel.kt b/packages/CredentialManager/src/com/android/credentialmanager/createflow/CreateModel.kt index 5aa1e9ba6183..044688b8c227 100644 --- a/packages/CredentialManager/src/com/android/credentialmanager/createflow/CreateModel.kt +++ b/packages/CredentialManager/src/com/android/credentialmanager/createflow/CreateModel.kt @@ -22,4 +22,5 @@ enum class CreateScreenState { PASSKEY_INTRO, PROVIDER_SELECTION, CREATION_OPTION_SELECTION, + MORE_OPTIONS_SELECTION, } diff --git a/packages/CredentialManager/src/com/android/credentialmanager/createflow/CreatePasskeyComponents.kt b/packages/CredentialManager/src/com/android/credentialmanager/createflow/CreatePasskeyComponents.kt index fbec1bc75dc6..997519db111d 100644 --- a/packages/CredentialManager/src/com/android/credentialmanager/createflow/CreatePasskeyComponents.kt +++ b/packages/CredentialManager/src/com/android/credentialmanager/createflow/CreatePasskeyComponents.kt @@ -19,9 +19,13 @@ import androidx.compose.material.ChipDefaults import androidx.compose.material.Divider import androidx.compose.material.ExperimentalMaterialApi import androidx.compose.material.Icon +import androidx.compose.material.IconButton import androidx.compose.material.ModalBottomSheetLayout import androidx.compose.material.ModalBottomSheetValue import androidx.compose.material.Text +import androidx.compose.material.TopAppBar +import androidx.compose.material.icons.Icons +import androidx.compose.material.icons.filled.ArrowBack import androidx.compose.material.rememberModalBottomSheetState import androidx.compose.runtime.Composable import androidx.compose.runtime.LaunchedEffect @@ -71,8 +75,13 @@ fun CreatePasskeyScreen( onOptionSelected = {viewModel.onCreateOptionSelected(it)}, onCancel = cancelActivity, multiProvider = uiState.providers.size > 1, - onMoreOptionSelected = {viewModel.onMoreOptionSelected()} + onMoreOptionSelected = {viewModel.onMoreOptionSelected(it)} ) + CreateScreenState.MORE_OPTIONS_SELECTION -> MoreOptionSelectionCard( + providerInfo = uiState.selectedProvider!!, + onCancel = cancelActivity, + onBackButtonSelected = {viewModel.onBackButtonSelected(it)} + ) } }, scrimColor = Color.Transparent, @@ -202,6 +211,67 @@ fun ProviderSelectionCard( } } +@Composable +fun MoreOptionSelectionCard( + providerInfo: ProviderInfo, + onCancel: () -> Unit, + onBackButtonSelected: (String) -> Unit +) { + Card( + backgroundColor = lightBackgroundColor, + ) { + Column() { + TopAppBar( + title = { Text(text = stringResource(R.string.string_more_options), style = Typography.subtitle1) }, + backgroundColor = lightBackgroundColor, + elevation = 0.dp, + navigationIcon = + { + IconButton(onClick = { onBackButtonSelected(providerInfo.name) }) { + Icon(Icons.Filled.ArrowBack, "backIcon" + ) + } + } + ) + Divider( + thickness = 24.dp, + color = Color.Transparent + ) + Text( + text = stringResource(R.string.create_passkey_at), + style = Typography.body1, + modifier = Modifier.padding(horizontal = 28.dp) + ) + Card( + shape = Shapes.medium, + modifier = Modifier + .padding(horizontal = 24.dp) + .align(alignment = Alignment.CenterHorizontally) + ) { + LazyColumn( + verticalArrangement = Arrangement.spacedBy(2.dp) + ) { + } + } + Divider( + thickness = 24.dp, + color = Color.Transparent + ) + Row( + horizontalArrangement = Arrangement.Start, + modifier = Modifier.fillMaxWidth().padding(horizontal = 24.dp) + ) { + CancelButton(stringResource(R.string.string_cancel), onCancel) + } + Divider( + thickness = 18.dp, + color = Color.Transparent, + modifier = Modifier.padding(bottom = 16.dp) + ) + } + } +} + @ExperimentalMaterialApi @Composable fun ProviderRow(providerInfo: ProviderInfo, onProviderSelected: (String) -> Unit) { @@ -276,7 +346,7 @@ fun CreationSelectionCard( onOptionSelected: (String) -> Unit, onCancel: () -> Unit, multiProvider: Boolean, - onMoreOptionSelected: () -> Unit, + onMoreOptionSelected: (String) -> Unit, ) { Card( backgroundColor = lightBackgroundColor, @@ -318,7 +388,7 @@ fun CreationSelectionCard( } if (multiProvider) { item { - MoreOptionRow(onSelect = onMoreOptionSelected) + MoreOptionRow(onSelect = { onMoreOptionSelected(providerInfo.name) }) } } } @@ -389,7 +459,7 @@ fun MoreOptionRow(onSelect: () -> Unit) { shape = Shapes.large ) { Text( - text = stringResource(R.string.string_more_options), + text = stringResource(R.string.string_create_at_another_place), style = Typography.h6, ) } diff --git a/packages/CredentialManager/src/com/android/credentialmanager/createflow/CreatePasskeyViewModel.kt b/packages/CredentialManager/src/com/android/credentialmanager/createflow/CreatePasskeyViewModel.kt index e42016d59b0b..15300def6fda 100644 --- a/packages/CredentialManager/src/com/android/credentialmanager/createflow/CreatePasskeyViewModel.kt +++ b/packages/CredentialManager/src/com/android/credentialmanager/createflow/CreatePasskeyViewModel.kt @@ -52,7 +52,17 @@ class CreatePasskeyViewModel( } } - fun onMoreOptionSelected() { - Log.d("Account Selector", "On more option selected") + fun onMoreOptionSelected(providerName: String) { + uiState = uiState.copy( + currentScreenState = CreateScreenState.MORE_OPTIONS_SELECTION, + selectedProvider = getProviderInfoByName(providerName) + ) + } + + fun onBackButtonSelected(providerName: String) { + uiState = uiState.copy( + currentScreenState = CreateScreenState.CREATION_OPTION_SELECTION, + selectedProvider = getProviderInfoByName(providerName) + ) } } -- cgit v1.2.3-59-g8ed1b