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

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

@@ -110,6 +110,7 @@
         <file>qml/SetupWizard/ClientListItem.qml</file>
         <file>qml/SetupWizard/LeftPane.qml</file>
         <file>qml/SetupWizard/ClientConfigOutlookSelector.qml</file>
+        <file>qml/SetupWizard/ClientConfigParameters.qml</file>
         <file>qml/SetupWizard/ClientConfigSelector.qml</file>
         <file>qml/SetupWizard/ClientConfigWarning.qml</file>
         <file>qml/SetupWizard/SetupWizard.qml</file>

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

@@ -0,0 +1,128 @@
+// 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
+import ".."
+
+Rectangle {
+    id: root
+    property var wizard
+    property ColorScheme colorScheme: wizard.colorScheme
+    color: colorScheme.background_weak
+    readonly property bool genericClient: SetupWizard.Client.Generic === wizard.client
+
+    Item {
+        id: centeredContainer
+        anchors.horizontalCenter: parent.horizontalCenter
+        anchors.top: parent.top
+        anchors.bottom: parent.bottom
+        width: 800
+
+        ColumnLayout {
+            anchors.left: parent.left
+            anchors.right: parent.right
+            anchors.top: parent.top
+            anchors.bottomMargin: 96
+            anchors.topMargin: 32
+            spacing: 0
+            Label {
+                Layout.alignment: Qt.AlignHCenter
+                Layout.fillWidth: true
+                colorScheme: root.colorScheme
+                horizontalAlignment: Text.AlignHCenter
+                text: qsTr("Configure %1").arg(wizard.clientName())
+                type: Label.LabelType.Heading
+                wrapMode: Text.WordWrap
+            }
+            Label {
+                id: descriptionLabel
+                Layout.alignment: Qt.AlignHCenter
+                Layout.fillWidth: true
+                Layout.topMargin: 8
+                color: colorScheme.text_weak
+                colorScheme: root.colorScheme
+                horizontalAlignment: Text.AlignHCenter
+                text: genericClient ? qsTr("Here are the IMAP and SMTP configuration parameters for your email client") :
+                    qsTr("Here are your email configuration parameters for %1. \nWe have prepared an easy to follow configuration guide to help you setup your account in %1.").arg(wizard.clientName())
+                type: Label.LabelType.Body
+                wrapMode: Text.WordWrap
+            }
+            RowLayout {
+                id: configuration
+
+                property string currentAddress: wizard.user ? wizard.user.address : ""
+
+                Layout.fillHeight: true
+                Layout.fillWidth: true
+                Layout.topMargin: 32
+                spacing: 64
+                Configuration {
+                    Layout.fillWidth: true
+                    colorScheme: root.colorScheme
+                    hostname: Backend.hostname
+                    password: wizard.user ? wizard.user.password : ""
+                    port: Backend.imapPort.toString()
+                    security: Backend.useSSLForIMAP ? "SSL" : "STARTTLS"
+                    title: qsTr("IMAP")
+                    username: configuration.currentAddress
+                }
+                Configuration {
+                    Layout.fillWidth: true
+                    colorScheme: root.colorScheme
+                    hostname: Backend.hostname
+                    password: wizard.user ? wizard.user.password : ""
+                    port: Backend.smtpPort.toString()
+                    security: Backend.useSSLForSMTP ? "SSL" : "STARTTLS"
+                    title: qsTr("SMTP")
+                    username: configuration.currentAddress
+                }
+            }
+
+            Button {
+                Layout.alignment: Qt.AlignHCenter
+                Layout.preferredWidth: 444
+                Layout.topMargin: 32
+                colorScheme: root.colorScheme
+                text: qsTr("Open configuration guide")
+                visible: !genericClient
+            }
+
+            Button {
+                Layout.alignment: Qt.AlignHCenter
+                Layout.preferredWidth: 444
+                Layout.topMargin: 32
+                colorScheme: root.colorScheme
+                text: qsTr("Done")
+                onClicked: root.wizard.closeWizard()
+            }
+        }
+
+        LinkLabel {
+            id: reportProblemLink
+            anchors.bottom: parent.bottom
+            anchors.bottomMargin: 48
+            anchors.right: parent.right
+            colorScheme: root.colorScheme
+            horizontalAlignment: Text.AlignRight
+            text: link("#", qsTr("Report problem"))
+
+            onLinkActivated: {
+                wizard.closeWizard();
+            }
+        }
+    }
+}

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

@@ -65,7 +65,7 @@ Item {
             horizontalAlignment: Text.AlignHCenter
             colorScheme: root.colorScheme
             text: qsTr("Do not enter your Proton account password in you email application.")
-            type: Label.LabelType.Body_bold
+            type: Label.LabelType.Body
             wrapMode: Text.WordWrap
         }
         Item {
@@ -89,7 +89,7 @@ Item {
             text: qsTr("I understand")
 
             onClicked: {
-                root.wizard.closeWizard();
+                root.wizard.showClientParams();
             }
         }
         Item {

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

@@ -54,7 +54,7 @@ Item {
         }
         Button {
             Layout.alignment: Qt.AlignHCenter
-            Layout.preferredWidth: 320
+            Layout.fillWidth: true
             colorScheme: root.colorScheme
             text: qsTr("Let's start")
 

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

@@ -69,23 +69,31 @@ Item {
     function closeWizard() {
         root.visible = false;
     }
+
     function showOutlookSelector() {
         root.visible = true;
+        rootStackLayout.currentIndex = 0;
         leftContent.showOutlookSelector();
         rightContent.currentIndex = 3;
     }
+
     function start() {
         root.visible = true;
+        rootStackLayout.currentIndex = 0;
         leftContent.showOnboarding();
         rightContent.currentIndex = 0;
     }
+
     function startClientConfig() {
         root.visible = true;
+        rootStackLayout.currentIndex = 0;
         leftContent.showClientSelector();
         rightContent.currentIndex = 2;
     }
+
     function startLogin(wasSignedOut = false) {
         root.visible = true;
+        rootStackLayout.currentIndex = 0;
         root.userID = "";
         root.address = "";
         root.wasSignedOut = wasSignedOut;
@@ -96,10 +104,17 @@ Item {
 
     function showClientWarning() {
         root.visible = true;
+        rootStackLayout.currentIndex = 0;
         leftContent.showClientConfigWarning();
         rightContent.currentIndex = 4
     }
 
+    function showClientParams() {
+        root.visible = true;
+        rootStackLayout.currentIndex = 1;
+
+    }
+
     Connections {
         function onLoginFinished() {
             startClientConfig();
@@ -107,114 +122,130 @@ Item {
 
         target: Backend
     }
-    RowLayout {
+
+    StackLayout {
+        id: rootStackLayout
         anchors.fill: parent
-        spacing: 0
 
-        Rectangle {
+        // rootStackLayout index 0
-            id: leftHalf
+        RowLayout {
             Layout.fillHeight: true
             Layout.fillWidth: true
-            color: root.colorScheme.background_norm
+            spacing: 0
 
-            LeftPane {
+            Rectangle {
-                id: leftContent
+                id: leftHalf
+                Layout.fillHeight: true
+                Layout.fillWidth: true
+                color: root.colorScheme.background_norm
 
-                anchors.bottom: parent.bottom
+                LeftPane {
-                anchors.bottomMargin: 96
+                    id: leftContent
-                anchors.horizontalCenter: parent.horizontalCenter
-                anchors.top: parent.top
-                anchors.topMargin: 96
-                clip: true
-                colorScheme: root.colorScheme
-                width: 444
-                wizard: root
-            }
-            Image {
-                id: mailLogoWithWordmark
-                anchors.bottom: parent.bottom
-                anchors.bottomMargin: 48
-                anchors.horizontalCenter: parent.horizontalCenter
-                fillMode: Image.PreserveAspectFit
-                height: 24
-                mipmap: true
-                source: root.colorScheme.mail_logo_with_wordmark
-            }
-        }
-        Rectangle {
-            id: rightHalf
-            Layout.fillHeight: true
-            Layout.fillWidth: true
-            color: root.colorScheme.background_weak
 
-            StackLayout {
+                    anchors.bottom: parent.bottom
-                id: rightContent
+                    anchors.bottomMargin: 96
-                anchors.bottom: parent.bottom
+                    anchors.horizontalCenter: parent.horizontalCenter
-                anchors.bottomMargin: 96
+                    anchors.top: parent.top
-                anchors.horizontalCenter: parent.horizontalCenter
+                    anchors.topMargin: 96
-                anchors.top: parent.top
+                    clip: true
-                anchors.topMargin: 96
-                clip: true
-                currentIndex: 0
-                width: 444
-
-                // stack index 0
-                Onboarding {
-                    Layout.fillHeight: true
-                    Layout.fillWidth: true
                     colorScheme: root.colorScheme
-
+                    width: 444
-                    onOnboardingAccepted: root.startLogin()
+                    wizard: root
                 }
+                Image {
+                    id: mailLogoWithWordmark
+                    anchors.bottom: parent.bottom
+                    anchors.bottomMargin: 48
+                    anchors.horizontalCenter: parent.horizontalCenter
+                    fillMode: Image.PreserveAspectFit
+                    height: 24
+                    mipmap: true
+                    source: root.colorScheme.mail_logo_with_wordmark
+                }
+            }
+            Rectangle {
+                id: rightHalf
+                Layout.fillHeight: true
+                Layout.fillWidth: true
+                color: root.colorScheme.background_weak
 
-                // stack index 1
+                StackLayout {
-                Login {
+                    id: rightContent
-                    id: login
+                    anchors.bottom: parent.bottom
-                    Layout.fillHeight: true
+                    anchors.bottomMargin: 96
-                    Layout.fillWidth: true
+                    anchors.horizontalCenter: parent.horizontalCenter
-                    colorScheme: root.colorScheme
+                    anchors.top: parent.top
+                    anchors.topMargin: 96
+                    clip: true
+                    currentIndex: 0
+                    width: 444
 
-                    onLoginAbort: {
+                    // stack index 0
-                        root.closeWizard();
+                    Onboarding {
+                        Layout.fillHeight: true
+                        Layout.fillWidth: true
+                        colorScheme: root.colorScheme
+
+                        onOnboardingAccepted: root.startLogin()
+                    }
+
+                    // stack index 1
+                    Login {
+                        id: login
+                        Layout.fillHeight: true
+                        Layout.fillWidth: true
+                        colorScheme: root.colorScheme
+
+                        onLoginAbort: {
+                            root.closeWizard();
+                        }
+                    }
+
+                    // stack index 2
+                    ClientConfigSelector {
+                        id: clientConfigSelector
+                        Layout.fillHeight: true
+                        Layout.fillWidth: true
+                        wizard: root
+                    }
+                    // stack index 3
+                    ClientConfigOutlookSelector {
+                        id: clientConfigOutlookSelector
+                        Layout.fillHeight: true
+                        Layout.fillWidth: true
+                        wizard: root
+                    }
+                    // stack index 4
+                    ClientConfigWarning {
+                        id: clientConfigWarning
+                        Layout.fillHeight: true
+                        Layout.fillWidth: true
+                        wizard: root
                     }
                 }
+                LinkLabel {
+                    id: reportProblemLink
+                    anchors.bottom: parent.bottom
+                    anchors.bottomMargin: 48
+                    anchors.horizontalCenter: parent.horizontalCenter
+                    colorScheme: root.colorScheme
+                    horizontalAlignment: Text.AlignRight
+                    text: link("#", qsTr("Report problem"))
+                    width: 444
 
-                // stack index 2
+                    onLinkActivated: {
-                ClientConfigSelector {
+                        root.visible = false;
-                    id: clientConfigSelector
+                    }
-                    Layout.fillHeight: true
-                    Layout.fillWidth: true
-                    wizard: root
-                }
-                // stack index 3
-                ClientConfigOutlookSelector {
-                    id: clientConfigOutlookSelector
-                    Layout.fillHeight: true
-                    Layout.fillWidth: true
-                    wizard: root
-                }
-                // stack index 4
-                ClientConfigWarning {
-                    id: clientConfigWarning
-                    Layout.fillHeight: true
-                    Layout.fillWidth: true
-                    wizard: root
                 }
             }
-            LinkLabel {
+        }
-                id: reportProblemLink
-                anchors.bottom: parent.bottom
-                anchors.bottomMargin: 48
-                anchors.horizontalCenter: parent.horizontalCenter
-                colorScheme: root.colorScheme
-                horizontalAlignment: Text.AlignRight
-                text: link("#", qsTr("Report problem"))
-                width: 444
 
-                onLinkActivated: {
+        // rootStackLayout index 1
-                    root.visible = false;
+        ClientConfigParameters {
-                }
+            id: clientConfigParameters
-            }
+            Layout.fillHeight: true
+            Layout.fillWidth: true
+            wizard: root
         }
     }
 }