diff --git a/internal/frontend/bridge-gui/bridge-gui/Resources.qrc b/internal/frontend/bridge-gui/bridge-gui/Resources.qrc
index 509412c0..90488c98 100644
--- a/internal/frontend/bridge-gui/bridge-gui/Resources.qrc
+++ b/internal/frontend/bridge-gui/bridge-gui/Resources.qrc
@@ -52,6 +52,7 @@
qml/icons/ic-warning-orange.svg
qml/icons/img-client-config-selector.svg
qml/icons/img-client-config-success.svg
+ qml/icons/img-macos-cert-screenshot.png
qml/icons/img-mail-clients.svg
qml/icons/img-mail-logo-wordmark-dark.svg
qml/icons/img-mail-logo-wordmark.svg
diff --git a/internal/frontend/bridge-gui/bridge-gui/qml/SetupWizard/ClientConfigAppleMail.qml b/internal/frontend/bridge-gui/bridge-gui/qml/SetupWizard/ClientConfigAppleMail.qml
index 1cd093c5..61c30eb3 100644
--- a/internal/frontend/bridge-gui/bridge-gui/qml/SetupWizard/ClientConfigAppleMail.qml
+++ b/internal/frontend/bridge-gui/bridge-gui/qml/SetupWizard/ClientConfigAppleMail.qml
@@ -20,18 +20,23 @@ import Proton
Item {
id: root
enum Screen {
- CertificateInstall = 0,
- ProfileInstall = 1
+ CertificateInstall,
+ ProfileInstall
}
property var wizard
- function showAutoConfig() {
- certInstallButton.loading = false;
+ signal appleMailAutoconfigCertificateInstallPageShown
+ signal appleMailAutoconfigProfileInstallPageShow
+
+ function showAutoconfig() {
+ certificateInstall.waitingForCert = false;
if (Backend.isTLSCertificateInstalled()) {
stack.currentIndex = ClientConfigAppleMail.Screen.ProfileInstall;
+ appleMailAutoconfigProfileInstallPageShow();
} else {
stack.currentIndex = ClientConfigAppleMail.Screen.CertificateInstall;
+ appleMailAutoconfigCertificateInstallPageShown();
}
}
@@ -40,67 +45,102 @@ Item {
anchors.fill: parent
// stack index 0
- ColumnLayout {
+ Item {
id: certificateInstall
+
+ property bool waitingForCert: false
+
Layout.fillHeight: true
Layout.fillWidth: true
- Connections {
- function onCertificateInstallCanceled() {
- // Note: this will lead to an error message in the final version.
- certInstallButton.loading = false;
- console.error("Certificate installation was canceled");
- }
- function onCertificateInstallFailed() {
- // Note: this will lead to an error page later.
- certInstallButton.loading = false;
- console.error("Certificate installation failed");
- }
- function onCertificateInstallSuccess() {
- certInstallButton.loading = false;
- console.error("Certificate installed successfully");
- stack.currentIndex = ClientConfigAppleMail.Screen.ProfileInstall;
- }
+ ColumnLayout {
+ anchors.left: parent.left
+ anchors.right: parent.right
+ anchors.verticalCenter: parent.verticalCenter
+ spacing: 24
- target: Backend
- }
- Label {
- Layout.alignment: Qt.AlignHCenter
- Layout.fillWidth: true
- colorScheme: wizard.colorScheme
- horizontalAlignment: Text.AlignHCenter
- text: "Certificate install placeholder"
- type: Label.LabelType.Heading
- wrapMode: Text.WordWrap
- }
- Button {
- id: certInstallButton
- Layout.fillWidth: true
- Layout.topMargin: 48
- colorScheme: wizard.colorScheme
- enabled: !loading
- loading: false
- text: "Install Certificate Placeholder"
+ Connections {
+ function onCertificateInstallCanceled() {
+ // Note: this will lead to an error message in the final version.
+ certificateInstall.waitingForCert = false;
+ console.error("Certificate installation was canceled");
+ }
+ function onCertificateInstallFailed() {
+ // Note: this will lead to an error page later.
+ certificateInstall.waitingForCert = false;
+ console.error("Certificate installation failed");
+ }
+ function onCertificateInstallSuccess() {
+ certificateInstall.waitingForCert = false;
+ console.error("Certificate installed successfully");
+ root.showAutoconfig();
+ }
- onClicked: {
- certInstallButton.loading = true;
- Backend.installTLSCertificate();
+ target: Backend
}
- }
- Button {
- Layout.fillWidth: true
- Layout.topMargin: 32
- colorScheme: wizard.colorScheme
- enabled: !certInstallButton.loading
- secondary: true
- text: qsTr("Cancel")
+ ColumnLayout {
+ Layout.fillWidth: true
+ spacing: 16
- onClicked: {
- wizard.closeWizard();
+ Label {
+ Layout.alignment: Qt.AlignHCenter
+ Layout.fillWidth: true
+ colorScheme: wizard.colorScheme
+ horizontalAlignment: Text.AlignHCenter
+ text: "Install the bridge certificate"
+ 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: "After clicking on the button below, a system pop-up will ask you for your credential, please enter your macOS user credentials (not your Proton account’s) and validate."
+ type: Label.LabelType.Body
+ wrapMode: Text.WordWrap
+ }
+ }
+ Image {
+ id: certScreenshot
+ Layout.alignment: Qt.AlignHCenter
+ height: 182
+ opacity: certificateInstall.waitingForCert ? 0.3 : 1.0
+ source: "/qml/icons/img-macos-cert-screenshot.png"
+ width: 140
+ }
+ ColumnLayout {
+ Layout.fillWidth: true
+ spacing: 16
+
+ Button {
+ id: certInstallButton
+ Layout.fillWidth: true
+ colorScheme: wizard.colorScheme
+ enabled: !certificateInstall.waitingForCert
+ loading: certificateInstall.waitingForCert
+ text: "Install the certificate"
+
+ onClicked: {
+ certificateInstall.waitingForCert = true;
+ Backend.installTLSCertificate();
+ }
+ }
+ Button {
+ Layout.fillWidth: true
+ colorScheme: wizard.colorScheme
+ enabled: !certificateInstall.waitingForCert
+ secondary: true
+ text: qsTr("Cancel")
+
+ onClicked: {
+ wizard.closeWizard();
+ }
+ }
}
}
}
-
// stack index 1
ColumnLayout {
id: profileInstall
diff --git a/internal/frontend/bridge-gui/bridge-gui/qml/SetupWizard/ClientConfigParameters.qml b/internal/frontend/bridge-gui/bridge-gui/qml/SetupWizard/ClientConfigParameters.qml
index 14e10f94..e5dd988e 100644
--- a/internal/frontend/bridge-gui/bridge-gui/qml/SetupWizard/ClientConfigParameters.qml
+++ b/internal/frontend/bridge-gui/bridge-gui/qml/SetupWizard/ClientConfigParameters.qml
@@ -70,7 +70,7 @@ Rectangle {
Layout.fillWidth: true
colorScheme: wizard.colorScheme
horizontalAlignment: Text.AlignLeft
- text: (SetupWizard.Client.MicrosoftOutlook === wizard.client) ? qsTr("Are you unsure about your Outlook version or do you need assistance in configuring Outlook?") : qsTr("Do you need assistant is configuring %1?".arg(wizard.clientName()))
+ text: (SetupWizard.Client.MicrosoftOutlook === wizard.client) ? qsTr("Are you unsure about your Outlook version or do you need assistance in configuring Outlook?") : qsTr("Do you need assistance in configuring %1?".arg(wizard.clientName()))
type: Label.LabelType.Body
verticalAlignment: Text.AlignVCenter
wrapMode: Text.WordWrap
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 303498f8..7e04eedc 100644
--- a/internal/frontend/bridge-gui/bridge-gui/qml/SetupWizard/LeftPane.qml
+++ b/internal/frontend/bridge-gui/bridge-gui/qml/SetupWizard/LeftPane.qml
@@ -21,21 +21,33 @@ import ".."
Item {
id: root
- property var wizard
property int iconHeight
- property int iconWidth
property string iconSource
+ property int iconWidth
+ property var wizard
- 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 = 264;
- icon.sourceSize.width = 263;
- Layout.preferredHeight = 72;
- Layout.preferredWidth = 72;
+ function showAppleMailAutoconfig() {
+ titleLabel.text = "";
+ descriptionLabel.text = qsTr("Apple Mail configuration is mostly automated, but in order to work, Bridge needs to install a certificate in your keychain.");
+ linkLabel1.clear();
+ linkLabel2.clear();
+ iconSource = wizard.clientIconSource();
+ iconHeight = 80;
+ iconWidth = 80;
}
+
+ function showAppleMailAutoconfigCertificateInstall() {
+ console.error("showAppleMailAutoconfigCertificateInstall");
+ showAppleMailAutoconfig();
+ linkLabel1.setLink("https://proton.me/support/bridge", qsTr("Why is this certificate needed?"));
+ }
+
+ function showAppleMailAutoconfigProfileInstall() {
+ console.error("showAppleMailAutoconfigProfileInstall");
+ showAppleMailAutoconfig();
+ linkLabel1.setLink("", qsTr("")); // We are not clearing to keep occupying the vertical space.
+ }
+
function showClientSelector() {
titleLabel.text = "";
descriptionLabel.text = qsTr("Bridge is now connected to Proton, and has already started downloading your messages. Let’s now connect your email client to Bridge.");
@@ -46,22 +58,22 @@ Item {
iconWidth = 264;
}
function showLogin() {
- showOnboarding()
- }
+ showOnboarding();
+ }
function showLogin2FA() {
- showOnboarding()
+ showOnboarding();
}
function showLoginMailboxPassword() {
- showOnboarding()
+ showOnboarding();
}
function showOnboarding() {
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();
- iconSource = "/qml/icons/img-welcome.svg"
- iconHeight= 148;
- iconWidth = 265;
+ root.iconSource = "/qml/icons/img-welcome.svg";
+ root.iconHeight = 148;
+ root.iconWidth = 265;
}
Connections {
@@ -83,11 +95,11 @@ Item {
Image {
id: icon
Layout.alignment: Qt.AlignHCenter | Qt.AlignTop
- Layout.preferredHeight: iconHeight
- Layout.preferredWidth: iconWidth
- source: iconSource
- sourceSize.height: iconHeight
- sourceSize.width: iconWidth
+ Layout.preferredHeight: root.iconHeight
+ Layout.preferredWidth: root.iconWidth
+ source: root.iconSource
+ sourceSize.height: root.iconHeight
+ sourceSize.width: root.iconWidth
}
Label {
id: titleLabel
@@ -97,8 +109,8 @@ Item {
horizontalAlignment: Text.AlignHCenter
text: ""
type: Label.LabelType.Heading
- wrapMode: Text.WordWrap
visible: text.length !== 0
+ wrapMode: Text.WordWrap
}
Label {
id: descriptionLabel
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 904a66e4..76bd4fc3 100644
--- a/internal/frontend/bridge-gui/bridge-gui/qml/SetupWizard/SetupWizard.qml
+++ b/internal/frontend/bridge-gui/bridge-gui/qml/SetupWizard/SetupWizard.qml
@@ -40,7 +40,6 @@ Item {
property string address
property int client
- property string clientVersion
property ColorScheme colorScheme
property var user
@@ -82,9 +81,9 @@ Item {
}
function showAppleMailAutoConfig() {
rootStackLayout.currentIndex = SetupWizard.RootStack.TwoPanesView;
- leftContent.showClientSelector();
+ leftContent.showAppleMailAutoconfig();
rightContent.currentIndex = SetupWizard.ContentStack.ClientConfigAppleMail;
- clientConfigAppleMail.showAutoConfig();
+ clientConfigAppleMail.showAutoconfig();
}
function showClientConfig(user, address) {
root.user = user;
@@ -93,12 +92,12 @@ Item {
leftContent.showClientSelector();
rightContent.currentIndex = SetupWizard.ContentStack.ClientConfigSelector;
}
- function showClientParams() {
- rootStackLayout.currentIndex = SetupWizard.RootStack.ClientConfigParameters;
- }
function showClientConfigEnd() {
rootStackLayout.currentIndex = SetupWizard.RootStack.ClientConfigEnd;
}
+ function showClientParams() {
+ rootStackLayout.currentIndex = SetupWizard.RootStack.ClientConfigParameters;
+ }
function showLogin(username = "") {
rootStackLayout.currentIndex = SetupWizard.RootStack.TwoPanesView;
root.address = "";
@@ -109,8 +108,8 @@ Item {
}
function showOnboarding() {
rootStackLayout.currentIndex = SetupWizard.RootStack.TwoPanesView;
- root.address = ""
- root.user = null
+ root.address = "";
+ root.user = null;
leftContent.showOnboarding();
rightContent.currentIndex = SetupWizard.ContentStack.Onboarding;
}
@@ -154,6 +153,16 @@ Item {
clip: true
width: 364
wizard: root
+ Connections {
+ function onAppleMailAutoconfigCertificateInstallPageShown() {
+ leftContent.showAppleMailAutoconfigCertificateInstall();
+ }
+ function onAppleMailAutoconfigProfileInstallPageShow() {
+ leftContent.showAppleMailAutoconfigProfileInstall();
+ }
+
+ target: clientConfigAppleMail
+ }
}
Image {
id: mailLogoWithWordmark
@@ -161,10 +170,10 @@ Item {
anchors.bottomMargin: 40
anchors.horizontalCenter: parent.horizontalCenter
height: 36
- width: 134
+ source: root.colorScheme.mail_logo_with_wordmark
sourceSize.height: 36
sourceSize.width: 134
- source: root.colorScheme.mail_logo_with_wordmark
+ width: 134
}
}
Rectangle {
diff --git a/internal/frontend/bridge-gui/bridge-gui/qml/icons/img-macos-cert-screenshot.png b/internal/frontend/bridge-gui/bridge-gui/qml/icons/img-macos-cert-screenshot.png
new file mode 100644
index 00000000..e0ac953d
Binary files /dev/null and b/internal/frontend/bridge-gui/bridge-gui/qml/icons/img-macos-cert-screenshot.png differ