mirror of
https://github.com/signalapp/Signal-Android.git
synced 2026-08-04 20:34:14 +01:00
Update verification code entry UX in regV5.
This commit is contained in:
+65
-53
@@ -20,17 +20,18 @@ import androidx.compose.foundation.layout.size
|
||||
import androidx.compose.foundation.layout.width
|
||||
import androidx.compose.foundation.layout.wrapContentWidth
|
||||
import androidx.compose.foundation.rememberScrollState
|
||||
import androidx.compose.foundation.shape.RoundedCornerShape
|
||||
import androidx.compose.foundation.text.KeyboardOptions
|
||||
import androidx.compose.foundation.verticalScroll
|
||||
import androidx.compose.material3.CircularProgressIndicator
|
||||
import androidx.compose.material3.MaterialTheme
|
||||
import androidx.compose.material3.OutlinedTextField
|
||||
import androidx.compose.material3.OutlinedTextFieldDefaults
|
||||
import androidx.compose.material3.Scaffold
|
||||
import androidx.compose.material3.SnackbarHost
|
||||
import androidx.compose.material3.SnackbarHostState
|
||||
import androidx.compose.material3.Text
|
||||
import androidx.compose.material3.TextButton
|
||||
import androidx.compose.material3.TextField
|
||||
import androidx.compose.material3.TextFieldDefaults
|
||||
import androidx.compose.runtime.Composable
|
||||
import androidx.compose.runtime.LaunchedEffect
|
||||
import androidx.compose.runtime.remember
|
||||
@@ -311,60 +312,65 @@ private fun CodeField(
|
||||
modifier = Modifier.fillMaxWidth(),
|
||||
contentAlignment = Alignment.Center
|
||||
) {
|
||||
Row(
|
||||
modifier = Modifier
|
||||
.fillMaxWidth()
|
||||
.testTag(TestTags.VERIFICATION_CODE_INPUT),
|
||||
horizontalArrangement = Arrangement.Center,
|
||||
verticalAlignment = Alignment.CenterVertically
|
||||
) {
|
||||
for (i in 0..2) {
|
||||
DigitField(
|
||||
value = digits[i],
|
||||
onValueChange = { newValue -> emitter(VerificationCodeScreenEvents.DigitChanged(i, newValue)) },
|
||||
focusRequester = focusRequesters[i],
|
||||
testTag = when (i) {
|
||||
0 -> TestTags.VERIFICATION_CODE_DIGIT_0
|
||||
1 -> TestTags.VERIFICATION_CODE_DIGIT_1
|
||||
else -> TestTags.VERIFICATION_CODE_DIGIT_2
|
||||
},
|
||||
enabled = !state.isSubmittingCode
|
||||
Column(modifier = Modifier.align(Alignment.Center)) {
|
||||
Row(
|
||||
modifier = Modifier
|
||||
.fillMaxWidth()
|
||||
.testTag(TestTags.VERIFICATION_CODE_INPUT),
|
||||
horizontalArrangement = Arrangement.Center,
|
||||
verticalAlignment = Alignment.CenterVertically
|
||||
) {
|
||||
for (i in 0..2) {
|
||||
DigitField(
|
||||
value = digits[i],
|
||||
onValueChange = { newValue -> emitter(VerificationCodeScreenEvents.DigitChanged(i, newValue)) },
|
||||
focusRequester = focusRequesters[i],
|
||||
testTag = when (i) {
|
||||
0 -> TestTags.VERIFICATION_CODE_DIGIT_0
|
||||
1 -> TestTags.VERIFICATION_CODE_DIGIT_1
|
||||
else -> TestTags.VERIFICATION_CODE_DIGIT_2
|
||||
},
|
||||
enabled = !state.isSubmittingCode
|
||||
)
|
||||
if (i < 2) {
|
||||
Spacer(modifier = Modifier.width(4.dp))
|
||||
}
|
||||
}
|
||||
|
||||
Text(
|
||||
text = "-",
|
||||
style = MaterialTheme.typography.headlineMedium,
|
||||
modifier = Modifier.padding(horizontal = 8.dp),
|
||||
color = if (state.isSubmittingCode) MaterialTheme.colorScheme.onSurface.copy(alpha = 0.38f) else MaterialTheme.colorScheme.onSurface
|
||||
)
|
||||
if (i < 2) {
|
||||
Spacer(modifier = Modifier.width(4.dp))
|
||||
|
||||
for (i in 3..5) {
|
||||
if (i > 3) {
|
||||
Spacer(modifier = Modifier.width(4.dp))
|
||||
}
|
||||
DigitField(
|
||||
value = digits[i],
|
||||
onValueChange = { newValue -> emitter(VerificationCodeScreenEvents.DigitChanged(i, newValue)) },
|
||||
focusRequester = focusRequesters[i],
|
||||
testTag = when (i) {
|
||||
3 -> TestTags.VERIFICATION_CODE_DIGIT_3
|
||||
4 -> TestTags.VERIFICATION_CODE_DIGIT_4
|
||||
else -> TestTags.VERIFICATION_CODE_DIGIT_5
|
||||
},
|
||||
enabled = !state.isSubmittingCode
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
Text(
|
||||
text = "-",
|
||||
style = MaterialTheme.typography.headlineMedium,
|
||||
modifier = Modifier.padding(horizontal = 8.dp),
|
||||
color = if (state.isSubmittingCode) MaterialTheme.colorScheme.onSurface.copy(alpha = 0.38f) else MaterialTheme.colorScheme.onSurface
|
||||
)
|
||||
|
||||
for (i in 3..5) {
|
||||
if (i > 3) {
|
||||
Spacer(modifier = Modifier.width(4.dp))
|
||||
}
|
||||
DigitField(
|
||||
value = digits[i],
|
||||
onValueChange = { newValue -> emitter(VerificationCodeScreenEvents.DigitChanged(i, newValue)) },
|
||||
focusRequester = focusRequesters[i],
|
||||
testTag = when (i) {
|
||||
3 -> TestTags.VERIFICATION_CODE_DIGIT_3
|
||||
4 -> TestTags.VERIFICATION_CODE_DIGIT_4
|
||||
else -> TestTags.VERIFICATION_CODE_DIGIT_5
|
||||
},
|
||||
enabled = !state.isSubmittingCode
|
||||
if (state.isSubmittingCode) {
|
||||
Spacer(modifier = Modifier.height(16.dp))
|
||||
CircularProgressIndicator(
|
||||
modifier = Modifier
|
||||
.size(48.dp)
|
||||
.align(Alignment.CenterHorizontally)
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
if (state.isSubmittingCode) {
|
||||
CircularProgressIndicator(
|
||||
modifier = Modifier.size(48.dp)
|
||||
)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -462,7 +468,7 @@ private fun DigitField(
|
||||
modifier: Modifier = Modifier,
|
||||
enabled: Boolean = true
|
||||
) {
|
||||
OutlinedTextField(
|
||||
TextField(
|
||||
value = value,
|
||||
onValueChange = onValueChange,
|
||||
modifier = modifier
|
||||
@@ -479,11 +485,17 @@ private fun DigitField(
|
||||
},
|
||||
textStyle = MaterialTheme.typography.titleLarge.copy(textAlign = TextAlign.Center),
|
||||
singleLine = true,
|
||||
shape = RoundedCornerShape(topStart = 4.dp, topEnd = 4.dp),
|
||||
keyboardOptions = KeyboardOptions(keyboardType = KeyboardType.Number),
|
||||
enabled = enabled,
|
||||
colors = OutlinedTextFieldDefaults.colors(
|
||||
disabledTextColor = MaterialTheme.colorScheme.onSurface.copy(alpha = 0.38f),
|
||||
disabledBorderColor = MaterialTheme.colorScheme.onSurface.copy(alpha = 0.12f)
|
||||
colors = TextFieldDefaults.colors(
|
||||
focusedContainerColor = MaterialTheme.colorScheme.surfaceVariant,
|
||||
unfocusedContainerColor = MaterialTheme.colorScheme.surfaceVariant,
|
||||
disabledContainerColor = MaterialTheme.colorScheme.surfaceVariant,
|
||||
focusedIndicatorColor = MaterialTheme.colorScheme.primary,
|
||||
unfocusedIndicatorColor = MaterialTheme.colorScheme.outline,
|
||||
disabledIndicatorColor = MaterialTheme.colorScheme.outline.copy(alpha = 0.38f),
|
||||
disabledTextColor = MaterialTheme.colorScheme.onSurface.copy(alpha = 0.38f)
|
||||
)
|
||||
)
|
||||
}
|
||||
|
||||
+2
-2
@@ -1,3 +1,3 @@
|
||||
version https://git-lfs.github.com/spec/v1
|
||||
oid sha256:7a2badc747704bed910b5ced524de9941b3b3ba0312b000f26cffb68b960c905
|
||||
size 59584
|
||||
oid sha256:23b6c0ab2ec470ca68b6817b28bdf085200ff1588a022dc8bdcd3e1895156983
|
||||
size 59564
|
||||
|
||||
+2
-2
@@ -1,3 +1,3 @@
|
||||
version https://git-lfs.github.com/spec/v1
|
||||
oid sha256:4e6bd8a2083620ed2499fc9dec80e47e9b7a643cb2eebcb5a7ae2b81c266a8c3
|
||||
size 59881
|
||||
oid sha256:918833d5d3fcced10402325681b6af59906a9c369d6f5ef25f85e684bc17e095
|
||||
size 59862
|
||||
|
||||
+2
-2
@@ -1,3 +1,3 @@
|
||||
version https://git-lfs.github.com/spec/v1
|
||||
oid sha256:8deb191af38b0160c264405ac2bd1ceb20ab94eba12e172bfe42f03e4f73a19a
|
||||
size 59998
|
||||
oid sha256:7a47724914c2f5592eb015885176de131857e07533328b5fba5217b67bc907a1
|
||||
size 59992
|
||||
|
||||
+2
-2
@@ -1,3 +1,3 @@
|
||||
version https://git-lfs.github.com/spec/v1
|
||||
oid sha256:b56f826a58b90293720cfd14b300916e359080703568fcf305d6ff0616ab3e35
|
||||
size 39985
|
||||
oid sha256:758b33516d795b4627ca865c08ffd4bccd06d5f5193a67b08c89225529922697
|
||||
size 39968
|
||||
|
||||
+2
-2
@@ -1,3 +1,3 @@
|
||||
version https://git-lfs.github.com/spec/v1
|
||||
oid sha256:82f09a361063ed57f01e2d4b7cc810932f66b459602465c3c46c666a745bf8a5
|
||||
size 40169
|
||||
oid sha256:3e3b1f089357d0a9c76e10e47db2cad43d4d34647ab0ef74cf80c83d11bf4eb1
|
||||
size 40153
|
||||
|
||||
+2
-2
@@ -1,3 +1,3 @@
|
||||
version https://git-lfs.github.com/spec/v1
|
||||
oid sha256:43fe3578c55b2beb5e77d4008037f80b6112e5cd6a0fb9c3b009a995b8230e33
|
||||
size 42096
|
||||
oid sha256:f9909e4286b4f447076e0e3f963daa5ac780f177d3bfa665cf61b1c78032b55d
|
||||
size 42068
|
||||
|
||||
+2
-2
@@ -1,3 +1,3 @@
|
||||
version https://git-lfs.github.com/spec/v1
|
||||
oid sha256:b0f60a1612cf4f1fda2a72aad2271246c4aa9bde0b9ccb4cc03e5e477a63efea
|
||||
size 54488
|
||||
oid sha256:3bf98d8db9f4fc2a45a8bdb77885ec73db4e2acbab4e6c941bb0d476314a65f9
|
||||
size 54471
|
||||
|
||||
+2
-2
@@ -1,3 +1,3 @@
|
||||
version https://git-lfs.github.com/spec/v1
|
||||
oid sha256:6402be19333d3f6f98deb98e55c7137f383ea70f7988ae21692ae4de83aa97f4
|
||||
size 49979
|
||||
oid sha256:6c979f98cb479480d526e7f70da70e18f75dfec57545c36503ed1d7659a56052
|
||||
size 49956
|
||||
|
||||
+2
-2
@@ -1,3 +1,3 @@
|
||||
version https://git-lfs.github.com/spec/v1
|
||||
oid sha256:69e75ba6b2f0a2e3d61e3c23fd2c37eb9d4de177e960d1a14e4ed24db3d6220d
|
||||
size 50092
|
||||
oid sha256:e6f611196651fa5b7d60c3eec3443e6c3c6418e4bcdf590e877bd15863885605
|
||||
size 50083
|
||||
|
||||
+2
-2
@@ -1,3 +1,3 @@
|
||||
version https://git-lfs.github.com/spec/v1
|
||||
oid sha256:af41eb060b6c289a0f8c674a5581fd6952f942538e27f06b918641c77cc5e0d9
|
||||
size 50323
|
||||
oid sha256:c211c9e9c1cddfaffc4865f499b4c89520674aeaaa613c9612d80d5a43f3c108
|
||||
size 50292
|
||||
|
||||
+2
-2
@@ -1,3 +1,3 @@
|
||||
version https://git-lfs.github.com/spec/v1
|
||||
oid sha256:37e5d8c4685a2ed3ff2a776e909daa7c0a83412e307b41442591da6cf42da551
|
||||
size 65681
|
||||
oid sha256:0b24819b3c535e60c55a7a574189a79a567707afc51a7c0b2ed7435b29d9c79a
|
||||
size 65664
|
||||
|
||||
+2
-2
@@ -1,3 +1,3 @@
|
||||
version https://git-lfs.github.com/spec/v1
|
||||
oid sha256:2c61353996a9de66f8a1699072f863c59a0c6d0c46380837f7bc5cfa0abc2e56
|
||||
size 65932
|
||||
oid sha256:933e1654deb4fa032aa888f68e741cc53096267c458f5f98df1fd450ad2ca619
|
||||
size 65930
|
||||
|
||||
+2
-2
@@ -1,3 +1,3 @@
|
||||
version https://git-lfs.github.com/spec/v1
|
||||
oid sha256:1e7cc7de6c23c6b27789ae09028880f3cf0f3ffed94df2fd32b42165da22330f
|
||||
size 68787
|
||||
oid sha256:6166f437d81ad6091e33a40314aa875ab368bfaa8f8c8c756440c8046de590fa
|
||||
size 68759
|
||||
|
||||
+2
-2
@@ -1,3 +1,3 @@
|
||||
version https://git-lfs.github.com/spec/v1
|
||||
oid sha256:9a22dd6a21d8e910879067a2dbcbd2644b9bc4d43373251de4720772f42b7b3d
|
||||
size 58954
|
||||
oid sha256:1f4cefaa43fce2627881fa6c19f8335d8475cd3ec78568ec96b9499f0eb00ba7
|
||||
size 59556
|
||||
|
||||
+2
-2
@@ -1,3 +1,3 @@
|
||||
version https://git-lfs.github.com/spec/v1
|
||||
oid sha256:b654d8df8c6c37578323086b13199c6da262fd913c4e17505b9ddd6f35fe9d41
|
||||
size 59216
|
||||
oid sha256:b80b872abc3f6a46f83c06f7d0c780a1f46010800da81057ae3cbb0cff4c0ae9
|
||||
size 59900
|
||||
|
||||
+2
-2
@@ -1,3 +1,3 @@
|
||||
version https://git-lfs.github.com/spec/v1
|
||||
oid sha256:15e5e68df3f995ed6331924d4cd8f54ca4d9275827bc093fc627701f5a1aee5f
|
||||
size 59261
|
||||
oid sha256:1b1671ec91aebd58ef83e22825a531cc41a6f924425390db21ae4b06d6cc102c
|
||||
size 59831
|
||||
|
||||
+2
-2
@@ -1,3 +1,3 @@
|
||||
version https://git-lfs.github.com/spec/v1
|
||||
oid sha256:c9c96c2216aff6f9490654d9047cc2bcff992611215740b7389cc529030b840a
|
||||
size 40929
|
||||
oid sha256:6bbc0d5770fa45507436d19079fba7318621414f328d6d75d801df145856e525
|
||||
size 41238
|
||||
|
||||
+2
-2
@@ -1,3 +1,3 @@
|
||||
version https://git-lfs.github.com/spec/v1
|
||||
oid sha256:95e10e8e0c961769824b5e0a50709d6eaafcf3b743dbdad9ee008741df4113ba
|
||||
size 41188
|
||||
oid sha256:c437cfbcc1ca4abd8ed63d2516760af2d17d5c5e43534efbe8410cfa28652fdb
|
||||
size 41595
|
||||
|
||||
+2
-2
@@ -1,3 +1,3 @@
|
||||
version https://git-lfs.github.com/spec/v1
|
||||
oid sha256:b3ede9a601f54388abc6c862743f287c2378f7dfea7f7afb58aad1495fc9fafd
|
||||
size 40162
|
||||
oid sha256:4035bd5899e1d05ce62b0b9540ed9b577a05a88d37e6a37048c668a1148bece7
|
||||
size 40217
|
||||
|
||||
+2
-2
@@ -1,3 +1,3 @@
|
||||
version https://git-lfs.github.com/spec/v1
|
||||
oid sha256:036be452684554113fe9107e835f62a7945a6f6ac4325c47b43b2b5b15e5340a
|
||||
size 51154
|
||||
oid sha256:c915227eea6903e3992b857dd98eb53950b8f0a5c5ff248422e135ea16c20587
|
||||
size 51637
|
||||
|
||||
+2
-2
@@ -1,3 +1,3 @@
|
||||
version https://git-lfs.github.com/spec/v1
|
||||
oid sha256:d1140553c806d60410e45dc4682ab8c0fcf4718ecf47842b17511298d312bcfd
|
||||
size 48498
|
||||
oid sha256:50a71f6d982543fc248e656744a2181ac4c42a6f7da93abde68d3426127eb65f
|
||||
size 49083
|
||||
|
||||
+2
-2
@@ -1,3 +1,3 @@
|
||||
version https://git-lfs.github.com/spec/v1
|
||||
oid sha256:dd6955f1dc7a1f33be8544c6243ae90225ed10769dacf8b072f94e1e0815d409
|
||||
size 48760
|
||||
oid sha256:0e8f3c0ebde61bbdf6d7a4b1ce2086fdb10917cb04c780e079df7dcb161e3703
|
||||
size 49420
|
||||
|
||||
+2
-2
@@ -1,3 +1,3 @@
|
||||
version https://git-lfs.github.com/spec/v1
|
||||
oid sha256:b5de785efd183915660bc0eb79f9ba579a76fa8e27c9010d45b43d53f9801bf8
|
||||
size 48754
|
||||
oid sha256:dff406730a95b48c73e7dbf9f0c0aaa0e243a91a9b397f56fbddd9f548c28978
|
||||
size 49084
|
||||
|
||||
+2
-2
@@ -1,3 +1,3 @@
|
||||
version https://git-lfs.github.com/spec/v1
|
||||
oid sha256:b01eb5f4ff791effcc620a59feb2cf63792937f6fd3811eddeb0dcffaa29ebda
|
||||
size 65784
|
||||
oid sha256:d654a4f3533f2c075b56765ae76e119785e2fee3e3e381b82052bb37da1d1049
|
||||
size 66373
|
||||
|
||||
+2
-2
@@ -1,3 +1,3 @@
|
||||
version https://git-lfs.github.com/spec/v1
|
||||
oid sha256:d650e67e7470f127008d29d3eb0be67fdac4075da90b5dfef5d4ce3d3f5c1e7a
|
||||
size 66073
|
||||
oid sha256:fd48b4503ac2bf5f3cb4cb8ad85745787eee9ea64d674afd030dfb5330a0040c
|
||||
size 66796
|
||||
|
||||
+2
-2
@@ -1,3 +1,3 @@
|
||||
version https://git-lfs.github.com/spec/v1
|
||||
oid sha256:3a5fa61a015e080904903c616556b3836d764ccbbb01085ba88ca42548f1b4ec
|
||||
size 68464
|
||||
oid sha256:296bc02784e1bd6e617b5c27913c30d709d44b52af2e7c30305aea4b8d8ea476
|
||||
size 68618
|
||||
|
||||
Reference in New Issue
Block a user