feat(GODT-2767): unified left pane + client config left pane. [skip-ci]

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

@@ -75,6 +75,7 @@
         <file alias="bridgeMacOS.svg">../../../../dist/bridgeMacOS.svg</file>
         <file>qml/KeychainSettings.qml</file>
         <file>qml/LocalCacheSettings.qml</file>
+        <file>qml/LinkLabel.qml</file>
         <file>qml/MainWindow.qml</file>
         <file>qml/NotificationDialog.qml</file>
         <file>qml/NotificationPopups.qml</file>
@@ -108,10 +109,10 @@
         <file>qml/SettingsItem.qml</file>
         <file>qml/SettingsView.qml</file>
         <file>qml/SetupGuide.qml</file>
+        <file>qml/SetupWizard/LeftPane.qml</file>
+        <file>qml/SetupWizard/ClientConfigSelector.qml</file>
         <file>qml/SetupWizard/SetupWizard.qml</file>
-        <file>qml/SetupWizard/LoginLeftPane.qml</file>
         <file>qml/SetupWizard/LoginRightPane.qml</file>
-        <file>qml/SetupWizard/OnboardingLeftPane.qml</file>
         <file>qml/SetupWizard/OnboardingRightPane.qml</file>
         <file>qml/SetupWizard/StepDescriptionBox.qml</file>
         <file>qml/SignIn.qml</file>

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

@@ -0,0 +1,41 @@
+// Copyright (c) 2023 Proton AG
+// This file is part of Proton Mail Bridge.
+// Proton Mail Bridge is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+// Proton Mail Bridge is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+// You should have received a copy of the GNU General Public License
+// along with Proton Mail Bridge. If not, see <https://www.gnu.org/licenses/>.
+import QtQml
+import QtQuick
+import QtQuick.Layouts
+import QtQuick.Controls
+import QtQuick.Controls.impl
+import "." as Proton
+
+Label {
+    id: root
+
+    property string linkText
+    property string linkURL
+
+    text: link(linkURL, linkText)
+    type: Label.LabelType.Body
+
+    onLinkActivated: function (link) {
+        // if the link is "#", the user is indicating he will provide its own link activation handler.
+        if (link !== "#") {
+            Qt.openUrlExternally(link);
+        }
+    }
+
+    HoverHandler {
+        acceptedDevices: PointerDevice.Mouse
+        cursorShape: Qt.PointingHandCursor
+        enabled: true
+    }
+}

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

@@ -95,11 +95,11 @@ ApplicationWindow {
     }
     Connections {
         function onLoginFinished(index, wasSignedOut) {
-            const user = Backend.users.get(index);
+            // const user = Backend.users.get(index);
-            if (user && !wasSignedOut) {
+            // if (user && !wasSignedOut) {
-                root.showSetup(user, user.addresses[0]);
+            //    root.showSetup(user, user.addresses[0]);
-            }
+            // }
-            console.debug("Login finished", index);
+            // console.debug("Login finished", index);
         }
         function onSelectUser(userID, forceShowWindow) {
             contentWrapper.selectUser(userID);

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

@@ -0,0 +1,24 @@
+// Copyright (c) 2023 Proton AG
+// This file is part of Proton Mail Bridge.
+// Proton Mail Bridge is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+// Proton Mail Bridge is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+// You should have received a copy of the GNU General Public License
+// along with Proton Mail Bridge. If not, see <https://www.gnu.org/licenses/>.
+import QtQml
+import QtQuick
+import QtQuick.Layouts
+import QtQuick.Controls
+import QtQuick.Controls.impl
+import Proton
+
+Rectangle {
+    id: root
+    property ColorScheme colorScheme
+    color: "#ff9900"
+}

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

@@ -0,0 +1,147 @@
+// Copyright (c) 2023 Proton AG
+// This file is part of Proton Mail Bridge.
+// Proton Mail Bridge is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+// Proton Mail Bridge is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+// You should have received a copy of the GNU General Public License
+// along with Proton Mail Bridge. If not, see <https://www.gnu.org/licenses/>.
+import QtQml
+import QtQuick
+import QtQuick.Layouts
+import QtQuick.Controls
+import QtQuick.Controls.impl
+import "." as Proton
+import ".."
+
+Item {
+    id: root
+
+    property ColorScheme colorScheme
+
+    function showLogin2FA() {
+        descriptionLabel.text = qsTr("You have enabled two-factor authentication. Please enter the 6-digit code provided by your authenticator application.");
+        linkLabel1.linkText = "";
+        linkLabel1.linkURL = "";
+        linkLabel2.linkText = "";
+        linkLabel2.linkURL = "";
+        showLoginCommon();
+    }
+    function showClientSelector() {
+        titleLabel.text = qsTr("Configure your email client");
+        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.");
+        linkLabel1.linkText = qsTr("Why do");
+        linkLabel1.linkURL = "https://proton.me";
+        linkLabel2.linkText = qsTr("I need");
+        linkLabel2.linkURL = "https://proton.me";
+        icon.source = "/qml/icons/img-mail-clients.svg";
+        icon.sourceSize.height = 128;
+        icon.sourceSize.width = 128;
+        Layout.preferredHeight = 72;
+        Layout.preferredWidth = 72;
+    }
+    function showLoginCommon() {
+        titleLabel.text = qsTr("Sign in to your Proton Account");
+        icon.Layout.preferredHeight = 72;
+        icon.Layout.preferredWidth = 72;
+        icon.source = "/qml/icons/ic-bridge.svg";
+        icon.sourceSize.height = 128;
+        icon.sourceSize.width = 128;
+    }
+    function showLoginMailboxPassword() {
+        root.description = qsTr("You have secured your account with a separate mailbox password.");
+        linkLabel1.linkText = "";
+        linkLabel1.linkURL = "";
+        linkLabel2.linkText = "";
+        linkLabel2.linkURL = "";
+        showLoginCommon();
+    }
+    function showOnboarding() {
+        titleLabel.text = qsTr("Welcome to\nProton Mail Bridge");
+        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.linkText = qsTr("Why do I need Bridge?");
+        linkLabel1.linkURL = "https://proton.me/support/bridge";
+        linkLabel2.linkText = "";
+        linkLabel2.linkURL = "";
+        icon.Layout.preferredHeight = 148;
+        icon.Layout.preferredWidth = 265;
+        icon.source = "/qml/icons/img-welcome.svg";
+        icon.sourceSize.height = 148;
+        icon.sourceSize.width = 265;
+    }
+    function showLogin() {
+        descriptionLabel.text = qsTr("Let's start by signing in to your Proton account.");
+        linkLabel1.linkText = qsTr("Create or upgrade your account");
+        linkLabel1.linkURL = "https://proton.me/mail/pricing";
+        linkLabel2.linkText = "";
+        linkLabel2.linkURL = "";
+        showLoginCommon();
+    }
+    Connections {
+        function onLogin2FARequested() {
+            showLogin2FA();
+        }
+        function onLogin2PasswordRequested() {
+            showLoginMailboxPassword();
+        }
+
+        target: Backend
+    }
+    ColumnLayout {
+        anchors.left: parent.left
+        anchors.right: parent.right
+        anchors.top: parent.top
+        spacing: 0
+
+        Image {
+            id: icon
+            Layout.alignment: Qt.AlignHCenter | Qt.AlignTop
+            Layout.preferredHeight: 72
+            Layout.preferredWidth: 72
+            fillMode: Image.PreserveAspectFit
+            source: ""
+            sourceSize.height: 72
+            sourceSize.width: 72
+        }
+        Label {
+            id: titleLabel
+            Layout.alignment: Qt.AlignHCenter
+            Layout.fillWidth: true
+            Layout.topMargin: 16
+            colorScheme: root.colorScheme
+            horizontalAlignment: Text.AlignHCenter
+            text: ""
+            type: Label.LabelType.Heading
+            wrapMode: Text.WordWrap
+        }
+        Label {
+            id: descriptionLabel
+            Layout.alignment: Qt.AlignHCenter
+            Layout.fillWidth: true
+            Layout.topMargin: 96
+            colorScheme: root.colorScheme
+            horizontalAlignment: Text.AlignHCenter
+            text: ""
+            type: Label.LabelType.Body
+            wrapMode: Text.WordWrap
+        }
+        LinkLabel {
+            id: linkLabel1
+            Layout.alignment: Qt.AlignHCenter
+            Layout.topMargin: 96
+            colorScheme: root.colorScheme
+            visible: (text !== "")
+        }
+        LinkLabel {
+            id: linkLabel2
+            Layout.alignment: Qt.AlignHCenter
+            Layout.topMargin: 16
+            colorScheme: root.colorScheme
+            visible: (text !== "")
+        }
+    }
+}

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

@@ -1,108 +0,0 @@
-// Copyright (c) 2023 Proton AG
-// This file is part of Proton Mail Bridge.
-// Proton Mail Bridge is free software: you can redistribute it and/or modify
-// it under the terms of the GNU General Public License as published by
-// the Free Software Foundation, either version 3 of the License, or
-// (at your option) any later version.
-// Proton Mail Bridge is distributed in the hope that it will be useful,
-// but WITHOUT ANY WARRANTY; without even the implied warranty of
-// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
-// GNU General Public License for more details.
-// You should have received a copy of the GNU General Public License
-// along with Proton Mail Bridge. If not, see <https://www.gnu.org/licenses/>.
-import QtQml
-import QtQuick
-import QtQuick.Layouts
-import QtQuick.Controls
-import QtQuick.Controls.impl
-import "." as Proton
-
-Item {
-    id: root
-
-    property ColorScheme colorScheme
-    property string description: ""
-    property string helpLink: ""
-
-    function show2FA() {
-        root.description = qsTr("You have enabled two-factor authentication. Please enter the 6-digit code provided by your authenticator application.");
-        root.helpLink = "";
-    }
-    function showMailboxPassword() {
-        root.description = qsTr("You have secured your account with a separate mailbox password. ");
-        root.helpLink = "";
-    }
-    function showSignIn() {
-        root.description = qsTr("Let's start by signing in to your Proton account.");
-        root.helpLink = linkLabel.link("https://proton.me/mail/pricing", qsTr("Create or upgrade your account"));
-    }
-
-    Connections {
-        function onLogin2FARequested() {
-            show2FA();
-        }
-        function onLogin2PasswordRequested() {
-            showMailboxPassword();
-        }
-
-        target: Backend
-    }
-    ColumnLayout {
-        anchors.left: parent.left
-        anchors.right: parent.right
-        anchors.top: parent.top
-        spacing: 0
-
-        Image {
-            Layout.alignment: Qt.AlignHCenter | Qt.AlignTop
-            Layout.preferredHeight: 72
-            Layout.preferredWidth: 72
-            fillMode: Image.PreserveAspectFit
-            source: "/qml/icons/ic-bridge.svg"
-            sourceSize.height: 128
-            sourceSize.width: 128
-        }
-        Label {
-            Layout.alignment: Qt.AlignHCenter
-            Layout.fillWidth: true
-            Layout.topMargin: 16
-            colorScheme: root.colorScheme
-            horizontalAlignment: Text.AlignHCenter
-            text: qsTr("Sign in to your Proton Account")
-            type: Label.LabelType.Heading
-            wrapMode: Text.WordWrap
-        }
-        Label {
-            Layout.alignment: Qt.AlignHCenter
-            Layout.fillWidth: true
-            Layout.topMargin: 96
-            colorScheme: root.colorScheme
-            horizontalAlignment: Text.AlignHCenter
-            text: description
-            type: Label.LabelType.Body
-            wrapMode: Text.WordWrap
-        }
-        Label {
-            id: linkLabel
-            Layout.alignment: Qt.AlignHCenter
-            Layout.fillWidth: false
-            Layout.topMargin: 96
-            colorScheme: root.colorScheme
-            horizontalAlignment: Text.AlignHCenter
-            text: root.helpLink
-            type: Label.LabelType.Body
-            visible: {
-                root.helpLink !== "";
-            }
-
-            onLinkActivated: function (link) {
-                Qt.openUrlExternally(link);
-            }
-
-            HoverHandler {
-                acceptedDevices: PointerDevice.Mouse
-                cursorShape: Qt.PointingHandCursor
-            }
-        }
-    }
-}

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

@@ -1,78 +0,0 @@
-// Copyright (c) 2023 Proton AG
-// This file is part of Proton Mail Bridge.
-// Proton Mail Bridge is free software: you can redistribute it and/or modify
-// it under the terms of the GNU General Public License as published by
-// the Free Software Foundation, either version 3 of the License, or
-// (at your option) any later version.
-// Proton Mail Bridge is distributed in the hope that it will be useful,
-// but WITHOUT ANY WARRANTY; without even the implied warranty of
-// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
-// GNU General Public License for more details.
-// You should have received a copy of the GNU General Public License
-// along with Proton Mail Bridge. If not, see <https://www.gnu.org/licenses/>.
-import QtQml
-import QtQuick
-import QtQuick.Layouts
-import QtQuick.Controls
-import QtQuick.Controls.impl
-import "." as Proton
-
-Item {
-    id: root
-
-    property ColorScheme colorScheme
-
-    ColumnLayout {
-        anchors.left: parent.left
-        anchors.right: parent.right
-        anchors.top: parent.top
-        spacing: 0
-
-        Image {
-            Layout.alignment: Qt.AlignHCenter | Qt.AlignTop
-            Layout.preferredHeight: 148
-            Layout.preferredWidth: 265
-            antialiasing: true
-            source: "/qml/icons/img-welcome.svg"
-            sourceSize.height: 148
-            sourceSize.width: 265
-        }
-        Label {
-            Layout.alignment: Qt.AlignHCenter
-            Layout.fillWidth: true
-            Layout.topMargin: 16
-            colorScheme: root.colorScheme
-            horizontalAlignment: Text.AlignHCenter
-            text: qsTr("Welcome to\nProton Mail Bridge")
-            type: Label.LabelType.Heading
-        }
-        Label {
-            Layout.alignment: Qt.AlignHCenter
-            Layout.fillWidth: true
-            Layout.topMargin: 96
-            colorScheme: root.colorScheme
-            horizontalAlignment: Text.AlignHCenter
-            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. ")
-            type: Label.LabelType.Body
-            wrapMode: Text.WordWrap
-        }
-        Label {
-            Layout.alignment: Qt.AlignHCenter
-            Layout.fillWidth: false
-            Layout.topMargin: 48
-            colorScheme: root.colorScheme
-            horizontalAlignment: Text.AlignHCenter
-            text: link("https://proton.me/support/bridge", qsTr("Why do I need Bridge?"))
-            type: Label.LabelType.Body
-
-            onLinkActivated: function (link) {
-                Qt.openUrlExternally(link);
-            }
-
-            HoverHandler {
-                acceptedDevices: PointerDevice.Mouse
-                cursorShape: Qt.PointingHandCursor
-            }
-        }
-    }
-}

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

@@ -16,6 +16,7 @@ import QtQuick.Layouts
 import QtQuick.Controls
 import QtQuick.Controls.impl
 import "." as Proton
+import ".."
 
 Item {
     id: root
@@ -27,20 +28,24 @@ Item {
     }
     function start() {
         root.visible = true;
-        leftContent.currentIndex = 0;
+        leftContent.showOnboarding();
         rightContent.currentIndex = 0;
     }
+    function startClientConfig() {
+        root.visible = true;
+        leftContent.showClientSelector();
+        rightContent.currentIndex = 2;
+    }
     function startLogin() {
         root.visible = true;
-        leftContent.currentIndex = 1;
+        leftContent.showLogin();
         rightContent.currentIndex = 1;
-        loginLeftPane.showSignIn();
         loginRightPane.reset(true);
     }
 
     Connections {
         function onLoginFinished() {
-            root.closeWizard();
+            startClientConfig();
         }
 
         target: Backend
@@ -55,7 +60,7 @@ Item {
             Layout.fillWidth: true
             color: root.colorScheme.background_norm
 
-            StackLayout {
+            LeftPane {
                 id: leftContent
                 anchors.bottom: parent.bottom
                 anchors.bottomMargin: 96
@@ -63,23 +68,8 @@ Item {
                 anchors.top: parent.top
                 anchors.topMargin: 96
                 clip: true
-                currentIndex: 0
+                colorScheme: root.colorScheme
                 width: 444
-
-                // stack index 0
-                OnboardingLeftPane {
-                    Layout.fillHeight: true
-                    Layout.fillWidth: true
-                    colorScheme: root.colorScheme
-                }
-
-                // stack index 1
-                LoginLeftPane {
-                    id: loginLeftPane
-                    Layout.fillHeight: true
-                    Layout.fillWidth: true
-                    colorScheme: root.colorScheme
-                }
             }
             Image {
                 id: mailLogoWithWordmark
@@ -105,8 +95,8 @@ Item {
                 anchors.horizontalCenter: parent.horizontalCenter
                 anchors.top: parent.top
                 anchors.topMargin: 96
-                currentIndex: 0
                 clip: true
+                currentIndex: 0
                 width: 444
 
                 // stack index 0
@@ -129,26 +119,30 @@ Item {
                         root.closeWizard();
                     }
                 }
+
+                // stack index 2
+                ClientConfigSelector {
+                    id: clientCOnfigSelector
+                    Layout.fillHeight: true
+                    Layout.fillWidth: true
+                    colorScheme: root.colorScheme
+                }
             }
-            Label {
+            LinkLabel {
                 id: reportProblemLink
                 anchors.bottom: parent.bottom
                 anchors.bottomMargin: 48
                 anchors.horizontalCenter: parent.horizontalCenter
                 colorScheme: root.colorScheme
                 horizontalAlignment: Text.AlignRight
-                text: link("#", "Report problem")
+                linkText: qsTr("Report problem")
+                linkURL: "#"
                 width: 444
 
                 onLinkActivated: {
                     root.visible = false;
                 }
 
-                HoverHandler {
-                    id: mouse
-                    acceptedDevices: PointerDevice.Mouse
-                    cursorShape: Qt.PointingHandCursor
-                }
             }
         }
     }