Pin unlock : implement design for in-app unlock

features/lockscreen/impl/src/main/kotlin/io/element/android/features/lockscreen/impl/LockScreenFlowNode.kt

@@ -94,7 +94,8 @@ class LockScreenFlowNode @AssistedInject constructor(
     override fun resolve(navTarget: NavTarget, buildContext: BuildContext): Node {
         return when (navTarget) {
             NavTarget.Unlock -> {
-                createNode<PinUnlockNode>(buildContext)
+                val inputs = PinUnlockNode.Inputs(isInAppUnlock = false)
+                createNode<PinUnlockNode>(buildContext, plugins = listOf(inputs))
             }
             NavTarget.Setup -> {
                 createNode<LockScreenSetupFlowNode>(buildContext)

features/lockscreen/impl/src/main/kotlin/io/element/android/features/lockscreen/impl/settings/LockScreenSettingsFlowNode.kt

@@ -113,7 +113,8 @@ class LockScreenSettingsFlowNode @AssistedInject constructor(
     override fun resolve(navTarget: NavTarget, buildContext: BuildContext): Node {
         return when (navTarget) {
             NavTarget.Unlock -> {
-                createNode<PinUnlockNode>(buildContext)
+                val inputs = PinUnlockNode.Inputs(isInAppUnlock = true)
+                createNode<PinUnlockNode>(buildContext, plugins = listOf(inputs))
             }
             NavTarget.Setup -> {
                 val callback = object : LockScreenSetupFlowNode.Callback {

features/lockscreen/impl/src/main/kotlin/io/element/android/features/lockscreen/impl/unlock/PinUnlockEvents.kt

@@ -20,6 +20,7 @@ import io.element.android.features.lockscreen.impl.unlock.keypad.PinKeypadModel
 
 sealed interface PinUnlockEvents {
     data class OnPinKeypadPressed(val pinKeypadModel: PinKeypadModel) : PinUnlockEvents
+    data class OnPinEntryChanged(val entryAsText: String) : PinUnlockEvents
     data object OnForgetPin : PinUnlockEvents
     data object ClearSignOutPrompt : PinUnlockEvents
     data object SignOut : PinUnlockEvents

features/lockscreen/impl/src/main/kotlin/io/element/android/features/lockscreen/impl/unlock/PinUnlockNode.kt

@@ -24,6 +24,8 @@ import com.bumble.appyx.core.plugin.Plugin
 import dagger.assisted.Assisted
 import dagger.assisted.AssistedInject
 import io.element.android.anvilannotations.ContributesNode
+import io.element.android.libraries.architecture.NodeInputs
+import io.element.android.libraries.architecture.inputs
 import io.element.android.libraries.di.SessionScope
 
 @ContributesNode(SessionScope::class)
@@ -33,11 +35,18 @@ class PinUnlockNode @AssistedInject constructor(
     private val presenter: PinUnlockPresenter,
 ) : Node(buildContext, plugins = plugins) {
 
+    data class Inputs(
+        val isInAppUnlock: Boolean
+    ) : NodeInputs
+
+    private val inputs: Inputs = inputs()
+
     @Composable
     override fun View(modifier: Modifier) {
         val state = presenter.present()
         PinUnlockView(
             state = state,
+            isInAppUnlock = inputs.isInAppUnlock,
             modifier = modifier
         )
     }

features/lockscreen/impl/src/main/kotlin/io/element/android/features/lockscreen/impl/unlock/PinUnlockPresenter.kt

@@ -116,6 +116,9 @@ class PinUnlockPresenter @Inject constructor(
                 PinUnlockEvents.ClearBiometricError -> {
                     biometricUnlockResult = null
                 }
+                is PinUnlockEvents.OnPinEntryChanged -> {
+                    pinEntryState.value = pinEntry.process(event.entryAsText)
+                }
             }
         }
         return PinUnlockState(
@@ -159,6 +162,16 @@ class PinUnlockPresenter @Inject constructor(
         }
     }
 
+    private fun Async<PinEntry>.process(pinEntryAsText: String): Async<PinEntry> {
+        return when (this) {
+            is Async.Success -> {
+                val pinEntry = data.fillWith(pinEntryAsText)
+                Async.Success(pinEntry)
+            }
+            else -> this
+        }
+    }
+
     private fun CoroutineScope.signOut(signOutAction: MutableState<Async<String?>>) = launch {
         suspend {
             matrixClient.logout(ignoreSdkError = true)

features/lockscreen/impl/src/main/kotlin/io/element/android/features/lockscreen/impl/unlock/PinUnlockView.kt

@@ -14,6 +14,7 @@
  * limitations under the License.
  */
 
+
 package io.element.android.features.lockscreen.impl.unlock
 
 import androidx.compose.foundation.background
@@ -29,6 +30,7 @@ import androidx.compose.foundation.layout.fillMaxHeight
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.imePadding
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.size
 import androidx.compose.foundation.layout.systemBarsPadding
@@ -37,8 +39,12 @@ import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.filled.Lock
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.runtime.Composable
+import androidx.compose.runtime.LaunchedEffect
+import androidx.compose.runtime.remember
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.focus.FocusRequester
+import androidx.compose.ui.focus.focusRequester
 import androidx.compose.ui.res.pluralStringResource
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.text.style.TextAlign
@@ -46,10 +52,12 @@ import androidx.compose.ui.tooling.preview.PreviewParameter
 import androidx.compose.ui.unit.dp
 import androidx.lifecycle.Lifecycle
 import io.element.android.features.lockscreen.impl.R
+import io.element.android.features.lockscreen.impl.components.PinEntryTextField
 import io.element.android.features.lockscreen.impl.pin.model.PinDigit
 import io.element.android.features.lockscreen.impl.pin.model.PinEntry
 import io.element.android.features.lockscreen.impl.unlock.keypad.PinKeypad
 import io.element.android.libraries.architecture.Async
+import io.element.android.libraries.designsystem.atomic.atoms.RoundedIconAtom
 import io.element.android.libraries.designsystem.components.ProgressDialog
 import io.element.android.libraries.designsystem.components.dialogs.ConfirmationDialog
 import io.element.android.libraries.designsystem.components.dialogs.ErrorDialog
@@ -66,6 +74,7 @@ import io.element.android.libraries.ui.strings.CommonStrings
 @Composable
 fun PinUnlockView(
     state: PinUnlockState,
+    isInAppUnlock: Boolean,
     modifier: Modifier = Modifier,
 ) {
     OnLifecycleEvent { _, event ->
@@ -75,16 +84,44 @@ fun PinUnlockView(
         }
     }
     Surface(modifier) {
+        PinUnlockPage(state = state, isInAppUnlock = isInAppUnlock)
+        if (state.showSignOutPrompt) {
+            SignOutPrompt(
+                isCancellable = state.isSignOutPromptCancellable,
+                onSignOut = { state.eventSink(PinUnlockEvents.SignOut) },
+                onDismiss = { state.eventSink(PinUnlockEvents.ClearSignOutPrompt) },
+            )
+        }
+        if (state.signOutAction is Async.Loading) {
+            ProgressDialog(text = stringResource(id = R.string.screen_signout_in_progress_dialog_content))
+        }
+        if (state.showBiometricUnlockError) {
+            ErrorDialog(
+                content = state.biometricUnlockErrorMessage ?: "",
+                onDismiss = { state.eventSink(PinUnlockEvents.ClearBiometricError) }
+            )
+        }
+    }
+}
+
+@Composable
+private fun PinUnlockPage(
+    state: PinUnlockState,
+    isInAppUnlock: Boolean,
+    modifier: Modifier = Modifier
+) {
     BoxWithConstraints {
-            val commonModifier = Modifier
+        val commonModifier = modifier
             .fillMaxSize()
             .systemBarsPadding()
+            .imePadding()
             .padding(all = 20.dp)
 
         val header = @Composable {
             PinUnlockHeader(
                 state = state,
-                    modifier = Modifier.padding(top = 60.dp, bottom = 12.dp)
+                isInAppUnlock = isInAppUnlock,
+                modifier = Modifier.padding(top = 60.dp)
             )
         }
         val footer = @Composable {
@@ -100,6 +137,25 @@ fun PinUnlockView(
             )
         }
         val content = @Composable { constraints: BoxWithConstraintsScope ->
+            if (isInAppUnlock) {
+                val pinEntry = state.pinEntry.dataOrNull()
+                if (pinEntry != null) {
+                    val focusRequester = remember { FocusRequester() }
+                    LaunchedEffect(Unit) {
+                        focusRequester.requestFocus()
+                    }
+                    PinEntryTextField(
+                        pinEntry = pinEntry,
+                        isSecured = true,
+                        onValueChange = {
+                            state.eventSink(PinUnlockEvents.OnPinEntryChanged(it))
+                        },
+                        modifier = Modifier
+                            .focusRequester(focusRequester)
+                            .fillMaxWidth()
+                    )
+                }
+            } else {
                 PinKeypad(
                     onClick = {
                         state.eventSink(PinUnlockEvents.OnPinKeypadPressed(it))
@@ -109,6 +165,7 @@ fun PinUnlockView(
                     horizontalAlignment = Alignment.CenterHorizontally,
                 )
             }
+        }
         if (maxHeight < 600.dp) {
             PinUnlockCompactView(
                 header = header,
@@ -125,23 +182,6 @@ fun PinUnlockView(
             )
         }
     }
-        if (state.showSignOutPrompt) {
-            SignOutPrompt(
-                isCancellable = state.isSignOutPromptCancellable,
-                onSignOut = { state.eventSink(PinUnlockEvents.SignOut) },
-                onDismiss = { state.eventSink(PinUnlockEvents.ClearSignOutPrompt) },
-            )
-        }
-        if (state.signOutAction is Async.Loading) {
-            ProgressDialog(text = stringResource(id = R.string.screen_signout_in_progress_dialog_content))
-        }
-        if (state.showBiometricUnlockError) {
-            ErrorDialog(
-                content = state.biometricUnlockErrorMessage ?: "",
-                onDismiss = { state.eventSink(PinUnlockEvents.ClearBiometricError) }
-            )
-        }
-    }
 }
 
 @Composable
@@ -248,9 +288,13 @@ private fun PinDot(
 @Composable
 private fun PinUnlockHeader(
     state: PinUnlockState,
+    isInAppUnlock: Boolean,
     modifier: Modifier = Modifier,
 ) {
     Column(modifier, horizontalAlignment = Alignment.CenterHorizontally) {
+        if (isInAppUnlock) {
+            RoundedIconAtom(imageVector = Icons.Filled.Lock)
+        } else {
             Icon(
                 modifier = Modifier
                     .size(32.dp),
@@ -258,6 +302,7 @@ private fun PinUnlockHeader(
                 imageVector = Icons.Filled.Lock,
                 contentDescription = "",
             )
+        }
         Spacer(modifier = Modifier.height(16.dp))
         Text(
             text = stringResource(id = CommonStrings.common_enter_your_pin),
@@ -290,8 +335,8 @@ private fun PinUnlockHeader(
             style = ElementTheme.typography.fontBodyMdRegular,
             color = subtitleColor,
         )
+        if (!isInAppUnlock && state.pinEntry is Async.Success) {
             Spacer(Modifier.height(24.dp))
-        if (state.pinEntry is Async.Success) {
             PinDotsRow(state.pinEntry.data)
         }
     }
@@ -314,10 +359,22 @@ private fun PinUnlockFooter(
 
 @Composable
 @PreviewsDayNight
-internal fun PinUnlockViewPreview(@PreviewParameter(PinUnlockStateProvider::class) state: PinUnlockState) {
+internal fun PinUnlockInAppViewPreview(@PreviewParameter(PinUnlockStateProvider::class) state: PinUnlockState) {
     ElementPreview {
         PinUnlockView(
             state = state,
+            isInAppUnlock = true,
+        )
+    }
+}
+
+@Composable
+@PreviewsDayNight
+internal fun PinUnlockDefaultViewPreview(@PreviewParameter(PinUnlockStateProvider::class) state: PinUnlockState) {
+    ElementPreview {
+        PinUnlockView(
+            state = state,
+            isInAppUnlock = false,
         )
     }
 }