QR Code, verification code views (#2685)

ElementX/Sources/Screens/AppLock/AppLockSetupPINScreen/View/PINTextField.swift

@@ -21,10 +21,12 @@ import SwiftUI
 struct PINTextField: View {
     @Binding var pinCode: String
     var isSecure = false
+    var maxLength = 4
+    var size = PINDigitField.Size.medium
     
     var body: some View {
         textField
-            .textFieldStyle(PINTextFieldStyle(pinCode: pinCode, isSecure: isSecure))
+            .textFieldStyle(PINTextFieldStyle(pinCode: pinCode, isSecure: isSecure, maxLength: maxLength, size: size))
             .keyboardType(.numberPad)
             .accessibilityIdentifier(A11yIdentifiers.appLockSetupPINScreen.textField)
             .onChange(of: pinCode) { newValue in
@@ -47,7 +49,7 @@ struct PINTextField: View {
     
     func sanitize(_ pinCode: String) -> String {
         var sanitized = pinCode
-        if sanitized.count > 4 { sanitized = String(pinCode.prefix(4)) }
+        if sanitized.count > maxLength { sanitized = String(pinCode.prefix(maxLength)) }
         return sanitized.filter(\.isNumber)
     }
 }
@@ -55,14 +57,15 @@ struct PINTextField: View {
 /// A text field style for displaying individual digits of a PIN code.
 private struct PINTextFieldStyle: TextFieldStyle {
     @FocusState private var isFocussed
-    
     let pinCode: String
     let isSecure: Bool
+    let maxLength: Int
+    let size: PINDigitField.Size
     
     func _body(configuration: TextField<_Label>) -> some View {
         HStack(spacing: 8) {
-            ForEach(0..<4) { index in
-                PINDigitField(digit: digit(index))
+            ForEach(0..<maxLength, id: \.self) { index in
+                PINDigitField(digit: digit(index), size: size)
             }
         }
         .overlay {
@@ -82,23 +85,43 @@ private struct PINTextFieldStyle: TextFieldStyle {
 }
 
 /// A single digit shown within the text field style.
-private struct PINDigitField: View {
+struct PINDigitField: View {
+    enum Size {
+        case small
+        case medium
+    }
+    
     let digit: Character?
+    let size: Size
+    
+    private var cornerRadius: CGFloat {
+        switch size {
+        case .small: return 14
+        case .medium: return 8
+        }
+    }
+    
+    private var edge: CGFloat {
+        switch size {
+        case .small: return 44
+        case .medium: return 48
+        }
+    }
     
     var body: some View {
         ZStack {
             if let digit {
-                RoundedRectangle(cornerRadius: 8, style: .continuous)
+                RoundedRectangle(cornerRadius: cornerRadius, style: .continuous)
                     .fill(Color.compound.bgSubtlePrimary)
                 Text(String(digit))
                     .font(.compound.headingMDBold)
             } else {
-                RoundedRectangle(cornerRadius: 8, style: .continuous)
+                RoundedRectangle(cornerRadius: cornerRadius, style: .continuous)
                     .inset(by: 0.5)
                     .stroke(Color.compound.iconPrimary, lineWidth: 1)
             }
         }
-        .frame(width: 48, height: 48)
+        .frame(width: edge, height: edge)
     }
 }
 
@@ -113,15 +136,21 @@ struct PINTextField_Previews: PreviewProvider, TestablePreview {
             PreviewWrapper(pinCode: "", isSecure: true)
             PreviewWrapper(pinCode: "12", isSecure: true)
             PreviewWrapper(pinCode: "1234", isSecure: true)
+                .padding(.bottom)
+            
+            PreviewWrapper(pinCode: "123456", isSecure: false, maxLength: 6, size: .small)
+            PreviewWrapper(pinCode: "12", isSecure: false, maxLength: 2, size: .small)
         }
     }
     
     struct PreviewWrapper: View {
         @State var pinCode = ""
         let isSecure: Bool
+        var maxLength = 4
+        var size: PINDigitField.Size = .medium
         
         var body: some View {
-            PINTextField(pinCode: $pinCode, isSecure: isSecure)
+            PINTextField(pinCode: $pinCode, isSecure: isSecure, maxLength: maxLength, size: size)
         }
     }
 }

ElementX/Sources/Screens/QRCodeLoginScreen/QRCodeLoginScreenModels.swift

@@ -66,6 +66,8 @@ enum QRCodeLoginState: Equatable {
     case initial
     /// The camera is scanning
     case scan(QRCodeLoginScanningState)
+    /// Codes are being shown
+    case displayCode(QRCodeLoginDisplayCodeState)
     /// Any full screen error state
     case error(QRCodeLoginErrorState)
     
@@ -83,4 +85,27 @@ enum QRCodeLoginState: Equatable {
         /// the qr code has been processed and is invalid
         case invalid
     }
+    
+    enum QRCodeLoginDisplayCodeState: Equatable {
+        case deviceCode(String)
+        case verificationCode(String)
+        
+        var code: String {
+            switch self {
+            case .deviceCode(let code):
+                return code
+            case .verificationCode(let code):
+                return code
+            }
+        }
+    }
+    
+    var isDisplayingCode: Bool {
+        switch self {
+        case .displayCode:
+            return true
+        default:
+            return false
+        }
+    }
 }

ElementX/Sources/Screens/QRCodeLoginScreen/View/QRCodeLoginScreen.swift

@@ -39,6 +39,8 @@ struct QRCodeLoginScreen: View {
             initialContent
         case .scan:
             qrScanContent
+        case .displayCode:
+            displayCodeContent
         case .error:
             errorContent
         }
@@ -67,6 +69,70 @@ struct QRCodeLoginScreen: View {
         }
     }
     
+    @ViewBuilder
+    private var displayCodeContent: some View {
+        if case let .displayCode(displayCodeState) = context.viewState.state {
+            FullscreenDialog {
+                VStack(spacing: 32) {
+                    VStack(spacing: 40) {
+                        displayCodeHeader(state: displayCodeState)
+                        PINTextField(pinCode: .constant(displayCodeState.code),
+                                     maxLength: displayCodeState.code.count,
+                                     size: .small)
+                            .disabled(true)
+                    }
+                    VStack(spacing: 4) {
+                        ProgressView()
+                        Text(L10n.screenQrCodeLoginVerifyCodeLoading)
+                            .foregroundColor(.compound.textSecondary)
+                            .font(.compound.bodySM)
+                    }
+                }
+            } bottomContent: {
+                Button(L10n.actionCancel) {
+                    context.send(viewAction: .cancel)
+                }
+                .buttonStyle(.compound(.secondary))
+            }
+            .padding(.horizontal, 24)
+        }
+    }
+    
+    private func displayCodeHeader(state: QRCodeLoginState.QRCodeLoginDisplayCodeState) -> some View {
+        VStack(spacing: 16) {
+            switch state {
+            case .deviceCode:
+                HeroImage(icon: \.computer, style: .subtle)
+                
+                VStack(spacing: 8) {
+                    Text(L10n.screenQrCodeLoginDeviceCodeTitle)
+                        .foregroundColor(.compound.textPrimary)
+                        .font(.compound.headingMDBold)
+                        .multilineTextAlignment(.center)
+                    
+                    Text(L10n.screenQrCodeLoginDeviceCodeSubtitle)
+                        .foregroundColor(.compound.textSecondary)
+                        .font(.compound.bodyMD)
+                        .multilineTextAlignment(.center)
+                }
+            case .verificationCode:
+                HeroImage(icon: \.lock, style: .subtle)
+                
+                VStack(spacing: 8) {
+                    Text(L10n.screenQrCodeLoginVerifyCodeTitle)
+                        .foregroundColor(.compound.textPrimary)
+                        .font(.compound.headingMDBold)
+                        .multilineTextAlignment(.center)
+                    
+                    Text(L10n.screenQrCodeLoginVerifyCodeSubtitle)
+                        .foregroundColor(.compound.textSecondary)
+                        .font(.compound.bodyMD)
+                        .multilineTextAlignment(.center)
+                }
+            }
+        }
+    }
+    
     private var qrScanContent: some View {
         FullscreenDialog {
             VStack(spacing: 40) {
@@ -139,8 +205,10 @@ struct QRCodeLoginScreen: View {
     @ToolbarContentBuilder
     private var toolbar: some ToolbarContent {
         ToolbarItem(placement: .cancellationAction) {
-            Button(L10n.actionCancel) {
-                context.send(viewAction: .cancel)
+            if !context.viewState.state.isDisplayingCode {
+                Button(L10n.actionCancel) {
+                    context.send(viewAction: .cancel)
+                }
             }
         }
     }
@@ -280,6 +348,10 @@ struct QRCodeLoginScreen_Previews: PreviewProvider, TestablePreview {
     
     static let unknownErrorStateViewModel = QRCodeLoginScreenViewModel.mock(state: .error(.unknown))
     
+    static let deviceCodeStateViewModel = QRCodeLoginScreenViewModel.mock(state: .displayCode(.deviceCode("12")))
+    
+    static let verificationCodeStateViewModel = QRCodeLoginScreenViewModel.mock(state: .displayCode(.verificationCode("123456")))
+    
     static var previews: some View {
         QRCodeLoginScreen(context: initialStateViewModel.context)
             .previewDisplayName("Initial")
@@ -301,5 +373,11 @@ struct QRCodeLoginScreen_Previews: PreviewProvider, TestablePreview {
         
         QRCodeLoginScreen(context: unknownErrorStateViewModel.context)
             .previewDisplayName("Unknown error")
+        
+        QRCodeLoginScreen(context: deviceCodeStateViewModel.context)
+            .previewDisplayName("Device code")
+        
+        QRCodeLoginScreen(context: verificationCodeStateViewModel.context)
+            .previewDisplayName("Verification code")
     }
 }