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
Loading
Loading
Loading
Loading
+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. -->
+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")
+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,
+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,
+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
  }
Loading