QR Code, verification code views (#2685)

ElementX/Resources/Localizations/en.lproj/Localizable.strings

@@ -489,6 +489,8 @@
 "screen_qr_code_login_connection_note_secure_state_list_item_2" = "If you encounter the same problem, try a different wifi network or use your mobile data instead of wifi";
 "screen_qr_code_login_connection_note_secure_state_list_item_3" = "If that doesn’t work, sign in manually";
 "screen_qr_code_login_connection_note_secure_state_title" = "Connection not secure";
+"screen_qr_code_login_device_code_subtitle" = "You’ll be asked to enter the two digits shown below.";
+"screen_qr_code_login_device_code_title" = "Enter number on your device";
 "screen_qr_code_login_initial_state_item_1" = "Open %1$@ on a desktop device";
 "screen_qr_code_login_initial_state_item_2" = "Click on your avatar";
 "screen_qr_code_login_initial_state_item_3" = "Select %1$@";
@@ -504,6 +506,9 @@
 "screen_qr_code_login_scanning_state_title" = "Scan the QR code";
 "screen_qr_code_login_start_over_button" = "Start over";
 "screen_qr_code_login_unknown_error_description" = "An unexpected error occurred. Please try again.";
+"screen_qr_code_login_verify_code_loading" = "Waiting for your other device";
+"screen_qr_code_login_verify_code_subtitle" = "Your account provider may ask for the following code to verify the sign in.";
+"screen_qr_code_login_verify_code_title" = "Your verification code";
 "screen_recovery_key_change_description" = "Get a new recovery key if you've lost your existing one. After changing your recovery key, your old one will no longer work.";
 "screen_recovery_key_change_generate_key" = "Generate a new recovery key";
 "screen_recovery_key_change_generate_key_description" = "Make sure you can store your recovery key somewhere safe";

ElementX/Sources/Generated/Strings.swift

@@ -1197,6 +1197,10 @@ internal enum L10n {
   internal static var screenQrCodeLoginConnectionNoteSecureStateListItem3: String { return L10n.tr("Localizable", "screen_qr_code_login_connection_note_secure_state_list_item_3") }
   /// Connection not secure
   internal static var screenQrCodeLoginConnectionNoteSecureStateTitle: String { return L10n.tr("Localizable", "screen_qr_code_login_connection_note_secure_state_title") }
+  /// You’ll be asked to enter the two digits shown below.
+  internal static var screenQrCodeLoginDeviceCodeSubtitle: String { return L10n.tr("Localizable", "screen_qr_code_login_device_code_subtitle") }
+  /// Enter number on your device
+  internal static var screenQrCodeLoginDeviceCodeTitle: String { return L10n.tr("Localizable", "screen_qr_code_login_device_code_title") }
   /// Open %1$@ on a desktop device
   internal static func screenQrCodeLoginInitialStateItem1(_ p1: Any) -> String {
     return L10n.tr("Localizable", "screen_qr_code_login_initial_state_item_1", String(describing: p1))
@@ -1237,6 +1241,12 @@ internal enum L10n {
   internal static var screenQrCodeLoginStartOverButton: String { return L10n.tr("Localizable", "screen_qr_code_login_start_over_button") }
   /// An unexpected error occurred. Please try again.
   internal static var screenQrCodeLoginUnknownErrorDescription: String { return L10n.tr("Localizable", "screen_qr_code_login_unknown_error_description") }
+  /// Waiting for your other device
+  internal static var screenQrCodeLoginVerifyCodeLoading: String { return L10n.tr("Localizable", "screen_qr_code_login_verify_code_loading") }
+  /// Your account provider may ask for the following code to verify the sign in.
+  internal static var screenQrCodeLoginVerifyCodeSubtitle: String { return L10n.tr("Localizable", "screen_qr_code_login_verify_code_subtitle") }
+  /// Your verification code
+  internal static var screenQrCodeLoginVerifyCodeTitle: String { return L10n.tr("Localizable", "screen_qr_code_login_verify_code_title") }
   /// Get a new recovery key if you've lost your existing one. After changing your recovery key, your old one will no longer work.
   internal static var screenRecoveryKeyChangeDescription: String { return L10n.tr("Localizable", "screen_recovery_key_change_description") }
   /// Generate a new recovery key

ElementX/Sources/Mocks/Generated/GeneratedMocks.swift

@@ -903,7 +903,30 @@ class ApplicationMock: ApplicationProtocol {
     }
     //MARK: - openAppSettings
 
-    var openAppSettingsCallsCount = 0
+    var openAppSettingsUnderlyingCallsCount = 0
+    var openAppSettingsCallsCount: Int {
+        get {
+            if Thread.isMainThread {
+                return openAppSettingsUnderlyingCallsCount
+            } else {
+                var returnValue: Int? = nil
+                DispatchQueue.main.sync {
+                    returnValue = openAppSettingsUnderlyingCallsCount
+                }
+
+                return returnValue!
+            }
+        }
+        set {
+            if Thread.isMainThread {
+                openAppSettingsUnderlyingCallsCount = newValue
+            } else {
+                DispatchQueue.main.sync {
+                    openAppSettingsUnderlyingCallsCount = newValue
+                }
+            }
+        }
+    }
     var openAppSettingsCalled: Bool {
         return openAppSettingsCallsCount > 0
     }

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
+            ForEach(0..<maxLength, id: \.self) { index in
-                PINDigitField(digit: digit(index))
+                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,11 +205,13 @@ struct QRCodeLoginScreen: View {
     @ToolbarContentBuilder
     private var toolbar: some ToolbarContent {
         ToolbarItem(placement: .cancellationAction) {
+            if !context.viewState.state.isDisplayingCode {
                 Button(L10n.actionCancel) {
                     context.send(viewAction: .cancel)
                 }
             }
         }
+    }
         
     @ViewBuilder
     private var errorContent: some View {
@@ -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")
     }
 }

PreviewTests/__Snapshots__/PreviewTests/test_pINTextField-iPad-en-GB.1.png

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:ac5e80718c2743b6b8216aaeaa21229fad3df57fa9cd35863ab501b2a4a3cdd0
+oid sha256:e0192824c55a29ba61462860dbffc5bfc68caba0ad0215fae4f9f53d7b6f8ef2
-size 98975
+size 114873

PreviewTests/__Snapshots__/PreviewTests/test_pINTextField-iPad-pseudo.1.png

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:ac5e80718c2743b6b8216aaeaa21229fad3df57fa9cd35863ab501b2a4a3cdd0
+oid sha256:e0192824c55a29ba61462860dbffc5bfc68caba0ad0215fae4f9f53d7b6f8ef2
-size 98975
+size 114873

PreviewTests/__Snapshots__/PreviewTests/test_pINTextField-iPhone-15-en-GB.1.png

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:d2f981e016006994602734727f6e9c572ef7ea32074969271859a63912468c89
+oid sha256:5f754c85b955f5a88143ebe6c678e1755b29630a47469a5e0db0b3a001c5732d
-size 57355
+size 70008

PreviewTests/__Snapshots__/PreviewTests/test_pINTextField-iPhone-15-pseudo.1.png

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:d2f981e016006994602734727f6e9c572ef7ea32074969271859a63912468c89
+oid sha256:5f754c85b955f5a88143ebe6c678e1755b29630a47469a5e0db0b3a001c5732d
-size 57355
+size 70008

PreviewTests/__Snapshots__/PreviewTests/test_qRCodeLoginScreen-iPad-en-GB.Device-code.png

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

PreviewTests/__Snapshots__/PreviewTests/test_qRCodeLoginScreen-iPad-en-GB.Verification-code.png

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

PreviewTests/__Snapshots__/PreviewTests/test_qRCodeLoginScreen-iPad-pseudo.Device-code.png

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

PreviewTests/__Snapshots__/PreviewTests/test_qRCodeLoginScreen-iPad-pseudo.Verification-code.png

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

PreviewTests/__Snapshots__/PreviewTests/test_qRCodeLoginScreen-iPhone-15-en-GB.Device-code.png

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

PreviewTests/__Snapshots__/PreviewTests/test_qRCodeLoginScreen-iPhone-15-en-GB.Verification-code.png

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

PreviewTests/__Snapshots__/PreviewTests/test_qRCodeLoginScreen-iPhone-15-pseudo.Device-code.png

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

PreviewTests/__Snapshots__/PreviewTests/test_qRCodeLoginScreen-iPhone-15-pseudo.Verification-code.png

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