Donate to e Foundation | Murena handsets with /e/OS | Own a part of Murena! Learn more

Commit 34e092b2 authored by Qinmei Du's avatar Qinmei Du
Browse files

Update the first time create flow 

screencast: https://screencast.googleplex.com/cast/NjE5MjczNjQwMDA0ODEyOHw0ZTljYzdmYy0wMA

Test: deployed locally

Bug: 253157231
Change-Id: If9002fd1cf05275e3b09081b2df652ddd3a410e0
parent 20c29c93

packages/CredentialManager/res/values/strings.xml

+7 −3
Original line number Diff line number Diff line
@@ -10,12 +10,16 @@ 
  <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>

  <string name="choose_provider_title">Choose your default provider</string>

  <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_provider_title">Choose where to <xliff:g id="createTypes">%1$s</xliff:g></string>

  <!-- TODO: Change the wording after design is completed. -->

  <string name="choose_provider_body">This password manager will store your passwords, passkeys, and other sign-in info to help you easily sign in. You can change where to save your sign-in info at any time.</string>

  <string name="choose_create_option_passkey_title">Create a passkey in <xliff:g id="providerInfoDisplayName">%1$s</xliff:g>?</string>

  <string name="choose_create_option_password_title">Save your password to <xliff:g id="providerInfoDisplayName">%1$s</xliff:g>?</string>

  <string name="choose_create_option_sign_in_title">Save your sign-in info to <xliff:g id="providerInfoDisplayName">%1$s</xliff:g>?</string>

  <string name="choose_sign_in_title">Use saved sign in</string>

  <string name="create_your_passkey">create your passkey</string>

  <string name="save_your_password">save your password</string>

  <string name="save_your_sign_in_info">save your sign-in info</string>

  <string name="create_passkey_in">Create passkey in</string>

  <string name="save_password_to">Save password to</string>

  <string name="save_sign_in_to">Save sign-in to</string>
@@ -30,7 +34,7 @@ 
  <string name="password">password</string>

  <string name="sign_ins">sign-ins</string>

  <string name="another_device">Another device</string>

  <string name="other_password_manager">Other password manager</string>

  <string name="other_password_manager">Other password managers</string>

  <!-- TODO: Check the wording here. -->

  <string name="confirm_default_or_use_once_description">This password manager will store your passwords and passkeys to help you easily sign in.</string>

  <!-- Spoken content description of an element which will close the sheet when clicked. -->

packages/CredentialManager/src/com/android/credentialmanager/CredentialManagerRepo.kt

+0 −1
Original line number Diff line number Diff line
@@ -209,7 +209,6 @@ class CredentialManagerRepo( 
        .setRemoteEntry(

          newRemoteEntry("key2", "subkey-1")

        )

        .setIsDefaultProvider(true)

        .build(),

      CreateCredentialProviderData

        .Builder("com.dashlane")

packages/CredentialManager/src/com/android/credentialmanager/DataConverter.kt

+0 −2
Original line number Diff line number Diff line
@@ -235,8 +235,6 @@ class CreateFlowUtils { 
          pendingIntent = it.pendingIntent,

          fillInIntent = it.frameworkExtrasIntent,

          userProviderDisplayName = saveEntryUi.userProviderAccountName as String,

          credentialTypeIcon = saveEntryUi.credentialTypeIcon?.loadDrawable(context)

            ?: context.getDrawable(R.drawable.ic_passkey)!!,

          profileIcon = saveEntryUi.profileIcon?.loadDrawable(context)

            ?: context.getDrawable(R.drawable.ic_profile)!!,

          passwordCount = saveEntryUi.passwordCount ?: 0,

packages/CredentialManager/src/com/android/credentialmanager/createflow/CreateCredentialComponents.kt

+66 −37
Original line number Diff line number Diff line
@@ -47,6 +47,7 @@ import com.android.credentialmanager.common.ui.CancelButton 
import com.android.credentialmanager.common.ui.ConfirmButton

import com.android.credentialmanager.common.ui.Entry

import com.android.credentialmanager.ui.theme.EntryShape

import com.android.credentialmanager.ui.theme.LocalAndroidColorScheme

import com.android.credentialmanager.jetpack.developer.PublicKeyCredential.Companion.TYPE_PUBLIC_KEY_CREDENTIAL



@OptIn(ExperimentalMaterial3Api::class)
@@ -75,9 +76,12 @@ fun CreateCredentialScreen( 
          onCancel = viewModel::onCancel,

        )

        CreateScreenState.PROVIDER_SELECTION -> ProviderSelectionCard(

          requestDisplayInfo = uiState.requestDisplayInfo,

          enabledProviderList = uiState.enabledProviders,

          disabledProviderList = uiState.disabledProviders,

          onCancel = viewModel::onCancel,

          onProviderSelected = viewModel::onProviderSelected

          onOptionSelected = viewModel::onMoreOptionsRowSelectedForFirstUse,

          onDisabledPasswordManagerSelected = viewModel::onDisabledPasswordManagerSelected,

        )

        CreateScreenState.CREATION_OPTION_SELECTION -> CreationSelectionCard(

          requestDisplayInfo = uiState.requestDisplayInfo,
@@ -125,18 +129,20 @@ fun ConfirmationCard( 
      Icon(

        painter = painterResource(R.drawable.ic_passkey),

        contentDescription = null,

        tint = Color.Unspecified,

        modifier = Modifier.align(alignment = Alignment.CenterHorizontally).padding(top = 24.dp)

        tint = LocalAndroidColorScheme.current.colorAccentPrimaryVariant,

        modifier = Modifier.align(alignment = Alignment.CenterHorizontally)

          .padding(top = 24.dp, bottom = 12.dp)

      )

      Text(

        text = stringResource(R.string.passkey_creation_intro_title),

        style = MaterialTheme.typography.titleMedium,

        modifier = Modifier

          .padding(horizontal = 24.dp)

          .align(alignment = Alignment.CenterHorizontally)

          .align(alignment = Alignment.CenterHorizontally),

        textAlign = TextAlign.Center

      )

      Divider(

        thickness = 24.dp,

        thickness = 16.dp,

        color = Color.Transparent

      )

      Text(
@@ -145,7 +151,7 @@ fun ConfirmationCard( 
        modifier = Modifier.padding(horizontal = 28.dp)

      )

      Divider(

        thickness = 48.dp,

        thickness = 32.dp,

        color = Color.Transparent

      )

      Row(
@@ -164,7 +170,7 @@ fun ConfirmationCard( 
      Divider(

        thickness = 18.dp,

        color = Color.Transparent,

        modifier = Modifier.padding(bottom = 16.dp)

        modifier = Modifier.padding(bottom = 18.dp)

      )

    }

  }
@@ -173,16 +179,40 @@ fun ConfirmationCard( 
@OptIn(ExperimentalMaterial3Api::class)

@Composable

fun ProviderSelectionCard(

  requestDisplayInfo: RequestDisplayInfo,

  enabledProviderList: List<EnabledProviderInfo>,

  onProviderSelected: (String) -> Unit,

  disabledProviderList: List<DisabledProviderInfo>?,

  onOptionSelected: (ActiveEntry) -> Unit,

  onDisabledPasswordManagerSelected: () -> Unit,

  onCancel: () -> Unit

) {

  Card() {

    Column() {

      // TODO: Change the icon for create passwords and sign-ins

      Icon(

        painter = painterResource(R.drawable.ic_passkey),

        contentDescription = null,

        tint = LocalAndroidColorScheme.current.colorAccentPrimaryVariant,

        modifier = Modifier.align(alignment = Alignment.CenterHorizontally)

          .padding(top = 24.dp, bottom = 16.dp)

      )

      Text(

        text = stringResource(R.string.choose_provider_title),

        text = stringResource(

          R.string.choose_provider_title,

          when (requestDisplayInfo.type) {

            TYPE_PUBLIC_KEY_CREDENTIAL -> stringResource(R.string.create_your_passkey)

            TYPE_PASSWORD_CREDENTIAL -> stringResource(R.string.save_your_password)

            else -> stringResource(R.string.save_your_sign_in_info)

          },

        ),

        style = MaterialTheme.typography.titleMedium,

        modifier = Modifier.padding(all = 24.dp).align(alignment = Alignment.CenterHorizontally)

        modifier = Modifier.padding(horizontal = 24.dp)

          .align(alignment = Alignment.CenterHorizontally),

        textAlign = TextAlign.Center

      )

      Divider(

        thickness = 16.dp,

        color = Color.Transparent

      )

      Text(

        text = stringResource(R.string.choose_provider_body),
@@ -190,7 +220,7 @@ fun ProviderSelectionCard( 
        modifier = Modifier.padding(horizontal = 28.dp)

      )

      Divider(

        thickness = 24.dp,

        thickness = 18.dp,

        color = Color.Transparent

      )

      Card(
@@ -202,9 +232,24 @@ fun ProviderSelectionCard( 
        LazyColumn(

          verticalArrangement = Arrangement.spacedBy(2.dp)

        ) {

          enabledProviderList.forEach {

          enabledProviderList.forEach { enabledProviderInfo ->

            enabledProviderInfo.createOptions.forEach { createOptionInfo ->

              item {

              ProviderRow(providerInfo = it, onProviderSelected = onProviderSelected)

                MoreOptionsInfoRow(

                  providerInfo = enabledProviderInfo,

                  createOptionInfo = createOptionInfo,

                  onOptionSelected = {

                    onOptionSelected(ActiveEntry(enabledProviderInfo, createOptionInfo))

                  })

              }

            }

          }

          if (disabledProviderList != null) {

            item {

              MoreOptionsDisabledProvidersRow(

                disabledProviders = disabledProviderList,

                onDisabledPasswordManagerSelected = onDisabledPasswordManagerSelected,

              )

            }

          }

        }
@@ -364,27 +409,6 @@ fun MoreOptionsRowIntroCard( 
  }

}



@Composable

fun ProviderRow(providerInfo: ProviderInfo, onProviderSelected: (String) -> Unit) {

  Entry(

    onClick = {onProviderSelected(providerInfo.name)},

    icon = {

      Image(modifier = Modifier.size(32.dp).padding(start = 10.dp),

            bitmap = providerInfo.icon.toBitmap().asImageBitmap(),

            // painter = painterResource(R.drawable.ic_passkey),

            // TODO: add description.

            contentDescription = "")

    },

    label = {

      Text(

        text = providerInfo.displayName,

        style = MaterialTheme.typography.labelLarge,

        modifier = Modifier.padding(vertical = 18.dp)

      )

    }

  )

}



@OptIn(ExperimentalMaterial3Api::class)

@Composable

fun CreationSelectionCard(
@@ -524,9 +548,13 @@ fun PrimaryCreateOptionRow( 
  Entry(

    onClick = {onOptionSelected(createOptionInfo)},

    icon = {

      Image(modifier = Modifier.size(32.dp).padding(start = 10.dp),

        bitmap = createOptionInfo.credentialTypeIcon.toBitmap().asImageBitmap(),

        contentDescription = null)

      // TODO: Upload the other two types icons and change it according to request types

      Icon(

        painter = painterResource(R.drawable.ic_passkey),

        contentDescription = null,

        tint = LocalAndroidColorScheme.current.colorAccentPrimaryVariant,

        modifier = Modifier.padding(start = 18.dp)

      )

    },

    label = {

      Column() {
@@ -645,6 +673,7 @@ fun MoreOptionsDisabledProvidersRow( 
          style = MaterialTheme.typography.titleLarge,

          modifier = Modifier.padding(top = 16.dp, start = 16.dp)

        )

        // TODO: Update the subtitle once design is confirmed

        Text(

          text = disabledProviders.joinToString(separator = ", "){ it.displayName },

          style = MaterialTheme.typography.bodyMedium,

packages/CredentialManager/src/com/android/credentialmanager/createflow/CreateCredentialViewModel.kt

+7 −9
Original line number Diff line number Diff line
@@ -72,15 +72,6 @@ class CreateCredentialViewModel( 
    }

  }



  fun onProviderSelected(providerName: String) {

    uiState = uiState.copy(

      currentScreenState = CreateScreenState.CREATION_OPTION_SELECTION,

      activeEntry = ActiveEntry(getProviderInfoByName(providerName),

        getProviderInfoByName(providerName).createOptions.first()

      )

    )

  }



  fun getProviderInfoByName(providerName: String): EnabledProviderInfo {

    return uiState.enabledProviders.single {

      it.name.equals(providerName)
@@ -106,6 +97,13 @@ class CreateCredentialViewModel( 
    )

  }



  fun onMoreOptionsRowSelectedForFirstUse(activeEntry: ActiveEntry) {

    uiState = uiState.copy(

      currentScreenState = CreateScreenState.CREATION_OPTION_SELECTION,

      activeEntry = activeEntry

    )

  }



  fun onDisabledPasswordManagerSelected() {

    // TODO: Complete this function

  }