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

@@ -3,6 +3,7 @@
   <string name="string_cancel">Cancel</string>
   <string name="string_continue">Continue</string>
   <string name="string_more_options">More options</string>
+  <string name="string_create_at_another_place">Create at another place</string>
   <string name="string_no_thanks">No thanks</string>
   <string name="passkey_creation_intro_title">A simple way to sign in safely</string>
   <string name="passkey_creation_intro_body">Use your fingerprint, face or screen lock to sign in with a unique passkey that can’t be forgotten or stolen. Learn more</string>
@@ -10,4 +11,5 @@
   <string name="choose_provider_body">This provider will store passkeys and passwords for you and help you easily autofill and sign in. Learn more</string>
   <string name="choose_create_option_title">Create a passkey at</string>
   <string name="choose_sign_in_title">Use saved sign in</string>
+  <string name="create_passkey_at">Create passkey at</string>
 </resources>

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,
 }

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,
       )
   }

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)
+    )
   }
 }