Implement AppLockScreen as per the designs. (#1925)

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