Implement AppLockScreen as per the designs. (#1925)

Fix a bug in the unlock flow
2026-11-03 06:02:10 +00:00 · 2023-10-20 17:35:57 +01:00
parent d292fe890d
commit ceee6b1853
21 changed files with 378 additions and 85 deletions
@@ -22,19 +22,45 @@ enum AppLockScreenViewModelAction {
 }

 struct AppLockScreenViewState: BindableState {
-    var bindings: AppLockScreenViewStateBindings
-}
-
-struct AppLockScreenViewStateBindings { }
-
-enum AppLockScreenViewAction: CustomStringConvertible {
-    /// Attempt to unlock the app with the supplied PIN code.
-    case submitPINCode(String)
+    private let maximumAttempts = 3
    
-    var description: String {
-        switch self {
-        case .submitPINCode:
-            return "submitPINCode"
+    /// The number of times the user attempted to enter their PIN.
+    var numberOfPINAttempts = 0
+    
+    var bindings: AppLockScreenViewStateBindings
+    
+    /// The number of digits the user has entered so far.
+    var numberOfDigitsEntered: Int { bindings.pinCode.count }
+    /// Whether the subtitle is in a warning state or not.
+    var isSubtitleWarning: Bool { numberOfPINAttempts > 0 }
+    /// The string shown in the screen's subtitle.
+    var subtitle: String {
+        if !isSubtitleWarning {
+            return L10n.screenAppLockSubtitle
+        } else {
+            return L10n.screenAppLockSubtitleWrongPin(maximumAttempts - numberOfPINAttempts)
        }
    }
 }
+
+struct AppLockScreenViewStateBindings {
+    /// The PIN code entered by the user.
+    var pinCode = ""
+    var alertInfo: AlertInfo<AppLockScreenAlertType>?
+}
+
+enum AppLockScreenAlertType {
+    /// The user has failed too many times, they're being signed out.
+    case forceSignOut
+    /// The user has forgotten their PIN, confirm they're happy to sign out.
+    case confirmResetPIN
+}
+
+enum AppLockScreenViewAction {
+    /// Attempt to unlock the app with the supplied PIN code.
+    case submitPINCode
+    /// Clears the PIN code after a failure animation.
+    case clearPINCode
+    /// The user didn't heed the warnings and can't remember their PIN.
+    case forgotPIN
+}
@@ -39,13 +39,43 @@ class AppLockScreenViewModel: AppLockScreenViewModelType, AppLockScreenViewModel
        MXLog.info("View model: received view action: \(viewAction)")
        
        switch viewAction {
-        case .submitPINCode(let pinCode):
-            guard appLockService.unlock(with: pinCode) else {
-                MXLog.warning("Invalid PIN code entered.")
-                // Indicate failure here.
+        case .submitPINCode:
+            guard appLockService.unlock(with: state.bindings.pinCode) else {
+                handleInvalidPIN()
                return
            }
            actionsSubject.send(.appUnlocked)
+        case .clearPINCode:
+            state.bindings.pinCode = ""
+        case .forgotPIN:
+            handleForgotPIN()
        }
    }
+    
+    // MARK: - Private
+    
+    private func handleForgotPIN() {
+        state.bindings.alertInfo = .init(id: .confirmResetPIN,
+                                         title: L10n.screenAppLockSignoutAlertTitle,
+                                         message: L10n.screenAppLockSignoutAlertMessage,
+                                         primaryButton: .init(title: L10n.actionOk, action: forceSignOut),
+                                         secondaryButton: .init(title: L10n.actionCancel, role: .cancel, action: nil))
+    }
+    
+    private func handleInvalidPIN() {
+        MXLog.warning("Invalid PIN code entered.")
+        state.numberOfPINAttempts += 1
+        
+        if state.numberOfPINAttempts == 3 {
+            state.bindings.alertInfo = .init(id: .forceSignOut,
+                                             title: L10n.screenAppLockSignoutAlertTitle,
+                                             message: L10n.screenAppLockSignoutAlertMessage,
+                                             primaryButton: .init(title: L10n.actionOk, action: nil))
+            forceSignOut()
+        }
+    }
+    
+    private func forceSignOut() {
+        // To be implemented.
+    }
 }
@@ -17,36 +17,107 @@
 import Compound
 import SwiftUI

-// This implementation is only for development purposes.
-
 struct AppLockScreen: View {
    @ObservedObject var context: AppLockScreenViewModel.Context
    
+    /// The size of each dot within the PIN input field.
+    @ScaledMetric private var pinDotSize = 14
+    /// Used to animate the PIN input field on failure.
+    @State private var pinInputFieldOffset = 0.0
+    
+    /// A focus state to highlight a failed PIN entry in VoiceOver.
+    @AccessibilityFocusState private var accessibilitySubtitleFocus: Bool
+    
+    var subtitleColor: Color {
+        context.viewState.isSubtitleWarning ? .compound.textCriticalPrimary : .compound.textPrimary
+    }
+    
    var body: some View {
        FullscreenDialog {
-            VStack(spacing: 8) {
-                HeroImage(image: Image(systemSymbol: .lock))
-                    .symbolVariant(.fill)
-                    .padding(.bottom, 8)
+            VStack(spacing: 32) {
+                header
                
-                Text(UntranslatedL10n.screenAppLockTitle(InfoPlistReader.main.bundleDisplayName))
-                    .font(.compound.headingMDBold)
-                    .multilineTextAlignment(.center)
-                    .foregroundColor(.compound.textPrimary)
+                pinInputField
+                    .padding(.bottom, 16)
+                    .offset(x: pinInputFieldOffset)
+                    .onChange(of: context.viewState.numberOfPINAttempts) { newValue in
+                        guard newValue > 0 else { return } // Reset without animation in Previews.
+                        accessibilitySubtitleFocus = true
+                        Task { await animatePINFailure() }
+                    }
+                    .accessibilityLabel(L10n.a11yPinField)
+                    .accessibilityValue(L10n.a11yDigitsEntered(context.viewState.numberOfDigitsEntered))
+                
+                AppLockScreenPINKeypad(pinCode: $context.pinCode)
+                    .onChange(of: context.pinCode) { newValue in
+                        guard newValue.count == 4 else { return }
+                        context.send(viewAction: .submitPINCode)
+                    }
            }
        } bottomContent: {
-            Button(UntranslatedL10n.commonUnlock) {
-                context.send(viewAction: .submitPINCode("0000"))
+            Button(L10n.screenAppLockForgotPin) {
+                context.send(viewAction: .forgotPIN)
            }
-            .buttonStyle(.compound(.primary))
+            .font(.compound.bodyMDSemibold)
        }
+        .alert(item: $context.alertInfo)
+    }
+    
+    var header: some View {
+        VStack(spacing: 8) {
+            CompoundIcon(\.lock, size: .medium, relativeTo: .compound.headingMDBold)
+                .padding(.bottom, 8)
+                .accessibilityHidden(true)
+            
+            Text(L10n.commonEnterYourPin)
+                .font(.compound.headingMDBold)
+                .foregroundColor(.compound.textPrimary)
+                .multilineTextAlignment(.center)
+            
+            Text(context.viewState.subtitle)
+                .font(.compound.bodyMD)
+                .foregroundColor(subtitleColor)
+                .multilineTextAlignment(.center)
+                .accessibilityFocused($accessibilitySubtitleFocus)
+        }
+    }
+    
+    /// The row of dots showing how many digits have been entered.
+    var pinInputField: some View {
+        HStack(spacing: 24) {
+            Circle()
+                .fill(context.viewState.numberOfDigitsEntered > 0 ? .compound.iconPrimary : .compound.bgSubtlePrimary)
+                .frame(width: pinDotSize, height: pinDotSize)
+            Circle()
+                .fill(context.viewState.numberOfDigitsEntered > 1 ? .compound.iconPrimary : .compound.bgSubtlePrimary)
+                .frame(width: pinDotSize, height: pinDotSize)
+            Circle()
+                .fill(context.viewState.numberOfDigitsEntered > 2 ? .compound.iconPrimary : .compound.bgSubtlePrimary)
+                .frame(width: pinDotSize, height: pinDotSize)
+            Circle()
+                .fill(context.viewState.numberOfDigitsEntered > 3 ? .compound.iconPrimary : .compound.bgSubtlePrimary)
+                .frame(width: pinDotSize, height: pinDotSize)
+        }
+    }
+    
+    func animatePINFailure() async {
+        withAnimation(.spring(response: 0, dampingFraction: 0.7, blendDuration: 0.0)) {
+            pinInputFieldOffset = 15
+        }
+        
+        try? await Task.sleep(for: .milliseconds(50))
+        withAnimation(.spring(response: 0.1, dampingFraction: 0.3, blendDuration: 0.1)) {
+            pinInputFieldOffset = 0
+        }
+        
+        try? await Task.sleep(for: .milliseconds(100))
+        context.send(viewAction: .clearPINCode)
    }
 }

 // MARK: - Previews

-// Add TestablePreview conformance once we have designs.
-struct AppLockScreen_Previews: PreviewProvider {
+struct AppLockScreen_Previews: PreviewProvider, TestablePreview {
    static let viewModel = AppLockScreenViewModel(appLockService: AppLockServiceMock.mock())
    
    static var previews: some View {
@@ -0,0 +1,99 @@
+//
+// Copyright 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.
+//
+
+import SwiftUI
+
+/// The custom keypad shown on the App Lock screen when biometrics are disabled.
+struct AppLockScreenPINKeypad: View {
+    @Binding var pinCode: String
+    
+    var body: some View {
+        Grid(horizontalSpacing: 24, verticalSpacing: 16) {
+            ForEach(0..<3) { row in
+                GridRow {
+                    ForEach(1..<4) { column in
+                        let digit = (3 * row) + column
+                        Button("\(digit)") { press(digit) }
+                    }
+                }
+            }
+            GridRow {
+                Button("") { }.hidden()
+                Button("0") { press(0) }
+                Button(action: pressDelete) {
+                    Image(systemSymbol: .deleteBackward)
+                        .symbolVariant(.fill)
+                        .symbolRenderingMode(.palette)
+                        .foregroundStyle(.compound.textPrimary, .compound.bgSubtlePrimary)
+                }
+                .buttonStyle(KeypadButtonStyle(isSolid: false))
+            }
+        }
+        .buttonStyle(KeypadButtonStyle())
+    }
+    
+    func press(_ digit: Int) {
+        guard pinCode.count < 4 else { return }
+        UIDevice.current.playInputClick()
+        pinCode.append("\(digit)")
+    }
+    
+    func pressDelete() {
+        guard !pinCode.isEmpty else { return }
+        withElementAnimation { _ = pinCode.removeLast() }
+    }
+}
+
+private struct KeypadButtonStyle: ButtonStyle {
+    var isSolid = true
+    
+    func makeBody(configuration: Configuration) -> some View {
+        Circle()
+            .fill(isSolid ? .compound.bgSubtlePrimary : .clear)
+            .frame(width: 80, height: 80)
+            .overlay {
+                configuration.label
+                    .font(.compound.headingXLBold)
+                    .foregroundColor(.compound.textPrimary)
+            }
+            .opacity(configuration.isPressed ? 0.3 : 1.0)
+    }
+}
+
+// MARK: - Previews
+
+struct AppLockScreenPINKeypad_Previews: PreviewProvider {
+    static var previews: some View {
+        KeypadTestView()
+    }
+    
+    struct KeypadTestView: View {
+        @StateObject var model = PreviewModel()
+        class PreviewModel: ObservableObject {
+            @Published var pinCode = ""
+            var output: String { pinCode.isEmpty ? "Enter code" : pinCode }
+        }
+        
+        var body: some View {
+            VStack(spacing: 32) {
+                Text(model.output)
+                    .font(.compound.headingMD)
+                    .animation(.noAnimation, value: model.pinCode)
+                AppLockScreenPINKeypad(pinCode: $model.pinCode)
+            }
+        }
+    }
+}