fix: disable resend code button (cherrypick from rc) (#WPB-18364) (#4194)

Co-authored-by: Yamil Medina <yamilmedina@users.noreply.github.com>

Author: sbakhtiarov

app/src/main/kotlin/com/wire/android/ui/authentication/create/code/CreateAccountCodeScreen.kt

@@ -186,7 +186,11 @@ private fun CodeContent(
                         modifier = Modifier.padding(vertical = MaterialTheme.wireDimensions.spacing16x)
                     )
                 }
-                ResendCodeText(onResendCodePressed = onResendCodePressed, clickEnabled = !state.loading)
+                ResendCodeText(
+                    onResendCodePressed = onResendCodePressed,
+                    clickEnabled = !state.loading,
+                    timerText = state.remainingTimerText,
+                )
             }
             Spacer(modifier = Modifier.weight(1f))
         }

app/src/main/kotlin/com/wire/android/ui/authentication/create/code/CreateAccountCodeViewModel.kt

@@ -31,10 +31,12 @@ import com.wire.android.di.ClientScopeProvider
 import com.wire.android.di.KaliumCoreLogic
 import com.wire.android.ui.authentication.create.common.CreateAccountFlowType
 import com.wire.android.ui.authentication.create.common.CreateAccountNavArgs
+import com.wire.android.ui.authentication.login.email.LoginEmailViewModel.Companion.RESEND_TIMER_DELAY
 import com.wire.android.ui.common.textfield.textAsFlow
 import com.wire.android.ui.navArgs
 import com.wire.android.ui.registration.code.CreateAccountCodeResult
 import com.wire.android.util.WillNeverOccurError
+import com.wire.android.util.ui.CountdownTimer
 import com.wire.kalium.logic.CoreLogic
 import com.wire.kalium.logic.configuration.server.ServerConfig
 import com.wire.kalium.logic.data.user.UserId
@@ -66,6 +68,8 @@ class CreateAccountCodeViewModel @Inject constructor(
     val codeTextState: TextFieldState = TextFieldState()
     var codeState: CreateAccountCodeViewState by mutableStateOf(CreateAccountCodeViewState(createAccountNavArgs.flowType))
 
+    private var resendCodeTimer = CountdownTimer()
+
     init {
         viewModelScope.launch {
             codeTextState.textAsFlow().collectLatest {
@@ -98,8 +102,13 @@ class CreateAccountCodeViewModel @Inject constructor(
                 }
             }
 
-            val result = authScope.registerScope.requestActivationCode(createAccountNavArgs.userRegistrationInfo.email).toCodeError()
-            codeState = codeState.copy(loading = false, result = result)
+            val result = authScope.registerScope.requestActivationCode(createAccountNavArgs.userRegistrationInfo.email)
+
+            if (result is RequestActivationCodeResult.Success) {
+                startResendCodeTimer()
+            }
+
+            codeState = codeState.copy(loading = false, result = result.toCodeError())
         }
     }
 
@@ -256,4 +265,24 @@ class CreateAccountCodeViewModel @Inject constructor(
         is RequestActivationCodeResult.Failure.Generic -> CreateAccountCodeResult.Error.DialogError.GenericError(this.failure)
         RequestActivationCodeResult.Success -> CreateAccountCodeResult.None
     }
+
+    private fun startResendCodeTimer() {
+        viewModelScope.launch {
+            resendCodeTimer.start(
+                seconds = RESEND_TIMER_DELAY,
+                onUpdate = { timerText ->
+                    updateResendTimer(timerText)
+                },
+                onFinish = {
+                    updateResendTimer(null)
+                }
+            )
+        }
+    }
+
+    private fun updateResendTimer(timerText: String?) {
+        codeState = codeState.copy(
+            remainingTimerText = timerText?.let { timerText }
+        )
+    }
 }

app/src/main/kotlin/com/wire/android/ui/authentication/create/code/CreateAccountCodeViewState.kt

@@ -28,4 +28,5 @@ data class CreateAccountCodeViewState(
     val email: String = "",
     val loading: Boolean = false,
     val result: CreateAccountCodeResult = CreateAccountCodeResult.None,
+    val remainingTimerText: String? = null,
 )

app/src/main/kotlin/com/wire/android/ui/authentication/devices/register/RegisterDeviceViewModel.kt

@@ -27,8 +27,10 @@ import androidx.lifecycle.ViewModel
 import androidx.lifecycle.viewModelScope
 import com.wire.android.BuildConfig
 import com.wire.android.datastore.UserDataStore
+import com.wire.android.ui.authentication.login.email.LoginEmailViewModel.Companion.RESEND_TIMER_DELAY
 import com.wire.android.ui.authentication.verificationcode.VerificationCodeState
 import com.wire.android.ui.common.textfield.textAsFlow
+import com.wire.android.util.ui.CountdownTimer
 import com.wire.kalium.logic.data.auth.verification.VerifiableAction
 import com.wire.kalium.logic.feature.auth.verification.RequestSecondFactorVerificationCodeUseCase
 import com.wire.kalium.logic.feature.client.GetOrRegisterClientUseCase
@@ -51,6 +53,7 @@ class RegisterDeviceViewModel @Inject constructor(
     private val userDataStore: UserDataStore,
     private val getSelfUser: GetSelfUserUseCase,
     private val requestSecondFactorVerificationCodeUseCase: RequestSecondFactorVerificationCodeUseCase,
+    private val resendCodeTimer: CountdownTimer,
 ) : ViewModel() {
 
     val passwordTextState: TextFieldState = TextFieldState()
@@ -198,6 +201,7 @@ class RegisterDeviceViewModel @Inject constructor(
                             emailUsed = email,
                         )
                         updateFlowState(RegisterDeviceFlowState.Default)
+                        startResendCodeTimer()
                     }
 
                     is RequestSecondFactorVerificationCodeUseCase.Result.Failure.Generic -> {
@@ -211,4 +215,24 @@ class RegisterDeviceViewModel @Inject constructor(
     private fun updateFlowState(flowState: RegisterDeviceFlowState) {
         state = state.copy(flowState = flowState)
     }
+
+    private fun startResendCodeTimer() {
+        viewModelScope.launch {
+            resendCodeTimer.start(
+                seconds = RESEND_TIMER_DELAY,
+                onUpdate = { timerText ->
+                    updateResendTimer(timerText)
+                },
+                onFinish = {
+                    updateResendTimer(null)
+                }
+            )
+        }
+    }
+
+    private fun updateResendTimer(timerText: String?) {
+        secondFactorVerificationCodeState = secondFactorVerificationCodeState.copy(
+            remainingTimerText = timerText?.let { timerText }
+        )
+    }
 }

app/src/main/kotlin/com/wire/android/ui/authentication/login/email/LoginEmailViewModel.kt

@@ -41,6 +41,7 @@ import com.wire.android.ui.common.textfield.textAsFlow
 import com.wire.android.ui.navArgs
 import com.wire.android.util.EMPTY
 import com.wire.android.util.dispatchers.DispatcherProvider
+import com.wire.android.util.ui.CountdownTimer
 import com.wire.kalium.logic.CoreLogic
 import com.wire.kalium.logic.data.auth.login.ProxyCredentials
 import com.wire.kalium.logic.data.auth.verification.VerifiableAction
@@ -66,14 +67,15 @@ import kotlinx.coroutines.launch
 import kotlinx.coroutines.withContext
 import javax.inject.Inject
 
-@Suppress("LongParameterList", "ComplexMethod")
+@Suppress("LongParameterList", "ComplexMethod", "TooManyFunctions")
 @HiltViewModel
 class LoginEmailViewModel @Inject constructor(
     private val addAuthenticatedUser: AddAuthenticatedUserUseCase,
     clientScopeProviderFactory: ClientScopeProvider.Factory,
     private val savedStateHandle: SavedStateHandle,
     userDataStoreProvider: UserDataStoreProvider,
     @KaliumCoreLogic coreLogic: CoreLogic,
+    private val resendCodeTimer: CountdownTimer,
     private val dispatchers: DispatcherProvider
 ) : LoginViewModel(
     savedStateHandle,
@@ -346,6 +348,7 @@ class LoginEmailViewModel @Inject constructor(
                     emailUsed = email,
                 )
                 updateEmailFlowState(LoginState.Default)
+                startResendCodeTimer()
             }
 
             is RequestSecondFactorVerificationCodeUseCase.Result.Failure.Generic -> {
@@ -354,6 +357,26 @@ class LoginEmailViewModel @Inject constructor(
         }
     }
 
+    private fun startResendCodeTimer() {
+        viewModelScope.launch {
+            resendCodeTimer.start(
+                seconds = RESEND_TIMER_DELAY,
+                onUpdate = { timerText ->
+                    updateResendTimer(timerText)
+                },
+                onFinish = {
+                    updateResendTimer(null)
+                }
+            )
+        }
+    }
+
+    private fun updateResendTimer(timerText: String?) {
+        secondFactorVerificationCodeState = secondFactorVerificationCodeState.copy(
+            remainingTimerText = timerText?.let { timerText }
+        )
+    }
+
     fun onCodeVerificationBackPress() {
         secondFactorVerificationCodeTextState.clearText()
         secondFactorVerificationCodeState = secondFactorVerificationCodeState.copy(
@@ -372,6 +395,7 @@ class LoginEmailViewModel @Inject constructor(
 
     companion object {
         const val USER_IDENTIFIER_SAVED_STATE_KEY = "user_identifier"
+        const val RESEND_TIMER_DELAY = 300L
     }
 }
 

app/src/main/kotlin/com/wire/android/ui/authentication/verificationcode/ResendCodeText.kt

@@ -29,21 +29,40 @@ import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.text.style.TextAlign
 import androidx.compose.ui.text.style.TextDecoration
 import com.wire.android.R
+import com.wire.android.ui.theme.wireColorScheme
 import com.wire.android.ui.theme.WireTheme
 import com.wire.android.ui.theme.wireTypography
 import com.wire.android.util.ui.PreviewMultipleThemes
 
 @Composable
-fun ResendCodeText(onResendCodePressed: () -> Unit, clickEnabled: Boolean, modifier: Modifier = Modifier) {
+fun ResendCodeText(
+    onResendCodePressed: () -> Unit,
+    clickEnabled: Boolean,
+    modifier: Modifier = Modifier,
+    timerText: String? = null,
+) {
+    val enabled = timerText == null && clickEnabled
+    val label = stringResource(R.string.create_account_code_resend)
     Text(
-        text = stringResource(R.string.create_account_code_resend),
-        style = MaterialTheme.wireTypography.body02.copy(textDecoration = TextDecoration.Underline),
+        text = timerText?.let { "$label ($it)" } ?: label,
+        style = MaterialTheme.wireTypography.body02.copy(
+            textDecoration = if (enabled) {
+                TextDecoration.Underline
+            } else {
+                TextDecoration.None
+            },
+            color = if (enabled) {
+                MaterialTheme.wireColorScheme.primary
+            } else {
+                MaterialTheme.wireColorScheme.onSurface
+            }
+        ),
         textAlign = TextAlign.Center,
         modifier = modifier
             .clickable(
                 interactionSource = remember { MutableInteractionSource() },
                 indication = null,
-                enabled = clickEnabled,
+                enabled = enabled,
                 onClick = onResendCodePressed
             )
     )

app/src/main/kotlin/com/wire/android/ui/authentication/verificationcode/VerificationCode.kt

@@ -55,6 +55,7 @@ fun VerificationCode(
     onResendCode: () -> Unit,
     modifier: Modifier = Modifier,
     showLoadingProgress: Boolean = true,
+    timerText: String? = null,
 ) {
     val focusRequester = remember { FocusRequester() }
     val keyboardController = LocalSoftwareKeyboardController.current
@@ -82,13 +83,15 @@ fun VerificationCode(
                 .animateContentSize(),
         ) { (isLoading, showLoadingProgress) ->
             when {
-                !isLoading -> ResendCodeText(
-                    onResendCodePressed = onResendCode,
-                    clickEnabled = true,
-                    modifier = Modifier
-                        .defaultMinSize(minHeight = MaterialTheme.wireDimensions.spacing24x)
-                        .wrapContentHeight(align = Alignment.CenterVertically),
-                )
+                !isLoading ->
+                    ResendCodeText(
+                        onResendCodePressed = onResendCode,
+                        clickEnabled = true,
+                        timerText = timerText,
+                        modifier = Modifier
+                            .defaultMinSize(minHeight = MaterialTheme.wireDimensions.spacing24x)
+                            .wrapContentHeight(align = Alignment.CenterVertically),
+                    )
 
                 isLoading && showLoadingProgress -> WireCircularProgressIndicator(
                     progressColor = MaterialTheme.wireColorScheme.primary,
@@ -117,3 +120,16 @@ fun PreviewVerificationCode() = WireTheme {
         onResendCode = {}
     )
 }
+
+@PreviewMultipleThemes
+@Composable
+fun PreviewVerificationCodeTimer() = WireTheme {
+    VerificationCode(
+        codeLength = 6,
+        codeState = TextFieldState(),
+        isLoading = false,
+        isCurrentCodeInvalid = false,
+        onResendCode = {},
+        timerText = "00:30",
+    )
+}

app/src/main/kotlin/com/wire/android/ui/authentication/verificationcode/VerificationCodeScreenContent.kt

@@ -48,9 +48,11 @@ fun VerificationCodeScreenContent(
     isLoading: Boolean,
     onCodeResend: () -> Unit,
     onBackPressed: () -> Unit,
+    modifier: Modifier = Modifier,
 ) {
     BackHandler { onBackPressed() }
     WireScaffold(
+        modifier = modifier,
         topBar = {
             WireCenterAlignedTopAppBar(
                 elevation = dimensions().spacing0x,
@@ -78,7 +80,7 @@ private fun MainContent(
     codeState: VerificationCodeState,
     isLoading: Boolean,
     onResendCode: () -> Unit,
-    modifier: Modifier = Modifier
+    modifier: Modifier = Modifier,
 ) = Column(
     horizontalAlignment = Alignment.CenterHorizontally,
     verticalArrangement = Arrangement.Center,
@@ -104,6 +106,7 @@ private fun MainContent(
         isLoading = isLoading,
         isCurrentCodeInvalid = codeState.isCurrentCodeInvalid,
         onResendCode = onResendCode,
+        timerText = codeState.remainingTimerText,
     )
     Spacer(
         modifier = Modifier
@@ -127,3 +130,20 @@ internal fun VerificationCodeScreenPreview() = WireTheme {
         onBackPressed = {},
     )
 }
+
+@PreviewMultipleThemes
+@Composable
+internal fun VerificationCodeScreenPreviewTimer() = WireTheme {
+    VerificationCodeScreenContent(
+        verificationCodeTextState = TextFieldState(),
+        verificationCodeState = VerificationCodeState(
+            codeLength = 6,
+            isCurrentCodeInvalid = false,
+            emailUsed = "",
+            remainingTimerText = "04:30"
+        ),
+        isLoading = false,
+        onCodeResend = {},
+        onBackPressed = {},
+    )
+}

app/src/main/kotlin/com/wire/android/ui/authentication/verificationcode/VerificationCodeState.kt

@@ -23,6 +23,7 @@ data class VerificationCodeState(
     val emailUsed: String = "",
     val isCodeInputNecessary: Boolean = false,
     val isCurrentCodeInvalid: Boolean = false,
+    val remainingTimerText: String? = null,
 ) {
     companion object {
         const val DEFAULT_VERIFICATION_CODE_LENGTH = 6

app/src/main/kotlin/com/wire/android/util/ui/CountdownTimer.kt

@@ -0,0 +1,45 @@
+/*
+ * Wire
+ * Copyright (C) 2025 Wire Swiss GmbH
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program. If not, see http://www.gnu.org/licenses/.
+ */
+package com.wire.android.util.ui
+
+import android.text.format.DateUtils.formatElapsedTime
+import kotlinx.coroutines.Job
+import kotlinx.coroutines.coroutineScope
+import kotlinx.coroutines.delay
+import kotlinx.coroutines.isActive
+import kotlinx.coroutines.launch
+import javax.inject.Inject
+import kotlin.time.Duration.Companion.seconds
+
+class CountdownTimer @Inject constructor() {
+    private var timerJob: Job? = null
+
+    suspend fun start(seconds: Long, onUpdate: (String) -> Unit, onFinish: () -> Unit) {
+        timerJob?.cancel()
+        timerJob = coroutineScope {
+            launch {
+                var countdown = seconds
+                while (countdown > 0 && isActive) {
+                    onUpdate(formatElapsedTime(countdown--))
+                    delay(1.seconds)
+                }
+                onFinish()
+            }
+        }
+    }
+}