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

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

@@ -21,8 +21,32 @@ Item {
     id: root
 
     property ColorScheme colorScheme
-    property string description: qsTr("Let's start by signing in to your Proton account.")
+    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
@@ -59,13 +83,17 @@ Item {
             wrapMode: Text.WordWrap
         }
         Label {
+            id: linkLabel
             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"))
+            text: root.helpLink
             type: Label.LabelType.Body
+            visible: {
+                root.helpLink !== "";
+            }
 
             onLinkActivated: function (link) {
                 Qt.openUrlExternally(link);

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

@@ -40,34 +40,6 @@ FocusScope {
 
     implicitHeight: children[0].implicitHeight
     implicitWidth: children[0].implicitWidth
-    state: "Page 1"
-
-    states: [
-        State {
-            name: "Page 1"
-
-            PropertyChanges {
-                currentIndex: 0
-                target: stackLayout
-            }
-        },
-        State {
-            name: "Page 2"
-
-            PropertyChanges {
-                currentIndex: 1
-                target: stackLayout
-            }
-        },
-        State {
-            name: "Page 3"
-
-            PropertyChanges {
-                currentIndex: 2
-                target: stackLayout
-            }
-        }
-    ]
 
     StackLayout {
         id: stackLayout
@@ -169,10 +141,9 @@ FocusScope {
 
             Label {
                 Layout.alignment: Qt.AlignHCenter
-                Layout.topMargin: 16
                 colorScheme: root.colorScheme
                 text: qsTr("Sign in")
-                type: Label.LabelType.Title
+                type: Label.LabelType.Heading
             }
             Label {
                 id: subTitle
@@ -181,11 +152,11 @@ FocusScope {
                 color: root.colorScheme.text_weak
                 colorScheme: root.colorScheme
                 text: qsTr("Enter your Proton Account details.")
-                type: Label.LabelType.Body
+                type: Label.LabelType.Lead
             }
             RowLayout {
                 Layout.fillWidth: true
-                Layout.topMargin: 36
+                Layout.topMargin: 48
                 spacing: 0
                 visible: errorLabel.text.length > 0
 
@@ -208,7 +179,7 @@ FocusScope {
             TextField {
                 id: usernameTextField
                 Layout.fillWidth: true
-                Layout.topMargin: 24
+                Layout.topMargin: 48
                 colorScheme: root.colorScheme
                 focus: true
                 label: qsTr("Email or username")
@@ -232,7 +203,7 @@ FocusScope {
             TextField {
                 id: passwordTextField
                 Layout.fillWidth: true
-                Layout.topMargin: 8
+                Layout.topMargin: 48
                 colorScheme: root.colorScheme
                 echoMode: TextInput.Password
                 label: qsTr("Password")
@@ -268,7 +239,7 @@ FocusScope {
                 }
 
                 Layout.fillWidth: true
-                Layout.topMargin: 24
+                Layout.topMargin: 48
                 colorScheme: root.colorScheme
                 enabled: !loading
                 text: loading ? qsTr("Signing in") : qsTr("Sign in")
@@ -278,11 +249,10 @@ FocusScope {
                 }
             }
             Button {
-                id: cancelButton
                 Layout.fillWidth: true
-                Layout.topMargin: 24
+                Layout.topMargin: 32
                 colorScheme: root.colorScheme
-                enabled: !loading
+                enabled: !signInButton.loading
                 secondary: true
                 text: qsTr("Cancel")
 
@@ -305,7 +275,6 @@ FocusScope {
 
             Label {
                 Layout.alignment: Qt.AlignCenter
-                Layout.topMargin: 16
                 colorScheme: root.colorScheme
                 text: qsTr("Two-factor authentication")
                 type: Label.LabelType.Heading
@@ -344,7 +313,7 @@ FocusScope {
             Button {
                 id: twoFAButton
                 Layout.fillWidth: true
-                Layout.topMargin: 24
+                Layout.topMargin: 48
                 colorScheme: root.colorScheme
                 enabled: !loading
                 text: loading ? qsTr("Authenticating") : qsTr("Authenticate")
@@ -359,6 +328,18 @@ FocusScope {
                     Backend.login2FA(usernameTextField.text, Qt.btoa(twoFactorPasswordTextField.text));
                 }
             }
+            Button {
+                Layout.fillWidth: true
+                Layout.topMargin: 32
+                colorScheme: root.colorScheme
+                enabled: !twoFAButton.loading
+                secondary: true
+                text: qsTr("Cancel")
+
+                onClicked: {
+                    root.abort();
+                }
+            }
         }
         ColumnLayout {
             id: login2PasswordLayout
@@ -374,15 +355,21 @@ FocusScope {
 
             Label {
                 Layout.alignment: Qt.AlignCenter
-                Layout.topMargin: 16
                 colorScheme: root.colorScheme
                 text: qsTr("Unlock your mailbox")
                 type: Label.LabelType.Heading
             }
+            Label {
+                Layout.alignment: Qt.AlignCenter
+                Layout.topMargin: 8
+                color: root.colorScheme.text_weak
+                colorScheme: root.colorScheme
+                type: Label.LabelType.Lead
+            }
             TextField {
                 id: secondPasswordTextField
                 Layout.fillWidth: true
-                Layout.topMargin: 8 + implicitHeight + 24 + subTitle.implicitHeight
+                Layout.topMargin: 48
                 colorScheme: root.colorScheme
                 echoMode: TextInput.Password
                 label: qsTr("Mailbox password")
@@ -400,7 +387,7 @@ FocusScope {
             Button {
                 id: secondPasswordButton
                 Layout.fillWidth: true
-                Layout.topMargin: 24
+                Layout.topMargin: 48
                 colorScheme: root.colorScheme
                 enabled: !loading
                 text: loading ? qsTr("Unlocking") : qsTr("Unlock")
@@ -415,6 +402,18 @@ FocusScope {
                     Backend.login2Password(usernameTextField.text, Qt.btoa(secondPasswordTextField.text));
                 }
             }
+            Button {
+                Layout.fillWidth: true
+                Layout.topMargin: 32
+                colorScheme: root.colorScheme
+                enabled: !secondPasswordButton.loading
+                secondary: true
+                text: qsTr("Cancel")
+
+                onClicked: {
+                    root.abort();
+                }
+            }
         }
     }
 }

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

@@ -34,6 +34,7 @@ Item {
         root.visible = true;
         leftContent.currentIndex = 1;
         rightContent.currentIndex = 1;
+        loginLeftPane.showSignIn();
         loginRightPane.reset(true);
     }
 
@@ -61,6 +62,7 @@ Item {
                 anchors.horizontalCenter: parent.horizontalCenter
                 anchors.top: parent.top
                 anchors.topMargin: 96
+                clip: true
                 currentIndex: 0
                 width: 444
 
@@ -73,6 +75,7 @@ Item {
 
                 // stack index 1
                 LoginLeftPane {
+                    id: loginLeftPane
                     Layout.fillHeight: true
                     Layout.fillWidth: true
                     colorScheme: root.colorScheme
@@ -103,6 +106,7 @@ Item {
                 anchors.top: parent.top
                 anchors.topMargin: 96
                 currentIndex: 0
+                clip: true
                 width: 444
 
                 // stack index 0