diff --git a/app/src/main/java/chat/revolt/components/generic/CollapsibleCard.kt b/app/src/main/java/chat/revolt/components/generic/CollapsibleCard.kt
index fcfe3cf8..17f52410 100644
--- a/app/src/main/java/chat/revolt/components/generic/CollapsibleCard.kt
+++ b/app/src/main/java/chat/revolt/components/generic/CollapsibleCard.kt
@@ -2,15 +2,26 @@ package chat.revolt.components.generic
import androidx.compose.animation.AnimatedVisibility
import androidx.compose.foundation.clickable
-import androidx.compose.foundation.layout.*
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.padding
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.KeyboardArrowDown
import androidx.compose.material.icons.filled.KeyboardArrowUp
import androidx.compose.material3.Card
import androidx.compose.material3.Icon
+import androidx.compose.material3.LocalTextStyle
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Text
-import androidx.compose.runtime.*
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.CompositionLocalProvider
+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.text.font.FontWeight
import androidx.compose.ui.tooling.preview.Preview
@@ -18,7 +29,7 @@ import androidx.compose.ui.unit.dp
@Composable
fun CollapsibleCard(
- title: String,
+ header: @Composable () -> Unit,
modifier: Modifier = Modifier,
content: @Composable () -> Unit,
) {
@@ -30,18 +41,19 @@ fun CollapsibleCard(
) {
Column {
Row(
+ verticalAlignment = Alignment.CenterVertically,
modifier = Modifier
.clickable { expanded = !expanded }
.fillMaxWidth()
.padding(16.dp),
) {
- Text(
- text = title,
- style = MaterialTheme.typography.titleMedium.copy(
+ CompositionLocalProvider(
+ LocalTextStyle provides MaterialTheme.typography.titleMedium.copy(
fontWeight = FontWeight.Bold
- ),
- modifier = Modifier.padding(5.dp)
- )
+ )
+ ) {
+ header()
+ }
Spacer(modifier = Modifier.weight(1f))
Icon(
imageVector = if (expanded) Icons.Filled.KeyboardArrowUp else Icons.Filled.KeyboardArrowDown,
@@ -61,7 +73,11 @@ fun CollapsibleCard(
@Composable
fun CollapsibleCardPreview() {
CollapsibleCard(
- title = "Title",
+ header = {
+ Text(
+ text = "Header"
+ )
+ },
content = {
Text(
text = "Content",
diff --git a/app/src/main/java/chat/revolt/screens/login/MfaScreen.kt b/app/src/main/java/chat/revolt/screens/login/MfaScreen.kt
index e7e9e7c0..414bffbd 100644
--- a/app/src/main/java/chat/revolt/screens/login/MfaScreen.kt
+++ b/app/src/main/java/chat/revolt/screens/login/MfaScreen.kt
@@ -1,13 +1,16 @@
package chat.revolt.screens.login
import android.util.Log
+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.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.imePadding
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.safeDrawingPadding
+import androidx.compose.foundation.layout.size
import androidx.compose.foundation.rememberScrollState
import androidx.compose.foundation.verticalScroll
import androidx.compose.material3.Button
@@ -22,6 +25,7 @@ import androidx.compose.runtime.setValue
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.platform.testTag
+import androidx.compose.ui.res.painterResource
import androidx.compose.ui.res.stringResource
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.text.input.KeyboardType
@@ -178,7 +182,7 @@ fun MfaScreen(
textAlign = TextAlign.Center
),
modifier = Modifier
- .padding(horizontal = 20.dp, vertical = 10.dp)
+ .padding(horizontal = 20.dp)
.fillMaxWidth(),
)
@@ -216,7 +220,20 @@ fun MfaScreen(
allowedAuthTypes.forEach { authType ->
when (authType) {
"Totp" -> {
- CollapsibleCard(title = stringResource(R.string.mfa_totp_header)) {
+ CollapsibleCard(header = {
+ Row(
+ verticalAlignment = Alignment.CenterVertically
+ ) {
+ Image(
+ painter = painterResource(id = R.drawable.ux_mfa_totp),
+ contentDescription = null, // See label
+ modifier = Modifier
+ .size(64.dp)
+ .padding(end = 10.dp)
+ )
+ Text(stringResource(R.string.mfa_totp_header))
+ }
+ }) {
Column(
verticalArrangement = Arrangement.Center,
horizontalAlignment = Alignment.CenterHorizontally
@@ -258,7 +275,20 @@ fun MfaScreen(
}
"Recovery" -> {
- CollapsibleCard(title = stringResource(R.string.mfa_recovery_header)) {
+ CollapsibleCard(header = {
+ Row(
+ verticalAlignment = Alignment.CenterVertically
+ ) {
+ Image(
+ painter = painterResource(id = R.drawable.ux_mfa_restore),
+ contentDescription = null, // See label
+ modifier = Modifier
+ .size(64.dp)
+ .padding(end = 10.dp)
+ )
+ Text(stringResource(R.string.mfa_recovery_header))
+ }
+ }) {
Column(
verticalArrangement = Arrangement.Center,
horizontalAlignment = Alignment.CenterHorizontally
diff --git a/app/src/main/res/drawable/ux_mfa_restore.xml b/app/src/main/res/drawable/ux_mfa_restore.xml
new file mode 100644
index 00000000..d953b03e
--- /dev/null
+++ b/app/src/main/res/drawable/ux_mfa_restore.xml
@@ -0,0 +1,51 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/app/src/main/res/drawable/ux_mfa_totp.xml b/app/src/main/res/drawable/ux_mfa_totp.xml
new file mode 100644
index 00000000..db7c3b73
--- /dev/null
+++ b/app/src/main/res/drawable/ux_mfa_totp.xml
@@ -0,0 +1,35 @@
+
+
+
+
+
+
+
+
+
+
+