Update verification code entry UX in regV5.

This commit is contained in:
Greyson Parrelli
2026-07-07 13:30:21 -04:00
parent 8b4a38a2c6
commit cf394aeee8
27 changed files with 117 additions and 105 deletions
@@ -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)
)
)
}
@@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
oid sha256:7a2badc747704bed910b5ced524de9941b3b3ba0312b000f26cffb68b960c905
size 59584
oid sha256:23b6c0ab2ec470ca68b6817b28bdf085200ff1588a022dc8bdcd3e1895156983
size 59564
@@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
oid sha256:4e6bd8a2083620ed2499fc9dec80e47e9b7a643cb2eebcb5a7ae2b81c266a8c3
size 59881
oid sha256:918833d5d3fcced10402325681b6af59906a9c369d6f5ef25f85e684bc17e095
size 59862
@@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
oid sha256:8deb191af38b0160c264405ac2bd1ceb20ab94eba12e172bfe42f03e4f73a19a
size 59998
oid sha256:7a47724914c2f5592eb015885176de131857e07533328b5fba5217b67bc907a1
size 59992
@@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
oid sha256:b56f826a58b90293720cfd14b300916e359080703568fcf305d6ff0616ab3e35
size 39985
oid sha256:758b33516d795b4627ca865c08ffd4bccd06d5f5193a67b08c89225529922697
size 39968
@@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
oid sha256:82f09a361063ed57f01e2d4b7cc810932f66b459602465c3c46c666a745bf8a5
size 40169
oid sha256:3e3b1f089357d0a9c76e10e47db2cad43d4d34647ab0ef74cf80c83d11bf4eb1
size 40153
@@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
oid sha256:43fe3578c55b2beb5e77d4008037f80b6112e5cd6a0fb9c3b009a995b8230e33
size 42096
oid sha256:f9909e4286b4f447076e0e3f963daa5ac780f177d3bfa665cf61b1c78032b55d
size 42068
@@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
oid sha256:b0f60a1612cf4f1fda2a72aad2271246c4aa9bde0b9ccb4cc03e5e477a63efea
size 54488
oid sha256:3bf98d8db9f4fc2a45a8bdb77885ec73db4e2acbab4e6c941bb0d476314a65f9
size 54471
@@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
oid sha256:6402be19333d3f6f98deb98e55c7137f383ea70f7988ae21692ae4de83aa97f4
size 49979
oid sha256:6c979f98cb479480d526e7f70da70e18f75dfec57545c36503ed1d7659a56052
size 49956
@@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
oid sha256:69e75ba6b2f0a2e3d61e3c23fd2c37eb9d4de177e960d1a14e4ed24db3d6220d
size 50092
oid sha256:e6f611196651fa5b7d60c3eec3443e6c3c6418e4bcdf590e877bd15863885605
size 50083
@@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
oid sha256:af41eb060b6c289a0f8c674a5581fd6952f942538e27f06b918641c77cc5e0d9
size 50323
oid sha256:c211c9e9c1cddfaffc4865f499b4c89520674aeaaa613c9612d80d5a43f3c108
size 50292
@@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
oid sha256:37e5d8c4685a2ed3ff2a776e909daa7c0a83412e307b41442591da6cf42da551
size 65681
oid sha256:0b24819b3c535e60c55a7a574189a79a567707afc51a7c0b2ed7435b29d9c79a
size 65664
@@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
oid sha256:2c61353996a9de66f8a1699072f863c59a0c6d0c46380837f7bc5cfa0abc2e56
size 65932
oid sha256:933e1654deb4fa032aa888f68e741cc53096267c458f5f98df1fd450ad2ca619
size 65930
@@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
oid sha256:1e7cc7de6c23c6b27789ae09028880f3cf0f3ffed94df2fd32b42165da22330f
size 68787
oid sha256:6166f437d81ad6091e33a40314aa875ab368bfaa8f8c8c756440c8046de590fa
size 68759
@@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
oid sha256:9a22dd6a21d8e910879067a2dbcbd2644b9bc4d43373251de4720772f42b7b3d
size 58954
oid sha256:1f4cefaa43fce2627881fa6c19f8335d8475cd3ec78568ec96b9499f0eb00ba7
size 59556
@@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
oid sha256:b654d8df8c6c37578323086b13199c6da262fd913c4e17505b9ddd6f35fe9d41
size 59216
oid sha256:b80b872abc3f6a46f83c06f7d0c780a1f46010800da81057ae3cbb0cff4c0ae9
size 59900
@@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
oid sha256:15e5e68df3f995ed6331924d4cd8f54ca4d9275827bc093fc627701f5a1aee5f
size 59261
oid sha256:1b1671ec91aebd58ef83e22825a531cc41a6f924425390db21ae4b06d6cc102c
size 59831
@@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
oid sha256:c9c96c2216aff6f9490654d9047cc2bcff992611215740b7389cc529030b840a
size 40929
oid sha256:6bbc0d5770fa45507436d19079fba7318621414f328d6d75d801df145856e525
size 41238
@@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
oid sha256:95e10e8e0c961769824b5e0a50709d6eaafcf3b743dbdad9ee008741df4113ba
size 41188
oid sha256:c437cfbcc1ca4abd8ed63d2516760af2d17d5c5e43534efbe8410cfa28652fdb
size 41595
@@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
oid sha256:b3ede9a601f54388abc6c862743f287c2378f7dfea7f7afb58aad1495fc9fafd
size 40162
oid sha256:4035bd5899e1d05ce62b0b9540ed9b577a05a88d37e6a37048c668a1148bece7
size 40217
@@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
oid sha256:036be452684554113fe9107e835f62a7945a6f6ac4325c47b43b2b5b15e5340a
size 51154
oid sha256:c915227eea6903e3992b857dd98eb53950b8f0a5c5ff248422e135ea16c20587
size 51637
@@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
oid sha256:d1140553c806d60410e45dc4682ab8c0fcf4718ecf47842b17511298d312bcfd
size 48498
oid sha256:50a71f6d982543fc248e656744a2181ac4c42a6f7da93abde68d3426127eb65f
size 49083
@@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
oid sha256:dd6955f1dc7a1f33be8544c6243ae90225ed10769dacf8b072f94e1e0815d409
size 48760
oid sha256:0e8f3c0ebde61bbdf6d7a4b1ce2086fdb10917cb04c780e079df7dcb161e3703
size 49420
@@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
oid sha256:b5de785efd183915660bc0eb79f9ba579a76fa8e27c9010d45b43d53f9801bf8
size 48754
oid sha256:dff406730a95b48c73e7dbf9f0c0aaa0e243a91a9b397f56fbddd9f548c28978
size 49084
@@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
oid sha256:b01eb5f4ff791effcc620a59feb2cf63792937f6fd3811eddeb0dcffaa29ebda
size 65784
oid sha256:d654a4f3533f2c075b56765ae76e119785e2fee3e3e381b82052bb37da1d1049
size 66373
@@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
oid sha256:d650e67e7470f127008d29d3eb0be67fdac4075da90b5dfef5d4ce3d3f5c1e7a
size 66073
oid sha256:fd48b4503ac2bf5f3cb4cb8ad85745787eee9ea64d674afd030dfb5330a0040c
size 66796
@@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
oid sha256:3a5fa61a015e080904903c616556b3836d764ccbbb01085ba88ca42548f1b4ec
size 68464
oid sha256:296bc02784e1bd6e617b5c27913c30d709d44b52af2e7c30305aea4b8d8ea476
size 68618