From fb6d29ed9a354b408340c81720a49ea246388e8f Mon Sep 17 00:00:00 2001 From: dritan-x Date: Fri, 22 Nov 2024 18:24:46 -0800 Subject: [PATCH] UI Updates to Document Data Screen - Added warning message text, box, and icon - Showing document data fields according to a specified order defined in the code that matches the slides. Shows remaining fields in an unordered fashion. Tested by: - Manual testing by adding Test eID-Karte Personalausweis - ./gradlew check - ./gradlew connectedCheck Signed-off-by: dritan-x --- .../document/DocumentDetailsScreen.kt | 65 +++++++++++++++---- wallet/src/main/res/drawable/warning.xml | 9 +++ wallet/src/main/res/values/strings.xml | 6 +- 3 files changed, 63 insertions(+), 17 deletions(-) create mode 100644 wallet/src/main/res/drawable/warning.xml diff --git a/wallet/src/main/java/com/android/identity_credential/wallet/ui/destination/document/DocumentDetailsScreen.kt b/wallet/src/main/java/com/android/identity_credential/wallet/ui/destination/document/DocumentDetailsScreen.kt index 46a3beb01..eb22fc6eb 100644 --- a/wallet/src/main/java/com/android/identity_credential/wallet/ui/destination/document/DocumentDetailsScreen.kt +++ b/wallet/src/main/java/com/android/identity_credential/wallet/ui/destination/document/DocumentDetailsScreen.kt @@ -1,6 +1,7 @@ package com.android.identity_credential.wallet.ui.destination.document import androidx.compose.foundation.Image +import androidx.compose.foundation.border import androidx.compose.foundation.layout.Arrangement import androidx.compose.foundation.layout.Box import androidx.compose.foundation.layout.Column @@ -9,6 +10,8 @@ import androidx.compose.foundation.layout.fillMaxHeight import androidx.compose.foundation.layout.fillMaxWidth import androidx.compose.foundation.layout.padding import androidx.compose.foundation.layout.size +import androidx.compose.foundation.shape.RoundedCornerShape +import androidx.compose.material3.Icon import androidx.compose.material3.MaterialTheme import androidx.compose.material3.Text import androidx.compose.runtime.Composable @@ -23,12 +26,13 @@ import androidx.compose.ui.draw.rotate import androidx.compose.ui.geometry.Offset import androidx.compose.ui.graphics.Color import androidx.compose.ui.graphics.Shadow +import androidx.compose.ui.graphics.SolidColor import androidx.compose.ui.graphics.asImageBitmap import androidx.compose.ui.platform.LocalContext +import androidx.compose.ui.res.painterResource import androidx.compose.ui.res.stringResource import androidx.compose.ui.text.TextStyle import androidx.compose.ui.text.font.FontFamily -import androidx.compose.ui.text.font.FontStyle import androidx.compose.ui.text.font.FontWeight import androidx.compose.ui.text.style.TextAlign import androidx.compose.ui.unit.dp @@ -48,6 +52,7 @@ import com.android.identity_credential.wallet.ui.KeyValuePairHtml import com.android.identity_credential.wallet.ui.KeyValuePairText import com.android.identity_credential.wallet.ui.ScreenWithAppBarAndBackButton import com.android.identity_credential.wallet.ui.prompt.biometric.showBiometricPrompt +import com.android.identity_credential.wallet.util.inverse import kotlinx.coroutines.launch @@ -156,14 +161,34 @@ private fun DocumentAuthenticationRequired( private fun DocumentDetails( documentInfo: DocumentInfo, ) { - Column() { - Text( - text = stringResource(R.string.document_details_screen_flash_pass_lecture), - textAlign = TextAlign.Center, - fontStyle = FontStyle.Italic, - style = MaterialTheme.typography.bodySmall, - modifier = Modifier.padding(8.dp) - ) + Column( + modifier = Modifier.padding(top = 20.dp) + ) { + Row( + modifier = Modifier + .padding(horizontal = 30.dp) + .padding(bottom = 20.dp) + .border(1.dp, SolidColor(MaterialTheme.colorScheme.outline), RoundedCornerShape(30.dp)) + ){ + Icon( + modifier = Modifier + .size(40.dp) + .padding(top = 20.dp, start = 10.dp, end = 10.dp) + , + painter = painterResource(id = R.drawable.warning), + tint = MaterialTheme.colorScheme.background.inverse(), + contentDescription = stringResource( + R.string.accessibility_artwork_for, + stringResource(id = R.string.document_details_screen_title) + ) + ) + Text( + modifier = Modifier.padding(top = 20.dp, bottom = 20.dp, end=5.dp), + text = stringResource(R.string.document_details_screen_flash_pass_lecture), + textAlign = TextAlign.Left, + style = MaterialTheme.typography.bodyLarge + ) + } val topImages = listOf("portrait") val bottomImages = listOf("signature_usual_mark") @@ -189,8 +214,24 @@ private fun DocumentDetails( val centerAttributes = documentInfo.attributes.filter { !topImages.contains(it.key) && !bottomImages.contains(it.key) } - for ((attributeId, displayInfo) in centerAttributes) { - when (displayInfo) { + + val orderedEntries = listOf( + "issuing_country", + "birth_date", + "expiry_date", + "given_name", + "family_name", + ) + + val sortedKeys = centerAttributes.keys.sortedBy {keyValue-> + if (keyValue in orderedEntries){ + orderedEntries.indexOfFirst { it == keyValue } + } else { + Int.MAX_VALUE + } + } + for (sortedKey in sortedKeys) { + when (val displayInfo = centerAttributes[sortedKey]) { is AttributeDisplayInfoPlainText -> { KeyValuePairText(displayInfo.name, displayInfo.value) } @@ -198,7 +239,7 @@ private fun DocumentDetails( KeyValuePairHtml(displayInfo.name, displayInfo.value) } else -> { - throw IllegalArgumentException("Unsupported attribute display info for $attributeId: $displayInfo") + throw IllegalArgumentException("Unsupported attribute display info for $sortedKey: $displayInfo") } } } diff --git a/wallet/src/main/res/drawable/warning.xml b/wallet/src/main/res/drawable/warning.xml new file mode 100644 index 000000000..8cce981ac --- /dev/null +++ b/wallet/src/main/res/drawable/warning.xml @@ -0,0 +1,9 @@ + + + diff --git a/wallet/src/main/res/values/strings.xml b/wallet/src/main/res/values/strings.xml index f7e1eadce..2bcf42563 100644 --- a/wallet/src/main/res/values/strings.xml +++ b/wallet/src/main/res/values/strings.xml @@ -271,11 +271,7 @@ Document Data UNVERIFIED DATA\nDO NOT USE - - Showing this screen is not a secure way of sharing identity data because the verifier - has no way to confirm the authenticity of the data. Use NFC or QR to share identity - data in a secure and privacy-preserving manner. - + Do not share this screen. It is not secure for presenting info directly as authenticity cannot be verified. True False