Implement AppLockScreen as per the designs. (#1925)

Fix a bug in the unlock flow
2026-11-03 06:55:59 +00:00 · 2023-10-20 17:35:57 +01:00
parent d292fe890d
commit ceee6b1853
21 changed files with 378 additions and 85 deletions
@@ -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)
+            }
+        }
+    }
+}