Merge pull request #1608 from vector-im/feature/fga/pin_create_ui

Feature/fga/pin create UI

build.gradle.kts

@@ -253,7 +253,6 @@ koverMerged {
                 // 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$*"
-                excludes += "io.element.android.features.lockscreen.impl.create.CreatePinPresenter"
             }
             bound {
                 minValue = 85

features/lockscreen/impl/build.gradle.kts

@@ -47,6 +47,7 @@ dependencies {
     testImplementation(libs.test.truth)
     testImplementation(libs.test.turbine)
     testImplementation(projects.libraries.matrix.test)
+    testImplementation(projects.tests.testutils)
     testImplementation(projects.libraries.cryptography.test)
     testImplementation(projects.libraries.cryptography.impl)
 

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

@@ -17,5 +17,6 @@
 package io.element.android.features.lockscreen.impl.create
 
 sealed interface CreatePinEvents {
-    object MyEvent : CreatePinEvents
+    data class OnPinEntryChanged(val entryAsText: String) : CreatePinEvents
+    data object ClearFailure : CreatePinEvents
 }

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

@@ -38,6 +38,7 @@ class CreatePinNode @AssistedInject constructor(
         val state = presenter.present()
         CreatePinView(
             state = state,
+            onBackClicked = { },
             modifier = modifier
         )
     }

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

@@ -17,21 +17,86 @@
 package io.element.android.features.lockscreen.impl.create
 
 import androidx.compose.runtime.Composable
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.remember
+import androidx.compose.runtime.setValue
+import io.element.android.features.lockscreen.impl.create.model.PinEntry
+import io.element.android.features.lockscreen.impl.create.validation.CreatePinFailure
+import io.element.android.features.lockscreen.impl.create.validation.PinValidator
 import io.element.android.libraries.architecture.Presenter
+import io.element.android.libraries.core.meta.BuildMeta
 import javax.inject.Inject
 
-class CreatePinPresenter @Inject constructor() : Presenter<CreatePinState> {
+private const val PIN_SIZE = 4
+
+class CreatePinPresenter @Inject constructor(
+    private val pinValidator: PinValidator,
+    private val buildMeta: BuildMeta,
+) : Presenter<CreatePinState> {
 
     @Composable
     override fun present(): CreatePinState {
+        var choosePinEntry by remember {
+            mutableStateOf(PinEntry.empty(PIN_SIZE))
+        }
+        var confirmPinEntry by remember {
+            mutableStateOf(PinEntry.empty(PIN_SIZE))
+        }
+        var isConfirmationStep by remember {
+            mutableStateOf(false)
+        }
+        var createPinFailure by remember {
+            mutableStateOf<CreatePinFailure?>(null)
+        }
 
         fun handleEvents(event: CreatePinEvents) {
             when (event) {
-                CreatePinEvents.MyEvent -> Unit
+                is CreatePinEvents.OnPinEntryChanged -> {
+                    if (isConfirmationStep) {
+                        confirmPinEntry = confirmPinEntry.fillWith(event.entryAsText)
+                        if (confirmPinEntry.isPinComplete()) {
+                            if (confirmPinEntry == choosePinEntry) {
+                                //TODO save in db and navigate to next screen
+                            } else {
+                                createPinFailure = CreatePinFailure.PinsDontMatch
+                            }
+                        }
+                    } else {
+                        choosePinEntry = choosePinEntry.fillWith(event.entryAsText)
+                        if (choosePinEntry.isPinComplete()) {
+                            when (val pinValidationResult = pinValidator.isPinValid(choosePinEntry)) {
+                                is PinValidator.Result.Invalid -> {
+                                    createPinFailure = pinValidationResult.failure
+                                }
+                                PinValidator.Result.Valid -> isConfirmationStep = true
+                            }
+                        }
+                    }
+                }
+                CreatePinEvents.ClearFailure -> {
+                    when (createPinFailure) {
+                        is CreatePinFailure.PinsDontMatch -> {
+                            choosePinEntry = PinEntry.empty(PIN_SIZE)
+                            confirmPinEntry = PinEntry.empty(PIN_SIZE)
+                        }
+                        is CreatePinFailure.PinBlacklisted -> {
+                            choosePinEntry = PinEntry.empty(PIN_SIZE)
+                        }
+                        null -> Unit
+                    }
+                    isConfirmationStep = false
+                    createPinFailure = null
+                }
             }
         }
 
         return CreatePinState(
+            choosePinEntry = choosePinEntry,
+            confirmPinEntry = confirmPinEntry,
+            isConfirmationStep = isConfirmationStep,
+            createPinFailure = createPinFailure,
+            appName = buildMeta.applicationName,
             eventSink = ::handleEvents
         )
     }

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

@@ -16,6 +16,21 @@
 
 package io.element.android.features.lockscreen.impl.create
 
+import io.element.android.features.lockscreen.impl.create.model.PinEntry
+import io.element.android.features.lockscreen.impl.create.validation.CreatePinFailure
+
 data class CreatePinState(
+    val choosePinEntry: PinEntry,
+    val confirmPinEntry: PinEntry,
+    val isConfirmationStep: Boolean,
+    val createPinFailure: CreatePinFailure?,
+    val appName: String,
     val eventSink: (CreatePinEvents) -> Unit
-)
+) {
+    val pinSize = choosePinEntry.size
+    val activePinEntry = if (isConfirmationStep) {
+        confirmPinEntry
+    } else {
+        choosePinEntry
+    }
+}

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

@@ -17,15 +17,45 @@
 package io.element.android.features.lockscreen.impl.create
 
 import androidx.compose.ui.tooling.preview.PreviewParameterProvider
+import io.element.android.features.lockscreen.impl.create.model.PinEntry
+import io.element.android.features.lockscreen.impl.create.validation.CreatePinFailure
 
 open class CreatePinStateProvider : PreviewParameterProvider<CreatePinState> {
     override val values: Sequence<CreatePinState>
         get() = sequenceOf(
             aCreatePinState(),
-            // Add other states here
+            aCreatePinState(
+                choosePinEntry = PinEntry.empty(4).fillWith("12")
+            ),
+            aCreatePinState(
+                choosePinEntry = PinEntry.empty(4).fillWith("1789"),
+                isConfirmationStep = true,
+            ),
+            aCreatePinState(
+                choosePinEntry = PinEntry.empty(4).fillWith("1789"),
+                confirmPinEntry = PinEntry.empty(4).fillWith("1788"),
+                isConfirmationStep = true,
+                creationFailure = CreatePinFailure.PinsDontMatch
+            ),
+            aCreatePinState(
+                choosePinEntry = PinEntry.empty(4).fillWith("1111"),
+                creationFailure = CreatePinFailure.PinBlacklisted
+            ),
+
         )
 }
 
-fun aCreatePinState() = CreatePinState(
+fun aCreatePinState(
+    choosePinEntry: PinEntry = PinEntry.empty(4),
+    confirmPinEntry: PinEntry = PinEntry.empty(4),
+    isConfirmationStep: Boolean = false,
+    creationFailure: CreatePinFailure? = null,
+) = CreatePinState(
+    choosePinEntry = choosePinEntry,
+    confirmPinEntry = confirmPinEntry,
+    isConfirmationStep = isConfirmationStep,
+    createPinFailure = creationFailure,
+    appName = "Element",
     eventSink = {}
 )
+

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

@@ -14,39 +14,222 @@
  * limitations under the License.
  */
 
+@file:OptIn(ExperimentalMaterial3Api::class)
+
 package io.element.android.features.lockscreen.impl.create
 
+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.material3.MaterialTheme
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.consumeWindowInsets
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.imePadding
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.rememberScrollState
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.foundation.text.BasicTextField
+import androidx.compose.foundation.text.KeyboardOptions
+import androidx.compose.foundation.verticalScroll
+import androidx.compose.material.icons.Icons
+import androidx.compose.material.icons.filled.Lock
+import androidx.compose.material3.ExperimentalMaterial3Api
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.text.input.KeyboardType
+import androidx.compose.ui.text.input.TextFieldValue
 import androidx.compose.ui.tooling.preview.PreviewParameter
+import androidx.compose.ui.unit.dp
+import io.element.android.features.lockscreen.impl.R
+import io.element.android.features.lockscreen.impl.create.model.PinDigit
+import io.element.android.features.lockscreen.impl.create.model.PinEntry
+import io.element.android.features.lockscreen.impl.create.validation.CreatePinFailure
+import io.element.android.libraries.designsystem.atomic.molecules.IconTitleSubtitleMolecule
+import io.element.android.libraries.designsystem.components.button.BackButton
+import io.element.android.libraries.designsystem.components.dialogs.ErrorDialog
 import io.element.android.libraries.designsystem.preview.ElementPreview
 import io.element.android.libraries.designsystem.preview.PreviewsDayNight
+import io.element.android.libraries.designsystem.theme.components.Scaffold
 import io.element.android.libraries.designsystem.theme.components.Text
-import timber.log.Timber
+import io.element.android.libraries.designsystem.theme.components.TopAppBar
+import io.element.android.libraries.designsystem.theme.pinDigitBg
+import io.element.android.libraries.theme.ElementTheme
 
 @Composable
 fun CreatePinView(
     state: CreatePinState,
+    onBackClicked: () -> Unit,
     modifier: Modifier = Modifier,
 ) {
-    Timber.d("CreatePinView: $state")
+    Scaffold(
-    Box(modifier, contentAlignment = Alignment.Center) {
+        modifier = modifier,
-        Text(
+        topBar = {
-            "CreatePin feature view",
+            TopAppBar(
-            color = MaterialTheme.colorScheme.primary,
+                navigationIcon = {
+                    BackButton(onClick = onBackClicked)
+                },
+                title = {}
+            )
+        },
+        content = { padding ->
+            val scrollState = rememberScrollState()
+            Column(
+                modifier = Modifier
+                    .imePadding()
+                    .padding(padding)
+                    .consumeWindowInsets(padding)
+                    .verticalScroll(state = scrollState)
+                    .padding(vertical = 16.dp, horizontal = 20.dp),
+            ) {
+                CreatePinHeader(state.isConfirmationStep, state.appName)
+                CreatePinContent(state)
+            }
+        }
+    )
+}
+
+@Composable
+private fun CreatePinHeader(
+    isValidationStep: Boolean,
+    appName: String,
+    modifier: Modifier = Modifier,
+) {
+    Column(
+        modifier = modifier,
+        horizontalAlignment = Alignment.CenterHorizontally,
+    ) {
+        IconTitleSubtitleMolecule(
+            title = if (isValidationStep) {
+                stringResource(id = R.string.screen_app_lock_setup_confirm_pin)
+            } else {
+                stringResource(id = R.string.screen_app_lock_setup_choose_pin)
+            },
+            subTitle = stringResource(id = R.string.screen_app_lock_setup_pin_context, appName),
+            iconImageVector = Icons.Filled.Lock,
         )
     }
 }
 
+@Composable
+private fun CreatePinContent(
+    state: CreatePinState,
+    modifier: Modifier = Modifier,
+) {
+    PinEntryTextField(
+        state.activePinEntry,
+        onValueChange = {
+            state.eventSink(CreatePinEvents.OnPinEntryChanged(it))
+        },
+        modifier = modifier
+            .padding(top = 36.dp)
+            .fillMaxWidth()
+    )
+    if (state.createPinFailure != null) {
+        ErrorDialog(
+            modifier = modifier,
+            title = state.createPinFailure.title(),
+            content = state.createPinFailure.content(),
+            onDismiss = {
+                state.eventSink(CreatePinEvents.ClearFailure)
+            }
+        )
+    }
+}
+
+@Composable
+private fun CreatePinFailure.content(): String {
+    return when (this) {
+        CreatePinFailure.PinBlacklisted -> stringResource(id = R.string.screen_app_lock_setup_pin_blacklisted_dialog_content)
+        CreatePinFailure.PinsDontMatch -> stringResource(id = R.string.screen_app_lock_setup_pin_mismatch_dialog_content)
+    }
+}
+
+@Composable
+private fun CreatePinFailure.title(): String {
+    return when (this) {
+        CreatePinFailure.PinBlacklisted -> stringResource(id = R.string.screen_app_lock_setup_pin_blacklisted_dialog_title)
+        CreatePinFailure.PinsDontMatch -> stringResource(id = R.string.screen_app_lock_setup_pin_mismatch_dialog_title)
+    }
+}
+
+@Composable
+private 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
+            )
+        }
+
+    }
+}
+
 @Composable
 @PreviewsDayNight
 internal fun CreatePinViewPreview(@PreviewParameter(CreatePinStateProvider::class) state: CreatePinState) {
     ElementPreview {
         CreatePinView(
             state = state,
+            onBackClicked = {},
         )
     }
 }

features/lockscreen/impl/src/main/kotlin/io/element/android/features/lockscreen/impl/create/model/PinDigit.kt

@@ -0,0 +1,29 @@
+/*
+ * 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.create.model
+
+sealed interface PinDigit {
+    data object Empty : PinDigit
+    data class Filled(val value: Char) : PinDigit
+
+    fun toText(): String {
+        return when (this) {
+            is Empty -> ""
+            is Filled -> value.toString()
+        }
+    }
+}

features/lockscreen/impl/src/main/kotlin/io/element/android/features/lockscreen/impl/create/model/PinEntry.kt

@@ -0,0 +1,66 @@
+/*
+ * 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.create.model
+
+import kotlinx.collections.immutable.ImmutableList
+import kotlinx.collections.immutable.toPersistentList
+
+data class PinEntry(
+    val digits: ImmutableList<PinDigit>,
+) {
+
+    companion object {
+        fun empty(size: Int): PinEntry {
+            val digits = List(size) { PinDigit.Empty }
+            return PinEntry(
+                digits = digits.toPersistentList()
+            )
+        }
+    }
+
+    val size = digits.size
+
+    /**
+     * Fill the first digits with the given text.
+     * Can't be more than the size of the PinEntry
+     * Keep the Empty digits at the end
+     * @return the new PinEntry
+     */
+    fun fillWith(text: String): PinEntry {
+        val newDigits = digits.toMutableList()
+        text.forEachIndexed { index, char ->
+            if (index < size) {
+                newDigits[index] = PinDigit.Filled(char)
+            }
+        }
+        return copy(digits = newDigits.toPersistentList())
+    }
+
+    fun clear(): PinEntry {
+        return fillWith("")
+    }
+
+    fun isPinComplete(): Boolean {
+        return digits.all { it is PinDigit.Filled }
+    }
+
+    fun toText(): String {
+        return digits.joinToString("") {
+            it.toText()
+        }
+    }
+}

features/lockscreen/impl/src/main/kotlin/io/element/android/features/lockscreen/impl/create/validation/CreatePinFailure.kt

@@ -0,0 +1,22 @@
+/*
+ * 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.create.validation
+
+sealed interface CreatePinFailure {
+    data object PinBlacklisted : CreatePinFailure
+    data object PinsDontMatch : CreatePinFailure
+}

features/lockscreen/impl/src/main/kotlin/io/element/android/features/lockscreen/impl/create/validation/PinValidator.kt

@@ -0,0 +1,44 @@
+/*
+ * 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.create.validation
+
+import androidx.annotation.VisibleForTesting
+import io.element.android.features.lockscreen.impl.create.model.PinEntry
+import javax.inject.Inject
+
+class PinValidator @Inject constructor() {
+
+    companion object {
+        @VisibleForTesting
+        val BLACKLIST = listOf("0000", "1234")
+    }
+
+    sealed interface Result {
+        data object Valid : Result
+        data class Invalid(val failure: CreatePinFailure) : Result
+    }
+
+    fun isPinValid(pinEntry: PinEntry): Result {
+        val pinAsText = pinEntry.toText()
+        val isBlacklisted = BLACKLIST.any { it == pinAsText }
+        return if (isBlacklisted) {
+            Result.Invalid(CreatePinFailure.PinBlacklisted)
+        } else {
+            Result.Valid
+        }
+    }
+}

features/lockscreen/impl/src/main/res/values/localazy.xml

@@ -0,0 +1,25 @@
+<?xml version="1.0" encoding="utf-8"?>
+<resources xmlns:xliff="urn:oasis:names:tc:xliff:document:1.2">
+  <plurals name="screen_app_lock_subtitle_wrong_pin">
+    <item quantity="one">"Wrong PIN. You have %1$d more chance"</item>
+    <item quantity="other">"Wrong PIN. You have %1$d more chances"</item>
+  </plurals>
+  <string name="screen_app_lock_forgot_pin">"Forgot PIN?"</string>
+  <string name="screen_app_lock_settings_change_pin">"Change PIN code"</string>
+  <string name="screen_app_lock_settings_enable_biometric_unlock">"Allow biometric unlock"</string>
+  <string name="screen_app_lock_settings_remove_pin">"Remove PIN"</string>
+  <string name="screen_app_lock_settings_remove_pin_alert_message">"Are you sure you want to remove PIN?"</string>
+  <string name="screen_app_lock_settings_remove_pin_alert_title">"Remove PIN?"</string>
+  <string name="screen_app_lock_setup_choose_pin">"Choose PIN"</string>
+  <string name="screen_app_lock_setup_confirm_pin">"Confirm PIN"</string>
+  <string name="screen_app_lock_setup_pin_blacklisted_dialog_content">"You cannot choose this as your PIN code for security reasons"</string>
+  <string name="screen_app_lock_setup_pin_blacklisted_dialog_title">"Choose a different PIN"</string>
+  <string name="screen_app_lock_setup_pin_context">"Lock %1$s to add extra security to your chats.
+
+Choose something memorable. If you forget this PIN, you will be logged out of the app."</string>
+  <string name="screen_app_lock_setup_pin_mismatch_dialog_content">"Please enter the same PIN twice"</string>
+  <string name="screen_app_lock_setup_pin_mismatch_dialog_title">"PINs don\'t match"</string>
+  <string name="screen_app_lock_signout_alert_message">"You’ll need to re-login and create a new PIN to proceed"</string>
+  <string name="screen_app_lock_signout_alert_title">"You are being signed out"</string>
+  <string name="screen_app_lock_subtitle">"You have 3 attempts to unlock"</string>
+</resources>

features/lockscreen/impl/src/test/kotlin/io/element/android/features/lockscreen/impl/create/CreatePinPresenterTest.kt

@@ -0,0 +1,114 @@
+/*
+ * 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.create
+
+import app.cash.molecule.RecompositionMode
+import app.cash.molecule.moleculeFlow
+import app.cash.turbine.test
+import com.google.common.truth.Truth.assertThat
+import io.element.android.features.lockscreen.impl.create.model.PinDigit
+import io.element.android.features.lockscreen.impl.create.model.PinEntry
+import io.element.android.features.lockscreen.impl.create.validation.CreatePinFailure
+import io.element.android.features.lockscreen.impl.create.validation.PinValidator
+import io.element.android.libraries.matrix.test.core.aBuildMeta
+import io.element.android.tests.testutils.awaitLastSequentialItem
+import kotlinx.coroutines.test.runTest
+import org.junit.Test
+
+class CreatePinPresenterTest {
+
+    private val blacklistedPin = PinValidator.BLACKLIST.first()
+    private val halfCompletePin = "12"
+    private val completePin = "1235"
+    private val mismatchedPin = "1236"
+
+    @Test
+    fun `present - complete flow`() = runTest {
+
+        val presenter = createCreatePinPresenter()
+        moleculeFlow(RecompositionMode.Immediate) {
+            presenter.present()
+        }.test {
+            awaitItem().also { state ->
+                state.choosePinEntry.assertEmpty()
+                state.confirmPinEntry.assertEmpty()
+                assertThat(state.createPinFailure).isNull()
+                assertThat(state.isConfirmationStep).isFalse()
+                state.eventSink(CreatePinEvents.OnPinEntryChanged(halfCompletePin))
+            }
+            awaitItem().also { state ->
+                state.choosePinEntry.assertText(halfCompletePin)
+                state.confirmPinEntry.assertEmpty()
+                assertThat(state.createPinFailure).isNull()
+                assertThat(state.isConfirmationStep).isFalse()
+                state.eventSink(CreatePinEvents.OnPinEntryChanged(blacklistedPin))
+            }
+            awaitLastSequentialItem().also { state ->
+                state.choosePinEntry.assertText(blacklistedPin)
+                assertThat(state.createPinFailure).isEqualTo(CreatePinFailure.PinBlacklisted)
+                state.eventSink(CreatePinEvents.ClearFailure)
+            }
+            awaitLastSequentialItem().also { state ->
+                state.choosePinEntry.assertEmpty()
+                assertThat(state.createPinFailure).isNull()
+                state.eventSink(CreatePinEvents.OnPinEntryChanged(completePin))
+            }
+            awaitLastSequentialItem().also { state ->
+                state.choosePinEntry.assertText(completePin)
+                state.confirmPinEntry.assertEmpty()
+                assertThat(state.isConfirmationStep).isTrue()
+                state.eventSink(CreatePinEvents.OnPinEntryChanged(mismatchedPin))
+            }
+            awaitLastSequentialItem().also { state ->
+                state.choosePinEntry.assertText(completePin)
+                state.confirmPinEntry.assertText(mismatchedPin)
+                assertThat(state.createPinFailure).isEqualTo(CreatePinFailure.PinsDontMatch)
+                state.eventSink(CreatePinEvents.ClearFailure)
+            }
+            awaitLastSequentialItem().also { state ->
+                state.choosePinEntry.assertEmpty()
+                state.confirmPinEntry.assertEmpty()
+                assertThat(state.isConfirmationStep).isFalse()
+                assertThat(state.createPinFailure).isNull()
+                state.eventSink(CreatePinEvents.OnPinEntryChanged(completePin))
+            }
+            awaitLastSequentialItem().also { state ->
+                state.choosePinEntry.assertText(completePin)
+                state.confirmPinEntry.assertEmpty()
+                assertThat(state.isConfirmationStep).isTrue()
+                state.eventSink(CreatePinEvents.OnPinEntryChanged(completePin))
+            }
+            awaitItem().also { state ->
+                state.choosePinEntry.assertText(completePin)
+                state.confirmPinEntry.assertText(completePin)
+            }
+        }
+    }
+
+    private fun PinEntry.assertText(text: String) {
+        assertThat(toText()).isEqualTo(text)
+    }
+
+    private fun PinEntry.assertEmpty() {
+        val isEmpty = digits.all { it is PinDigit.Empty }
+        assertThat(isEmpty).isTrue()
+    }
+
+    private fun createCreatePinPresenter(): CreatePinPresenter {
+        return CreatePinPresenter(PinValidator(), aBuildMeta())
+    }
+}

libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/theme/ColorAliases.kt

@@ -98,6 +98,16 @@ val SemanticColors.bgSubtleTertiary
 val SemanticColors.temporaryColorBgSpecial
     get() = if (isLight) Color(0xFFE4E8F0) else Color(0xFF3A4048)
 
+// This color is not present in Semantic color, so put hard-coded value for now
+val SemanticColors.pinDigitBg
+    get() = if (isLight) {
+        // We want LightDesignTokens.colorGray300
+        Color(0xFFF0F2F5)
+    } else {
+        // We want DarkDesignTokens.colorGray400
+        Color(0xFF26282D)
+    }
+
 @PreviewsDayNight
 @Composable
 internal fun ColorAliasesPreview() = ElementPreview {

libraries/ui-strings/src/main/res/values/localazy.xml

@@ -5,6 +5,7 @@
   <string name="a11y_notifications_mentions_only">"Mentions only"</string>
   <string name="a11y_notifications_muted">"Muted"</string>
   <string name="a11y_pause">"Pause"</string>
+  <string name="a11y_pin_field">"PIN field"</string>
   <string name="a11y_play">"Play"</string>
   <string name="a11y_poll">"Poll"</string>
   <string name="a11y_poll_end">"Ended poll"</string>
@@ -96,6 +97,7 @@
   <string name="common_editing">"Editing"</string>
   <string name="common_emote">"* %1$s %2$s"</string>
   <string name="common_encryption_enabled">"Encryption enabled"</string>
+  <string name="common_enter_your_pin">"Enter your PIN"</string>
   <string name="common_error">"Error"</string>
   <string name="common_everyone">"Everyone"</string>
   <string name="common_file">"File"</string>
@@ -133,6 +135,7 @@
   <string name="common_rich_text_editor">"Rich text editor"</string>
   <string name="common_room_name">"Room name"</string>
   <string name="common_room_name_placeholder">"e.g. your project name"</string>
+  <string name="common_screen_lock">"Screen lock"</string>
   <string name="common_search_for_someone">"Search for someone"</string>
   <string name="common_search_results">"Search results"</string>
   <string name="common_security">"Security"</string>
@@ -154,6 +157,7 @@
   <string name="common_unable_to_decrypt">"Unable to decrypt"</string>
   <string name="common_unable_to_invite_message">"Invites couldn\'t be sent to one or more users."</string>
   <string name="common_unable_to_invite_title">"Unable to send invite(s)"</string>
+  <string name="common_unlock">"Unlock"</string>
   <string name="common_unmute">"Unmute"</string>
   <string name="common_unsupported_event">"Unsupported event"</string>
   <string name="common_username">"Username"</string>
@@ -180,6 +184,7 @@
   <string name="error_failed_locating_user">"%1$s could not access your location. Please try again later."</string>
   <string name="error_missing_location_auth_android">"%1$s does not have permission to access your location. You can enable access in Settings."</string>
   <string name="error_missing_location_rationale_android">"%1$s does not have permission to access your location. Enable access below."</string>
+  <string name="error_missing_microphone_voice_rationale_android">"%1$s does not have permission to access your microphone. Enable access to record a voice message."</string>
   <string name="error_some_messages_have_not_been_sent">"Some messages have not been sent"</string>
   <string name="error_unknown">"Sorry, an error occurred"</string>
   <string name="invite_friends_rich_title">"🔐️ Join me on %1$s"</string>
@@ -188,6 +193,10 @@
   <string name="leave_room_alert_private_subtitle">"Are you sure that you want to leave this room? This room is not public and you won\'t be able to rejoin without an invite."</string>
   <string name="leave_room_alert_subtitle">"Are you sure that you want to leave the room?"</string>
   <string name="login_initial_device_name_android">"%1$s Android"</string>
+  <plurals name="a11y_digits_entered">
+    <item quantity="one">"%1$d digit entered"</item>
+    <item quantity="other">"%1$d digits entered"</item>
+  </plurals>
   <plurals name="common_member_count">
     <item quantity="one">"%1$d member"</item>
     <item quantity="other">"%1$d members"</item>
@@ -205,19 +214,19 @@
   <string name="screen_analytics_settings_share_data">"Share analytics data"</string>
   <string name="screen_chat_backup_key_backup_action_disable">"Turn off backup"</string>
   <string name="screen_chat_backup_key_backup_action_enable">"Turn on backup"</string>
-  <string name="screen_chat_backup_key_backup_description">"Backup ensures that you don\'t lose your message history."</string>
+  <string name="screen_chat_backup_key_backup_description">"Backup ensures that you don\'t lose your message history. %1$s."</string>
   <string name="screen_chat_backup_key_backup_title">"Backup"</string>
   <string name="screen_chat_backup_recovery_action_change">"Change recovery key"</string>
   <string name="screen_chat_backup_recovery_action_confirm">"Confirm recovery key"</string>
   <string name="screen_chat_backup_recovery_action_confirm_description">"Your chat backup is currently out of sync."</string>
   <string name="screen_chat_backup_recovery_action_setup">"Set up recovery"</string>
-  <string name="screen_chat_backup_recovery_action_setup_description">"Get access to your encrypted messages if you lose all your devices or are signed out of %1$@ everywhere."</string>
+  <string name="screen_chat_backup_recovery_action_setup_description">"Get access to your encrypted messages if you lose all your devices or are signed out of %1$s everywhere."</string>
   <string name="screen_key_backup_disable_confirmation_action_turn_off">"Turn off"</string>
   <string name="screen_key_backup_disable_confirmation_description">"You will lose your encrypted messages if you are signed out of all devices."</string>
   <string name="screen_key_backup_disable_confirmation_title">"Are you sure you want to turn off backup?"</string>
   <string name="screen_key_backup_disable_description">"Turning off backup will remove your current encryption key backup and turn off other security features. In this case, you will:"</string>
   <string name="screen_key_backup_disable_description_point_1">"Not have encrypted message history on new devices"</string>
-  <string name="screen_key_backup_disable_description_point_2">"Lose access to your encrypted messages if you are signed out of %1$@ everywhere"</string>
+  <string name="screen_key_backup_disable_description_point_2">"Lose access to your encrypted messages if you are signed out of %1$s everywhere"</string>
   <string name="screen_key_backup_disable_title">"Are you sure you want to turn off backup?"</string>
   <string name="screen_media_picker_error_failed_selection">"Failed selecting media, please try again."</string>
   <string name="screen_media_upload_preview_error_failed_processing">"Failed processing media to upload, please try again."</string>

tests/testutils/src/main/kotlin/io/element/android/tests/testutils/ReceiveTurbine.kt

@@ -32,6 +32,16 @@ suspend fun <T : Any> ReceiveTurbine<T>.consumeItemsUntilTimeout(timeout: Durati
     return consumeItemsUntilPredicate(timeout) { false }
 }
 
+/**
+ * Consume all items which are emitted sequentially.
+ * Use the smallest timeout possible internally to avoid wasting time.
+ * Same as calling skipItems(x) and then awaitItem() but without assumption on the number of items.
+ * @return the last item emitted.
+ */
+suspend fun <T : Any> ReceiveTurbine<T>.awaitLastSequentialItem(): T {
+    return consumeItemsUntilTimeout(1.milliseconds).last()
+}
+
 /**
  * Consume items until predicate is true, or timeout is reached waiting for an event, or we receive terminal event.
  * The timeout is applied for each event.

tests/uitests/src/test/snapshots/images/ui_S_t[f.lockscreen.impl.create_null_CreatePinView-D-1_1_null_0,NEXUS_5,1.0,en].png

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:9914a33ba23544bdfce1e21b52ad247024392730fb22b60bc9b6fa6440f004d4
+oid sha256:c9f1f9f900cea024cdf777867c33c1d1bbe4744a5b91cd994a03aa6cbf4f8815
-size 9216
+size 33186

tests/uitests/src/test/snapshots/images/ui_S_t[f.lockscreen.impl.create_null_CreatePinView-D-1_1_null_1,NEXUS_5,1.0,en].png

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:d25ab8d3f53a5139b265a1ddef43ef3755b539a695aa8f43615e9197bd93471d
+size 33231

tests/uitests/src/test/snapshots/images/ui_S_t[f.lockscreen.impl.create_null_CreatePinView-D-1_1_null_2,NEXUS_5,1.0,en].png

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:13f2b0ac39e3e5448916beea6f7a7183c8a205811343d3ff5e8a21a4d2d3f641
+size 32447

tests/uitests/src/test/snapshots/images/ui_S_t[f.lockscreen.impl.create_null_CreatePinView-D-1_1_null_3,NEXUS_5,1.0,en].png

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:f031423cd98572a729f54e0bc4cdb50778aadd732aa93cf48d063075e9da00be
+size 28636

tests/uitests/src/test/snapshots/images/ui_S_t[f.lockscreen.impl.create_null_CreatePinView-D-1_1_null_4,NEXUS_5,1.0,en].png

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:2818a043ea06af263b1442c6e90727509da2ce2da036d68dce89de31fa8b013f
+size 35614

tests/uitests/src/test/snapshots/images/ui_S_t[f.lockscreen.impl.create_null_CreatePinView-N-1_2_null_0,NEXUS_5,1.0,en].png

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:4ad524a918e499fcea6fd5293358167ff52f8877cc31b778c8def01925fa662f
+oid sha256:75145d74e0bebbad427626711d5bc86911bd89350e73c968c8ca9448e939cdbb
-size 8582
+size 31954

tests/uitests/src/test/snapshots/images/ui_S_t[f.lockscreen.impl.create_null_CreatePinView-N-1_2_null_1,NEXUS_5,1.0,en].png

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:2d5037348c8b27714e54ebec53aac8a546f14b11e3195434f681aad95e416847
+size 32181

tests/uitests/src/test/snapshots/images/ui_S_t[f.lockscreen.impl.create_null_CreatePinView-N-1_2_null_2,NEXUS_5,1.0,en].png

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:d0a34e1c3c047806e4304791664c25cd8d7c9e7850c24b2bb17119e0d83fd5d4
+size 31492

tests/uitests/src/test/snapshots/images/ui_S_t[f.lockscreen.impl.create_null_CreatePinView-N-1_2_null_3,NEXUS_5,1.0,en].png

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:d8c09be0dbf07d8593fd2f93881febdf3494bd439cb6f62adb78beee34b6c7e7
+size 25357

tests/uitests/src/test/snapshots/images/ui_S_t[f.lockscreen.impl.create_null_CreatePinView-N-1_2_null_4,NEXUS_5,1.0,en].png

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:68a54676b1f82425df6db8cb56b161950584ce9d433fc59630a16ac6288fc7d8
+size 31204

tools/localazy/config.json

@@ -154,6 +154,12 @@
       "includeRegex": [
         "call_.*"
       ]
+    },
+    {
+      "name": ":features:lockscreen:impl",
+      "includeRegex": [
+        "screen_app_lock_.*"
+      ]
     }
   ]
 }