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 @@ + + + + + + + + + + +