Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: handle 2fa code in new login flow [WPB-15853] #3858

Merged
merged 2 commits into from
Feb 10, 2025
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
11 changes: 11 additions & 0 deletions app/src/main/kotlin/com/wire/android/navigation/MainNavHost.kt
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,10 @@ import com.wire.android.feature.sketch.model.DrawingCanvasNavBackArgs
import com.wire.android.navigation.style.DefaultNestedNavGraphAnimations
import com.wire.android.navigation.style.DefaultRootNavGraphAnimations
import com.wire.android.ui.NavGraphs
import com.wire.android.ui.authentication.login.email.LoginEmailViewModel
import com.wire.android.ui.destinations.ConversationScreenDestination
import com.wire.android.ui.destinations.NewLoginPasswordScreenDestination
import com.wire.android.ui.destinations.NewLoginVerificationCodeScreenDestination
import com.wire.android.ui.home.conversations.ConversationScreen
import com.wire.android.ui.home.newconversation.NewConversationViewModel

Expand Down Expand Up @@ -73,6 +76,14 @@ fun MainNavHost(
}
hiltViewModel<NewConversationViewModel>(parentEntry)
}

// 👇 To reuse LoginEmailViewModel from NewLoginPasswordScreen on NewLoginVerificationCodeScreen
dependency(NewLoginVerificationCodeScreenDestination) {
val loginPasswordEntry = remember(navBackStackEntry) {
navController.getBackStackEntry(NewLoginPasswordScreenDestination.route)
}
hiltViewModel<LoginEmailViewModel>(loginPasswordEntry)
}
},
manualComposableCallsBuilder = {
/**
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,7 @@ import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.text.input.TextFieldState
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
Expand All @@ -43,6 +44,7 @@ import com.wire.android.ui.common.scaffold.WireScaffold
import com.wire.android.ui.common.topappbar.WireCenterAlignedTopAppBar
import com.wire.android.ui.common.typography
import com.wire.android.ui.theme.WireTheme
import com.wire.android.ui.theme.wireDimensions
import com.wire.android.util.ui.PreviewMultipleThemes
import com.wire.android.util.ui.UIText

Expand Down Expand Up @@ -118,6 +120,7 @@ private fun MainContent(
isLoading = isLoading,
isCurrentCodeInvalid = codeState.isCurrentCodeInvalid,
onResendCode = onResendCode,
modifier = Modifier.padding(vertical = MaterialTheme.wireDimensions.spacing24x),
)
Spacer(modifier = Modifier
.height(dimensions().spacing8x)
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -88,6 +88,7 @@ class LoginEmailViewModel @Inject constructor(

val secondFactorVerificationCodeTextState: TextFieldState = TextFieldState()
var secondFactorVerificationCodeState by mutableStateOf(VerificationCodeState())
var autoLoginWhenFullCodeEntered: Boolean = false

init {
userIdentifierTextState.setTextAndPlaceCursorAtEnd(
Expand All @@ -114,7 +115,7 @@ class LoginEmailViewModel @Inject constructor(
viewModelScope.launch {
secondFactorVerificationCodeTextState.textAsFlow().collectLatest {
secondFactorVerificationCodeState = secondFactorVerificationCodeState.copy(isCurrentCodeInvalid = false)
if (it.length == VerificationCodeState.DEFAULT_VERIFICATION_CODE_LENGTH) {
if (it.length == VerificationCodeState.DEFAULT_VERIFICATION_CODE_LENGTH && autoLoginWhenFullCodeEntered) {
login()
}
}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,6 @@ package com.wire.android.ui.authentication.verificationcode

import androidx.compose.foundation.clickable
import androidx.compose.foundation.interaction.MutableInteractionSource
import androidx.compose.foundation.layout.padding
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
Expand All @@ -30,7 +29,6 @@ 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.wireDimensions
import com.wire.android.ui.theme.wireTypography

@Composable
Expand All @@ -49,9 +47,5 @@ fun ResendCodeText(onResendCodePressed: () -> Unit, clickEnabled: Boolean, modif
enabled = clickEnabled,
onClick = onResendCodePressed
)
.padding(
horizontal = MaterialTheme.wireDimensions.spacing16x,
vertical = MaterialTheme.wireDimensions.spacing24x
)
)
}
Original file line number Diff line number Diff line change
Expand Up @@ -18,10 +18,13 @@

package com.wire.android.ui.authentication.verificationcode

import androidx.compose.animation.AnimatedVisibility
import androidx.compose.animation.Crossfade
import androidx.compose.animation.animateContentSize
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.defaultMinSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.wrapContentHeight
import androidx.compose.foundation.text.input.TextFieldState
import androidx.compose.material3.MaterialTheme
import androidx.compose.runtime.Composable
Expand All @@ -47,7 +50,8 @@ fun VerificationCode(
isLoading: Boolean,
isCurrentCodeInvalid: Boolean,
onResendCode: () -> Unit,
modifier: Modifier = Modifier
modifier: Modifier = Modifier,
showLoadingProgress: Boolean = true,
) {
val focusRequester = remember { FocusRequester() }
Column(
Expand All @@ -67,18 +71,27 @@ fun VerificationCode(
modifier = Modifier.focusRequester(focusRequester)
)

AnimatedVisibility(visible = isLoading) {
WireCircularProgressIndicator(
progressColor = MaterialTheme.wireColorScheme.primary,
size = MaterialTheme.wireDimensions.spacing24x,
modifier = Modifier.padding(vertical = MaterialTheme.wireDimensions.spacing16x)
)
}
Crossfade(
targetState = isLoading to showLoadingProgress,
modifier = Modifier
.padding(top = MaterialTheme.wireDimensions.spacing24x)
.animateContentSize(),
) { (isLoading, showLoadingProgress) ->
when {
!isLoading -> ResendCodeText(
onResendCodePressed = onResendCode,
clickEnabled = true,
modifier = Modifier
.defaultMinSize(minHeight = MaterialTheme.wireDimensions.spacing24x)
.wrapContentHeight(align = Alignment.CenterVertically),
)

ResendCodeText(
onResendCodePressed = onResendCode,
clickEnabled = !isLoading
)
isLoading && showLoadingProgress -> WireCircularProgressIndicator(
progressColor = MaterialTheme.wireColorScheme.primary,
size = MaterialTheme.wireDimensions.spacing24x,
)
}
}
}
}

Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,157 @@
/*
* 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.ui.newauthentication.login.code

import androidx.activity.compose.BackHandler
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.text.input.TextFieldState
import androidx.compose.material3.MaterialTheme
import androidx.compose.runtime.Composable
import androidx.compose.runtime.LaunchedEffect
import androidx.compose.ui.Modifier
import androidx.compose.ui.res.stringResource
import com.ramcosta.composedestinations.annotation.RootNavGraph
import com.wire.android.R
import com.wire.android.navigation.Navigator
import com.wire.android.navigation.WireDestination
import com.wire.android.navigation.style.AuthSlideNavigationAnimation
import com.wire.android.ui.authentication.login.LoginState
import com.wire.android.ui.authentication.login.WireAuthBackgroundLayout
import com.wire.android.ui.authentication.login.email.LoginButton
import com.wire.android.ui.authentication.login.email.LoginEmailViewModel
import com.wire.android.ui.authentication.verificationcode.VerificationCode
import com.wire.android.ui.authentication.verificationcode.VerificationCodeState
import com.wire.android.ui.common.dimensions
import com.wire.android.ui.common.preview.EdgeToEdgePreview
import com.wire.android.ui.common.textfield.clearAutofillTree
import com.wire.android.ui.newauthentication.login.NewLoginContainer
import com.wire.android.ui.newauthentication.login.NewLoginHeader
import com.wire.android.ui.newauthentication.login.NewLoginSubtitle
import com.wire.android.ui.newauthentication.login.NewLoginTitle
import com.wire.android.ui.newauthentication.login.password.LoginStateNavigationAndDialogs
import com.wire.android.ui.theme.WireTheme
import com.wire.android.ui.theme.wireDimensions
import com.wire.android.util.ui.PreviewMultipleThemes

@RootNavGraph
@WireDestination(
style = AuthSlideNavigationAnimation::class,
)
@Composable
// has to be navigated to after NewLoginPasswordScreen, otherwise there will be illegal state because it needs to reuse view model from it
fun NewLoginVerificationCodeScreen(
navigator: Navigator,
loginEmailViewModel: LoginEmailViewModel, // provided in MainNavHost to reuse from NewLoginPasswordScreen, don't use hiltViewModel()
) {
clearAutofillTree()
LoginStateNavigationAndDialogs(loginEmailViewModel, navigator)

LaunchedEffect(loginEmailViewModel) {
loginEmailViewModel.autoLoginWhenFullCodeEntered = false
}

val navigateBack = {
loginEmailViewModel.onCodeVerificationBackPress()
navigator.navigateBack()
}
BackHandler {
navigateBack()
}

LoginVerificationCodeContent(
codeTextState = loginEmailViewModel.secondFactorVerificationCodeTextState,
codeState = loginEmailViewModel.secondFactorVerificationCodeState,
isLoading = loginEmailViewModel.loginState.flowState is LoginState.Loading,
onResendCode = loginEmailViewModel::onCodeResend,
onLoginButtonClick = loginEmailViewModel::login,
canNavigateBack = navigator.navController.previousBackStackEntry != null, // if there is a previous screen to navigate back to
navigateBack = navigateBack,
)
}

@Composable
private fun LoginVerificationCodeContent(
codeTextState: TextFieldState,
codeState: VerificationCodeState,
isLoading: Boolean,
onResendCode: () -> Unit,
onLoginButtonClick: () -> Unit,
canNavigateBack: Boolean,
navigateBack: () -> Unit,
) {
NewLoginContainer(
header = {
NewLoginHeader(
title = {
NewLoginTitle(
title = stringResource(R.string.enterprise_login_verification_code_title),
modifier = Modifier.padding(bottom = dimensions().spacing24x)
)
NewLoginSubtitle(
title = stringResource(R.string.second_factor_authentication_instructions_label, codeState.emailUsed),
)
},
canNavigateBack = canNavigateBack,
onNavigateBack = navigateBack
)
}
) {
VerificationCode(
codeLength = codeState.codeLength,
codeState = codeTextState,
isLoading = isLoading,
showLoadingProgress = false, // for new login we show progress on the "next" button
isCurrentCodeInvalid = codeState.isCurrentCodeInvalid,
onResendCode = onResendCode,
modifier = Modifier.padding(bottom = MaterialTheme.wireDimensions.spacing24x),
)
LoginButton(
loading = isLoading,
enabled = codeTextState.text.length == codeState.codeLength,
text = stringResource(R.string.enterprise_login_next),
loadingText = stringResource(R.string.enterprise_login_next),
onClick = onLoginButtonClick,
modifier = Modifier
.fillMaxWidth()
.padding(bottom = dimensions().spacing8x),
)
}
}

@PreviewMultipleThemes
@Composable
private fun PreviewNewLoginVerificationCodeScreen() = WireTheme {
EdgeToEdgePreview(useDarkIcons = false) {
WireAuthBackgroundLayout {
LoginVerificationCodeContent(
codeTextState = TextFieldState(),
codeState = VerificationCodeState(
codeLength = 6,
isCurrentCodeInvalid = false,
emailUsed = ""
),
isLoading = false,
onResendCode = {},
onLoginButtonClick = {},
canNavigateBack = true,
navigateBack = {},
)
}
}
}
Original file line number Diff line number Diff line change
Expand Up @@ -50,6 +50,7 @@ import com.wire.android.ui.common.rememberTopBarElevationState
import com.wire.android.ui.common.scaffold.WireScaffold
import com.wire.android.ui.common.topappbar.NavigationIconButton
import com.wire.android.ui.common.topappbar.NavigationIconType
import com.wire.android.ui.common.typography
import com.wire.android.ui.theme.WireTheme
import com.wire.android.ui.theme.wireTypography
import com.wire.android.util.ui.PreviewMultipleThemes
Expand Down Expand Up @@ -130,6 +131,22 @@ fun NewLoginTitle(
title: String,
verticalPadding: Dp = dimensions().spacing2x,
modifier: Modifier = Modifier
) {
Text(
text = title,
style = typography().title01,
color = colorsScheme().onSurface,
textAlign = TextAlign.Center,
modifier = modifier
.padding(vertical = verticalPadding)
)
}

@Composable
fun NewLoginSubtitle(
title: String,
verticalPadding: Dp = dimensions().spacing2x,
modifier: Modifier = Modifier
) {
Text(
text = title,
Expand Down Expand Up @@ -158,7 +175,7 @@ private fun NavigationBarBackground() = Box(
private fun PreviewNewLoginHeader() = WireTheme {
NewLoginHeader(
title = {
NewLoginTitle("Enter your password to log in")
NewLoginSubtitle("Enter your password to log in")
},
canNavigateBack = true
)
Expand All @@ -169,7 +186,7 @@ private fun PreviewNewLoginHeader() = WireTheme {
private fun PreviewNewLoginHeaderNoNavigateBack() = WireTheme {
NewLoginHeader(
title = {
NewLoginTitle("Enter your password to log in")
NewLoginSubtitle("Enter your password to log in")
},
canNavigateBack = false
)
Expand All @@ -180,8 +197,8 @@ private fun PreviewNewLoginHeaderNoNavigateBack() = WireTheme {
private fun PreviewNewLoginHeaderTwoLines() = WireTheme {
NewLoginHeader(
title = {
NewLoginTitle("Enter your password to log in")
NewLoginTitle("Enter your password to log in")
NewLoginSubtitle("Enter your password to log in")
NewLoginSubtitle("Enter your password to log in")
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

shouldn't here be only 1 NewLoginSubtitle? 🤔

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

it's just for the preview to simulate situation when there are multiple texts inside the NewLoginHeader to make sure that the navigation icon button is placed properly 😃

},
canNavigateBack = true
)
Expand All @@ -196,7 +213,7 @@ private fun PreviewNewLoginContent() = WireTheme {
header = {
NewLoginHeader(
title = {
NewLoginTitle("Enter your password to log in")
NewLoginSubtitle("Enter your password to log in")
},
canNavigateBack = true
)
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -107,7 +107,7 @@ private fun LoginContent(
.padding(horizontal = dimensions().spacing32x)
.size(dimensions().spacing120x)
)
NewLoginTitle(
NewLoginSubtitle(
title = stringResource(R.string.enterprise_login_welcome),
modifier = Modifier.padding(top = dimensions().spacing16x)
)
Expand Down
Loading