From 83b842b19dbfa29ecbf81f049057688efbd30f8f Mon Sep 17 00:00:00 2001 From: Xavier Michelon Date: Tue, 8 Aug 2023 16:55:05 +0200 Subject: [PATCH] feat(GODT-2767): per client configuration left pane + refactoring. [skip-ci] --- .../bridge-gui/bridge-gui/Resources.qrc | 4 +- .../qml/SetupWizard/ClientConfigSelector.qml | 2 + .../bridge-gui/qml/SetupWizard/LeftPane.qml | 29 ++- .../{LoginRightPane.qml => Login.qml} | 0 ...OnboardingRightPane.qml => Onboarding.qml} | 0 .../qml/SetupWizard/SetupWizard.qml | 46 ++++- .../qml/icons/ic-mozilla-thunderbird.svg | 190 ++++++++++-------- 7 files changed, 175 insertions(+), 96 deletions(-) rename internal/frontend/bridge-gui/bridge-gui/qml/SetupWizard/{LoginRightPane.qml => Login.qml} (100%) rename internal/frontend/bridge-gui/bridge-gui/qml/SetupWizard/{OnboardingRightPane.qml => Onboarding.qml} (100%) diff --git a/internal/frontend/bridge-gui/bridge-gui/Resources.qrc b/internal/frontend/bridge-gui/bridge-gui/Resources.qrc index 2eb690cf..30269cb5 100644 --- a/internal/frontend/bridge-gui/bridge-gui/Resources.qrc +++ b/internal/frontend/bridge-gui/bridge-gui/Resources.qrc @@ -113,8 +113,8 @@ qml/SetupWizard/ClientConfigSelector.qml qml/SetupWizard/ClientConfigWarning.qml qml/SetupWizard/SetupWizard.qml - qml/SetupWizard/LoginRightPane.qml - qml/SetupWizard/OnboardingRightPane.qml + qml/SetupWizard/Login.qml + qml/SetupWizard/Onboarding.qml qml/SetupWizard/StepDescriptionBox.qml qml/SignIn.qml qml/ConnectionModeSettings.qml diff --git a/internal/frontend/bridge-gui/bridge-gui/qml/SetupWizard/ClientConfigSelector.qml b/internal/frontend/bridge-gui/bridge-gui/qml/SetupWizard/ClientConfigSelector.qml index 1081c75c..9fb87bc8 100644 --- a/internal/frontend/bridge-gui/bridge-gui/qml/SetupWizard/ClientConfigSelector.qml +++ b/internal/frontend/bridge-gui/bridge-gui/qml/SetupWizard/ClientConfigSelector.qml @@ -72,6 +72,7 @@ Item { onClicked: { wizard.client = SetupWizard.Client.MozillaThunderbird; + wizard.showClientWarning(); } } ClientListItem { @@ -82,6 +83,7 @@ Item { onClicked: { wizard.client = SetupWizard.Client.Generic; + wizard.showClientWarning(); } } Item { diff --git a/internal/frontend/bridge-gui/bridge-gui/qml/SetupWizard/LeftPane.qml b/internal/frontend/bridge-gui/bridge-gui/qml/SetupWizard/LeftPane.qml index df16ad11..5e9e59d0 100644 --- a/internal/frontend/bridge-gui/bridge-gui/qml/SetupWizard/LeftPane.qml +++ b/internal/frontend/bridge-gui/bridge-gui/qml/SetupWizard/LeftPane.qml @@ -20,7 +20,7 @@ import ".." Item { id: root - + property var wizard property ColorScheme colorScheme function showClientSelector() { @@ -29,23 +29,38 @@ Item { linkLabel1.clear(); linkLabel2.clear(); icon.source = "/qml/icons/img-mail-clients.svg"; + } + + function showClientConfigCommon() { + const clientName = wizard.clientName(); + titleLabel.text = qsTr("Configure %1").arg(clientName); + descriptionLabel.text = qsTr("We will now guide you through the process of setting up your Proton account in %1.").arg(clientName); + icon.source = wizard.clientIconSource(); icon.sourceSize.height = 128; icon.sourceSize.width = 128; Layout.preferredHeight = 72; Layout.preferredWidth = 72; } + + function showClientConfigWarning() { + showClientConfigCommon(); + linkLabel1.setLink("https://proton.me/support/bridge", qsTr("Why can't I use my Proton password in my email client?")); + } + function showLogin() { descriptionLabel.text = qsTr("Let's start by signing in to your Proton account."); 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."); linkLabel1.clear(); linkLabel2.clear(); showLoginCommon(); } + function showLoginCommon() { titleLabel.text = qsTr("Sign in to your Proton Account"); icon.Layout.preferredHeight = 72; @@ -54,12 +69,14 @@ Item { icon.sourceSize.height = 128; icon.sourceSize.width = 128; } + function showLoginMailboxPassword() { root.description = qsTr("You have secured your account with a separate mailbox password."); linkLabel1.clear(); linkLabel2.clear(); showLoginCommon(); } + function showOnboarding() { titleLabel.text = qsTr("Welcome to\nProton Mail Bridge"); 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. "); @@ -71,22 +88,18 @@ Item { icon.sourceSize.height = 148; icon.sourceSize.width = 265; } + function showOutlookSelector() { - titleLabel.text = qsTr("Configure Outlook"); - descriptionLabel.text = qsTr("We will now guide you through the process of setting up your Proton account in Outlook."); + showClientConfigCommon(); linkLabel1.setLink("https://proton.me/support/bridge", qsTr("My version of Outlook is not listed")); linkLabel2.clear(); - icon.Layout.preferredHeight = 72; - icon.Layout.preferredWidth = 72; - icon.source = "/qml/icons/ic-microsoft-outlook.svg"; - icon.sourceSize.height = 128; - icon.sourceSize.width = 128; } Connections { function onLogin2FARequested() { showLogin2FA(); } + function onLogin2PasswordRequested() { showLoginMailboxPassword(); } diff --git a/internal/frontend/bridge-gui/bridge-gui/qml/SetupWizard/LoginRightPane.qml b/internal/frontend/bridge-gui/bridge-gui/qml/SetupWizard/Login.qml similarity index 100% rename from internal/frontend/bridge-gui/bridge-gui/qml/SetupWizard/LoginRightPane.qml rename to internal/frontend/bridge-gui/bridge-gui/qml/SetupWizard/Login.qml diff --git a/internal/frontend/bridge-gui/bridge-gui/qml/SetupWizard/OnboardingRightPane.qml b/internal/frontend/bridge-gui/bridge-gui/qml/SetupWizard/Onboarding.qml similarity index 100% rename from internal/frontend/bridge-gui/bridge-gui/qml/SetupWizard/OnboardingRightPane.qml rename to internal/frontend/bridge-gui/bridge-gui/qml/SetupWizard/Onboarding.qml diff --git a/internal/frontend/bridge-gui/bridge-gui/qml/SetupWizard/SetupWizard.qml b/internal/frontend/bridge-gui/bridge-gui/qml/SetupWizard/SetupWizard.qml index d7e70a85..d116c623 100644 --- a/internal/frontend/bridge-gui/bridge-gui/qml/SetupWizard/SetupWizard.qml +++ b/internal/frontend/bridge-gui/bridge-gui/qml/SetupWizard/SetupWizard.qml @@ -34,11 +34,42 @@ Item { property string userID property bool wasSignedOut + function clientIconSource() { + switch (client) { + case SetupWizard.Client.AppleMail: + return "/qml/icons/ic-apple-mail.svg"; + case SetupWizard.Client.MicrosoftOutlook: + return "/qml/icons/ic-microsoft-outlook.svg"; + case SetupWizard.Client.MozillaThunderbird: + return "/qml/icons/ic-mozilla-thunderbird.svg"; + case SetupWizard.Client.Generic: + return "/qml/icons/ic-other-mail-clients.svg"; + default: + console.error("Unknown mail client " + client) + return "/qml/icons/ic-other-mail-clients.svg"; + } + } + + function clientName() { + switch (client) { + case SetupWizard.Client.AppleMail: + return "Apple Mail"; + case SetupWizard.Client.MicrosoftOutlook: + return "Outlook"; + case SetupWizard.Client.MozillaThunderbird: + return "Thunderbird"; + case SetupWizard.Client.Generic: + return "your email client"; + default: + console.error("Unknown mail client " + client) + return "your email client"; + } + } + function closeWizard() { root.visible = false; } function showOutlookSelector() { - console.error("showOutlookSelector()"); root.visible = true; leftContent.showOutlookSelector(); rightContent.currentIndex = 3; @@ -60,13 +91,12 @@ Item { root.wasSignedOut = wasSignedOut; leftContent.showLogin(); rightContent.currentIndex = 1; - loginRightPane.reset(true); + login.reset(true); } function showClientWarning() { - console.error("showClientWarning()"); root.visible = true; - //leftContent.showWarning(); + leftContent.showClientConfigWarning(); rightContent.currentIndex = 4 } @@ -89,6 +119,7 @@ Item { LeftPane { id: leftContent + anchors.bottom: parent.bottom anchors.bottomMargin: 96 anchors.horizontalCenter: parent.horizontalCenter @@ -97,6 +128,7 @@ Item { clip: true colorScheme: root.colorScheme width: 444 + wizard: root } Image { id: mailLogoWithWordmark @@ -127,7 +159,7 @@ Item { width: 444 // stack index 0 - OnboardingRightPane { + Onboarding { Layout.fillHeight: true Layout.fillWidth: true colorScheme: root.colorScheme @@ -136,8 +168,8 @@ Item { } // stack index 1 - LoginRightPane { - id: loginRightPane + Login { + id: login Layout.fillHeight: true Layout.fillWidth: true colorScheme: root.colorScheme diff --git a/internal/frontend/bridge-gui/bridge-gui/qml/icons/ic-mozilla-thunderbird.svg b/internal/frontend/bridge-gui/bridge-gui/qml/icons/ic-mozilla-thunderbird.svg index 6c41b98d..83759ef0 100644 --- a/internal/frontend/bridge-gui/bridge-gui/qml/icons/ic-mozilla-thunderbird.svg +++ b/internal/frontend/bridge-gui/bridge-gui/qml/icons/ic-mozilla-thunderbird.svg @@ -1,80 +1,112 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +