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 <[email protected]>
openwallet-foundation-labs · Nov 26, 2024 · baf1ca2 · baf1ca2
1 parent 264c00f
commit baf1ca2
Show file tree

Hide file tree

Showing 3 changed files with 76 additions and 31 deletions.
diff --git a/...a/com/android/identity_credential/wallet/ui/destination/document/DocumentDetailsScreen.kt b/...a/com/android/identity_credential/wallet/ui/destination/document/DocumentDetailsScreen.kt
@@ -1,6 +1,8 @@
 package com.android.identity_credential.wallet.ui.destination.document
 
 import androidx.compose.foundation.Image
+import androidx.compose.foundation.background
+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 +11,9 @@ 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.layout.width
+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 +28,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 +54,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,49 +163,81 @@ 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)
+            .padding(horizontal = 20.dp)
+    ) {
+        Row(
+            modifier = Modifier
+                .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_warning_icon_unverified_data)
+                )
+            )
+            Text(
+                modifier = Modifier.padding(top = 20.dp, bottom = 20.dp, end = 16.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")
         for (attributeId in topImages) {
             val attributeDisplayInfo = documentInfo.attributes[attributeId]
             if (attributeDisplayInfo != null) {
                 val displayInfo = attributeDisplayInfo as AttributeDisplayInfoImage
-                Row(
-                    horizontalArrangement = Arrangement.Center
-                ) {
-                    Image(
-                        bitmap = displayInfo.image.asImageBitmap(),
-                        modifier = Modifier
-                            .fillMaxWidth()
-                            .padding(8.dp)
-                            .size(200.dp),
-                        contentDescription = displayInfo.name
-                    )
-                }
+                Image(
+                    bitmap = displayInfo.image.asImageBitmap(),
+                    modifier = Modifier
+                        .width(100.dp)
+                        .background(Color.Green)
+                        .align(Alignment.Start),
+                    contentDescription = displayInfo.name
+                )
             }
         }
-
         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)
                 }
                 is AttributeDisplayInfoHtml -> {
                     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
@@ -0,0 +1,9 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="24dp"
+    android:height="24dp"
+    android:viewportWidth="960"
+    android:viewportHeight="960">
+  <path
+      android:pathData="m40,840 l440,-760 440,760L40,840ZM178,760h604L480,240 178,760ZM480,720q17,0 28.5,-11.5T520,680q0,-17 -11.5,-28.5T480,640q-17,0 -28.5,11.5T440,680q0,17 11.5,28.5T480,720ZM440,600h80v-200h-80v200ZM480,500Z"
+      android:fillColor="#5f6368"/>
+</vector>
diff --git a/wallet/src/main/res/values/strings.xml b/wallet/src/main/res/values/strings.xml
@@ -271,13 +271,10 @@
     <!-- DocumentDetailsScreen -->
     <string name="document_details_screen_title">Document Data</string>
     <string name="document_details_screen_disclaimer">UNVERIFIED DATA\nDO NOT USE</string>
-    <string name="document_details_screen_flash_pass_lecture">
-        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.
-    </string>
+    <string name="document_details_screen_flash_pass_lecture">Do not share this screen. It is not secure for presenting info directly as authenticity cannot be verified.</string>
     <string name="document_details_boolean_true_value">True</string>
     <string name="document_details_boolean_false_value">False</string>
+    <string name="document_details_screen_warning_icon_unverified_data">Warning Icon</string>
 
     <!-- CredentialInfoScreen -->
     <string name="credential_info_screen_title">Credentials</string>