feat(GODT-2772): Apple Mail cert install page.

internal/frontend/bridge-gui/bridge-gui/Resources.qrc

@@ -52,6 +52,7 @@
         <file>qml/icons/ic-warning-orange.svg</file>
         <file>qml/icons/img-client-config-selector.svg</file>
         <file>qml/icons/img-client-config-success.svg</file>
+        <file>qml/icons/img-macos-cert-screenshot.png</file>
         <file>qml/icons/img-mail-clients.svg</file>
         <file>qml/icons/img-mail-logo-wordmark-dark.svg</file>
         <file>qml/icons/img-mail-logo-wordmark.svg</file>

internal/frontend/bridge-gui/bridge-gui/qml/SetupWizard/ClientConfigAppleMail.qml

@@ -20,18 +20,23 @@ import Proton
 Item {
     id: root
     enum Screen {
-        CertificateInstall = 0,
+        CertificateInstall,
-        ProfileInstall = 1
+        ProfileInstall
     }
 
     property var wizard
 
-    function showAutoConfig() {
+    signal appleMailAutoconfigCertificateInstallPageShown
-        certInstallButton.loading = false;
+    signal appleMailAutoconfigProfileInstallPageShow
+
+    function showAutoconfig() {
+        certificateInstall.waitingForCert = false;
         if (Backend.isTLSCertificateInstalled()) {
             stack.currentIndex = ClientConfigAppleMail.Screen.ProfileInstall;
+            appleMailAutoconfigProfileInstallPageShow();
         } else {
             stack.currentIndex = ClientConfigAppleMail.Screen.CertificateInstall;
+            appleMailAutoconfigCertificateInstallPageShown();
         }
     }
 
@@ -40,67 +45,102 @@ Item {
         anchors.fill: parent
 
         // stack index 0
-        ColumnLayout {
+        Item {
             id: certificateInstall
+
+            property bool waitingForCert: false
+
             Layout.fillHeight: true
             Layout.fillWidth: true
 
-            Connections {
+            ColumnLayout {
-                function onCertificateInstallCanceled() {
+                anchors.left: parent.left
-                    // Note: this will lead to an error message in the final version.
+                anchors.right: parent.right
-                    certInstallButton.loading = false;
+                anchors.verticalCenter: parent.verticalCenter
-                    console.error("Certificate installation was canceled");
+                spacing: 24
-                }
-                function onCertificateInstallFailed() {
-                    // Note: this will lead to an error page later.
-                    certInstallButton.loading = false;
-                    console.error("Certificate installation failed");
-                }
-                function onCertificateInstallSuccess() {
-                    certInstallButton.loading = false;
-                    console.error("Certificate installed successfully");
-                    stack.currentIndex = ClientConfigAppleMail.Screen.ProfileInstall;
-                }
 
-                target: Backend
+                Connections {
-            }
+                    function onCertificateInstallCanceled() {
-            Label {
+                        // Note: this will lead to an error message in the final version.
-                Layout.alignment: Qt.AlignHCenter
+                        certificateInstall.waitingForCert = false;
-                Layout.fillWidth: true
+                        console.error("Certificate installation was canceled");
-                colorScheme: wizard.colorScheme
+                    }
-                horizontalAlignment: Text.AlignHCenter
+                    function onCertificateInstallFailed() {
-                text: "Certificate install placeholder"
+                        // Note: this will lead to an error page later.
-                type: Label.LabelType.Heading
+                        certificateInstall.waitingForCert = false;
-                wrapMode: Text.WordWrap
+                        console.error("Certificate installation failed");
-            }
+                    }
-            Button {
+                    function onCertificateInstallSuccess() {
-                id: certInstallButton
+                        certificateInstall.waitingForCert = false;
-                Layout.fillWidth: true
+                        console.error("Certificate installed successfully");
-                Layout.topMargin: 48
+                        root.showAutoconfig();
-                colorScheme: wizard.colorScheme
+                    }
-                enabled: !loading
-                loading: false
-                text: "Install Certificate Placeholder"
 
-                onClicked: {
+                    target: Backend
-                    certInstallButton.loading = true;
-                    Backend.installTLSCertificate();
                 }
-            }
+                ColumnLayout {
-            Button {
+                    Layout.fillWidth: true
-                Layout.fillWidth: true
+                    spacing: 16
-                Layout.topMargin: 32
-                colorScheme: wizard.colorScheme
-                enabled: !certInstallButton.loading
-                secondary: true
-                text: qsTr("Cancel")
 
-                onClicked: {
+                    Label {
-                    wizard.closeWizard();
+                        Layout.alignment: Qt.AlignHCenter
+                        Layout.fillWidth: true
+                        colorScheme: wizard.colorScheme
+                        horizontalAlignment: Text.AlignHCenter
+                        text: "Install the bridge certificate"
+                        type: Label.LabelType.Title
+                        wrapMode: Text.WordWrap
+                    }
+                    Label {
+                        Layout.alignment: Qt.AlignHCenter
+                        Layout.fillWidth: true
+                        color: colorScheme.text_weak
+                        colorScheme: wizard.colorScheme
+                        horizontalAlignment: Text.AlignHCenter
+                        text: "After clicking on the button below, a system pop-up will ask you for your credential, please enter your macOS user credentials (not your Proton account’s) and validate."
+                        type: Label.LabelType.Body
+                        wrapMode: Text.WordWrap
+                    }
+                }
+                Image {
+                    id: certScreenshot
+                    Layout.alignment: Qt.AlignHCenter
+                    height: 182
+                    opacity: certificateInstall.waitingForCert ? 0.3 : 1.0
+                    source: "/qml/icons/img-macos-cert-screenshot.png"
+                    width: 140
+                }
+                ColumnLayout {
+                    Layout.fillWidth: true
+                    spacing: 16
+
+                    Button {
+                        id: certInstallButton
+                        Layout.fillWidth: true
+                        colorScheme: wizard.colorScheme
+                        enabled: !certificateInstall.waitingForCert
+                        loading: certificateInstall.waitingForCert
+                        text: "Install the certificate"
+
+                        onClicked: {
+                            certificateInstall.waitingForCert = true;
+                            Backend.installTLSCertificate();
+                        }
+                    }
+                    Button {
+                        Layout.fillWidth: true
+                        colorScheme: wizard.colorScheme
+                        enabled: !certificateInstall.waitingForCert
+                        secondary: true
+                        text: qsTr("Cancel")
+
+                        onClicked: {
+                            wizard.closeWizard();
+                        }
+                    }
                 }
             }
         }
-
         // stack index 1
         ColumnLayout {
             id: profileInstall

internal/frontend/bridge-gui/bridge-gui/qml/SetupWizard/ClientConfigParameters.qml

@@ -70,7 +70,7 @@ Rectangle {
                         Layout.fillWidth: true
                         colorScheme: wizard.colorScheme
                         horizontalAlignment: Text.AlignLeft
-                        text: (SetupWizard.Client.MicrosoftOutlook === wizard.client) ? qsTr("Are you unsure about your Outlook version or do you need assistance in configuring Outlook?") : qsTr("Do you need assistant is configuring %1?".arg(wizard.clientName()))
+                        text: (SetupWizard.Client.MicrosoftOutlook === wizard.client) ? qsTr("Are you unsure about your Outlook version or do you need assistance in configuring Outlook?") : qsTr("Do you need assistance in configuring %1?".arg(wizard.clientName()))
                         type: Label.LabelType.Body
                         verticalAlignment: Text.AlignVCenter
                         wrapMode: Text.WordWrap

internal/frontend/bridge-gui/bridge-gui/qml/SetupWizard/LeftPane.qml

@@ -21,21 +21,33 @@ import ".."
 Item {
     id: root
 
-    property var wizard
     property int iconHeight
-    property int iconWidth
     property string iconSource
+    property int iconWidth
+    property var wizard
 
-    function showClientConfigCommon() {
+    function showAppleMailAutoconfig() {
-        const clientName = wizard.clientName();
+        titleLabel.text = "";
-        titleLabel.text = qsTr("Configure %1").arg(clientName);
+        descriptionLabel.text = qsTr("Apple Mail configuration is mostly automated, but in order to work, Bridge needs to install a certificate in your keychain.");
-        descriptionLabel.text = qsTr("We will now guide you through the process of setting up your Proton account in %1.").arg(clientName);
+        linkLabel1.clear();
-        icon.source = wizard.clientIconSource();
+        linkLabel2.clear();
-        icon.sourceSize.height = 264;
+        iconSource = wizard.clientIconSource();
-        icon.sourceSize.width = 263;
+        iconHeight = 80;
-        Layout.preferredHeight = 72;
+        iconWidth = 80;
-        Layout.preferredWidth = 72;
     }
+
+    function showAppleMailAutoconfigCertificateInstall() {
+        console.error("showAppleMailAutoconfigCertificateInstall");
+        showAppleMailAutoconfig();
+        linkLabel1.setLink("https://proton.me/support/bridge", qsTr("Why is this certificate needed?"));
+    }
+
+    function showAppleMailAutoconfigProfileInstall() {
+        console.error("showAppleMailAutoconfigProfileInstall");
+        showAppleMailAutoconfig();
+        linkLabel1.setLink("", qsTr("")); // We are not clearing to keep occupying the vertical space.
+    }
+
     function showClientSelector() {
         titleLabel.text = "";
         descriptionLabel.text = qsTr("Bridge is now connected to Proton, and has already started downloading your messages. Let’s now connect your email client to Bridge.");
@@ -46,22 +58,22 @@ Item {
         iconWidth = 264;
     }
     function showLogin() {
-        showOnboarding()
+        showOnboarding();
-     }
+    }
     function showLogin2FA() {
-        showOnboarding()
+        showOnboarding();
     }
     function showLoginMailboxPassword() {
-        showOnboarding()
+        showOnboarding();
     }
     function showOnboarding() {
         titleLabel.text = (Backend.users.count === 0) ? qsTr("Welcome to\nProton Mail Bridge") : qsTr("Add a Proton Mail account");
         descriptionLabel.text = qsTr("Bridge is the gateway between your Proton account and your email client. It runs in the background and encrypts and decrypts your messages seamlessly. ");
         linkLabel1.setLink("https://proton.me/support/bridge", qsTr("Why do I need Bridge?"));
         linkLabel2.clear();
-        iconSource = "/qml/icons/img-welcome.svg"
+        root.iconSource = "/qml/icons/img-welcome.svg";
-        iconHeight= 148;
+        root.iconHeight = 148;
-        iconWidth = 265;
+        root.iconWidth = 265;
     }
 
     Connections {
@@ -83,11 +95,11 @@ Item {
         Image {
             id: icon
             Layout.alignment: Qt.AlignHCenter | Qt.AlignTop
-            Layout.preferredHeight: iconHeight
+            Layout.preferredHeight: root.iconHeight
-            Layout.preferredWidth: iconWidth
+            Layout.preferredWidth: root.iconWidth
-            source: iconSource
+            source: root.iconSource
-            sourceSize.height: iconHeight
+            sourceSize.height: root.iconHeight
-            sourceSize.width: iconWidth
+            sourceSize.width: root.iconWidth
         }
         Label {
             id: titleLabel
@@ -97,8 +109,8 @@ Item {
             horizontalAlignment: Text.AlignHCenter
             text: ""
             type: Label.LabelType.Heading
-            wrapMode: Text.WordWrap
             visible: text.length !== 0
+            wrapMode: Text.WordWrap
         }
         Label {
             id: descriptionLabel

internal/frontend/bridge-gui/bridge-gui/qml/SetupWizard/SetupWizard.qml

@@ -40,7 +40,6 @@ Item {
 
     property string address
     property int client
-    property string clientVersion
     property ColorScheme colorScheme
     property var user
 
@@ -82,9 +81,9 @@ Item {
     }
     function showAppleMailAutoConfig() {
         rootStackLayout.currentIndex = SetupWizard.RootStack.TwoPanesView;
-        leftContent.showClientSelector();
+        leftContent.showAppleMailAutoconfig();
         rightContent.currentIndex = SetupWizard.ContentStack.ClientConfigAppleMail;
-        clientConfigAppleMail.showAutoConfig();
+        clientConfigAppleMail.showAutoconfig();
     }
     function showClientConfig(user, address) {
         root.user = user;
@@ -93,12 +92,12 @@ Item {
         leftContent.showClientSelector();
         rightContent.currentIndex = SetupWizard.ContentStack.ClientConfigSelector;
     }
-    function showClientParams() {
-        rootStackLayout.currentIndex = SetupWizard.RootStack.ClientConfigParameters;
-    }
     function showClientConfigEnd() {
         rootStackLayout.currentIndex = SetupWizard.RootStack.ClientConfigEnd;
     }
+    function showClientParams() {
+        rootStackLayout.currentIndex = SetupWizard.RootStack.ClientConfigParameters;
+    }
     function showLogin(username = "") {
         rootStackLayout.currentIndex = SetupWizard.RootStack.TwoPanesView;
         root.address = "";
@@ -109,8 +108,8 @@ Item {
     }
     function showOnboarding() {
         rootStackLayout.currentIndex = SetupWizard.RootStack.TwoPanesView;
-        root.address = ""
+        root.address = "";
-        root.user = null
+        root.user = null;
         leftContent.showOnboarding();
         rightContent.currentIndex = SetupWizard.ContentStack.Onboarding;
     }
@@ -154,6 +153,16 @@ Item {
                     clip: true
                     width: 364
                     wizard: root
+                    Connections {
+                        function onAppleMailAutoconfigCertificateInstallPageShown() {
+                            leftContent.showAppleMailAutoconfigCertificateInstall();
+                        }
+                        function onAppleMailAutoconfigProfileInstallPageShow() {
+                            leftContent.showAppleMailAutoconfigProfileInstall();
+                        }
+
+                        target: clientConfigAppleMail
+                    }
                 }
                 Image {
                     id: mailLogoWithWordmark
@@ -161,10 +170,10 @@ Item {
                     anchors.bottomMargin: 40
                     anchors.horizontalCenter: parent.horizontalCenter
                     height: 36
-                    width: 134
+                    source: root.colorScheme.mail_logo_with_wordmark
                     sourceSize.height: 36
                     sourceSize.width: 134
-                    source: root.colorScheme.mail_logo_with_wordmark
+                    width: 134
                 }
             }
             Rectangle {