feat(GODT-2772): new login layout.

internal/frontend/bridge-gui/bridge-gui-tester/GRPCService.cpp

@@ -400,7 +400,7 @@ Status GRPCService::Login(ServerContext *, LoginRequest const *request, Empty *)
         return Status::OK;
     }
     if (usersTab.nextUserTwoPasswordsRequired()) {
-        qtProxy_.sendDelayedEvent(newLoginTwoPasswordsRequestedEvent());
+        qtProxy_.sendDelayedEvent(newLoginTwoPasswordsRequestedEvent(loginUsername_));
         return Status::OK;
     }
 
@@ -425,7 +425,7 @@ Status GRPCService::Login2FA(ServerContext *, LoginRequest const *request, Empty
         return Status::OK;
     }
     if (usersTab.nextUserTwoPasswordsRequired()) {
-        qtProxy_.sendDelayedEvent(newLoginTwoPasswordsRequestedEvent());
+        qtProxy_.sendDelayedEvent(newLoginTwoPasswordsRequestedEvent(loginUsername_));
         return Status::OK;
     }
 

internal/frontend/bridge-gui/bridge-gui/QMLBackend.h

@@ -233,7 +233,7 @@ signals: // Signals received from the Go backend, to be forwarded to QML
     void login2FARequested(QString const &username); ///< Signal for the 'login2FARequested' gRPC stream event.
     void login2FAError(QString const &errorMsg); ///< Signal for the 'login2FAError' gRPC stream event.
     void login2FAErrorAbort(QString const &errorMsg); ///< Signal for the 'login2FAErrorAbort' gRPC stream event.
-    void login2PasswordRequested(); ///< Signal for the 'login2PasswordRequested' gRPC stream event.
+    void login2PasswordRequested(QString const &username); ///< Signal for the 'login2PasswordRequested' gRPC stream event.
     void login2PasswordError(QString const &errorMsg); ///< Signal for the 'login2PasswordError' gRPC stream event.
     void login2PasswordErrorAbort(QString const &errorMsg); ///< Signal for the 'login2PasswordErrorAbort' gRPC stream event.
     void loginFinished(int index, bool wasSignedOut); ///< Signal for the 'loginFinished' gRPC stream event.

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

@@ -45,33 +45,16 @@ Item {
         icon.source = "/qml/icons/img-mail-clients.svg";
     }
     function showLogin() {
-        descriptionLabel.text = qsTr("Let's start by signing in to your Proton account.");
+        showOnboarding()
-        linkLabel1.setLink("https://proton.me/mail/pricing", qsTr("Create or upgrade your account"));
-        linkLabel2.clear();
-        showLoginCommon();
      }
     function showLogin2FA() {
-        descriptionLabel.text = qsTr("You have enabled two-factor authentication. Please enter the 6-digit code provided by your authenticator application.");
+        showOnboarding()
-        linkLabel1.clear();
-        linkLabel2.clear();
-        showLoginCommon();
-    }
-    function showLoginCommon() {
-        titleLabel.text = qsTr("Sign in to your Proton Account");
-        icon.Layout.preferredHeight = 72;
-        icon.Layout.preferredWidth = 72;
-        icon.source = "/qml/icons/ic-bridge.svg";
-        icon.sourceSize.height = 128;
-        icon.sourceSize.width = 128;
     }
     function showLoginMailboxPassword() {
-        descriptionLabel.text = qsTr("You have secured your account with a separate mailbox password.");
+        showOnboarding()
-        linkLabel1.clear();
-        linkLabel2.clear();
-        showLoginCommon();
     }
     function showOnboarding() {
-        titleLabel.text = qsTr("Welcome to\nProton Mail Bridge");
+        titleLabel.text = (Backend.users.count === 0) ? qsTr("Welcome to\nProton Mail Bridge") : qsTr("Add a Proton Mail account");
         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.setLink("https://proton.me/support/bridge", qsTr("Why do I need Bridge?"));
         linkLabel2.clear();
@@ -81,11 +64,6 @@ Item {
         icon.sourceSize.height = 148;
         icon.sourceSize.width = 265;
     }
-    function showOutlookSelector() {
-        showClientConfigCommon();
-        linkLabel1.setLink("https://proton.me/support/bridge", qsTr("My version of Outlook is not listed"));
-        linkLabel2.clear();
-    }
 
     Connections {
         function onLogin2FARequested() {

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

@@ -43,9 +43,6 @@ FocusScope {
         mailboxPasswordLayout.reset();
     }
 
-    implicitHeight: children[0].implicitHeight
-    implicitWidth: children[0].implicitWidth
-
     StackLayout {
         id: stackLayout
         function loginFailed() {
@@ -91,9 +88,10 @@ FocusScope {
                 root.reset();
                 errorLabel.text = qsTr("Incorrect login credentials. Please try again.");
             }
-            function onLogin2PasswordRequested() {
+            function onLogin2PasswordRequested(username) {
                 console.assert(stackLayout.currentIndex === Login.RootStack.Login || stackLayout.currentIndex === Login.RootStack.TOTP, "Unexpected login2PasswordRequested");
                 stackLayout.currentIndex = Login.RootStack.MailboxPassword;
+                mailboxPasswordUsernameLabel.text = username;
                 secondPasswordTextField.focus = true;
             }
             function onLoginAlreadyLoggedIn(_) {
@@ -124,6 +122,7 @@ FocusScope {
 
             target: Backend
         }
+        Item {
             ColumnLayout {
                 id: loginLayout
                 function reset(clearUsername = false) {
@@ -142,26 +141,35 @@ FocusScope {
                     passwordTextField.text = "";
                 }
 
-            spacing: 0
+                anchors.left: parent.left
+                anchors.right: parent.right
+                anchors.verticalCenter: parent.verticalCenter
+                spacing: 16
+
+                ColumnLayout {
+                    Layout.fillWidth: true
+                    spacing: 8
 
                     Label {
                         Layout.alignment: Qt.AlignHCenter
+                        Layout.fillWidth: true
                         colorScheme: wizard.colorScheme
+                        horizontalAlignment: Text.AlignHCenter
                         text: qsTr("Sign in")
-                type: Label.LabelType.Heading
+                        type: Label.LabelType.Title
                     }
                     Label {
-                id: subTitle
                         Layout.alignment: Qt.AlignHCenter
-                Layout.topMargin: 8
+                        Layout.fillWidth: true
                         color: wizard.colorScheme.text_weak
                         colorScheme: wizard.colorScheme
+                        horizontalAlignment: Text.AlignHCenter
                         text: qsTr("Enter your Proton Account details.")
-                type: Label.LabelType.Lead
+                        type: Label.LabelType.Body
+                    }
                 }
                 RowLayout {
                     Layout.fillWidth: true
-                Layout.topMargin: 48
                     spacing: 0
                     visible: errorLabel.text.length > 0
 
@@ -184,7 +192,6 @@ FocusScope {
                 TextField {
                     id: usernameTextField
                     Layout.fillWidth: true
-                Layout.topMargin: 48
                     colorScheme: wizard.colorScheme
                     focus: true
                     label: qsTr("Email or username")
@@ -208,7 +215,6 @@ FocusScope {
                 TextField {
                     id: passwordTextField
                     Layout.fillWidth: true
-                Layout.topMargin: 48
                     colorScheme: wizard.colorScheme
                     echoMode: TextInput.Password
                     label: qsTr("Password")
@@ -244,7 +250,6 @@ FocusScope {
                     }
 
                     Layout.fillWidth: true
-                Layout.topMargin: 48
                     colorScheme: wizard.colorScheme
                     enabled: !loading
                     text: loading ? qsTr("Signing in") : qsTr("Sign in")
@@ -255,7 +260,6 @@ FocusScope {
                 }
                 Button {
                     Layout.fillWidth: true
-                Layout.topMargin: 32
                     colorScheme: wizard.colorScheme
                     enabled: !signInButton.loading
                     secondary: true
@@ -265,7 +269,15 @@ FocusScope {
                         root.abort();
                     }
                 }
+                LinkLabel {
+                    id: linkLabel
+                    Layout.alignment: Qt.AlignHCenter
+                    colorScheme: wizard.colorScheme
+                    text: linkLabel.link("https://proton.me/mail/pricing", qsTr("Create or upgrade your account"))
                 }
+            }
+        }
+        Item {
             ColumnLayout {
                 id: totpLayout
                 function reset() {
@@ -276,27 +288,47 @@ FocusScope {
                     twoFactorPasswordTextField.text = "";
                 }
 
-            spacing: 0
+                anchors.left: parent.left
+                anchors.right: parent.right
+                anchors.verticalCenter: parent.verticalCenter
+                spacing: 16
+
+                ColumnLayout {
+                    Layout.fillWidth: true
+                    spacing: 8
 
                     Label {
-                Layout.alignment: Qt.AlignCenter
+                        Layout.alignment: Qt.AlignHCenter
+                        Layout.fillWidth: true
                         colorScheme: wizard.colorScheme
+                        horizontalAlignment: Text.AlignHCenter
                         text: qsTr("Two-factor authentication")
-                type: Label.LabelType.Heading
+                        type: Label.LabelType.Title
                     }
                     Label {
                         id: twoFactorUsernameLabel
-                Layout.alignment: Qt.AlignCenter
+                        Layout.alignment: Qt.AlignHCenter
-                Layout.topMargin: 8
+                        Layout.fillWidth: true
                         color: wizard.colorScheme.text_weak
                         colorScheme: wizard.colorScheme
-                type: Label.LabelType.Lead
+                        horizontalAlignment: Text.AlignHCenter
+                        text: ""
+                        type: Label.LabelType.Body
+                    }
+                }
+                Label {
+                    id: descriptionLabel
+                    Layout.alignment: Qt.AlignHCenter
+                    Layout.fillWidth: true
+                    colorScheme: wizard.colorScheme
+                    horizontalAlignment: Text.AlignHCenter
+                    text: qsTr("You have enabled two-factor authentication. Please enter the 6-digit code provided by your authenticator application.")
+                    type: Label.LabelType.Body
+                    wrapMode: Text.WordWrap
                 }
                 TextField {
                     id: twoFactorPasswordTextField
                     Layout.fillWidth: true
-                Layout.topMargin: 32
-                assistiveText: qsTr("Enter the 6-digit code")
                     colorScheme: wizard.colorScheme
                     label: qsTr("Two-factor code")
                     validateOnEditingFinished: false
@@ -318,7 +350,6 @@ FocusScope {
                 Button {
                     id: twoFAButton
                     Layout.fillWidth: true
-                Layout.topMargin: 48
                     colorScheme: wizard.colorScheme
                     enabled: !loading
                     text: loading ? qsTr("Authenticating") : qsTr("Authenticate")
@@ -335,7 +366,6 @@ FocusScope {
                 }
                 Button {
                     Layout.fillWidth: true
-                Layout.topMargin: 32
                     colorScheme: wizard.colorScheme
                     enabled: !twoFAButton.loading
                     secondary: true
@@ -346,6 +376,8 @@ FocusScope {
                     }
                 }
             }
+        }
+        Item {
             ColumnLayout {
                 id: mailboxPasswordLayout
                 function reset() {
@@ -356,25 +388,46 @@ FocusScope {
                     secondPasswordTextField.text = "";
                 }
 
-            spacing: 0
+                anchors.left: parent.left
+                anchors.right: parent.right
+                anchors.verticalCenter: parent.verticalCenter
+                spacing: 16
+
+                ColumnLayout {
+                    Layout.fillWidth: true
+                    spacing: 8
 
                     Label {
-                Layout.alignment: Qt.AlignCenter
+                        Layout.alignment: Qt.AlignHCenter
+                        Layout.fillWidth: true
                         colorScheme: wizard.colorScheme
+                        horizontalAlignment: Text.AlignHCenter
                         text: qsTr("Unlock your mailbox")
-                type: Label.LabelType.Heading
+                        type: Label.LabelType.Title
                     }
                     Label {
-                Layout.alignment: Qt.AlignCenter
+                        id: mailboxPasswordUsernameLabel
-                Layout.topMargin: 8
+                        Layout.alignment: Qt.AlignHCenter
+                        Layout.fillWidth: true
                         color: wizard.colorScheme.text_weak
                         colorScheme: wizard.colorScheme
-                type: Label.LabelType.Lead
+                        horizontalAlignment: Text.AlignHCenter
+                        text: ""
+                        type: Label.LabelType.Body
+                    }
+                }
+                Label {
+                    Layout.alignment: Qt.AlignHCenter
+                    Layout.fillWidth: true
+                    colorScheme: wizard.colorScheme
+                    horizontalAlignment: Text.AlignHCenter
+                    text: qsTr("You have secured your account with a separate mailbox password.")
+                    type: Label.LabelType.Body
+                    wrapMode: Text.WordWrap
                 }
                 TextField {
                     id: secondPasswordTextField
                     Layout.fillWidth: true
-                Layout.topMargin: 48
                     colorScheme: wizard.colorScheme
                     echoMode: TextInput.Password
                     label: qsTr("Mailbox password")
@@ -392,7 +445,6 @@ FocusScope {
                 Button {
                     id: secondPasswordButton
                     Layout.fillWidth: true
-                Layout.topMargin: 48
                     colorScheme: wizard.colorScheme
                     enabled: !loading
                     text: loading ? qsTr("Unlocking") : qsTr("Unlock")
@@ -409,7 +461,6 @@ FocusScope {
                 }
                 Button {
                     Layout.fillWidth: true
-                Layout.topMargin: 32
                     colorScheme: wizard.colorScheme
                     enabled: !secondPasswordButton.loading
                     secondary: true
@@ -421,4 +472,5 @@ FocusScope {
                 }
             }
         }
+    }
 }

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

@@ -110,11 +110,6 @@ Item {
         leftContent.showOnboarding();
         rightContent.currentIndex = SetupWizard.ContentStack.Onboarding;
     }
-    function showOutlookSelector() {
-        rootStackLayout.currentIndex = SetupWizard.RootStack.TwoPanesView;
-        leftContent.showOutlookSelector();
-        rightContent.currentIndex = SetupWizard.ContentStack.ClientConfigOutlookSelector;
-    }
 
     Connections {
         function onLoginFinished(userIndex, wasSignedOut) {

internal/frontend/bridge-gui/bridgepp/bridgepp/GRPC/EventFactory.cpp

@@ -278,8 +278,9 @@ SPStreamEvent newLoginTfaRequestedEvent(QString const &username) {
 /// \param[in] username The username.
 /// \return The event.
 //****************************************************************************************************************************************************
-SPStreamEvent newLoginTwoPasswordsRequestedEvent() {
+SPStreamEvent newLoginTwoPasswordsRequestedEvent(QString const &username) {
     auto event = new ::grpc::LoginTwoPasswordsRequestedEvent;
+    event->set_username(username.toStdString());
     auto loginEvent = new grpc::LoginEvent;
     loginEvent->set_allocated_twopasswordrequested(event);
     return wrapLoginEvent(loginEvent);

internal/frontend/bridge-gui/bridgepp/bridgepp/GRPC/EventFactory.h

@@ -42,7 +42,7 @@ SPStreamEvent newShowMainWindowEvent(); ///< Create a new ShowMainWindowEvent ev
 // Login events
 SPStreamEvent newLoginError(grpc::LoginErrorType error, QString const &message); ///< Create a new LoginError event.
 SPStreamEvent newLoginTfaRequestedEvent(QString const &username); ///< Create a new LoginTfaRequestedEvent event.
-SPStreamEvent newLoginTwoPasswordsRequestedEvent(); ///< Create a new LoginTwoPasswordsRequestedEvent event.
+SPStreamEvent newLoginTwoPasswordsRequestedEvent(QString const &username); ///< Create a new LoginTwoPasswordsRequestedEvent event.
 SPStreamEvent newLoginFinishedEvent(QString const &userID, bool wasSignedOut); ///< Create a new LoginFinishedEvent event.
 SPStreamEvent newLoginAlreadyLoggedInEvent(QString const &userID); ///< Create a new LoginAlreadyLoggedInEvent event.
 

internal/frontend/bridge-gui/bridgepp/bridgepp/GRPC/GRPCClient.cpp

@@ -1212,7 +1212,7 @@ void GRPCClient::processLoginEvent(LoginEvent const &event) {
         break;
     case LoginEvent::kTwoPasswordRequested:
         this->logTrace("Login event received: TwoPasswordRequested.");
-        emit login2PasswordRequested();
+        emit login2PasswordRequested(QString::fromStdString(event.twopasswordrequested().username()));
         break;
     case LoginEvent::kFinished: {
         this->logTrace("Login event received: Finished.");

internal/frontend/bridge-gui/bridgepp/bridgepp/GRPC/GRPCClient.h

@@ -146,10 +146,10 @@ signals:
     void loginUsernamePasswordError(QString const &errMsg);
     void loginFreeUserError();
     void loginConnectionError(QString const &errMsg);
-    void login2FARequested(QString const &userName);
+    void login2FARequested(QString const &username);
     void login2FAError(QString const &errMsg);
     void login2FAErrorAbort(QString const &errMsg);
-    void login2PasswordRequested();
+    void login2PasswordRequested(QString const &username);
     void login2PasswordError(QString const &errMsg);
     void login2PasswordErrorAbort(QString const &errMsg);
     void loginFinished(QString const &userID, bool wasSignedOut);

internal/frontend/grpc/bridge.proto

@@ -319,7 +319,9 @@ message LoginTfaRequestedEvent {
   string username = 1;
 }
 
-message LoginTwoPasswordsRequestedEvent {}
+message LoginTwoPasswordsRequestedEvent {
+  string username = 1;
+}
 
 message LoginFinishedEvent {
   string userID = 1;

internal/frontend/grpc/event_factory.go

@@ -69,8 +69,8 @@ func NewLoginTfaRequestedEvent(username string) *StreamEvent {
 	return loginEvent(&LoginEvent{Event: &LoginEvent_TfaRequested{TfaRequested: &LoginTfaRequestedEvent{Username: username}}})
 }
 
-func NewLoginTwoPasswordsRequestedEvent() *StreamEvent {
+func NewLoginTwoPasswordsRequestedEvent(username string) *StreamEvent {
-	return loginEvent(&LoginEvent{Event: &LoginEvent_TwoPasswordRequested{}})
+	return loginEvent(&LoginEvent{Event: &LoginEvent_TwoPasswordRequested{TwoPasswordRequested: &LoginTwoPasswordsRequestedEvent{Username: username}}})
 }
 
 func NewLoginFinishedEvent(userID string, wasSignedOut bool) *StreamEvent {

internal/frontend/grpc/service_methods.go

@@ -424,7 +424,7 @@ func (s *Service) Login(_ context.Context, login *LoginRequest) (*emptypb.Empty,
 			_ = s.SendEvent(NewLoginTfaRequestedEvent(login.Username))
 
 		case auth.PasswordMode == proton.TwoPasswordMode:
-			_ = s.SendEvent(NewLoginTwoPasswordsRequestedEvent())
+			_ = s.SendEvent(NewLoginTwoPasswordsRequestedEvent(login.Username))
 
 		default:
 			s.finishLogin()
@@ -469,7 +469,7 @@ func (s *Service) Login2FA(_ context.Context, login *LoginRequest) (*emptypb.Emp
 		}
 
 		if s.auth.PasswordMode == proton.TwoPasswordMode {
-			_ = s.SendEvent(NewLoginTwoPasswordsRequestedEvent())
+			_ = s.SendEvent(NewLoginTwoPasswordsRequestedEvent(login.Username))
 			return
 		}
 

internal/frontend/grpc/service_stream.go

@@ -126,7 +126,7 @@ func (s *Service) StartEventTest() error {
 		// login
 		NewLoginError(LoginErrorType_FREE_USER, "error"),
 		NewLoginTfaRequestedEvent(dummyAddress),
-		NewLoginTwoPasswordsRequestedEvent(),
+		NewLoginTwoPasswordsRequestedEvent(dummyAddress),
 		NewLoginFinishedEvent("userID", false),
 		NewLoginAlreadyLoggedInEvent("userID"),