feat(GODT-2767): client selection. [skip-ci]

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

@@ -109,6 +109,7 @@
         <file>qml/SettingsItem.qml</file>
         <file>qml/SettingsView.qml</file>
         <file>qml/SetupGuide.qml</file>
+        <file>qml/SetupWizard/ClientListItem.qml</file>
         <file>qml/SetupWizard/LeftPane.qml</file>
         <file>qml/SetupWizard/ClientConfigSelector.qml</file>
         <file>qml/SetupWizard/SetupWizard.qml</file>

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

@@ -19,11 +19,13 @@ import "." as Proton
 
 Label {
     id: root
+    function clear() {
+        text = "";
+    }
+    function setLink(linkURL, linkText) {
+        text = link(linkURL, linkText);
+    }
 
-    property string linkText
-    property string linkURL
-
-    text: link(linkURL, linkText)
     type: Label.LabelType.Body
 
     onLinkActivated: function (link) {

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

@@ -167,7 +167,7 @@ ApplicationWindow {
                 Backend.quit();
             }
             onShowSetupGuide: function (user, address) {
-                root.showSetup(user, address);
+                setupWizard.startClientConfig();
             }
             onShowSetupWizard: {
                 setupWizard.start();

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

@@ -17,8 +17,84 @@ import QtQuick.Controls
 import QtQuick.Controls.impl
 import Proton
 
-Rectangle {
+Item {
     id: root
-    property ColorScheme colorScheme
+
-    color: "#ff9900"
+    property ColorScheme colorScheme: wizard.colorScheme
-}
+    readonly property bool onMacOS: (Backend.goos === "darwin")
+    readonly property bool onWindows: (Backend.goos === "windows")
+    property var wizard
+
+    ColumnLayout {
+        anchors.left: parent.left
+        anchors.right: parent.right
+        anchors.top: parent.top
+        spacing: 0
+
+        Label {
+            Layout.alignment: Qt.AlignHCenter
+            colorScheme: root.colorScheme
+            text: qsTr("Select your email application")
+            type: Label.LabelType.Heading
+        }
+        Item {
+            Layout.preferredHeight: 72
+        }
+        ClientListItem {
+            Layout.fillWidth: true
+            colorScheme: root.colorScheme
+            iconSource: "/qml/icons/ic-apple-mail.svg"
+            text: "Apple Mail"
+            visible: root.onMacOS
+
+            onClicked: {
+                wizard.client = SetupWizard.Client.AppleMail;
+            }
+        }
+        ClientListItem {
+            Layout.fillWidth: true
+            colorScheme: root.colorScheme
+            iconSource: "/qml/icons/ic-microsoft-outlook.svg"
+            text: "Microsoft Outlook"
+            visible: root.onMacOS || root.onWindows
+
+            onClicked: {
+                wizard.client = SetupWizard.Client.MicrosoftOutlook;
+            }
+        }
+        ClientListItem {
+            Layout.fillWidth: true
+            colorScheme: root.colorScheme
+            iconSource: "/qml/icons/ic-mozilla-thunderbird.svg"
+            text: "Mozilla Thunderbird"
+
+            onClicked: {
+                wizard.client = SetupWizard.Client.MozillaThunderbird;
+            }
+        }
+        ClientListItem {
+            Layout.fillWidth: true
+            colorScheme: root.colorScheme
+            iconSource: "/qml/icons/ic-other-mail-clients.svg"
+            text: "Other"
+
+            onClicked: {
+                wizard.client = SetupWizard.Client.Generic;
+            }
+        }
+        Item {
+            Layout.preferredHeight: 72
+        }
+        Button {
+            Layout.fillWidth: true
+            colorScheme: root.colorScheme
+            secondary: true
+            text: qsTr("Cancel")
+
+            onClicked: {
+                root.wizard.closeWizard();
+            }
+        }
+    }
+}
+

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

@@ -0,0 +1,69 @@
+// 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
+
+Item {
+    id: root
+
+    property ColorScheme colorScheme
+    property string iconSource
+    property string text
+
+    signal clicked
+
+    implicitHeight: clientRow.height
+
+    ColumnLayout {
+        id: clientRow
+        anchors.left: parent.left
+        anchors.right: parent.right
+        spacing: 0
+
+        RowLayout {
+            Layout.bottomMargin: 12
+            Layout.leftMargin: 16
+            Layout.rightMargin: 16
+            Layout.topMargin: 12
+
+            ColorImage {
+                height: 36
+                source: iconSource
+                sourceSize.height: 36
+            }
+            Label {
+                Layout.leftMargin: 12
+                colorScheme: root.colorScheme
+                text: root.text
+                type: Label.LabelType.Body
+            }
+        }
+        Rectangle {
+            Layout.fillWidth: true
+            Layout.preferredHeight: 1
+            color: root.colorScheme.border_weak
+        }
+    }
+    MouseArea {
+        anchors.fill: parent
+        cursorShape: Qt.PointingHandCursor
+
+        onClicked: {
+            root.clicked();
+        }
+    }
+}

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

@@ -25,19 +25,15 @@ Item {
 
     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.clear();
-        linkLabel1.linkURL = "";
+        linkLabel2.clear();
-        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.clear();
-        linkLabel1.linkURL = "https://proton.me";
+        linkLabel2.clear();
-        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;
@@ -54,19 +50,15 @@ Item {
     }
     function showLoginMailboxPassword() {
         root.description = qsTr("You have secured your account with a separate mailbox password.");
-        linkLabel1.linkText = "";
+        linkLabel1.clear();
-        linkLabel1.linkURL = "";
+        linkLabel2.clear();
-        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.setLink("https://proton.me/support/bridge", qsTr("Why do I need Bridge?"));
-        linkLabel1.linkURL = "https://proton.me/support/bridge";
+        linkLabel2.clear();
-        linkLabel2.linkText = "";
-        linkLabel2.linkURL = "";
         icon.Layout.preferredHeight = 148;
         icon.Layout.preferredWidth = 265;
         icon.source = "/qml/icons/img-welcome.svg";
@@ -75,10 +67,8 @@ Item {
     }
     function showLogin() {
         descriptionLabel.text = qsTr("Let's start by signing in to your Proton account.");
-        linkLabel1.linkText = qsTr("Create or upgrade your account");
+        linkLabel1.setLink("https://proton.me/mail/pricing", qsTr("Create or upgrade your account"));
-        linkLabel1.linkURL = "https://proton.me/mail/pricing";
+        linkLabel2.clear();
-        linkLabel2.linkText = "";
-        linkLabel2.linkURL = "";
         showLoginCommon();
     }
     Connections {

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

@@ -20,8 +20,19 @@ import ".."
 
 Item {
     id: root
+    enum Client {
+        AppleMail,
+        MicrosoftOutlook,
+        MozillaThunderbird,
+        Generic
+    }
 
+    property string address
+    property int client
+    property string clientVersion
     property ColorScheme colorScheme
+    property string userID
+    property bool wasSignedOut
 
     function closeWizard() {
         root.visible = false;
@@ -36,8 +47,11 @@ Item {
         leftContent.showClientSelector();
         rightContent.currentIndex = 2;
     }
-    function startLogin() {
+    function startLogin(wasSignedOut = false) {
         root.visible = true;
+        root.userID = "";
+        root.address = "";
+        root.wasSignedOut = wasSignedOut;
         leftContent.showLogin();
         rightContent.currentIndex = 1;
         loginRightPane.reset(true);
@@ -122,10 +136,10 @@ Item {
 
                 // stack index 2
                 ClientConfigSelector {
-                    id: clientCOnfigSelector
+                    id: clientConfigSelector
                     Layout.fillHeight: true
                     Layout.fillWidth: true
-                    colorScheme: root.colorScheme
+                    wizard: root
                 }
             }
             LinkLabel {
@@ -135,14 +149,12 @@ Item {
                 anchors.horizontalCenter: parent.horizontalCenter
                 colorScheme: root.colorScheme
                 horizontalAlignment: Text.AlignRight
-                linkText: qsTr("Report problem")
+                text: link("#", qsTr("Report problem"))
-                linkURL: "#"
                 width: 444
 
                 onLinkActivated: {
                     root.visible = false;
                 }
-
             }
         }
     }