Implement link a device flow.

This commit is contained in:
Onuray Sahin 2022-10-11 19:03:15 +03:00
parent 5566300665
commit f272e566b0
15 changed files with 179 additions and 46 deletions

View file

@ -3336,7 +3336,8 @@
<string name="qr_code_login_header_scan_qr_code_title">Scan QR code</string>
<string name="qr_code_login_header_scan_qr_code_description">Use the camera on this device to scan the QR code shown on your other device:</string>
<string name="qr_code_login_header_show_qr_code_title">Sign in with QR code</string>
<string name="qr_code_login_header_show_qr_code_description">Use your signed in device to scan the QR code below:</string>
<string name="qr_code_login_header_show_qr_code_new_device_description">Use your signed in device to scan the QR code below:</string>
<string name="qr_code_login_header_show_qr_code_link_a_device_description">Scan the QR code below with your device thats signed out.</string>
<string name="qr_code_login_header_connected_title">Secure connection established</string>
<string name="qr_code_login_header_connected_description">Check your signed in device, the code below should be displayed. Confirm that the code below matches with that device:</string>
<string name="qr_code_login_header_failed_title">Unsuccessful connection</string>
@ -3344,11 +3345,12 @@
<string name="qr_code_login_header_failed_timeout_description">The linking wasnt completed in the required time.</string>
<string name="qr_code_login_header_failed_denied_description">The request was denied on the other device.</string>
<string name="qr_code_login_new_device_instruction_1">Open ${app_name} on your other device</string>
<string name="qr_code_login_new_device_instruction_2">Go to Settings -> Security &amp; Privacy</string>
<string name="qr_code_login_new_device_instruction_3">Are you on web? -> Select \'Show QR code\'</string>
<string name="qr_code_login_new_device_instruction_4">Are you on a mobile device? -> Select \'Scan QR code\' and then \'Show QR code\'</string>
<string name="qr_code_login_link_a_device_instruction_1">Open ${app_name} on your other device</string>
<string name="qr_code_login_link_a_device_instruction_2">Select \'Sign in with QR code\'</string>
<string name="qr_code_login_new_device_instruction_2">Go to Settings -> Security &amp; Privacy -> Show All Sessions</string>
<string name="qr_code_login_new_device_instruction_3">Select \'Show QR code\'</string>
<string name="qr_code_login_link_a_device_scan_qr_code_instruction_1">Start at the sign in screen</string>
<string name="qr_code_login_link_a_device_scan_qr_code_instruction_2">Select \'Sign in with QR code\'</string>
<string name="qr_code_login_link_a_device_show_qr_code_instruction_1">Start at the sign in screen</string>
<string name="qr_code_login_link_a_device_show_qr_code_instruction_2">Select \'Scan QR code\'</string>
<string name="qr_code_login_show_qr_code_button">Show QR code in this device</string>
<string name="qr_code_login_signing_in_a_mobile_device">Signing in a mobile device?</string>
<string name="qr_code_login_scan_qr_code_button">Scan QR code</string>
@ -3356,5 +3358,7 @@
<string name="qr_code_login_signing_in">Signing you in</string>
<string name="qr_code_login_status_no_match">No match?</string>
<string name="qr_code_login_try_again">Try again</string>
<string name="qr_code_login_confirm_security_code">Confirm</string>
<string name="qr_code_login_confirm_security_code_description">Please ensure that you know the origin of this code. By linking devices, you will provide someone with full access to your account.</string>
</resources>

View file

@ -26,6 +26,8 @@ import dagger.hilt.android.AndroidEntryPoint
import im.vector.app.core.extensions.addFragment
import im.vector.app.core.extensions.addFragmentToBackstack
import im.vector.app.core.platform.SimpleFragmentActivity
import org.matrix.android.sdk.api.extensions.orFalse
import timber.log.Timber
@AndroidEntryPoint
class QrCodeLoginActivity : SimpleFragmentActivity() {
@ -38,19 +40,36 @@ class QrCodeLoginActivity : SimpleFragmentActivity() {
val qrCodeLoginArgs: QrCodeLoginArgs? = intent?.extras?.getParcelable(Mavericks.KEY_ARG)
if (isFirstCreation()) {
if (qrCodeLoginArgs?.loginType == QrCodeLoginType.LOGIN) {
addFragment(
views.container,
QrCodeLoginInstructionsFragment::class.java,
qrCodeLoginArgs,
tag = FRAGMENT_QR_CODE_INSTRUCTIONS_TAG
)
when (qrCodeLoginArgs?.loginType) {
QrCodeLoginType.LOGIN -> {
showInstructionsFragment(qrCodeLoginArgs)
}
QrCodeLoginType.LINK_A_DEVICE -> {
if (qrCodeLoginArgs.showQrCodeByDefault.orFalse()) {
handleNavigateToShowQrCodeScreen()
} else {
showInstructionsFragment(qrCodeLoginArgs)
}
}
null -> {
Timber.i("QrCodeLoginArgs is null. This is not expected.")
finish()
}
}
}
observeViewEvents()
}
private fun showInstructionsFragment(qrCodeLoginArgs: QrCodeLoginArgs) {
addFragment(
views.container,
QrCodeLoginInstructionsFragment::class.java,
qrCodeLoginArgs,
tag = FRAGMENT_QR_CODE_INSTRUCTIONS_TAG
)
}
private fun observeViewEvents() {
viewModel.observeViewEvents {
when (it) {
@ -61,7 +80,7 @@ class QrCodeLoginActivity : SimpleFragmentActivity() {
}
private fun handleNavigateToShowQrCodeScreen() {
addFragmentToBackstack(
addFragment(
views.container,
QrCodeLoginShowQrCodeFragment::class.java,
tag = FRAGMENT_SHOW_QR_CODE_TAG

View file

@ -22,4 +22,5 @@ import kotlinx.parcelize.Parcelize
@Parcelize
data class QrCodeLoginArgs(
val loginType: QrCodeLoginType,
val showQrCodeByDefault: Boolean,
) : Parcelable

View file

@ -18,7 +18,7 @@ package im.vector.app.features.login.qr
sealed class QrCodeLoginConnectionStatus {
object ConnectingToDevice : QrCodeLoginConnectionStatus()
data class Connected(val securityCode: String) : QrCodeLoginConnectionStatus()
data class Connected(val securityCode: String, val canConfirmSecurityCode: Boolean) : QrCodeLoginConnectionStatus()
object SigningIn : QrCodeLoginConnectionStatus()
data class Failed(val errorType: QrCodeLoginErrorType, val canTryAgain: Boolean) : QrCodeLoginConnectionStatus()
}

View file

@ -21,10 +21,9 @@ import android.os.Bundle
import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroup
import androidx.core.view.isVisible
import com.airbnb.mvrx.activityViewModel
import com.airbnb.mvrx.fragmentViewModel
import dagger.hilt.android.AndroidEntryPoint
import im.vector.app.R
import im.vector.app.core.extensions.registerStartForActivityResult
import im.vector.app.core.platform.VectorBaseFragment
import im.vector.app.databinding.FragmentQrCodeLoginInstructionsBinding
@ -50,11 +49,20 @@ class QrCodeLoginInstructionsFragment : VectorBaseFragment<FragmentQrCodeLoginIn
private fun observeViewState() {
viewModel.onEach {
if (it.loginType == QrCodeLoginType.LOGIN) {
views.qrCodeLoginInstructionsShowQrCodeButton.isVisible = false
views.qrCodeLoginInstructionsAlternativeLayout.isVisible = false
views.qrCodeLoginInstructionsView.setInstructions(
listOf(
getString(R.string.qr_code_login_new_device_instruction_1),
getString(R.string.qr_code_login_new_device_instruction_2),
getString(R.string.qr_code_login_new_device_instruction_3),
)
)
} else {
views.qrCodeLoginInstructionsShowQrCodeButton.isVisible = true
views.qrCodeLoginInstructionsAlternativeLayout.isVisible = true
views.qrCodeLoginInstructionsView.setInstructions(
listOf(
getString(R.string.qr_code_login_link_a_device_scan_qr_code_instruction_1),
getString(R.string.qr_code_login_link_a_device_scan_qr_code_instruction_2),
)
)
}
}
}

View file

@ -26,7 +26,6 @@ import androidx.constraintlayout.widget.ConstraintLayout
import androidx.core.content.res.use
import androidx.core.view.isVisible
import im.vector.app.R
import im.vector.app.core.extensions.setTextOrHide
import im.vector.app.databinding.ViewQrCodeLoginInstructionsBinding
class QrCodeLoginInstructionsView @JvmOverloads constructor(
@ -55,22 +54,18 @@ class QrCodeLoginInstructionsView @JvmOverloads constructor(
val instruction1 = typedArray.getString(R.styleable.QrCodeLoginInstructionsView_qrCodeLoginInstruction1)
val instruction2 = typedArray.getString(R.styleable.QrCodeLoginInstructionsView_qrCodeLoginInstruction2)
val instruction3 = typedArray.getString(R.styleable.QrCodeLoginInstructionsView_qrCodeLoginInstruction3)
val instruction4 = typedArray.getString(R.styleable.QrCodeLoginInstructionsView_qrCodeLoginInstruction4)
binding.instructions1Layout.isVisible = instruction1 != null
binding.instructions2Layout.isVisible = instruction2 != null
binding.instructions3Layout.isVisible = instruction3 != null
binding.instructions4Layout.isVisible = instruction4 != null
binding.instruction1TextView.text = instruction1
binding.instruction2TextView.text = instruction2
binding.instruction3TextView.text = instruction3
binding.instruction4TextView.text = instruction4
}
fun setInstructions(instructions: List<String>) {
setInstruction(binding.instructions1Layout, binding.instruction1TextView, instructions.getOrNull(0))
setInstruction(binding.instructions2Layout, binding.instruction2TextView, instructions.getOrNull(1))
setInstruction(binding.instructions3Layout, binding.instruction3TextView, instructions.getOrNull(2))
setInstruction(binding.instructions4Layout, binding.instruction4TextView, instructions.getOrNull(3))
}
private fun setInstruction(instructionLayout: LinearLayout, instructionTextView: TextView, instruction: String?) {

View file

@ -22,6 +22,7 @@ import android.view.View
import android.view.ViewGroup
import com.airbnb.mvrx.activityViewModel
import dagger.hilt.android.AndroidEntryPoint
import im.vector.app.R
import im.vector.app.core.platform.VectorBaseFragment
import im.vector.app.databinding.FragmentQrCodeLoginShowQrCodeBinding
@ -49,12 +50,34 @@ class QrCodeLoginShowQrCodeFragment : VectorBaseFragment<FragmentQrCodeLoginShow
private fun observeViewState() {
viewModel.onEach {
setInstructions(it.loginType)
it.generatedQrCodeData?.let { qrCodeData ->
showQrCode(qrCodeData)
}
}
}
private fun setInstructions(loginType: QrCodeLoginType) {
if (loginType == QrCodeLoginType.LOGIN) {
views.qrCodeLoginShowQrCodeHeaderView.setDescription(getString(R.string.qr_code_login_header_show_qr_code_new_device_description))
views.qrCodeLoginShowQrCodeInstructionsView.setInstructions(
listOf(
getString(R.string.qr_code_login_new_device_instruction_1),
getString(R.string.qr_code_login_new_device_instruction_2),
getString(R.string.qr_code_login_new_device_instruction_3),
)
)
} else {
views.qrCodeLoginShowQrCodeHeaderView.setDescription(getString(R.string.qr_code_login_header_show_qr_code_link_a_device_description))
views.qrCodeLoginShowQrCodeInstructionsView.setInstructions(
listOf(
getString(R.string.qr_code_login_link_a_device_show_qr_code_instruction_1),
getString(R.string.qr_code_login_link_a_device_show_qr_code_instruction_2),
)
)
}
}
private fun showQrCode(qrCodeData: String) {
views.qrCodeLoginSHowQrCodeImageView.setData(qrCodeData)
}

View file

@ -52,7 +52,7 @@ class QrCodeLoginStatusFragment : VectorBaseFragment<FragmentQrCodeLoginStatusBi
private fun observeViewState() {
viewModel.onEach {
when (it.connectionStatus) {
is QrCodeLoginConnectionStatus.Connected -> handleConnectionEstablished(it.connectionStatus)
is QrCodeLoginConnectionStatus.Connected -> handleConnectionEstablished(it.connectionStatus, it.loginType)
QrCodeLoginConnectionStatus.ConnectingToDevice -> handleConnectingToDevice()
QrCodeLoginConnectionStatus.SigningIn -> handleSigningIn()
is QrCodeLoginConnectionStatus.Failed -> handleFailed(it.connectionStatus)
@ -62,6 +62,7 @@ class QrCodeLoginStatusFragment : VectorBaseFragment<FragmentQrCodeLoginStatusBi
}
private fun handleFailed(connectionStatus: QrCodeLoginConnectionStatus.Failed) {
views.qrCodeLoginConfirmSecurityCodeLayout.isVisible = false
views.qrCodeLoginStatusLoadingLayout.isVisible = false
views.qrCodeLoginStatusHeaderView.isVisible = true
views.qrCodeLoginStatusSecurityCode.isVisible = false
@ -85,6 +86,7 @@ class QrCodeLoginStatusFragment : VectorBaseFragment<FragmentQrCodeLoginStatusBi
}
private fun handleConnectingToDevice() {
views.qrCodeLoginConfirmSecurityCodeLayout.isVisible = false
views.qrCodeLoginStatusLoadingLayout.isVisible = true
views.qrCodeLoginStatusHeaderView.isVisible = false
views.qrCodeLoginStatusSecurityCode.isVisible = false
@ -95,8 +97,14 @@ class QrCodeLoginStatusFragment : VectorBaseFragment<FragmentQrCodeLoginStatusBi
}
private fun handleSigningIn() {
views.qrCodeLoginConfirmSecurityCodeLayout.isVisible = false
views.qrCodeLoginStatusLoadingLayout.isVisible = true
views.qrCodeLoginStatusHeaderView.isVisible = false
views.qrCodeLoginStatusHeaderView.apply {
isVisible = true
setTitle(getString(R.string.dialog_title_success))
setDescription("")
setImage(R.drawable.ic_tick, ThemeUtils.getColor(requireContext(), R.attr.colorPrimary))
}
views.qrCodeLoginStatusSecurityCode.isVisible = false
views.qrCodeLoginStatusNoMatchLayout.isVisible = false
views.qrCodeLoginStatusCancelButton.isVisible = false
@ -104,11 +112,12 @@ class QrCodeLoginStatusFragment : VectorBaseFragment<FragmentQrCodeLoginStatusBi
views.qrCodeLoginStatusLoadingTextView.setText(R.string.qr_code_login_signing_in)
}
private fun handleConnectionEstablished(connectionStatus: QrCodeLoginConnectionStatus.Connected) {
private fun handleConnectionEstablished(connectionStatus: QrCodeLoginConnectionStatus.Connected, loginType: QrCodeLoginType) {
views.qrCodeLoginConfirmSecurityCodeLayout.isVisible = true
views.qrCodeLoginStatusLoadingLayout.isVisible = false
views.qrCodeLoginStatusHeaderView.isVisible = true
views.qrCodeLoginStatusSecurityCode.isVisible = true
views.qrCodeLoginStatusNoMatchLayout.isVisible = true
views.qrCodeLoginStatusNoMatchLayout.isVisible = loginType == QrCodeLoginType.LOGIN
views.qrCodeLoginStatusCancelButton.isVisible = true
views.qrCodeLoginStatusTryAgainButton.isVisible = false
views.qrCodeLoginStatusSecurityCode.text = connectionStatus.securityCode

View file

@ -90,9 +90,10 @@ class QrCodeLoginViewModel @AssistedInject constructor(
}
private fun onConnectionEstablished(securityCode: String) {
val canConfirmSecurityCode = initialState.loginType == QrCodeLoginType.LINK_A_DEVICE
setState {
copy(
connectionStatus = QrCodeLoginConnectionStatus.Connected(securityCode)
connectionStatus = QrCodeLoginConnectionStatus.Connected(securityCode, canConfirmSecurityCode)
)
}
}

View file

@ -72,7 +72,16 @@ class FtueAuthCombinedLoginFragment :
viewModel.handle(OnboardingAction.UserNameEnteredAction.Login(views.loginInput.content()))
}
views.loginForgotPassword.debouncedClicks { viewModel.handle(OnboardingAction.PostViewEvent(OnboardingViewEvents.OnForgetPasswordClicked)) }
views.loginWithQrCode.debouncedClicks { navigator.openLoginWithQrCode(requireActivity(), QrCodeLoginArgs(loginType = QrCodeLoginType.LOGIN)) }
views.loginWithQrCode.debouncedClicks {
navigator
.openLoginWithQrCode(
requireActivity(),
QrCodeLoginArgs(
loginType = QrCodeLoginType.LOGIN,
showQrCodeByDefault = false,
)
)
}
}
private fun setupSubmitButton() {

View file

@ -37,6 +37,8 @@ import im.vector.app.core.resources.DrawableProvider
import im.vector.app.databinding.FragmentSettingsDevicesBinding
import im.vector.app.features.crypto.recover.SetupMode
import im.vector.app.features.crypto.verification.VerificationBottomSheet
import im.vector.app.features.login.qr.QrCodeLoginArgs
import im.vector.app.features.login.qr.QrCodeLoginType
import im.vector.app.features.settings.devices.v2.filter.DeviceManagerFilterType
import im.vector.app.features.settings.devices.v2.list.NUMBER_OF_OTHER_DEVICES_TO_RENDER
import im.vector.app.features.settings.devices.v2.list.OtherSessionsView
@ -86,6 +88,7 @@ class VectorSettingsDevicesFragment :
initWaitingView()
initOtherSessionsView()
initSecurityRecommendationsView()
initQrLoginView()
observeViewEvents()
}
@ -150,6 +153,30 @@ class VectorSettingsDevicesFragment :
}
}
private fun initQrLoginView() {
views.deviceListHeaderScanQrCodeButton.debouncedClicks {
navigator
.openLoginWithQrCode(
requireActivity(),
QrCodeLoginArgs(
loginType = QrCodeLoginType.LINK_A_DEVICE,
showQrCodeByDefault = false,
)
)
}
views.deviceListHeaderShowQrCodeButton.debouncedClicks {
navigator
.openLoginWithQrCode(
requireActivity(),
QrCodeLoginArgs(
loginType = QrCodeLoginType.LINK_A_DEVICE,
showQrCodeByDefault = true,
)
)
}
}
override fun onDestroyView() {
cleanUpLearnMoreButtonsListeners()
super.onDestroyView()

View file

@ -27,8 +27,7 @@
app:layout_constraintTop_toBottomOf="@id/qrCodeLoginInstructionsHeaderView"
app:qrCodeLoginInstruction1="@string/qr_code_login_new_device_instruction_1"
app:qrCodeLoginInstruction2="@string/qr_code_login_new_device_instruction_2"
app:qrCodeLoginInstruction3="@string/qr_code_login_new_device_instruction_3"
app:qrCodeLoginInstruction4="@string/qr_code_login_new_device_instruction_4" />
app:qrCodeLoginInstruction3="@string/qr_code_login_new_device_instruction_3" />
<Button
android:id="@+id/qrCodeLoginInstructionsShowQrCodeButton"
@ -37,6 +36,7 @@
android:layout_height="wrap_content"
android:layout_marginBottom="40dp"
android:text="@string/qr_code_login_show_qr_code_button"
android:visibility="gone"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent" />
@ -46,6 +46,7 @@
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginBottom="12dp"
android:visibility="gone"
app:layout_constraintBottom_toTopOf="@id/qrCodeLoginInstructionsShowQrCodeButton"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent">

View file

@ -13,13 +13,13 @@
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:qrCodeLoginHeaderDescription="@string/qr_code_login_header_show_qr_code_description"
app:qrCodeLoginHeaderDescription="@string/qr_code_login_header_show_qr_code_link_a_device_description"
app:qrCodeLoginHeaderImageBackgroundTint="?colorPrimary"
app:qrCodeLoginHeaderImageResource="@drawable/ic_camera"
app:qrCodeLoginHeaderTitle="@string/qr_code_login_header_show_qr_code_title" />
<im.vector.app.features.login.qr.QrCodeLoginInstructionsView
android:id="@+id/qrCodeLoginShowQrCodeView"
android:id="@+id/qrCodeLoginShowQrCodeInstructionsView"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="24dp"
@ -36,7 +36,7 @@
android:layout_height="240dp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toBottomOf="@id/qrCodeLoginShowQrCodeView"
app:layout_constraintTop_toBottomOf="@id/qrCodeLoginShowQrCodeInstructionsView"
app:layout_constraintBottom_toTopOf="@id/qrCodeLoginShowQrCodeCancelButton"/>
<Button

View file

@ -15,6 +15,7 @@
android:gravity="center"
android:orientation="vertical"
android:visibility="gone"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
@ -96,6 +97,50 @@
app:layout_constraintStart_toStartOf="parent"
tools:visibility="visible" />
<androidx.constraintlayout.widget.ConstraintLayout
android:id="@+id/qrCodeLoginConfirmSecurityCodeLayout"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:orientation="vertical"
android:visibility="gone"
app:layout_constraintBottom_toTopOf="@id/qrCodeLoginStatusCancelButton"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
tools:visibility="visible">
<ImageView
android:id="@+id/qrCodeLoginConfirmSecurityCodeImageView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:importantForAccessibility="no"
android:src="@drawable/ic_info"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="@+id/qrCodeLoginConfirmSecurityCodeTextView"
style="@style/TextAppearance.Vector.Body"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:includeFontPadding="false"
android:layout_marginStart="8dp"
android:text="@string/qr_code_login_confirm_security_code_description"
app:layout_constraintStart_toEndOf="@id/qrCodeLoginConfirmSecurityCodeImageView"
app:layout_constraintTop_toTopOf="@id/qrCodeLoginConfirmSecurityCodeImageView" />
<Button
android:id="@+id/qrCodeLoginConfirmSecurityCodeButton"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="12dp"
android:layout_marginBottom="16dp"
android:text="@string/qr_code_login_confirm_security_code"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@id/qrCodeLoginConfirmSecurityCodeTextView" />
</androidx.constraintlayout.widget.ConstraintLayout>
<Button
android:id="@+id/qrCodeLoginStatusCancelButton"
style="@style/Widget.Vector.Button.Outlined.Login"

View file

@ -118,15 +118,6 @@
android:padding="6dp"
android:text="@string/four"
android:textColor="?colorPrimary" />
<TextView
android:id="@+id/instruction4TextView"
style="@style/TextAppearance.Vector.Body"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:layout_marginStart="8dp"
tools:text="@string/qr_code_login_new_device_instruction_4" />
</LinearLayout>
</merge>