feat(GODT-2767): login left pane. [skip-ci]

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

@@ -109,6 +109,7 @@
         <file>qml/SettingsView.qml</file>
         <file>qml/SetupGuide.qml</file>
         <file>qml/SetupWizard/SetupWizard.qml</file>
+        <file>qml/SetupWizard/LoginLeftPane.qml</file>
         <file>qml/SetupWizard/OnboardingLeftPane.qml</file>
         <file>qml/SetupWizard/OnboardingRightPane.qml</file>
         <file>qml/SetupWizard/StepDescriptionBox.qml</file>

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

@@ -0,0 +1,80 @@
+// 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: qsTr("Let's start by signing in to your Proton account.")
+
+    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 {
+            Layout.alignment: Qt.AlignHCenter
+            Layout.fillWidth: false
+            Layout.topMargin: 96
+            colorScheme: root.colorScheme
+            horizontalAlignment: Text.AlignHCenter
+            text: link("https://proton.me/mail/pricing", qsTr("Create or upgrade your account"))
+            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/OnboardingRightPane.qml

@@ -22,6 +22,8 @@ Item {
 
     property ColorScheme colorScheme
 
+    signal onboardingAccepted
+
     ColumnLayout {
         anchors.left: parent.left
         anchors.right: parent.right
@@ -38,24 +40,25 @@ Item {
         }
         StepDescriptionBox {
             colorScheme: root.colorScheme
-            description: "Connect Bridge to your Proton account"
+            description: qsTr("Connect Bridge to your Proton account")
             icon: "/qml/icons/ic-bridge.svg"
-            title: "Step 1"
             iconSize: 48
+            title: qsTr("Step 1")
         }
         StepDescriptionBox {
             colorScheme: root.colorScheme
-            description: "Connect your email client to Bridge"
+            description: qsTr("Connect your email client to Bridge")
             icon: "/qml/icons/img-mail-clients.svg"
-            title: "Step 2"
             iconSize: 64
-
+            title: qsTr("Step 2")
         }
         Button {
             Layout.alignment: Qt.AlignHCenter
             Layout.preferredWidth: 320
             colorScheme: root.colorScheme
-            text: "Let's start"
+            text: qsTr("Let's start")
+
+            onClicked: root.onboardingAccepted();
         }
     }
 }

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

@@ -24,6 +24,13 @@ Item {
 
     function start() {
         root.visible = true;
+        leftContent.currentIndex = 0;
+        rightContent.currentIndex = 0;
+    }
+    function startLogin() {
+        root.visible = true;
+        leftContent.currentIndex = 1;
+        rightContent.currentIndex = 1;
     }
 
     RowLayout {
@@ -36,17 +43,27 @@ Item {
             Layout.fillWidth: true
             color: root.colorScheme.background_norm
 
-            Item {
+            StackLayout {
                 id: leftContent
                 anchors.bottom: parent.bottom
                 anchors.bottomMargin: 96
                 anchors.horizontalCenter: parent.horizontalCenter
                 anchors.top: parent.top
                 anchors.topMargin: 96
+                currentIndex: 0
                 width: 444
 
+                // stack index 0
                 OnboardingLeftPane {
-                    anchors.fill: parent
+                    Layout.fillHeight: true
+                    Layout.fillWidth: true
+                    colorScheme: root.colorScheme
+                }
+
+                // stack index 1
+                LoginLeftPane {
+                    Layout.fillHeight: true
+                    Layout.fillWidth: true
                     colorScheme: root.colorScheme
                 }
             }
@@ -55,13 +72,10 @@ Item {
                 anchors.bottom: parent.bottom
                 anchors.bottomMargin: 48
                 anchors.horizontalCenter: parent.horizontalCenter
-                antialiasing: true
                 fillMode: Image.PreserveAspectFit
                 height: 24
-                smooth: true
                 source: root.colorScheme.mail_logo_with_wordmark
-                sourceSize.height: 24
+                mipmap: true
-                sourceSize.width: 142
             }
         }
         Rectangle {
@@ -70,18 +84,30 @@ Item {
             Layout.fillWidth: true
             color: root.colorScheme.background_weak
 
-            Item {
+            StackLayout {
                 id: rightContent
                 anchors.bottom: parent.bottom
                 anchors.bottomMargin: 96
                 anchors.horizontalCenter: parent.horizontalCenter
                 anchors.top: parent.top
                 anchors.topMargin: 96
+                currentIndex: 0
                 width: 444
 
+                // stack index 0
                 OnboardingRightPane {
-                    anchors.fill: parent
+                    Layout.fillHeight: true
+                    Layout.fillWidth: true
                     colorScheme: root.colorScheme
+
+                    onOnboardingAccepted: root.startLogin()
+                }
+
+                // stack index 1
+                Rectangle {
+                    Layout.fillHeight: true
+                    Layout.fillWidth: true
+                    color: "#f00"
                 }
             }
             Label {