Implement OTP input field on WalletActivationScreen

PrimalHQ · Feb 22, 2024 · 55fed05 · 55fed05
1 parent 7cff367
commit 55fed05
Show file tree

Hide file tree

Showing 3 changed files with 96 additions and 17 deletions.
diff --git a/app/src/main/kotlin/net/primal/android/core/compose/OtpTextField.kt b/app/src/main/kotlin/net/primal/android/core/compose/OtpTextField.kt
@@ -0,0 +1,86 @@
+package net.primal.android.core.compose
+
+import androidx.compose.foundation.background
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.width
+import androidx.compose.foundation.text.BasicTextField
+import androidx.compose.foundation.text.KeyboardActions
+import androidx.compose.foundation.text.KeyboardOptions
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.text.TextRange
+import androidx.compose.ui.text.input.ImeAction
+import androidx.compose.ui.text.input.KeyboardType
+import androidx.compose.ui.text.input.TextFieldValue
+import androidx.compose.ui.text.style.TextAlign
+import androidx.compose.ui.unit.dp
+import net.primal.android.theme.AppTheme
+
+@Composable
+fun OtpTextField(
+    modifier: Modifier = Modifier,
+    otpText: String,
+    onOtpTextChange: (String) -> Unit,
+    otpCount: Int = 6,
+    onCodeConfirmed: ((String) -> Unit)? = null,
+) {
+    BasicTextField(
+        modifier = modifier,
+        value = TextFieldValue(
+            text = otpText,
+            selection = TextRange(otpText.length),
+        ),
+        onValueChange = {
+            if (it.text.length <= otpCount) {
+                onOtpTextChange(it.text)
+            }
+        },
+        keyboardOptions = KeyboardOptions(
+            keyboardType = KeyboardType.NumberPassword,
+            imeAction = if (otpText.length == otpCount) ImeAction.Go else ImeAction.Done,
+        ),
+        keyboardActions = KeyboardActions(
+            onGo = {
+                if (otpText.length == otpCount) {
+                    onCodeConfirmed?.invoke(otpText)
+                }
+            },
+        ),
+        decorationBox = {
+            Row(horizontalArrangement = Arrangement.Center) {
+                repeat(otpCount) {
+                    CharText(index = it, text = otpText)
+                    Spacer(modifier = Modifier.width(8.dp))
+                }
+            }
+        },
+    )
+}
+
+@Composable
+private fun CharText(index: Int, text: String) {
+    val char = when {
+        index == text.length -> ""
+        index > text.length -> ""
+        else -> text[index].toString()
+    }
+    Text(
+        modifier = Modifier
+            .width(44.dp)
+            .height(56.dp)
+            .background(
+                color = AppTheme.extraColorScheme.surfaceVariantAlt1,
+                shape = AppTheme.shapes.large,
+            )
+            .padding(horizontal = 2.dp)
+            .padding(top = 8.dp),
+        text = char,
+        style = AppTheme.typography.headlineLarge,
+        textAlign = TextAlign.Center,
+    )
+}
diff --git a/app/src/main/kotlin/net/primal/android/wallet/activation/WalletActivationScreen.kt b/app/src/main/kotlin/net/primal/android/wallet/activation/WalletActivationScreen.kt
@@ -81,6 +81,7 @@ import kotlinx.serialization.json.decodeFromStream
 import net.primal.android.R
 import net.primal.android.core.compose.AdjustTemporarilySystemBarColors
 import net.primal.android.core.compose.DatePickerModalBottomSheet
+import net.primal.android.core.compose.OtpTextField
 import net.primal.android.core.compose.PrimalDefaults
 import net.primal.android.core.compose.PrimalTopAppBar
 import net.primal.android.core.compose.ToSAndPrivacyPolicyText
@@ -586,28 +587,21 @@ private fun WalletCodeActivationInput(
                 style = AppTheme.typography.bodyMedium,
             )
 
-            WalletOutlinedTextField(
+            OtpTextField(
                 modifier = Modifier.fillMaxWidth(fraction = 0.8f),
-                value = code,
-                onValueChange = {
+                otpText = code,
+                onOtpTextChange = {
                     if (it.isDigitsOnly()) {
                         code = it.trim()
                         onCodeChanged()
                     }
                 },
-                placeholderText = stringResource(id = R.string.wallet_activation_your_code),
-                keyboardOptions = KeyboardOptions.Default.copy(
-                    imeAction = if (code.isCodeValid()) ImeAction.Go else ImeAction.Done,
-                    keyboardType = KeyboardType.Number,
-                ),
-                keyboardActions = KeyboardActions(
-                    onGo = {
-                        if (code.isCodeValid()) {
-                            keyboardController?.hide()
-                            onCodeConfirmation(code)
-                        }
-                    },
-                ),
+                onCodeConfirmed = {
+                    if (code.isCodeValid()) {
+                        keyboardController?.hide()
+                        onCodeConfirmation(code)
+                    }
+                },
             )
 
             WalletErrorText(

diff --git a/app/src/main/res/values/strings.xml b/app/src/main/res/values/strings.xml
@@ -375,7 +375,6 @@
     <string name="wallet_activation_date_of_birth">Date of birth</string>
     <string name="wallet_activation_state">State</string>
     <string name="wallet_activation_country_of_residence">Country of residence</string>
-    <string name="wallet_activation_your_code">Activation code</string>
     <string name="wallet_activation_next_button">Next</string>
     <string name="wallet_activation_finish_button">Finish</string>
     <string name="wallet_activation_done_button">Done</string>