diff --git a/packages/CredentialManager/Android.bp b/packages/CredentialManager/Android.bp new file mode 100644 index 0000000000000..ed92af997a68e --- /dev/null +++ b/packages/CredentialManager/Android.bp @@ -0,0 +1,36 @@ +package { + // See: http://go/android-license-faq + // A large-scale-change added 'default_applicable_licenses' to import + // all of the 'license_kinds' from "frameworks_base_license" + // to get the below license kinds: + // SPDX-license-identifier-Apache-2.0 + default_applicable_licenses: ["frameworks_base_license"], +} + +android_app { + name: "CredentialManager", + defaults: ["platform_app_defaults"], + certificate: "platform", + srcs: ["src/**/*.kt"], + resource_dirs: ["res"], + + static_libs: [ + "androidx.activity_activity-compose", + "androidx.appcompat_appcompat", + "androidx.compose.material_material", + "androidx.compose.runtime_runtime", + "androidx.compose.ui_ui", + "androidx.compose.ui_ui-tooling", + "androidx.core_core-ktx", + "androidx.lifecycle_lifecycle-extensions", + "androidx.lifecycle_lifecycle-livedata", + "androidx.lifecycle_lifecycle-runtime-ktx", + "androidx.lifecycle_lifecycle-viewmodel-compose", + "androidx.navigation_navigation-compose", + "androidx.recyclerview_recyclerview", + ], + + platform_apis: true, + + kotlincflags: ["-Xjvm-default=enable"], +} diff --git a/packages/CredentialManager/AndroidManifest.xml b/packages/CredentialManager/AndroidManifest.xml new file mode 100644 index 0000000000000..586ef86f26f68 --- /dev/null +++ b/packages/CredentialManager/AndroidManifest.xml @@ -0,0 +1,46 @@ + + + + + + + + + + + + + + diff --git a/packages/CredentialManager/res/drawable-v24/ic_launcher_foreground.xml b/packages/CredentialManager/res/drawable-v24/ic_launcher_foreground.xml new file mode 100644 index 0000000000000..966abaff20743 --- /dev/null +++ b/packages/CredentialManager/res/drawable-v24/ic_launcher_foreground.xml @@ -0,0 +1,30 @@ + + + + + + + + + + + \ No newline at end of file diff --git a/packages/CredentialManager/res/drawable/ic_launcher_background.xml b/packages/CredentialManager/res/drawable/ic_launcher_background.xml new file mode 100644 index 0000000000000..61bb79edb7090 --- /dev/null +++ b/packages/CredentialManager/res/drawable/ic_launcher_background.xml @@ -0,0 +1,170 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/CredentialManager/res/drawable/ic_passkey.xml b/packages/CredentialManager/res/drawable/ic_passkey.xml new file mode 100644 index 0000000000000..041a321640734 --- /dev/null +++ b/packages/CredentialManager/res/drawable/ic_passkey.xml @@ -0,0 +1,16 @@ + + + + + diff --git a/packages/CredentialManager/res/mipmap-anydpi-v26/ic_launcher.xml b/packages/CredentialManager/res/mipmap-anydpi-v26/ic_launcher.xml new file mode 100644 index 0000000000000..03eed2533da28 --- /dev/null +++ b/packages/CredentialManager/res/mipmap-anydpi-v26/ic_launcher.xml @@ -0,0 +1,5 @@ + + + + + \ No newline at end of file diff --git a/packages/CredentialManager/res/mipmap-anydpi-v26/ic_launcher_round.xml b/packages/CredentialManager/res/mipmap-anydpi-v26/ic_launcher_round.xml new file mode 100644 index 0000000000000..03eed2533da28 --- /dev/null +++ b/packages/CredentialManager/res/mipmap-anydpi-v26/ic_launcher_round.xml @@ -0,0 +1,5 @@ + + + + + \ No newline at end of file diff --git a/packages/CredentialManager/res/mipmap-hdpi/ic_launcher.webp b/packages/CredentialManager/res/mipmap-hdpi/ic_launcher.webp new file mode 100644 index 0000000000000..c209e78ecd372 Binary files /dev/null and b/packages/CredentialManager/res/mipmap-hdpi/ic_launcher.webp differ diff --git a/packages/CredentialManager/res/mipmap-hdpi/ic_launcher_round.webp b/packages/CredentialManager/res/mipmap-hdpi/ic_launcher_round.webp new file mode 100644 index 0000000000000..b2dfe3d1ba5cf Binary files /dev/null and b/packages/CredentialManager/res/mipmap-hdpi/ic_launcher_round.webp differ diff --git a/packages/CredentialManager/res/mipmap-mdpi/ic_launcher.webp b/packages/CredentialManager/res/mipmap-mdpi/ic_launcher.webp new file mode 100644 index 0000000000000..4f0f1d64e58ba Binary files /dev/null and b/packages/CredentialManager/res/mipmap-mdpi/ic_launcher.webp differ diff --git a/packages/CredentialManager/res/mipmap-mdpi/ic_launcher_round.webp b/packages/CredentialManager/res/mipmap-mdpi/ic_launcher_round.webp new file mode 100644 index 0000000000000..62b611da08167 Binary files /dev/null and b/packages/CredentialManager/res/mipmap-mdpi/ic_launcher_round.webp differ diff --git a/packages/CredentialManager/res/mipmap-xhdpi/ic_launcher.webp b/packages/CredentialManager/res/mipmap-xhdpi/ic_launcher.webp new file mode 100644 index 0000000000000..948a3070fe34c Binary files /dev/null and b/packages/CredentialManager/res/mipmap-xhdpi/ic_launcher.webp differ diff --git a/packages/CredentialManager/res/mipmap-xhdpi/ic_launcher_round.webp b/packages/CredentialManager/res/mipmap-xhdpi/ic_launcher_round.webp new file mode 100644 index 0000000000000..1b9a6956b3acd Binary files /dev/null and b/packages/CredentialManager/res/mipmap-xhdpi/ic_launcher_round.webp differ diff --git a/packages/CredentialManager/res/mipmap-xxhdpi/ic_launcher.webp b/packages/CredentialManager/res/mipmap-xxhdpi/ic_launcher.webp new file mode 100644 index 0000000000000..28d4b77f9f036 Binary files /dev/null and b/packages/CredentialManager/res/mipmap-xxhdpi/ic_launcher.webp differ diff --git a/packages/CredentialManager/res/mipmap-xxhdpi/ic_launcher_round.webp b/packages/CredentialManager/res/mipmap-xxhdpi/ic_launcher_round.webp new file mode 100644 index 0000000000000..9287f5083623b Binary files /dev/null and b/packages/CredentialManager/res/mipmap-xxhdpi/ic_launcher_round.webp differ diff --git a/packages/CredentialManager/res/mipmap-xxxhdpi/ic_launcher.webp b/packages/CredentialManager/res/mipmap-xxxhdpi/ic_launcher.webp new file mode 100644 index 0000000000000..aa7d6427e6fa1 Binary files /dev/null and b/packages/CredentialManager/res/mipmap-xxxhdpi/ic_launcher.webp differ diff --git a/packages/CredentialManager/res/mipmap-xxxhdpi/ic_launcher_round.webp b/packages/CredentialManager/res/mipmap-xxxhdpi/ic_launcher_round.webp new file mode 100644 index 0000000000000..9126ae37cbc35 Binary files /dev/null and b/packages/CredentialManager/res/mipmap-xxxhdpi/ic_launcher_round.webp differ diff --git a/packages/CredentialManager/res/values/colors.xml b/packages/CredentialManager/res/values/colors.xml new file mode 100644 index 0000000000000..09837df62f445 --- /dev/null +++ b/packages/CredentialManager/res/values/colors.xml @@ -0,0 +1,10 @@ + + + #FFBB86FC + #FF6200EE + #FF3700B3 + #FF03DAC5 + #FF018786 + #FF000000 + #FFFFFFFF + \ No newline at end of file diff --git a/packages/CredentialManager/res/values/strings.xml b/packages/CredentialManager/res/values/strings.xml new file mode 100644 index 0000000000000..2901705d58362 --- /dev/null +++ b/packages/CredentialManager/res/values/strings.xml @@ -0,0 +1,13 @@ + + CredentialManager + Cancel + Continue + More options + 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 + Choose your default provider + 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 + \ No newline at end of file diff --git a/packages/CredentialManager/res/values/themes.xml b/packages/CredentialManager/res/values/themes.xml new file mode 100644 index 0000000000000..feec74608000b --- /dev/null +++ b/packages/CredentialManager/res/values/themes.xml @@ -0,0 +1,12 @@ + + + + + \ No newline at end of file diff --git a/packages/CredentialManager/res/xml/backup_rules.xml b/packages/CredentialManager/res/xml/backup_rules.xml new file mode 100644 index 0000000000000..9b42d90d94bbe --- /dev/null +++ b/packages/CredentialManager/res/xml/backup_rules.xml @@ -0,0 +1,13 @@ + + + + \ No newline at end of file diff --git a/packages/CredentialManager/res/xml/data_extraction_rules.xml b/packages/CredentialManager/res/xml/data_extraction_rules.xml new file mode 100644 index 0000000000000..c6c3bb05a9568 --- /dev/null +++ b/packages/CredentialManager/res/xml/data_extraction_rules.xml @@ -0,0 +1,19 @@ + + + + + + + \ No newline at end of file diff --git a/packages/CredentialManager/src/com/android/credentialmanager/CredentialManagerRepo.kt b/packages/CredentialManager/src/com/android/credentialmanager/CredentialManagerRepo.kt new file mode 100644 index 0000000000000..f20104a19af25 --- /dev/null +++ b/packages/CredentialManager/src/com/android/credentialmanager/CredentialManagerRepo.kt @@ -0,0 +1,131 @@ +package com.android.credentialmanager + +import android.content.Context +import com.android.credentialmanager.createflow.CreateOptionInfo +import com.android.credentialmanager.createflow.ProviderInfo +import com.android.credentialmanager.createflow.ProviderList +import com.android.credentialmanager.getflow.CredentialOptionInfo + +class CredentialManagerRepo( + private val context: Context +) { + fun getCredentialProviderList(): List { + return listOf( + com.android.credentialmanager.getflow.ProviderInfo( + icon = context.getDrawable(R.drawable.ic_passkey)!!, + name = "Google Password Manager", + appDomainName = "tribank.us", + credentialTypeIcon = context.getDrawable(R.drawable.ic_passkey)!!, + credentialOptions = listOf( + CredentialOptionInfo( + icon = context.getDrawable(R.drawable.ic_passkey)!!, + title = "Elisa Backett", + subtitle = "elisa.beckett@gmail.com", + id = "id-1", + ), + CredentialOptionInfo( + icon = context.getDrawable(R.drawable.ic_passkey)!!, + title = "Elisa Backett Work", + subtitle = "elisa.beckett.work@google.com", + id = "id-2", + ), + ) + ), + com.android.credentialmanager.getflow.ProviderInfo( + icon = context.getDrawable(R.drawable.ic_passkey)!!, + name = "Lastpass", + appDomainName = "tribank.us", + credentialTypeIcon = context.getDrawable(R.drawable.ic_passkey)!!, + credentialOptions = listOf( + CredentialOptionInfo( + icon = context.getDrawable(R.drawable.ic_passkey)!!, + title = "Elisa Backett", + subtitle = "elisa.beckett@lastpass.com", + id = "id-1", + ), + ) + ), + com.android.credentialmanager.getflow.ProviderInfo( + icon = context.getDrawable(R.drawable.ic_passkey)!!, + name = "Dashlane", + appDomainName = "tribank.us", + credentialTypeIcon = context.getDrawable(R.drawable.ic_passkey)!!, + credentialOptions = listOf( + CredentialOptionInfo( + icon = context.getDrawable(R.drawable.ic_passkey)!!, + title = "Elisa Backett", + subtitle = "elisa.beckett@dashlane.com", + id = "id-1", + ), + ) + ), + ) + } + + fun createCredentialProviderList(): ProviderList { + return ProviderList( + listOf( + ProviderInfo( + icon = context.getDrawable(R.drawable.ic_passkey)!!, + name = "Google Password Manager", + appDomainName = "tribank.us", + credentialTypeIcon = context.getDrawable(R.drawable.ic_passkey)!!, + createOptions = listOf( + CreateOptionInfo( + icon = context.getDrawable(R.drawable.ic_passkey)!!, + title = "Elisa Backett", + subtitle = "elisa.beckett@gmail.com", + id = "id-1", + ), + CreateOptionInfo( + icon = context.getDrawable(R.drawable.ic_passkey)!!, + title = "Elisa Backett Work", + subtitle = "elisa.beckett.work@google.com", + id = "id-2", + ), + ) + ), + ProviderInfo( + icon = context.getDrawable(R.drawable.ic_passkey)!!, + name = "Lastpass", + appDomainName = "tribank.us", + credentialTypeIcon = context.getDrawable(R.drawable.ic_passkey)!!, + createOptions = listOf( + CreateOptionInfo( + icon = context.getDrawable(R.drawable.ic_passkey)!!, + title = "Elisa Backett", + subtitle = "elisa.beckett@lastpass.com", + id = "id-1", + ), + ) + ), + ProviderInfo( + icon = context.getDrawable(R.drawable.ic_passkey)!!, + name = "Dashlane", + appDomainName = "tribank.us", + credentialTypeIcon = context.getDrawable(R.drawable.ic_passkey)!!, + createOptions = listOf( + CreateOptionInfo( + icon = context.getDrawable(R.drawable.ic_passkey)!!, + title = "Elisa Backett", + subtitle = "elisa.beckett@dashlane.com", + id = "id-1", + ), + ) + ), + ) + ) + } + + companion object { + lateinit var repo: CredentialManagerRepo + + fun setup(context: Context) { + repo = CredentialManagerRepo(context) + } + + fun getInstance(): CredentialManagerRepo { + return repo + } + } +} diff --git a/packages/CredentialManager/src/com/android/credentialmanager/CredentialSelectorActivity.kt b/packages/CredentialManager/src/com/android/credentialmanager/CredentialSelectorActivity.kt new file mode 100644 index 0000000000000..dd4ba11e92025 --- /dev/null +++ b/packages/CredentialManager/src/com/android/credentialmanager/CredentialSelectorActivity.kt @@ -0,0 +1,63 @@ +package com.android.credentialmanager + +import android.os.Bundle +import androidx.activity.ComponentActivity +import androidx.activity.compose.setContent +import androidx.compose.material.ExperimentalMaterialApi +import androidx.compose.runtime.Composable +import androidx.compose.ui.Modifier +import androidx.navigation.NavHostController +import androidx.navigation.compose.NavHost +import androidx.navigation.compose.rememberNavController +import com.android.credentialmanager.createflow.CreatePasskeyViewModel +import com.android.credentialmanager.createflow.createPasskeyGraph +import com.android.credentialmanager.getflow.GetCredentialViewModel +import com.android.credentialmanager.getflow.getCredentialsGraph +import com.android.credentialmanager.ui.theme.CredentialSelectorTheme + +@ExperimentalMaterialApi +class CredentialSelectorActivity : ComponentActivity() { + override fun onCreate(savedInstanceState: Bundle?) { + super.onCreate(savedInstanceState) + CredentialManagerRepo.setup(this) + val startDestination = intent.extras?.getString( + "start_destination", + "getCredentials" + ) ?: "getCredentials" + + setContent { + CredentialSelectorTheme { + AppNavHost( + startDestination = startDestination, + onCancel = {this.finish()} + ) + } + } + } + + @ExperimentalMaterialApi + @Composable + fun AppNavHost( + modifier: Modifier = Modifier, + navController: NavHostController = rememberNavController(), + startDestination: String, + onCancel: () -> Unit, + ) { + NavHost( + modifier = modifier, + navController = navController, + startDestination = startDestination + ) { + createPasskeyGraph( + navController = navController, + viewModel = CreatePasskeyViewModel(CredentialManagerRepo.repo), + onCancel = onCancel + ) + getCredentialsGraph( + navController = navController, + viewModel = GetCredentialViewModel(CredentialManagerRepo.repo), + onCancel = onCancel + ) + } + } +} diff --git a/packages/CredentialManager/src/com/android/credentialmanager/createflow/CreateModel.kt b/packages/CredentialManager/src/com/android/credentialmanager/createflow/CreateModel.kt new file mode 100644 index 0000000000000..62c244cfb1212 --- /dev/null +++ b/packages/CredentialManager/src/com/android/credentialmanager/createflow/CreateModel.kt @@ -0,0 +1,22 @@ +package com.android.credentialmanager.createflow + +import android.graphics.drawable.Drawable + +data class ProviderInfo( + val icon: Drawable, + val name: String, + val appDomainName: String, + val credentialTypeIcon: Drawable, + val createOptions: List, +) + +data class ProviderList( + val providers: List, +) + +data class CreateOptionInfo( + val icon: Drawable, + val title: String, + val subtitle: String, + val id: String, +) diff --git a/packages/CredentialManager/src/com/android/credentialmanager/createflow/CreatePasskeyComponents.kt b/packages/CredentialManager/src/com/android/credentialmanager/createflow/CreatePasskeyComponents.kt new file mode 100644 index 0000000000000..fb6db2172123b --- /dev/null +++ b/packages/CredentialManager/src/com/android/credentialmanager/createflow/CreatePasskeyComponents.kt @@ -0,0 +1,541 @@ +package com.android.credentialmanager.createflow + +import androidx.compose.foundation.BorderStroke +import androidx.compose.foundation.Image +import androidx.compose.foundation.layout.Arrangement +import androidx.compose.foundation.layout.Column +import androidx.compose.foundation.layout.Row +import androidx.compose.foundation.layout.fillMaxWidth +import androidx.compose.foundation.layout.height +import androidx.compose.foundation.layout.padding +import androidx.compose.foundation.layout.size +import androidx.compose.foundation.lazy.LazyColumn +import androidx.compose.material.Button +import androidx.compose.material.ButtonColors +import androidx.compose.material.ButtonDefaults +import androidx.compose.material.Card +import androidx.compose.material.Chip +import androidx.compose.material.ChipDefaults +import androidx.compose.material.Divider +import androidx.compose.material.ExperimentalMaterialApi +import androidx.compose.material.Icon +import androidx.compose.material.ModalBottomSheetLayout +import androidx.compose.material.ModalBottomSheetValue +import androidx.compose.material.Text +import androidx.compose.material.rememberModalBottomSheetState +import androidx.compose.runtime.Composable +import androidx.compose.runtime.LaunchedEffect +import androidx.compose.runtime.collectAsState +import androidx.compose.ui.Alignment +import androidx.compose.ui.Modifier +import androidx.compose.ui.graphics.Color +import androidx.compose.ui.graphics.asImageBitmap +import androidx.compose.ui.res.painterResource +import androidx.compose.ui.res.stringResource +import androidx.compose.ui.tooling.preview.Preview +import androidx.compose.ui.unit.dp +import androidx.core.graphics.drawable.toBitmap +import androidx.navigation.NavController +import androidx.navigation.NavGraphBuilder +import androidx.navigation.NavType +import androidx.navigation.compose.composable +import androidx.navigation.navArgument +import androidx.navigation.navigation +import com.android.credentialmanager.R +import com.android.credentialmanager.ui.theme.Grey100 +import com.android.credentialmanager.ui.theme.Shapes +import com.android.credentialmanager.ui.theme.Typography +import com.android.credentialmanager.ui.theme.lightBackgroundColor +import com.android.credentialmanager.ui.theme.lightColorAccentSecondary +import com.android.credentialmanager.ui.theme.lightSurface1 + +@ExperimentalMaterialApi +fun NavGraphBuilder.createPasskeyGraph( + navController: NavController, + viewModel: CreatePasskeyViewModel, + onCancel: () -> Unit, + startDestination: String = "intro", // TODO: get this from view model +) { + navigation(startDestination = startDestination, route = "createPasskey") { + composable("intro") { + CreatePasskeyIntroDialog( + onCancel = onCancel, + onConfirm = {viewModel.onConfirm(navController)} + ) + } + composable("providerSelection") { + ProviderSelectionDialog( + providerList = viewModel.uiState.collectAsState().value.providerList, + onProviderSelected = {viewModel.onProviderSelected(it, navController)}, + onCancel = onCancel + ) + } + composable( + "createCredentialSelection/{providerName}", + arguments = listOf(navArgument("providerName") {type = NavType.StringType}) + ) { + val arguments = it.arguments + if (arguments == null) { + throw java.lang.IllegalStateException("createCredentialSelection without a provider name") + } + CreationSelectionDialog( + providerInfo = viewModel.getProviderInfoByName(arguments.getString("providerName")!!), + onOptionSelected = {viewModel.onCreateOptionSelected(it)}, + onCancel = onCancel, + multiProvider = viewModel.uiState.collectAsState().value.providerList.providers.size > 1, + onMoreOptionSelected = {viewModel.onMoreOptionSelected(navController)}, + ) + } + } +} + +/** + * BEGIN INTRO CONTENT + */ +@ExperimentalMaterialApi +@Composable +fun CreatePasskeyIntroDialog( + onCancel: () -> Unit = {}, + onConfirm: () -> Unit = {}, +) { + val state = rememberModalBottomSheetState( + initialValue = ModalBottomSheetValue.Expanded, + skipHalfExpanded = true + ) + ModalBottomSheetLayout( + sheetState = state, + sheetContent = { + ConfirmationCard( + onCancel = onCancel, onConfirm = onConfirm + ) + }, + scrimColor = Color.Transparent, + sheetShape = Shapes.medium, + ) {} + LaunchedEffect(state.currentValue) { + when (state.currentValue) { + ModalBottomSheetValue.Hidden -> { + onCancel() + } + } + } +} + +@Composable +fun ConfirmationCard( + onConfirm: () -> Unit, + onCancel: () -> Unit, +) { + Card( + backgroundColor = lightBackgroundColor, + ) { + Column() { + Icon( + painter = painterResource(R.drawable.ic_passkey), + contentDescription = null, + tint = Color.Unspecified, + modifier = Modifier.align(alignment = Alignment.CenterHorizontally).padding(top = 24.dp) + ) + Text( + text = stringResource(R.string.passkey_creation_intro_title), + style = Typography.subtitle1, + modifier = Modifier + .padding(horizontal = 24.dp) + .align(alignment = Alignment.CenterHorizontally) + ) + Divider( + thickness = 24.dp, + color = Color.Transparent + ) + Text( + text = stringResource(R.string.passkey_creation_intro_body), + style = Typography.body1, + modifier = Modifier.padding(horizontal = 28.dp) + ) + Divider( + thickness = 48.dp, + color = Color.Transparent + ) + Row( + horizontalArrangement = Arrangement.SpaceBetween, + modifier = Modifier.fillMaxWidth().padding(horizontal = 24.dp) + ) { + CancelButton( + stringResource(R.string.string_cancel), + onclick = onCancel + ) + ConfirmButton( + stringResource(R.string.string_continue), + onclick = onConfirm + ) + } + Divider( + thickness = 18.dp, + color = Color.Transparent, + modifier = Modifier.padding(bottom = 16.dp) + ) + } + } +} + +/** + * END INTRO CONTENT + */ + +/** + * BEGIN PROVIDER SELECTION CONTENT + */ +@ExperimentalMaterialApi +@Composable +fun ProviderSelectionDialog( + providerList: ProviderList, + onProviderSelected: (String) -> Unit, + onCancel: () -> Unit, +) { + val state = rememberModalBottomSheetState( + initialValue = ModalBottomSheetValue.Expanded, + skipHalfExpanded = true + ) + ModalBottomSheetLayout( + sheetState = state, + sheetContent = { + ProviderSelectionCard( + providerList = providerList, + onCancel = onCancel, + onProviderSelected = onProviderSelected + ) + }, + scrimColor = Color.Transparent, + sheetShape = Shapes.medium, + ) {} + LaunchedEffect(state.currentValue) { + when (state.currentValue) { + ModalBottomSheetValue.Hidden -> { + onCancel() + } + } + } +} + +@ExperimentalMaterialApi +@Composable +fun ProviderSelectionCard( + providerList: ProviderList, + onProviderSelected: (String) -> Unit, + onCancel: () -> Unit +) { + Card( + backgroundColor = lightBackgroundColor, + ) { + Column() { + Text( + text = stringResource(R.string.choose_provider_title), + style = Typography.subtitle1, + modifier = Modifier.padding(all = 24.dp).align(alignment = Alignment.CenterHorizontally) + ) + Text( + text = stringResource(R.string.choose_provider_body), + style = Typography.body1, + modifier = Modifier.padding(horizontal = 28.dp) + ) + Divider( + thickness = 24.dp, + color = Color.Transparent + ) + Card( + shape = Shapes.medium, + modifier = Modifier + .padding(horizontal = 24.dp) + .align(alignment = Alignment.CenterHorizontally) + ) { + LazyColumn( + verticalArrangement = Arrangement.spacedBy(2.dp) + ) { + providerList.providers.forEach { + item { + ProviderRow(providerInfo = it, onProviderSelected = onProviderSelected) + } + } + } + } + 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) { + Chip( + modifier = Modifier.fillMaxWidth(), + onClick = {onProviderSelected(providerInfo.name)}, + leadingIcon = { + Image(modifier = Modifier.size(24.dp, 24.dp).padding(start = 10.dp), + bitmap = providerInfo.icon.toBitmap().asImageBitmap(), + // painter = painterResource(R.drawable.ic_passkey), + // TODO: add description. + contentDescription = "") + }, + colors = ChipDefaults.chipColors( + backgroundColor = Grey100, + leadingIconContentColor = Grey100 + ), + shape = Shapes.large + ) { + Text( + text = providerInfo.name, + style = Typography.button, + modifier = Modifier.padding(vertical = 18.dp) + ) + } +} + +/** + * END PROVIDER SELECTION CONTENT + */ + +/** + * BEGIN COMMON COMPONENTS + */ + +@Composable +fun CancelButton(text: String, onclick: () -> Unit) { + val colors = ButtonDefaults.buttonColors( + backgroundColor = lightBackgroundColor + ) + NavigationButton( + border = BorderStroke(1.dp, lightSurface1), + colors = colors, + text = text, + onclick = onclick) +} + +@Composable +fun ConfirmButton(text: String, onclick: () -> Unit) { + val colors = ButtonDefaults.buttonColors( + backgroundColor = lightColorAccentSecondary + ) + NavigationButton( + colors = colors, + text = text, + onclick = onclick) +} + +@Composable +fun NavigationButton( + border: BorderStroke? = null, + colors: ButtonColors, + text: String, + onclick: () -> Unit +) { + Button( + onClick = onclick, + shape = Shapes.small, + colors = colors, + border = border + ) { + Text(text = text, style = Typography.button) + } +} + +/** + * BEGIN CREATE OPTION SELECTION CONTENT + */ +@ExperimentalMaterialApi +@Composable +fun CreationSelectionDialog( + providerInfo: ProviderInfo, + onOptionSelected: (String) -> Unit, + onCancel: () -> Unit, + multiProvider: Boolean, + onMoreOptionSelected: () -> Unit, +) { + val state = rememberModalBottomSheetState( + initialValue = ModalBottomSheetValue.Expanded, + skipHalfExpanded = true + ) + ModalBottomSheetLayout( + sheetState = state, + sheetContent = { + CreationSelectionCard( + providerInfo = providerInfo, + onCancel = onCancel, + onOptionSelected = onOptionSelected, + multiProvider = multiProvider, + onMoreOptionSelected = onMoreOptionSelected, + ) + }, + scrimColor = Color.Transparent, + sheetShape = Shapes.medium, + ) {} + LaunchedEffect(state.currentValue) { + when (state.currentValue) { + ModalBottomSheetValue.Hidden -> { + onCancel() + } + } + } +} + +@ExperimentalMaterialApi +@Composable +fun CreationSelectionCard( + providerInfo: ProviderInfo, + onOptionSelected: (String) -> Unit, + onCancel: () -> Unit, + multiProvider: Boolean, + onMoreOptionSelected: () -> Unit, +) { + Card( + backgroundColor = lightBackgroundColor, + ) { + Column() { + Icon( + bitmap = providerInfo.credentialTypeIcon.toBitmap().asImageBitmap(), + contentDescription = null, + tint = Color.Unspecified, + modifier = Modifier.align(alignment = Alignment.CenterHorizontally).padding(top = 24.dp) + ) + Text( + text = "${stringResource(R.string.choose_create_option_title)} ${providerInfo.name}", + style = Typography.subtitle1, + modifier = Modifier.padding(all = 24.dp).align(alignment = Alignment.CenterHorizontally) + ) + Text( + text = providerInfo.appDomainName, + style = Typography.body2, + modifier = Modifier.padding(horizontal = 28.dp) + ) + Divider( + thickness = 24.dp, + color = Color.Transparent + ) + Card( + shape = Shapes.medium, + modifier = Modifier + .padding(horizontal = 24.dp) + .align(alignment = Alignment.CenterHorizontally) + ) { + LazyColumn( + verticalArrangement = Arrangement.spacedBy(2.dp) + ) { + providerInfo.createOptions.forEach { + item { + CreateOptionRow(createOptionInfo = it, onOptionSelected = onOptionSelected) + } + } + if (multiProvider) { + item { + MoreOptionRow(onSelect = onMoreOptionSelected) + } + } + } + } + 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 CreateOptionRow(createOptionInfo: CreateOptionInfo, onOptionSelected: (String) -> Unit) { + Chip( + modifier = Modifier.fillMaxWidth(), + onClick = {onOptionSelected(createOptionInfo.id)}, + leadingIcon = { + Image(modifier = Modifier.size(24.dp, 24.dp).padding(start = 10.dp), + bitmap = createOptionInfo.icon.toBitmap().asImageBitmap(), + // painter = painterResource(R.drawable.ic_passkey), + // TODO: add description. + contentDescription = "") + }, + colors = ChipDefaults.chipColors( + backgroundColor = Grey100, + leadingIconContentColor = Grey100 + ), + shape = Shapes.large + ) { + Column() { + Text( + text = createOptionInfo.title, + style = Typography.h6, + modifier = Modifier.padding(top = 16.dp) + ) + Text( + text = createOptionInfo.subtitle, + style = Typography.body2, + modifier = Modifier.padding(bottom = 16.dp) + ) + } + } +} + +@ExperimentalMaterialApi +@Composable +fun MoreOptionRow(onSelect: () -> Unit) { + Chip( + modifier = Modifier.fillMaxWidth().height(52.dp), + onClick = onSelect, + colors = ChipDefaults.chipColors( + backgroundColor = Grey100, + leadingIconContentColor = Grey100 + ), + shape = Shapes.large + ) { + Text( + text = stringResource(R.string.string_more_options), + style = Typography.h6, + ) + } +} +/** + * END CREATE OPTION SELECTION CONTENT + */ + +/** + * END COMMON COMPONENTS + */ + +@ExperimentalMaterialApi +@Preview(showBackground = true) +@Composable +fun CreatePasskeyEntryScreenPreview() { + // val providers = ProviderList( + // listOf( + // ProviderInfo(null), + // ProviderInfo(null, "Dashlane"), + // ProviderInfo(null, "LastPass") + // ) + // ) + // TatiAccountSelectorTheme { + // ConfirmationCard({}, {}) + // } +} diff --git a/packages/CredentialManager/src/com/android/credentialmanager/createflow/CreatePasskeyViewModel.kt b/packages/CredentialManager/src/com/android/credentialmanager/createflow/CreatePasskeyViewModel.kt new file mode 100644 index 0000000000000..355428555735b --- /dev/null +++ b/packages/CredentialManager/src/com/android/credentialmanager/createflow/CreatePasskeyViewModel.kt @@ -0,0 +1,51 @@ +package com.android.credentialmanager.createflow + +import android.util.Log +import androidx.lifecycle.ViewModel +import androidx.navigation.NavController +import com.android.credentialmanager.CredentialManagerRepo +import kotlinx.coroutines.flow.MutableStateFlow +import kotlinx.coroutines.flow.StateFlow +import kotlinx.coroutines.flow.asStateFlow + +data class CreatePasskeyUiState( + val providerList: ProviderList, +) + +class CreatePasskeyViewModel( + credManRepo: CredentialManagerRepo +) : ViewModel() { + + private val _uiState = MutableStateFlow( + CreatePasskeyUiState(credManRepo.createCredentialProviderList()) + ) + val uiState: StateFlow = _uiState.asStateFlow() + + fun onConfirm(navController: NavController) { + if (uiState.value.providerList.providers.size > 1) { + navController.navigate("providerSelection") + } else if (uiState.value.providerList.providers.size == 1) { + onProviderSelected(uiState.value.providerList.providers[0].name, navController) + } else { + throw java.lang.IllegalStateException("Empty provider list.") + } + } + + fun onProviderSelected(providerName: String, navController: NavController) { + return navController.navigate("createCredentialSelection/$providerName") + } + + fun onCreateOptionSelected(createOptionId: String) { + Log.d("Account Selector", "Option selected for creation: $createOptionId") + } + + fun getProviderInfoByName(providerName: String): ProviderInfo { + return uiState.value.providerList.providers.single { + it.name.equals(providerName) + } + } + + fun onMoreOptionSelected(navController: NavController) { + navController.navigate("moreOption") + } +} diff --git a/packages/CredentialManager/src/com/android/credentialmanager/getflow/GetCredentialComponents.kt b/packages/CredentialManager/src/com/android/credentialmanager/getflow/GetCredentialComponents.kt new file mode 100644 index 0000000000000..6ad14db00024f --- /dev/null +++ b/packages/CredentialManager/src/com/android/credentialmanager/getflow/GetCredentialComponents.kt @@ -0,0 +1,232 @@ +package com.android.credentialmanager.getflow + +import androidx.compose.foundation.Image +import androidx.compose.foundation.layout.Arrangement +import androidx.compose.foundation.layout.Column +import androidx.compose.foundation.layout.Row +import androidx.compose.foundation.layout.fillMaxWidth +import androidx.compose.foundation.layout.height +import androidx.compose.foundation.layout.padding +import androidx.compose.foundation.layout.size +import androidx.compose.foundation.lazy.LazyColumn +import androidx.compose.material.Card +import androidx.compose.material.Chip +import androidx.compose.material.ChipDefaults +import androidx.compose.material.Divider +import androidx.compose.material.ExperimentalMaterialApi +import androidx.compose.material.Icon +import androidx.compose.material.ModalBottomSheetLayout +import androidx.compose.material.ModalBottomSheetValue +import androidx.compose.material.Text +import androidx.compose.material.rememberModalBottomSheetState +import androidx.compose.runtime.Composable +import androidx.compose.runtime.LaunchedEffect +import androidx.compose.runtime.collectAsState +import androidx.compose.ui.Alignment +import androidx.compose.ui.Modifier +import androidx.compose.ui.graphics.Color +import androidx.compose.ui.graphics.asImageBitmap +import androidx.compose.ui.res.stringResource +import androidx.compose.ui.unit.dp +import androidx.core.graphics.drawable.toBitmap +import androidx.navigation.NavController +import androidx.navigation.NavGraphBuilder +import androidx.navigation.compose.composable +import androidx.navigation.navigation +import com.android.credentialmanager.R +import com.android.credentialmanager.createflow.CancelButton +import com.android.credentialmanager.ui.theme.Grey100 +import com.android.credentialmanager.ui.theme.Shapes +import com.android.credentialmanager.ui.theme.Typography +import com.android.credentialmanager.ui.theme.lightBackgroundColor + +@ExperimentalMaterialApi +fun NavGraphBuilder.getCredentialsGraph( + navController: NavController, + viewModel: GetCredentialViewModel, + onCancel: () -> Unit, + startDestination: String = "credentialSelection", // TODO: get this from view model +) { + navigation(startDestination = startDestination, route = "getCredentials") { + composable("credentialSelection") { + CredentialSelectionDialog( + providerInfo = viewModel.getDefaultProviderInfo(), + onOptionSelected = {viewModel.onCredentailSelected(it, navController)}, + onCancel = onCancel, + multiProvider = viewModel.uiState.collectAsState().value.providers.size > 1, + onMoreOptionSelected = {viewModel.onMoreOptionSelected(navController)} + ) + } + } +} + +/** + * BEGIN CREATE OPTION SELECTION CONTENT + */ +@ExperimentalMaterialApi +@Composable +fun CredentialSelectionDialog( + providerInfo: ProviderInfo, + onOptionSelected: (String) -> Unit, + onCancel: () -> Unit, + multiProvider: Boolean, + onMoreOptionSelected: () -> Unit, +) { + val state = rememberModalBottomSheetState( + initialValue = ModalBottomSheetValue.Expanded, + skipHalfExpanded = true + ) + ModalBottomSheetLayout( + sheetState = state, + sheetContent = { + CredentialSelectionCard( + providerInfo = providerInfo, + onCancel = onCancel, + onOptionSelected = onOptionSelected, + multiProvider = multiProvider, + onMoreOptionSelected = onMoreOptionSelected, + ) + }, + scrimColor = Color.Transparent, + sheetShape = Shapes.medium, + ) {} + LaunchedEffect(state.currentValue) { + when (state.currentValue) { + ModalBottomSheetValue.Hidden -> { + onCancel() + } + } + } +} + +@ExperimentalMaterialApi +@Composable +fun CredentialSelectionCard( + providerInfo: ProviderInfo, + onOptionSelected: (String) -> Unit, + onCancel: () -> Unit, + multiProvider: Boolean, + onMoreOptionSelected: () -> Unit, +) { + Card( + backgroundColor = lightBackgroundColor, + ) { + Column() { + Icon( + bitmap = providerInfo.credentialTypeIcon.toBitmap().asImageBitmap(), + contentDescription = null, + tint = Color.Unspecified, + modifier = Modifier.align(alignment = Alignment.CenterHorizontally).padding(top = 24.dp) + ) + Text( + text = stringResource(R.string.choose_sign_in_title), + style = Typography.subtitle1, + modifier = Modifier.padding(all = 24.dp).align(alignment = Alignment.CenterHorizontally) + ) + Text( + text = providerInfo.appDomainName, + style = Typography.body2, + modifier = Modifier.padding(horizontal = 28.dp) + ) + Divider( + thickness = 24.dp, + color = Color.Transparent + ) + Card( + shape = Shapes.medium, + modifier = Modifier + .padding(horizontal = 24.dp) + .align(alignment = Alignment.CenterHorizontally) + ) { + LazyColumn( + verticalArrangement = Arrangement.spacedBy(2.dp) + ) { + providerInfo.credentialOptions.forEach { + item { + CredentialOptionRow(credentialOptionInfo = it, onOptionSelected = onOptionSelected) + } + } + if (multiProvider) { + item { + MoreOptionRow(onSelect = onMoreOptionSelected) + } + } + } + } + Divider( + thickness = 24.dp, + color = Color.Transparent + ) + Row( + horizontalArrangement = Arrangement.Start, + modifier = Modifier.fillMaxWidth().padding(horizontal = 24.dp) + ) { + CancelButton(stringResource(R.string.string_no_thanks), onCancel) + } + Divider( + thickness = 18.dp, + color = Color.Transparent, + modifier = Modifier.padding(bottom = 16.dp) + ) + } + } +} + +@ExperimentalMaterialApi +@Composable +fun CredentialOptionRow( + credentialOptionInfo: CredentialOptionInfo, + onOptionSelected: (String) -> Unit +) { + Chip( + modifier = Modifier.fillMaxWidth(), + onClick = {onOptionSelected(credentialOptionInfo.id)}, + leadingIcon = { + Image(modifier = Modifier.size(24.dp, 24.dp).padding(start = 10.dp), + bitmap = credentialOptionInfo.icon.toBitmap().asImageBitmap(), + // painter = painterResource(R.drawable.ic_passkey), + // TODO: add description. + contentDescription = "") + }, + colors = ChipDefaults.chipColors( + backgroundColor = Grey100, + leadingIconContentColor = Grey100 + ), + shape = Shapes.large + ) { + Column() { + Text( + text = credentialOptionInfo.title, + style = Typography.h6, + modifier = Modifier.padding(top = 16.dp) + ) + Text( + text = credentialOptionInfo.subtitle, + style = Typography.body2, + modifier = Modifier.padding(bottom = 16.dp) + ) + } + } +} + +@ExperimentalMaterialApi +@Composable +fun MoreOptionRow(onSelect: () -> Unit) { + Chip( + modifier = Modifier.fillMaxWidth().height(52.dp), + onClick = onSelect, + colors = ChipDefaults.chipColors( + backgroundColor = Grey100, + leadingIconContentColor = Grey100 + ), + shape = Shapes.large + ) { + Text( + text = stringResource(R.string.string_more_options), + style = Typography.h6, + ) + } +} +/** + * END CREATE OPTION SELECTION CONTENT + */ diff --git a/packages/CredentialManager/src/com/android/credentialmanager/getflow/GetCredentialViewModel.kt b/packages/CredentialManager/src/com/android/credentialmanager/getflow/GetCredentialViewModel.kt new file mode 100644 index 0000000000000..20057de8fec2a --- /dev/null +++ b/packages/CredentialManager/src/com/android/credentialmanager/getflow/GetCredentialViewModel.kt @@ -0,0 +1,36 @@ +package com.android.credentialmanager.getflow + +import android.util.Log +import androidx.lifecycle.ViewModel +import androidx.navigation.NavController +import com.android.credentialmanager.CredentialManagerRepo +import kotlinx.coroutines.flow.MutableStateFlow +import kotlinx.coroutines.flow.StateFlow +import kotlinx.coroutines.flow.asStateFlow + +data class GetCredentialUiState( + val providers: List +) + +class GetCredentialViewModel( + credManRepo: CredentialManagerRepo +) : ViewModel() { + + private val _uiState = MutableStateFlow( + GetCredentialUiState(credManRepo.getCredentialProviderList()) + ) + val uiState: StateFlow = _uiState.asStateFlow() + + fun getDefaultProviderInfo(): ProviderInfo { + // TODO: correctly get the default provider. + return uiState.value.providers.first() + } + + fun onCredentailSelected(credentialId: String, navController: NavController) { + Log.d("Account Selector", "credential selected: $credentialId") + } + + fun onMoreOptionSelected(navController: NavController) { + Log.d("Account Selector", "More Option selected") + } +} diff --git a/packages/CredentialManager/src/com/android/credentialmanager/getflow/GetModel.kt b/packages/CredentialManager/src/com/android/credentialmanager/getflow/GetModel.kt new file mode 100644 index 0000000000000..8710eceeb723a --- /dev/null +++ b/packages/CredentialManager/src/com/android/credentialmanager/getflow/GetModel.kt @@ -0,0 +1,18 @@ +package com.android.credentialmanager.getflow + +import android.graphics.drawable.Drawable + +data class ProviderInfo( + val icon: Drawable, + val name: String, + val appDomainName: String, + val credentialTypeIcon: Drawable, + val credentialOptions: List, +) + +data class CredentialOptionInfo( + val icon: Drawable, + val title: String, + val subtitle: String, + val id: String, +) diff --git a/packages/CredentialManager/src/com/android/credentialmanager/ui/theme/Color.kt b/packages/CredentialManager/src/com/android/credentialmanager/ui/theme/Color.kt new file mode 100644 index 0000000000000..abb4bfbf915ef --- /dev/null +++ b/packages/CredentialManager/src/com/android/credentialmanager/ui/theme/Color.kt @@ -0,0 +1,14 @@ +package com.android.credentialmanager.ui.theme + +import androidx.compose.ui.graphics.Color + +val Grey100 = Color(0xFFF1F3F4) +val Purple200 = Color(0xFFBB86FC) +val Purple500 = Color(0xFF6200EE) +val Purple700 = Color(0xFF3700B3) +val Teal200 = Color(0xFF03DAC5) +val lightColorAccentSecondary = Color(0xFFC2E7FF) +val lightBackgroundColor = Color(0xFFF0F0F0) +val lightSurface1 = Color(0xFF6991D6) +val textColorSecondary = Color(0xFF40484B) +val textColorPrimary = Color(0xFF191C1D) diff --git a/packages/CredentialManager/src/com/android/credentialmanager/ui/theme/Shape.kt b/packages/CredentialManager/src/com/android/credentialmanager/ui/theme/Shape.kt new file mode 100644 index 0000000000000..cba86585ee595 --- /dev/null +++ b/packages/CredentialManager/src/com/android/credentialmanager/ui/theme/Shape.kt @@ -0,0 +1,11 @@ +package com.android.credentialmanager.ui.theme + +import androidx.compose.foundation.shape.RoundedCornerShape +import androidx.compose.material.Shapes +import androidx.compose.ui.unit.dp + +val Shapes = Shapes( + small = RoundedCornerShape(100.dp), + medium = RoundedCornerShape(20.dp), + large = RoundedCornerShape(0.dp) +) diff --git a/packages/CredentialManager/src/com/android/credentialmanager/ui/theme/Theme.kt b/packages/CredentialManager/src/com/android/credentialmanager/ui/theme/Theme.kt new file mode 100644 index 0000000000000..a9d20ae9c42e5 --- /dev/null +++ b/packages/CredentialManager/src/com/android/credentialmanager/ui/theme/Theme.kt @@ -0,0 +1,47 @@ +package com.android.credentialmanager.ui.theme + +import androidx.compose.foundation.isSystemInDarkTheme +import androidx.compose.material.MaterialTheme +import androidx.compose.material.darkColors +import androidx.compose.material.lightColors +import androidx.compose.runtime.Composable + +private val DarkColorPalette = darkColors( + primary = Purple200, + primaryVariant = Purple700, + secondary = Teal200 +) + +private val LightColorPalette = lightColors( + primary = Purple500, + primaryVariant = Purple700, + secondary = Teal200 + + /* Other default colors to override + background = Color.White, + surface = Color.White, + onPrimary = Color.White, + onSecondary = Color.Black, + onBackground = Color.Black, + onSurface = Color.Black, + */ +) + +@Composable +fun CredentialSelectorTheme( + darkTheme: Boolean = isSystemInDarkTheme(), + content: @Composable () -> Unit +) { + val colors = if (darkTheme) { + DarkColorPalette + } else { + LightColorPalette + } + + MaterialTheme( + colors = colors, + typography = Typography, + shapes = Shapes, + content = content + ) +} diff --git a/packages/CredentialManager/src/com/android/credentialmanager/ui/theme/Type.kt b/packages/CredentialManager/src/com/android/credentialmanager/ui/theme/Type.kt new file mode 100644 index 0000000000000..d8fb01c17f95b --- /dev/null +++ b/packages/CredentialManager/src/com/android/credentialmanager/ui/theme/Type.kt @@ -0,0 +1,56 @@ +package com.android.credentialmanager.ui.theme + +import androidx.compose.material.Typography +import androidx.compose.ui.text.TextStyle +import androidx.compose.ui.text.font.FontFamily +import androidx.compose.ui.text.font.FontWeight +import androidx.compose.ui.unit.sp + +// Set of Material typography styles to start with +val Typography = Typography( + subtitle1 = TextStyle( + fontFamily = FontFamily.Default, + fontWeight = FontWeight.Normal, + fontSize = 24.sp, + lineHeight = 32.sp, + ), + body1 = TextStyle( + fontFamily = FontFamily.Default, + fontWeight = FontWeight.Normal, + fontSize = 14.sp, + lineHeight = 20.sp, + ), + body2 = TextStyle( + fontFamily = FontFamily.Default, + fontWeight = FontWeight.Normal, + fontSize = 14.sp, + lineHeight = 20.sp, + color = textColorSecondary + ), + button = TextStyle( + fontFamily = FontFamily.Default, + fontWeight = FontWeight.Medium, + fontSize = 14.sp, + lineHeight = 20.sp, + ), + h6 = TextStyle( + fontFamily = FontFamily.Default, + fontWeight = FontWeight.Medium, + fontSize = 16.sp, + lineHeight = 24.sp, + color = textColorPrimary + ), + + /* Other default text styles to override + button = TextStyle( + fontFamily = FontFamily.Default, + fontWeight = FontWeight.W500, + fontSize = 14.sp + ), + caption = TextStyle( + fontFamily = FontFamily.Default, + fontWeight = FontWeight.Normal, + fontSize = 12.sp + ) + */ +)