feat(GODT-2772): client config success screen.

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

@@ -51,6 +51,7 @@
         <file>qml/icons/ic-trash.svg</file>
         <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-mail-clients.svg</file>
         <file>qml/icons/img-mail-logo-wordmark-dark.svg</file>
         <file>qml/icons/img-mail-logo-wordmark.svg</file>
@@ -111,6 +112,7 @@
         <file>qml/SetupWizard/ClientListItem.qml</file>
         <file>qml/SetupWizard/LeftPane.qml</file>
         <file>qml/SetupWizard/ClientConfigAppleMail.qml</file>
+        <file>qml/SetupWizard/ClientConfigEnd.qml</file>
         <file>qml/SetupWizard/ClientConfigParameters.qml</file>
         <file>qml/SetupWizard/ClientConfigSelector.qml</file>
         <file>qml/SetupWizard/HelpButton.qml</file>

internal/frontend/bridge-gui/bridge-gui/qml/Proton/Button.qml

@@ -136,6 +136,7 @@ T.Button {
             text: control.text
             type: labelType
             visible: !control.isIcon
+            verticalAlignment: Text.AlignVCenter
         }
         ColorImage {
             id: iconImage

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

@@ -0,0 +1,101 @@
+// 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: wizard.colorScheme
+    property var wizard
+
+    clip: true
+    color: colorScheme.background_norm
+
+    Item {
+        id: centeredContainer
+        anchors.bottom: parent.bottom
+        anchors.bottomMargin: 84
+        anchors.horizontalCenter: parent.horizontalCenter
+        anchors.top: parent.top
+        anchors.topMargin: 32
+        clip: true
+        width: 364
+
+        ColumnLayout {
+            anchors.left: parent.left
+            anchors.right: parent.right
+            anchors.verticalCenter: parent.verticalCenter
+            spacing: 16
+
+            Image {
+                Layout.alignment: Qt.AlignHCenter
+                Layout.preferredHeight: sourceSize.height
+                Layout.preferredWidth: sourceSize.width
+                source: "/qml/icons/img-client-config-success.svg"
+                sourceSize.height: 104
+                sourceSize.width: 190
+            }
+            Label {
+                Layout.alignment: Qt.AlignHCenter
+                Layout.fillWidth: true
+                colorScheme: wizard.colorScheme
+                horizontalAlignment: Text.AlignHCenter
+                text: qsTr("Congratulations! You're all setup")
+                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: wizard.address
+                type: Label.LabelType.Body
+                wrapMode: Text.WordWrap
+            }
+            Label {
+                Layout.alignment: Qt.AlignHCenter
+                Layout.fillWidth: true
+                colorScheme: wizard.colorScheme
+                horizontalAlignment: Text.AlignHCenter
+                text: qsTr("Your client has been configured. While complete synchronization might take some time, you can already send encrypted emails.")
+                type: Label.LabelType.Body
+                wrapMode: Text.WordWrap
+            }
+            Button {
+                Layout.fillWidth: true
+                colorScheme: root.colorScheme
+                text: qsTr("Done")
+
+                onClicked: wizard.closeWizard()
+            }
+        }
+    }
+    Image {
+        id: mailLogoWithWordmark
+        anchors.bottom: parent.bottom
+        anchors.bottomMargin: 32
+        anchors.horizontalCenter: parent.horizontalCenter
+        height: 36
+        source: root.colorScheme.mail_logo_with_wordmark
+        sourceSize.height: height
+        sourceSize.width: width
+        width: 134
+    }
+}

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

@@ -63,7 +63,7 @@ Rectangle {
                     anchors.margins: 16
                     anchors.right: parent.right
                     anchors.top: parent.top
-                    spacing: 16
+                    spacing: 8
 
                     Label {
                         Layout.fillHeight: true
@@ -77,6 +77,7 @@ Rectangle {
                     }
                     Button {
                         colorScheme: root.colorScheme
+                        icon.source: "/qml/icons/ic-external-link.svg"
                         text: qsTr("Open Guide")
                     }
                 }
@@ -152,7 +153,7 @@ Rectangle {
                 secondaryIsOpaque: true
                 text: qsTr("Continue")
 
-                onClicked: wizard.closeWizard()
+                onClicked: wizard.showClientConfigEnd()
             }
         }
     }

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

@@ -263,6 +263,7 @@ FocusScope {
                     colorScheme: wizard.colorScheme
                     enabled: !signInButton.loading
                     secondary: true
+                    secondaryIsOpaque: true
                     text: qsTr("Cancel")
 
                     onClicked: {
@@ -369,6 +370,7 @@ FocusScope {
                     colorScheme: wizard.colorScheme
                     enabled: !twoFAButton.loading
                     secondary: true
+                    secondaryIsOpaque: true
                     text: qsTr("Cancel")
 
                     onClicked: {
@@ -464,6 +466,7 @@ FocusScope {
                     colorScheme: wizard.colorScheme
                     enabled: !secondPasswordButton.loading
                     secondary: true
+                    secondaryIsOpaque: true
                     text: qsTr("Cancel")
 
                     onClicked: {

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

@@ -34,7 +34,8 @@ Item {
     }
     enum RootStack {
         TwoPanesView,
-        ClientConfigParameters
+        ClientConfigParameters,
+        ClientConfigEnd
     }
 
     property string address
@@ -95,6 +96,9 @@ Item {
     function showClientParams() {
         rootStackLayout.currentIndex = SetupWizard.RootStack.ClientConfigParameters;
     }
+    function showClientConfigEnd() {
+        rootStackLayout.currentIndex = SetupWizard.RootStack.ClientConfigEnd;
+    }
     function showLogin(username = "") {
         rootStackLayout.currentIndex = SetupWizard.RootStack.TwoPanesView;
         root.address = "";
@@ -216,6 +220,14 @@ Item {
             Layout.fillWidth: true
             wizard: root
         }
+
+        // rootStackLayout index 2
+        ClientConfigEnd {
+            id: clientConfigEnd
+            Layout.fillHeight: true
+            Layout.fillWidth: true
+            wizard: root
+        }
     }
     HelpButton {
         wizard: root

internal/frontend/bridge-gui/bridge-gui/qml/icons/ic-external-link.svg

@@ -1,3 +1,4 @@
 <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M14 2L13.2427 2L13.2427 1.99998L13.2426 2L13 2L9 2V3H12.2426L5.76613 9.47651L6.47324 10.1836L13 3.65686V7H14V3V2ZM2 2H5V3H3L3 13L13 13V11H14V14H13H3H2V13V3V2Z" fill="white"/>
+<path d="M12 4.72447L12 8.5C12 8.77614 11.7761 9 11.5 9C11.2239 9 11 8.77614 11 8.5V5.70711L5.35355 11.3536C5.15829 11.5488 4.84171 11.5488 4.64645 11.3536C4.45118 11.1583 4.45118 10.8417 4.64645 10.6464L10.2929 5H7.50002C7.22387 5 7.00002 4.77614 7.00002 4.5C7.00002 4.22386 7.22387 4 7.50002 4L11.2761 3.99999C11.3175 3.99994 11.3769 3.99987 11.4328 4.00452C11.5821 3.98436 11.7388 4.03167 11.8536 4.14645C11.9683 4.26124 12.0157 4.41796 11.9955 4.56731C12.0001 4.62322 12.0001 4.68283 12 4.72447Z" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M3 1C1.89543 1 1 1.89543 1 3V13C1 14.1046 1.89543 15 3 15H13C14.1046 15 15 14.1046 15 13V3C15 1.89543 14.1046 1 13 1H3ZM13 2H3C2.44772 2 2 2.44772 2 3V13C2 13.5523 2.44772 14 3 14H13C13.5523 14 14 13.5523 14 13V3C14 2.44772 13.5523 2 13 2Z" fill="white"/>
 </svg>

internal/frontend/bridge-gui/bridge-gui/qml/icons/img-client-config-success.svg

@@ -0,0 +1,33 @@
+<svg width="190" height="104" viewBox="0 0 190 104" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M95.6666 29C78.0961 29 63.8542 43.2418 63.8542 60.8123V92.8357C63.8542 96.2402 66.6141 99 70.0185 99H121.973C125.013 99 127.479 96.5338 127.479 93.4941V60.8123C127.479 43.2441 113.237 29 95.6666 29ZM113.978 60.6357L100.074 72.3494C97.5638 74.4646 93.8933 74.4646 91.3835 72.3494L77.4789 60.6357C77.4789 50.6953 85.5381 42.6362 95.4785 42.6362H95.9786C105.919 42.6362 113.978 50.6953 113.978 60.6357Z" fill="#6D4AFF"/>
+<path d="M95.6666 29C78.0961 29 63.8542 43.2418 63.8542 60.8123V92.8357C63.8542 96.2402 66.6141 99 70.0185 99H121.973C125.013 99 127.479 96.5338 127.479 93.4941V60.8123C127.479 43.2441 113.237 29 95.6666 29ZM113.978 60.6357L100.074 72.3494C97.5638 74.4646 93.8933 74.4646 91.3835 72.3494L77.4789 60.6357C77.4789 50.6953 85.5381 42.6362 95.4785 42.6362H95.9786C105.919 42.6362 113.978 50.6953 113.978 60.6357Z" fill="url(#paint0_linear_4081_30418)"/>
+<g filter="url(#filter0_i_4081_30418)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M100.096 72.4913C98.6461 73.6649 94.8768 75.3079 91.3975 72.4913C87.9183 69.6747 80.6973 63.4479 77.5218 60.6866H77.5393L77.479 60.6357C77.479 50.6953 85.5382 42.6362 95.4785 42.6362H95.9786C105.919 42.6362 113.978 50.6953 113.978 60.6357L113.918 60.6866H113.972V99H121.973C125.013 99 127.479 96.5338 127.479 93.4941V60.8123C127.479 43.2441 113.237 29 95.6666 29C78.0961 29 63.8542 43.2418 63.8542 60.8123V62.8243L83.5277 79.7398C84.9774 81.1205 88.7881 83.0534 92.4331 79.7398C96.078 76.4262 99.0603 73.5268 100.096 72.4913Z" fill="url(#paint1_radial_4081_30418)"/>
+</g>
+<ellipse cx="128.5" cy="35.9999" rx="16" ry="15.9999" fill="url(#paint2_linear_4081_30418)"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M135.227 32.2191C135.659 32.647 135.661 33.3434 135.233 33.7747L127.295 41.7746C127.089 41.9828 126.808 42.0998 126.515 42.0998C126.221 42.0998 125.94 41.9828 125.734 41.7746L121.672 37.6811C121.244 37.2499 121.247 36.5534 121.678 36.1255C122.109 35.6976 122.806 35.7003 123.233 36.1315L126.515 39.4381L133.672 32.2251C134.1 31.7939 134.796 31.7912 135.227 32.2191Z" fill="white"/>
+<defs>
+<filter id="filter0_i_4081_30418" x="62.8663" y="29" width="64.6127" height="72.7562" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dx="-0.987903" dy="2.75625"/>
+<feGaussianBlur stdDeviation="7.40927"/>
+<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0.462745 0 0 0 0 0.337255 0 0 0 0 1 0 0 0 0.24 0"/>
+<feBlend mode="normal" in2="shape" result="effect1_innerShadow_4081_30418"/>
+</filter>
+<linearGradient id="paint0_linear_4081_30418" x1="66.1324" y1="107.077" x2="75.659" y2="80.1539" gradientUnits="userSpaceOnUse">
+<stop stop-color="#28B0E8"/>
+<stop offset="1" stop-color="#C5B7FF" stop-opacity="0"/>
+</linearGradient>
+<radialGradient id="paint1_radial_4081_30418" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(123.728 104.799) rotate(-138.034) scale(80.5247 65.8384)">
+<stop stop-color="#E2DBFF"/>
+<stop offset="1" stop-color="#6D4AFF"/>
+</radialGradient>
+<linearGradient id="paint2_linear_4081_30418" x1="130.158" y1="17.6667" x2="130.308" y2="52" gradientUnits="userSpaceOnUse">
+<stop stop-color="#2AF091"/>
+<stop offset="1" stop-color="#00C5A1"/>
+</linearGradient>
+</defs>
+</svg>