oid4vp UI and error page

spruceid · Oct 21, 2024 · 32d58a5 · 32d58a5
1 parent 798a352
commit 32d58a5
Show file tree

Hide file tree

Showing 11 changed files with 711 additions and 104 deletions.
diff --git a/.idea/inspectionProfiles/Project_Default.xml b/.idea/inspectionProfiles/Project_Default.xml
diff --git a/example/src/main/java/com/spruceid/mobilesdkexample/ErrorView.kt b/example/src/main/java/com/spruceid/mobilesdkexample/ErrorView.kt
@@ -0,0 +1,202 @@
+package com.spruceid.mobilesdkexample
+
+import androidx.compose.foundation.Image
+import androidx.compose.foundation.background
+import androidx.compose.foundation.border
+import androidx.compose.foundation.clickable
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.fillMaxHeight
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.rememberScrollState
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.foundation.verticalScroll
+import androidx.compose.material3.Button
+import androidx.compose.material3.ButtonDefaults
+import androidx.compose.material3.ExperimentalMaterial3Api
+import androidx.compose.material3.ModalBottomSheet
+import androidx.compose.material3.Text
+import androidx.compose.material3.rememberModalBottomSheetState
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.remember
+import androidx.compose.runtime.setValue
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.res.painterResource
+import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.text.font.FontFamily
+import androidx.compose.ui.text.font.FontWeight
+import androidx.compose.ui.text.style.TextAlign
+import androidx.compose.ui.text.style.TextDecoration
+import androidx.compose.ui.unit.dp
+import androidx.compose.ui.unit.sp
+import com.spruceid.mobilesdkexample.ui.theme.BorderSecondary
+import com.spruceid.mobilesdkexample.ui.theme.ColorRose600
+import com.spruceid.mobilesdkexample.ui.theme.ColorStone300
+import com.spruceid.mobilesdkexample.ui.theme.ColorStone50
+import com.spruceid.mobilesdkexample.ui.theme.ColorStone600
+import com.spruceid.mobilesdkexample.ui.theme.Inter
+import com.spruceid.mobilesdkexample.ui.theme.TextPrimary
+
+@OptIn(ExperimentalMaterial3Api::class)
+@Composable
+fun ErrorView(
+    errorTitle: String,
+    errorDetails: String,
+    closeButtonLabel: String = "Close",
+    onClose: () -> Unit
+) {
+    val sheetState = rememberModalBottomSheetState(skipPartiallyExpanded = true)
+    var showSheet by remember {
+        mutableStateOf(false)
+    }
+
+    Box(
+        Modifier.fillMaxSize(),
+    ) {
+        Column(
+            modifier = Modifier.fillMaxSize(),
+            verticalArrangement = Arrangement.Center,
+            horizontalAlignment = Alignment.CenterHorizontally
+        ) {
+            Image(
+                painter = painterResource(id = R.drawable.error),
+                contentDescription = stringResource(id = R.string.error)
+            )
+            Text(
+                errorTitle,
+                fontFamily = Inter,
+                fontWeight = FontWeight.SemiBold,
+                fontSize = 26.sp,
+                color = ColorRose600,
+                textAlign = TextAlign.Center
+            )
+            Text(
+                "View technical details",
+                fontFamily = Inter,
+                fontWeight = FontWeight.Normal,
+                fontSize = 16.sp,
+                color = ColorStone600,
+                textAlign = TextAlign.Center,
+                textDecoration = TextDecoration.Underline,
+                modifier = Modifier.clickable {
+                    showSheet = true
+                }
+            )
+        }
+
+        Column {
+            Spacer(Modifier.weight(1f))
+            Button(
+                onClick = {
+                    onClose()
+                },
+                shape = RoundedCornerShape(6.dp),
+                colors =  ButtonDefaults.buttonColors(
+                    containerColor = Color.Transparent,
+                    contentColor = TextPrimary,
+                ),
+                modifier = Modifier
+                    .fillMaxWidth()
+                    .padding(30.dp)
+                    .border(
+                        width = 1.dp,
+                        color = BorderSecondary,
+                        shape = RoundedCornerShape(6.dp)
+                    )
+            ) {
+                Text(
+                    text = closeButtonLabel,
+                    fontFamily = Inter,
+                    fontWeight = FontWeight.SemiBold,
+                    color = TextPrimary,
+                )
+            }
+        }
+
+        if (showSheet) {
+            ModalBottomSheet(
+                onDismissRequest = {
+                    showSheet = false
+                },
+                modifier =
+                Modifier
+                    .fillMaxHeight(0.8f),
+                sheetState = sheetState,
+                dragHandle = null,
+                containerColor = Color.Transparent,
+            ) {
+                Box(
+                    Modifier
+                        .fillMaxSize()
+                        .background(Color.White),
+                ) {
+                    Column(
+                        modifier = Modifier
+                            .fillMaxWidth()
+                            .padding(horizontal = 24.dp)
+                            .padding(top = 48.dp)
+                    ) {
+                        Column(
+                            modifier = Modifier
+                                .fillMaxSize()
+                                .verticalScroll(rememberScrollState())
+                                .weight(weight = 1f, fill = false)
+                                .background(ColorStone50)
+                                .border(1.dp, ColorStone300, RoundedCornerShape(6.dp))
+                                .padding(16.dp)
+                        ) {
+                            Text(
+                                text = errorDetails,
+                                fontSize = 16.sp,
+                                fontFamily = FontFamily.Monospace,
+                                color = Color.Black,
+                            )
+                        }
+
+                        Row(
+                            modifier = Modifier
+                                .fillMaxWidth()
+                                .padding(vertical = 12.dp),
+                            horizontalArrangement = Arrangement.spacedBy(8.dp),
+                        ) {
+                            Button(
+                                onClick = {
+                                    showSheet = false
+                                },
+                                shape = RoundedCornerShape(6.dp),
+                                colors =  ButtonDefaults.buttonColors(
+                                    containerColor = Color.Transparent,
+                                    contentColor = TextPrimary,
+                                ),
+                                modifier = Modifier
+                                    .fillMaxWidth()
+                                    .border(
+                                        width = 1.dp,
+                                        color = BorderSecondary,
+                                        shape = RoundedCornerShape(6.dp)
+                                    )
+                                    .weight(1f)
+                            ) {
+                                Text(
+                                    text = "Close",
+                                    fontFamily = Inter,
+                                    fontWeight = FontWeight.SemiBold,
+                                    color = TextPrimary,
+                                )
+                            }
+                        }
+                    }
+                }
+            }
+        }
+    }
+}
diff --git a/example/src/main/java/com/spruceid/mobilesdkexample/LoadingView.kt b/example/src/main/java/com/spruceid/mobilesdkexample/LoadingView.kt
@@ -26,7 +26,6 @@ import com.spruceid.mobilesdkexample.ui.theme.CodeBorder
 import com.spruceid.mobilesdkexample.ui.theme.ColorBase800
 import com.spruceid.mobilesdkexample.ui.theme.Inter
 
-@OptIn(ExperimentalAssetLoader::class)
 @Composable
 fun LoadingView(
     loadingText: String,

diff --git a/example/src/main/java/com/spruceid/mobilesdkexample/ui/theme/Color.kt b/example/src/main/java/com/spruceid/mobilesdkexample/ui/theme/Color.kt
@@ -23,4 +23,17 @@ val VerifierRequestBadgeFieldText = Color(0xFF0C0A09)
 val VerifiedGreenValid = Color(0xFF047857)
 val VerifiedRedInvalid = Color(0xFFBE123C)
 val VerifierCloseButton = Color(0xFF44403C)
-val ColorBase800 = Color(0xFF75675C)
+// Design system colors
+val ColorBase300 = Color(0xFFE6E1D6)
+val ColorBase800 = Color(0xFF75675C)
+val ColorBlue600 = Color(0xFF2F6AE1)
+val ColorStone50 = Color(0xFFFAFAF9)
+val ColorStone300 = Color(0xFFD6D3D1)
+val ColorStone600 = Color(0xFF57534E)
+val ColorStone950 = Color(0xFF0C0A09)
+val ColorEmerald900 = Color(0xFF084C3A)
+val ColorRose600 = Color(0xFFE11D48)
+val TextBase = Color(0xFFFBF9F6)
+val TextPrimary = Color(0xFF0C0A09)
+val BgSurfacePureBlue = Color(0xFF2F6AE1)
+val BorderSecondary = Color(0xFFD6D3D1)