Merge pull request #4065 from element-hq/feature/bma/recoveryKeyUi

Update recovery key UI
This commit is contained in:
Benoit Marty 2024-12-18 21:26:14 +01:00 committed by GitHub
commit 1c2be66d6b
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
37 changed files with 127 additions and 103 deletions

View file

@ -9,6 +9,7 @@ package io.element.android.features.securebackup.impl.setup.views
import androidx.compose.foundation.background
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.fillMaxWidth
@ -24,8 +25,10 @@ import androidx.compose.ui.Alignment
import androidx.compose.ui.ExperimentalComposeUiApi
import androidx.compose.ui.Modifier
import androidx.compose.ui.autofill.AutofillType
import androidx.compose.ui.draw.alpha
import androidx.compose.ui.draw.clip
import androidx.compose.ui.res.stringResource
import androidx.compose.ui.text.font.FontFamily
import androidx.compose.ui.text.input.ImeAction
import androidx.compose.ui.text.input.KeyboardType
import androidx.compose.ui.text.input.VisualTransformation
@ -88,42 +91,38 @@ private fun RecoveryKeyStaticContent(
state: RecoveryKeyViewState,
onClick: (() -> Unit)?,
) {
Row(
Box(
modifier = Modifier
.fillMaxWidth()
.clip(RoundedCornerShape(14.dp))
.background(
color = ElementTheme.colors.bgSubtleSecondary,
shape = RoundedCornerShape(14.dp)
)
.clickableIfNotNull(onClick)
.padding(horizontal = 16.dp, vertical = 16.dp),
horizontalArrangement = Arrangement.spacedBy(8.dp)
.fillMaxWidth()
.clip(RoundedCornerShape(10.dp))
.background(
color = ElementTheme.colors.bgSubtleSecondary,
)
.clickableIfNotNull(onClick)
.padding(horizontal = 16.dp, vertical = 11.dp),
contentAlignment = Alignment.Center,
) {
if (state.formattedRecoveryKey != null) {
Text(
text = state.formattedRecoveryKey,
modifier = Modifier.weight(1f),
)
Icon(
imageVector = CompoundIcons.Copy(),
contentDescription = stringResource(id = CommonStrings.action_copy),
tint = ElementTheme.colors.iconSecondary,
RecoveryKeyWithCopy(
recoveryKey = state.formattedRecoveryKey,
alpha = 1f,
)
} else {
// Use an invisible recovery key to ensure that the Box size is correct.
val fakeFormattedRecoveryKey = List(12) { "XXXX" }.joinToString(" ")
RecoveryKeyWithCopy(
recoveryKey = fakeFormattedRecoveryKey,
alpha = 0f,
)
Row(
verticalAlignment = Alignment.CenterVertically,
horizontalArrangement = Arrangement.Center,
modifier = Modifier
.fillMaxWidth()
.padding(vertical = 11.dp)
) {
if (state.inProgress) {
CircularProgressIndicator(
modifier = Modifier
.progressSemantics()
.padding(end = 8.dp)
.size(16.dp),
.progressSemantics()
.padding(end = 8.dp)
.size(16.dp),
color = ElementTheme.colors.textPrimary,
strokeWidth = 1.5.dp,
)
@ -144,6 +143,31 @@ private fun RecoveryKeyStaticContent(
}
}
@Composable
private fun RecoveryKeyWithCopy(
recoveryKey: String,
alpha: Float,
) {
Row(
modifier = Modifier
.fillMaxWidth()
.alpha(alpha),
horizontalArrangement = Arrangement.spacedBy(8.dp),
) {
Text(
text = recoveryKey,
color = ElementTheme.colors.textSecondary,
style = ElementTheme.typography.fontBodyLgRegular.copy(fontFamily = FontFamily.Monospace),
modifier = Modifier.weight(1f),
)
Icon(
imageVector = CompoundIcons.Copy(),
contentDescription = stringResource(id = CommonStrings.action_copy),
tint = ElementTheme.colors.iconSecondary,
)
}
}
@OptIn(ExperimentalComposeUiApi::class)
@Composable
private fun RecoveryKeyFormContent(
@ -160,12 +184,12 @@ private fun RecoveryKeyFormContent(
}
TextField(
modifier = Modifier
.fillMaxWidth()
.testTag(TestTags.recoveryKey)
.autofill(
autofillTypes = listOf(AutofillType.Password),
onFill = { onChange(it) },
),
.fillMaxWidth()
.testTag(TestTags.recoveryKey)
.autofill(
autofillTypes = listOf(AutofillType.Password),
onFill = { onChange(it) },
),
minLines = 2,
value = state.formattedRecoveryKey.orEmpty(),
onValueChange = onChange,

View file

@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
oid sha256:0bc6ca9fdca5e61bcbc490eda3faa9931212a1fcf8836b756c629d64f71dfb44
size 16285
oid sha256:6ed28ec4c611e0c6b01e4f9742bbd579593103859775d41118bb11fef0586b11
size 16140

View file

@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
oid sha256:515442ef3d33d93b172ce0db8b0f2b06be2eee7137933128cf414223d8161b33
size 14044
oid sha256:f3e9406dc7e490469cfd6178c66f12af16b89c68241b939db81bb160232a1c61
size 13938

View file

@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
oid sha256:ea7920d1f69056b78471a4f789a02282d6929c72d542e4863affffa1cd99bbd1
size 22611
oid sha256:8bfa6e9b48e6ac6f5079127f6b978a5c144941d79ba347f91251ff0e6f1e3ae1
size 21680

View file

@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
oid sha256:ea7920d1f69056b78471a4f789a02282d6929c72d542e4863affffa1cd99bbd1
size 22611
oid sha256:8bfa6e9b48e6ac6f5079127f6b978a5c144941d79ba347f91251ff0e6f1e3ae1
size 21680

View file

@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
oid sha256:4d53449b4f515a15207ed194469d56266f77c7208856c8481bba4bc89d681ec3
size 16472
oid sha256:6715956a1ffc033a907da275bd69397b423b7819346355933278f5f1187b20fa
size 16380

View file

@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
oid sha256:515442ef3d33d93b172ce0db8b0f2b06be2eee7137933128cf414223d8161b33
size 14044
oid sha256:f3e9406dc7e490469cfd6178c66f12af16b89c68241b939db81bb160232a1c61
size 13938

View file

@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
oid sha256:ea7920d1f69056b78471a4f789a02282d6929c72d542e4863affffa1cd99bbd1
size 22611
oid sha256:8bfa6e9b48e6ac6f5079127f6b978a5c144941d79ba347f91251ff0e6f1e3ae1
size 21680

View file

@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
oid sha256:ea7920d1f69056b78471a4f789a02282d6929c72d542e4863affffa1cd99bbd1
size 22611
oid sha256:8bfa6e9b48e6ac6f5079127f6b978a5c144941d79ba347f91251ff0e6f1e3ae1
size 21680

View file

@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
oid sha256:484f2b3e592efbc3913cac20ce6cc7df3fe9424f0b40a16faaa870858756d847
size 15750
oid sha256:97a889bc71a579978cf4656a296221c4a929914f32dc0d74cd4faa07379ae519
size 15487

View file

@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
oid sha256:33d7d1c4a7ff4e1fd82963969721b23326f7a86c4f716b877b5f65455c564902
size 13572
oid sha256:9122040db16a68daf4b88e0ef8239fcb28e1a858f6ab1bc0b352926ab7819caf
size 13427

View file

@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
oid sha256:92c11a80a52d977e27f560c7d9b80e87328ebf14406647c62c05a4c6c962e2d9
size 21978
oid sha256:39769a4a1de0cb8962fc14de88f8d4e8988ef36419fb18ebb5524f08f6eda001
size 20811

View file

@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
oid sha256:92c11a80a52d977e27f560c7d9b80e87328ebf14406647c62c05a4c6c962e2d9
size 21978
oid sha256:39769a4a1de0cb8962fc14de88f8d4e8988ef36419fb18ebb5524f08f6eda001
size 20811

View file

@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
oid sha256:597682e1dc18488401665fe4404fc98f4d76a6587cd142d9e41e826138affc32
size 15961
oid sha256:5f7f2901b56ac490efd3c0dc3d59f5fcffdb33f063e82060820bb0b352cba968
size 15827

View file

@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
oid sha256:33d7d1c4a7ff4e1fd82963969721b23326f7a86c4f716b877b5f65455c564902
size 13572
oid sha256:9122040db16a68daf4b88e0ef8239fcb28e1a858f6ab1bc0b352926ab7819caf
size 13427

View file

@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
oid sha256:92c11a80a52d977e27f560c7d9b80e87328ebf14406647c62c05a4c6c962e2d9
size 21978
oid sha256:39769a4a1de0cb8962fc14de88f8d4e8988ef36419fb18ebb5524f08f6eda001
size 20811

View file

@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
oid sha256:92c11a80a52d977e27f560c7d9b80e87328ebf14406647c62c05a4c6c962e2d9
size 21978
oid sha256:39769a4a1de0cb8962fc14de88f8d4e8988ef36419fb18ebb5524f08f6eda001
size 20811

View file

@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
oid sha256:226b0e80f8b0b39c0413bc72ad145b6edebb71f58bb1ad7d41dda49776b09f4d
size 42643
oid sha256:2299427647ef9673a68b5235bc3503007874d0570324a17d3c3ee40a5e581af6
size 42671

View file

@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
oid sha256:4ac77b3456739f0abae3d05b03b35a17ff7b7d7a625f1bebd9b36b6c759e7e7d
size 40367
oid sha256:0a011821df73e73ac3ec15caef2c6cff228cf0e5567271164b655aedbd4755bf
size 40228

View file

@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
oid sha256:3a4aefb49b16a1bed3547d1259e3159590ef6428a73687b8b4bfdc9a9eea45e5
size 57599
oid sha256:b71e77d68b21262c0dc0731a4bd4a62053ab94f5ae3ef7ac27b29154cfe7556e
size 56493

View file

@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
oid sha256:3a4aefb49b16a1bed3547d1259e3159590ef6428a73687b8b4bfdc9a9eea45e5
size 57599
oid sha256:b71e77d68b21262c0dc0731a4bd4a62053ab94f5ae3ef7ac27b29154cfe7556e
size 56493

View file

@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
oid sha256:db5e61758f4decd9422be2ad11e595510cffb2433d42ec97923e4a7e3dc2610e
size 51310
oid sha256:222f29e2c22cc2381a0c533fb237d61cf6a3537ed3f00f29ec7931b9933d841f
size 49987

View file

@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
oid sha256:459f4185a7c9eaaedd179fdfa117fd730238277995c6520a7e0eba084762a640
size 41368
oid sha256:1220f0136cf5dd3558dcd08ff7f820fac4395b4b35fd5b144faa65ecf01ff620
size 41305

View file

@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
oid sha256:029a76515d629b66668f174ff55d5bc26be19e1a2d708f282b2de6213b1575cf
size 39090
oid sha256:b538d064bf3efda30bc981e24390e65918e3ae570f13b1329bcc17e55e4216c7
size 39020

View file

@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
oid sha256:b5b7a4b6d22c15e79ab8e547f10cf5298964d6de4ac5f6b10e0fd12380322350
size 56012
oid sha256:52cc26ca7c7db86be00075dcdd39ac364339c0b462edc529c21f17187fb878c2
size 54642

View file

@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
oid sha256:b5b7a4b6d22c15e79ab8e547f10cf5298964d6de4ac5f6b10e0fd12380322350
size 56012
oid sha256:52cc26ca7c7db86be00075dcdd39ac364339c0b462edc529c21f17187fb878c2
size 54642

View file

@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
oid sha256:d8a88518bc44f9554dbe9db6c86c51f26f54aff7172dfa1a011e8c10b0f8dac6
size 48564
oid sha256:a0cf9ffc7f76bd53c4b94d02f0507994972993ae50ce022db72542a283f780b5
size 47115

View file

@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
oid sha256:aaf674ca4ba02eaaff9f07fdc6374c5b195e7b9c8eb2e03b875e2690a236a975
size 44115
oid sha256:86dcedd7d1fb23ba10eb8b3e1c5d7f71331334cb98fb88bfa2a1fef0fffb3783
size 44053

View file

@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
oid sha256:9a96a86966223eb3ae22be485d8a7faf7607f0f9de8462419ad13772c55a8a76
size 41939
oid sha256:bcdb036e2a7581e69d3b658d16bb26e98aa27156fbafd17e9da15fd103158299
size 41819

View file

@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
oid sha256:3a4aefb49b16a1bed3547d1259e3159590ef6428a73687b8b4bfdc9a9eea45e5
size 57599
oid sha256:b71e77d68b21262c0dc0731a4bd4a62053ab94f5ae3ef7ac27b29154cfe7556e
size 56493

View file

@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
oid sha256:3a4aefb49b16a1bed3547d1259e3159590ef6428a73687b8b4bfdc9a9eea45e5
size 57599
oid sha256:b71e77d68b21262c0dc0731a4bd4a62053ab94f5ae3ef7ac27b29154cfe7556e
size 56493

View file

@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
oid sha256:db5e61758f4decd9422be2ad11e595510cffb2433d42ec97923e4a7e3dc2610e
size 51310
oid sha256:222f29e2c22cc2381a0c533fb237d61cf6a3537ed3f00f29ec7931b9933d841f
size 49987

View file

@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
oid sha256:19b68c0545f4b087d19f5f54f3bb104077dcde4622cd5a51803c34ff8111db67
size 42837
oid sha256:64777bafec80f98b0b1f9b7e05ede31036032b97808d52911ddd9045d83dae58
size 42794

View file

@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
oid sha256:b1fae355b34c7b34026bbf932f3e6ba44483e8c39d2d1d3de45f638fd370024f
size 40729
oid sha256:0d98ab21d3ae8099bd4f458c6422cf8d91a7405b45b1a41cc91fef78ccaf9475
size 40658

View file

@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
oid sha256:b5b7a4b6d22c15e79ab8e547f10cf5298964d6de4ac5f6b10e0fd12380322350
size 56012
oid sha256:52cc26ca7c7db86be00075dcdd39ac364339c0b462edc529c21f17187fb878c2
size 54642

View file

@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
oid sha256:b5b7a4b6d22c15e79ab8e547f10cf5298964d6de4ac5f6b10e0fd12380322350
size 56012
oid sha256:52cc26ca7c7db86be00075dcdd39ac364339c0b462edc529c21f17187fb878c2
size 54642

View file

@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
oid sha256:d8a88518bc44f9554dbe9db6c86c51f26f54aff7172dfa1a011e8c10b0f8dac6
size 48564
oid sha256:a0cf9ffc7f76bd53c4b94d02f0507994972993ae50ce022db72542a283f780b5
size 47115