Silverfish/proton-bridge
1
0
Fork 1
mirror of https://github.com/ProtonMail/proton-bridge.git synced 2025-12-11 13:16:53 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

feat(GODT-2772): Apple Mail cert install page.

Browse Source
This commit is contained in:
Xavier Michelon
2023-08-23 10:29:42 +02:00
parent 15c18189d3
commit 1203709ab9
6 changed files with 151 additions and 89 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
internal/frontend/bridge-gui/bridge-gui/Resources.qrc
View File

@ -52,6 +52,7 @@
<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-macos-cert-screenshot.png</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>

148
internal/frontend/bridge-gui/bridge-gui/qml/SetupWizard/ClientConfigAppleMail.qml
View File

@ -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

2
internal/frontend/bridge-gui/bridge-gui/qml/SetupWizard/ClientConfigParameters.qml
View File

@ -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

60
internal/frontend/bridge-gui/bridge-gui/qml/SetupWizard/LeftPane.qml
View File

@ -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

29
internal/frontend/bridge-gui/bridge-gui/qml/SetupWizard/SetupWizard.qml
View File

@ -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 {

BIN
internal/frontend/bridge-gui/bridge-gui/qml/icons/img-macos-cert-screenshot.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 9.2 KiB