Merge pull request #1624 from vector-im/feature/fga/pin_auth_ui

PIN : unlock screen ui

Author: ganfra

appconfig/src/main/kotlin/io/element/android/appconfig/LockScreenConfig.kt

@@ -0,0 +1,35 @@
+/*
+ * Copyright (c) 2023 New Vector Ltd
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+package io.element.android.appconfig
+
+object LockScreenConfig {
+
+    /**
+     * Whether the PIN is mandatory or not.
+     */
+    const val IS_PIN_MANDATORY: Boolean = false
+
+    /**
+     * Some PINs are blacklisted.
+     */
+    val PIN_BLACKLIST = setOf("0000", "1234")
+
+    /**
+     * The size of the PIN.
+     */
+    const val PIN_SIZE = 4
+}

build.gradle.kts

@@ -250,9 +250,6 @@ koverMerged {
                 excludes += "io.element.android.appnav.loggedin.LoggedInPresenter$*"
                 // Some options can't be tested at the moment
                 excludes += "io.element.android.features.preferences.impl.developer.DeveloperSettingsPresenter$*"
-                // Temporary until we have actually something to test.
-                excludes += "io.element.android.features.lockscreen.impl.auth.PinAuthenticationPresenter"
-                excludes += "io.element.android.features.lockscreen.impl.auth.PinAuthenticationPresenter$*"
             }
             bound {
                 minValue = 85

features/lockscreen/impl/build.gradle.kts

@@ -30,16 +30,19 @@ anvil {
 }
 
 dependencies {
+    ksp(libs.showkase.processor)
     implementation(projects.anvilannotations)
     anvil(projects.anvilcodegen)
     api(projects.features.lockscreen.api)
+    implementation(projects.appconfig)
     implementation(projects.libraries.core)
     implementation(projects.libraries.architecture)
     implementation(projects.libraries.matrix.api)
     implementation(projects.libraries.matrixui)
     implementation(projects.libraries.designsystem)
     implementation(projects.libraries.featureflag.api)
     implementation(projects.libraries.cryptography.api)
+    implementation(projects.libraries.uiStrings)
 
     testImplementation(libs.test.junit)
     testImplementation(libs.coroutines.test)
@@ -50,6 +53,5 @@ dependencies {
     testImplementation(projects.tests.testutils)
     testImplementation(projects.libraries.cryptography.test)
     testImplementation(projects.libraries.cryptography.impl)
-
-    ksp(libs.showkase.processor)
+    testImplementation(projects.libraries.featureflag.test)
 }

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

@@ -27,8 +27,8 @@ import com.bumble.appyx.navmodel.backstack.BackStack
 import dagger.assisted.Assisted
 import dagger.assisted.AssistedInject
 import io.element.android.anvilannotations.ContributesNode
-import io.element.android.features.lockscreen.impl.auth.PinAuthenticationNode
-import io.element.android.features.lockscreen.impl.create.CreatePinNode
+import io.element.android.features.lockscreen.impl.setup.SetupPinNode
+import io.element.android.features.lockscreen.impl.unlock.PinUnlockNode
 import io.element.android.libraries.architecture.BackstackNode
 import io.element.android.libraries.architecture.animation.rememberDefaultTransitionHandler
 import io.element.android.libraries.architecture.createNode
@@ -41,7 +41,7 @@ class LockScreenFlowNode @AssistedInject constructor(
     @Assisted plugins: List<Plugin>,
 ) : BackstackNode<LockScreenFlowNode.NavTarget>(
     backstack = BackStack(
-        initialElement = NavTarget.Auth,
+        initialElement = NavTarget.Unlock,
         savedStateMap = buildContext.savedStateMap,
     ),
     buildContext = buildContext,
@@ -50,19 +50,19 @@ class LockScreenFlowNode @AssistedInject constructor(
 
     sealed interface NavTarget : Parcelable {
         @Parcelize
-        data object Auth : NavTarget
+        data object Unlock : NavTarget
 
         @Parcelize
-        data object Create : NavTarget
+        data object Setup : NavTarget
     }
 
     override fun resolve(navTarget: NavTarget, buildContext: BuildContext): Node {
         return when (navTarget) {
-            NavTarget.Auth -> {
-                createNode<PinAuthenticationNode>(buildContext)
+            NavTarget.Unlock -> {
+                createNode<PinUnlockNode>(buildContext)
             }
-            NavTarget.Create -> {
-                createNode<CreatePinNode>(buildContext)
+            NavTarget.Setup -> {
+                createNode<SetupPinNode>(buildContext)
             }
         }
     }

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

@@ -0,0 +1,117 @@
+/*
+ * Copyright (c) 2023 New Vector Ltd
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+package io.element.android.features.lockscreen.impl.components
+
+import androidx.compose.foundation.background
+import androidx.compose.foundation.border
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.foundation.text.BasicTextField
+import androidx.compose.foundation.text.KeyboardOptions
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.text.input.KeyboardType
+import androidx.compose.ui.text.input.TextFieldValue
+import androidx.compose.ui.unit.dp
+import io.element.android.features.lockscreen.impl.pin.model.PinDigit
+import io.element.android.features.lockscreen.impl.pin.model.PinEntry
+import io.element.android.libraries.designsystem.preview.ElementPreview
+import io.element.android.libraries.designsystem.preview.PreviewsDayNight
+import io.element.android.libraries.designsystem.theme.pinDigitBg
+import io.element.android.libraries.theme.ElementTheme
+
+@Composable
+fun PinEntryTextField(
+    pinEntry: PinEntry,
+    onValueChange: (String) -> Unit,
+    modifier: Modifier = Modifier,
+) {
+    BasicTextField(
+        modifier = modifier,
+        value = TextFieldValue(pinEntry.toText()),
+        onValueChange = {
+            onValueChange(it.text)
+        },
+        keyboardOptions = KeyboardOptions(keyboardType = KeyboardType.Number),
+        decorationBox = {
+            PinEntryRow(pinEntry = pinEntry)
+        }
+    )
+}
+
+@Composable
+private fun PinEntryRow(
+    pinEntry: PinEntry,
+    modifier: Modifier = Modifier,
+) {
+    Row(
+        modifier = modifier,
+        horizontalArrangement = Arrangement.spacedBy(8.dp, alignment = Alignment.CenterHorizontally),
+        verticalAlignment = Alignment.CenterVertically,
+    ) {
+        for (digit in pinEntry.digits) {
+            PinDigitView(digit = digit)
+        }
+    }
+}
+
+@Composable
+private fun PinDigitView(
+    digit: PinDigit,
+    modifier: Modifier = Modifier,
+) {
+    val shape = RoundedCornerShape(8.dp)
+    val appearanceModifier = when (digit) {
+        PinDigit.Empty -> {
+            Modifier.border(1.dp, ElementTheme.colors.iconPrimary, shape)
+        }
+        is PinDigit.Filled -> {
+            Modifier.background(ElementTheme.colors.pinDigitBg, shape)
+        }
+    }
+    Box(
+        modifier = modifier
+            .size(48.dp)
+            .then(appearanceModifier),
+        contentAlignment = Alignment.Center,
+
+        ) {
+        if (digit is PinDigit.Filled) {
+            Text(
+                text = digit.toText(),
+                style = ElementTheme.typography.fontHeadingMdBold
+            )
+        }
+
+    }
+}
+
+@PreviewsDayNight
+@Composable
+internal fun PinEntryTextFieldPreview() {
+    ElementPreview {
+        PinEntryTextField(
+            pinEntry = PinEntry.createEmpty(4).fillWith("12"),
+            onValueChange = {},
+        )
+    }
+}