Unify session verification with Android (#5116)

* session verification now does not have a waiting screen, but the initial state instead presents a loading state. Everything is also handled with one single action * use progress view in place of the spinner icon * change progress view tint
2026-11-02 21:33:26 +00:00 · 2026-02-17 17:59:14 +01:00
parent e8a6af1956
commit 556b910979
62 changed files with 194 additions and 178 deletions
@@ -33,25 +33,15 @@ struct SessionVerificationScreenViewState: BindableState {
    
    var headerIcon: (keyPath: KeyPath<CompoundIcons, Image>, style: BigIcon.Style) {
        switch verificationState {
-        case .initial:
+        case .initial, .acceptingVerificationRequest, .requestingVerification,
+             .verificationRequestAccepted, .startingSasVerification, .sasVerificationStarted,
+             .cancelling:
            switch flow {
            case .deviceInitiator, .deviceResponder:
                return (\.devices, .defaultSolid)
            case .userInitiator, .userResponder:
                return (\.userProfileSolid, .defaultSolid)
            }
-        case .acceptingVerificationRequest:
-            return (\.devices, .defaultSolid)
-        case .requestingVerification:
-            return (\.devices, .defaultSolid)
-        case .verificationRequestAccepted:
-            return (\.reaction, .defaultSolid)
-        case .startingSasVerification:
-            return (\.devices, .defaultSolid)
-        case .sasVerificationStarted:
-            return (\.devices, .defaultSolid)
-        case .cancelling:
-            return (\.lockSolid, .defaultSolid)
        case .showingChallenge:
            return (\.reaction, .defaultSolid)
        case .acceptingChallenge:
@@ -71,7 +61,9 @@ struct SessionVerificationScreenViewState: BindableState {
    
    var title: String? {
        switch verificationState {
-        case .initial:
+        case .initial, .acceptingVerificationRequest, .requestingVerification,
+             .verificationRequestAccepted, .startingSasVerification, .sasVerificationStarted,
+             .cancelling:
            switch flow {
            case .deviceInitiator:
                return L10n.screenSessionVerificationUseAnotherDeviceTitle
@@ -80,16 +72,6 @@ struct SessionVerificationScreenViewState: BindableState {
            case .deviceResponder, .userResponder:
                return L10n.screenSessionVerificationRequestTitle
            }
-        case .acceptingVerificationRequest:
-            return waitingTitle
-        case .requestingVerification:
-            return waitingTitle
-        case .verificationRequestAccepted:
-            return L10n.screenSessionVerificationCompareEmojisTitle
-        case .startingSasVerification:
-            return waitingTitle
-        case .sasVerificationStarted:
-            return waitingTitle
        case .showingChallenge:
            return L10n.screenSessionVerificationCompareEmojisTitle
        case .acceptingChallenge:
@@ -103,25 +85,16 @@ struct SessionVerificationScreenViewState: BindableState {
            case .userInitiator, .userResponder:
                return L10n.commonVerificationComplete
            }
-        case .cancelling:
-            return waitingTitle
        case .cancelled:
            return L10n.commonVerificationFailed
        }
    }
-    
-    private var waitingTitle: String {
-        switch flow {
-        case .deviceInitiator, .deviceResponder:
-            return L10n.screenSessionVerificationWaitingOtherDeviceTitle
-        case .userInitiator, .userResponder:
-            return L10n.screenSessionVerificationWaitingOtherUserTitle
-        }
-    }
        
    var message: String {
        switch verificationState {
-        case .initial:
+        case .initial, .acceptingVerificationRequest, .requestingVerification,
+             .verificationRequestAccepted, .startingSasVerification, .sasVerificationStarted,
+             .cancelling:
            switch flow {
            case .deviceInitiator:
                return L10n.screenSessionVerificationUseAnotherDeviceSubtitle
@@ -132,22 +105,10 @@ struct SessionVerificationScreenViewState: BindableState {
            case .userResponder:
                return L10n.screenSessionVerificationUserResponderSubtitle
            }
-        case .acceptingVerificationRequest:
-            return waitingMessage
-        case .requestingVerification:
-            return waitingMessage
-        case .verificationRequestAccepted:
-            return L10n.screenSessionVerificationRequestAcceptedSubtitle
-        case .startingSasVerification:
-            return waitingMessage
-        case .sasVerificationStarted:
-            return waitingMessage
        case .acceptingChallenge:
            return L10n.screenSessionVerificationCompareEmojisSubtitle
        case .decliningChallenge:
            return L10n.screenSessionVerificationCompareEmojisSubtitle
-        case .cancelling:
-            return waitingMessage
        case .showingChallenge:
            switch flow {
            case .deviceInitiator, .deviceResponder:
@@ -167,8 +128,23 @@ struct SessionVerificationScreenViewState: BindableState {
            return L10n.screenSessionVerificationFailedSubtitle
        }
    }
+        
+    var isWaiting: Bool {
+        switch verificationState {
+        case .acceptingVerificationRequest, .requestingVerification, .verificationRequestAccepted,
+             .startingSasVerification, .sasVerificationStarted, .cancelling:
+            true
+        default:
+            false
+        }
+    }
    
-    private var waitingMessage: String {
-        L10n.screenSessionVerificationWaitingSubtitle
+    var showIgnoreButton: Bool {
+        switch flow {
+        case .deviceResponder, .userResponder:
+            true
+        default:
+            false
+        }
    }
 }
@@ -81,7 +81,7 @@ struct SessionVerificationScreen: View {
    @ViewBuilder
    private var mainContent: some View {
        switch context.viewState.verificationState {
-        case .initial:
+        case .initial, .acceptingVerificationRequest, .requestingVerification, .verificationRequestAccepted, .startingSasVerification, .sasVerificationStarted:
            switch context.viewState.flow {
            case .deviceResponder(let details):
                SessionVerificationRequestDetailsView(details: details,
@@ -126,27 +126,18 @@ struct SessionVerificationScreen: View {
    @ViewBuilder
    private var actionButtons: some View {
        switch context.viewState.verificationState {
-        case .initial:
-            switch context.viewState.flow {
-            case .deviceInitiator, .userInitiator:
-                Button(L10n.actionStartVerification) {
-                    context.send(viewAction: .requestVerification)
-                }
-                .buttonStyle(.compound(.primary))
-                .accessibilityIdentifier(A11yIdentifiers.sessionVerificationScreen.requestVerification)
-            case .deviceResponder, .userResponder:
-                VStack(spacing: 16) {
-                    Button(L10n.actionStartVerification) {
-                        context.send(viewAction: .acceptVerificationRequest)
-                    }
-                    .buttonStyle(.compound(.primary))
-                    .accessibilityIdentifier(A11yIdentifiers.sessionVerificationScreen.acceptVerificationRequest)
-                    
+        case .initial, .acceptingVerificationRequest, .requestingVerification,
+             .verificationRequestAccepted, .startingSasVerification, .sasVerificationStarted, .cancelling:
+            VStack(spacing: 16) {
+                startVerificationButton
+                
+                if context.viewState.showIgnoreButton {
                    Button(L10n.actionIgnore) {
                        context.send(viewAction: .ignoreVerificationRequest)
                    }
                    .buttonStyle(.compound(.tertiary))
                    .accessibilityIdentifier(A11yIdentifiers.sessionVerificationScreen.ignoreVerificationRequest)
+                    .disabled(context.viewState.isWaiting)
                }
            }
        case .cancelled:
@@ -162,13 +153,6 @@ struct SessionVerificationScreen: View {
                }
                .buttonStyle(.compound(.primary))
            }
-            
-        case .verificationRequestAccepted:
-            Button(L10n.actionStart) {
-                context.send(viewAction: .startSasVerification)
-            }
-            .buttonStyle(.compound(.primary))
-            .accessibilityIdentifier(A11yIdentifiers.sessionVerificationScreen.startSasVerification)
        
        case .showingChallenge:
            VStack(spacing: 16) {
@@ -190,6 +174,38 @@ struct SessionVerificationScreen: View {
        }
    }
    
+    private var startVerificationButton: some View {
+        Button {
+            switch context.viewState.flow {
+            case .deviceInitiator, .userInitiator:
+                context.send(viewAction: .requestVerification)
+            case .deviceResponder, .userResponder:
+                context.send(viewAction: .acceptVerificationRequest)
+            }
+        } label: {
+            Label {
+                Text(L10n.actionStartVerification)
+            } icon: {
+                if context.viewState.isWaiting {
+                    ProgressView()
+                        .tint(.compound.iconOnSolidPrimary)
+                }
+            }
+        }
+        .buttonStyle(.compound(.primary))
+        .disabled(context.viewState.isWaiting)
+        .accessibilityIdentifier(startVerificationButtonAccessibilityIdentifier)
+    }
+    
+    private var startVerificationButtonAccessibilityIdentifier: String {
+        switch context.viewState.flow {
+        case .deviceInitiator, .userInitiator:
+            A11yIdentifiers.sessionVerificationScreen.requestVerification
+        case .deviceResponder, .userResponder:
+            A11yIdentifiers.sessionVerificationScreen.acceptVerificationRequest
+        }
+    }
+    
    struct EmojiView: View {
        let emoji: SessionVerificationEmoji
        
@@ -224,24 +240,33 @@ struct SessionVerification_Previews: PreviewProvider, TestablePreview {
                                                        deviceDisplayName: "Bob's Element X iOS",
                                                        firstSeenDate: .init(timeIntervalSince1970: 0))
        
-        sessionVerificationScreen(state: .initial, flow: .deviceResponder(requestDetails: details))
+        sessionVerificationScreen(state: .initial,
+                                  flow: .deviceResponder(requestDetails: details))
            .previewDisplayName("Initial - Device Responder")
        
-        sessionVerificationScreen(state: .initial, flow: .userResponder(requestDetails: details))
+        sessionVerificationScreen(state: .initial,
+                                  flow: .userResponder(requestDetails: details))
            .previewDisplayName("Initial - User Responder")
        
-        sessionVerificationScreen(state: .acceptingVerificationRequest)
-            .previewDisplayName("Accepting Verification Request")
+        sessionVerificationScreen(state: .acceptingVerificationRequest,
+                                  flow: .deviceResponder(requestDetails: details))
+            .previewDisplayName("Accepting Verification Request - Device Responder")
        
-        sessionVerificationScreen(state: .requestingVerification)
-            .previewDisplayName("Requesting Verification")
-        sessionVerificationScreen(state: .verificationRequestAccepted)
-            .previewDisplayName("Request Accepted")
+        sessionVerificationScreen(state: .requestingVerification,
+                                  flow: .deviceInitiator)
+            .previewDisplayName("Requesting Verification - Device Initiator")
        
-        sessionVerificationScreen(state: .startingSasVerification)
-            .previewDisplayName("Starting SAS Verification")
-        sessionVerificationScreen(state: .sasVerificationStarted)
-            .previewDisplayName("SAS Verification started")
+        sessionVerificationScreen(state: .verificationRequestAccepted,
+                                  flow: .userInitiator(userID: "@bob:matrix.org"))
+            .previewDisplayName("Request Accepted - User Initiator")
+        
+        sessionVerificationScreen(state: .startingSasVerification,
+                                  flow: .userResponder(requestDetails: details))
+            .previewDisplayName("Starting SAS Verification - User Responder")
+        
+        sessionVerificationScreen(state: .sasVerificationStarted,
+                                  flow: .deviceResponder(requestDetails: details))
+            .previewDisplayName("SAS Verification started - Device Responder")
        
        sessionVerificationScreen(state: .showingChallenge(emojis: SessionVerificationControllerProxyMock.emojis))
            .previewDisplayName("Showing Challenge")
@@ -253,6 +278,9 @@ struct SessionVerification_Previews: PreviewProvider, TestablePreview {
        sessionVerificationScreen(state: .verified)
            .previewDisplayName("Verified")
        
+        sessionVerificationScreen(state: .cancelling, flow: .deviceInitiator)
+            .previewDisplayName("Cancelling - Device Initiator")
+        
        sessionVerificationScreen(state: .cancelled)
            .previewDisplayName("Cancelled")
    }