diff --git a/internal/frontend/bridge-gui/bridge-gui/Resources.qrc b/internal/frontend/bridge-gui/bridge-gui/Resources.qrc index fbb413d6..544c927a 100644 --- a/internal/frontend/bridge-gui/bridge-gui/Resources.qrc +++ b/internal/frontend/bridge-gui/bridge-gui/Resources.qrc @@ -75,6 +75,7 @@ ../../../../dist/bridgeMacOS.svg qml/KeychainSettings.qml qml/LocalCacheSettings.qml + qml/LinkLabel.qml qml/MainWindow.qml qml/NotificationDialog.qml qml/NotificationPopups.qml @@ -108,10 +109,10 @@ qml/SettingsItem.qml qml/SettingsView.qml qml/SetupGuide.qml + qml/SetupWizard/LeftPane.qml + qml/SetupWizard/ClientConfigSelector.qml qml/SetupWizard/SetupWizard.qml - qml/SetupWizard/LoginLeftPane.qml qml/SetupWizard/LoginRightPane.qml - qml/SetupWizard/OnboardingLeftPane.qml qml/SetupWizard/OnboardingRightPane.qml qml/SetupWizard/StepDescriptionBox.qml qml/SignIn.qml diff --git a/internal/frontend/bridge-gui/bridge-gui/qml/LinkLabel.qml b/internal/frontend/bridge-gui/bridge-gui/qml/LinkLabel.qml new file mode 100644 index 00000000..d5fc22ee --- /dev/null +++ b/internal/frontend/bridge-gui/bridge-gui/qml/LinkLabel.qml @@ -0,0 +1,41 @@ +// Copyright (c) 2023 Proton AG +// This file is part of Proton Mail Bridge. +// Proton Mail Bridge is free software: you can redistribute it and/or modify +// it under the terms of the GNU General Public License as published by +// the Free Software Foundation, either version 3 of the License, or +// (at your option) any later version. +// Proton Mail Bridge is distributed in the hope that it will be useful, +// but WITHOUT ANY WARRANTY; without even the implied warranty of +// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the +// GNU General Public License for more details. +// You should have received a copy of the GNU General Public License +// along with Proton Mail Bridge. If not, see . +import QtQml +import QtQuick +import QtQuick.Layouts +import QtQuick.Controls +import QtQuick.Controls.impl +import "." as Proton + +Label { + id: root + + property string linkText + property string linkURL + + text: link(linkURL, linkText) + type: Label.LabelType.Body + + onLinkActivated: function (link) { + // if the link is "#", the user is indicating he will provide its own link activation handler. + if (link !== "#") { + Qt.openUrlExternally(link); + } + } + + HoverHandler { + acceptedDevices: PointerDevice.Mouse + cursorShape: Qt.PointingHandCursor + enabled: true + } +} diff --git a/internal/frontend/bridge-gui/bridge-gui/qml/MainWindow.qml b/internal/frontend/bridge-gui/bridge-gui/qml/MainWindow.qml index 819b3dd7..35b3054c 100644 --- a/internal/frontend/bridge-gui/bridge-gui/qml/MainWindow.qml +++ b/internal/frontend/bridge-gui/bridge-gui/qml/MainWindow.qml @@ -95,11 +95,11 @@ ApplicationWindow { } Connections { function onLoginFinished(index, wasSignedOut) { - const user = Backend.users.get(index); - if (user && !wasSignedOut) { - root.showSetup(user, user.addresses[0]); - } - console.debug("Login finished", index); + // const user = Backend.users.get(index); + // if (user && !wasSignedOut) { + // root.showSetup(user, user.addresses[0]); + // } + // console.debug("Login finished", index); } function onSelectUser(userID, forceShowWindow) { contentWrapper.selectUser(userID); diff --git a/internal/frontend/bridge-gui/bridge-gui/qml/SetupWizard/ClientConfigSelector.qml b/internal/frontend/bridge-gui/bridge-gui/qml/SetupWizard/ClientConfigSelector.qml new file mode 100644 index 00000000..8074848a --- /dev/null +++ b/internal/frontend/bridge-gui/bridge-gui/qml/SetupWizard/ClientConfigSelector.qml @@ -0,0 +1,24 @@ +// Copyright (c) 2023 Proton AG +// This file is part of Proton Mail Bridge. +// Proton Mail Bridge is free software: you can redistribute it and/or modify +// it under the terms of the GNU General Public License as published by +// the Free Software Foundation, either version 3 of the License, or +// (at your option) any later version. +// Proton Mail Bridge is distributed in the hope that it will be useful, +// but WITHOUT ANY WARRANTY; without even the implied warranty of +// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the +// GNU General Public License for more details. +// You should have received a copy of the GNU General Public License +// along with Proton Mail Bridge. If not, see . +import QtQml +import QtQuick +import QtQuick.Layouts +import QtQuick.Controls +import QtQuick.Controls.impl +import Proton + +Rectangle { + id: root + property ColorScheme colorScheme + color: "#ff9900" +} \ No newline at end of file diff --git a/internal/frontend/bridge-gui/bridge-gui/qml/SetupWizard/LeftPane.qml b/internal/frontend/bridge-gui/bridge-gui/qml/SetupWizard/LeftPane.qml new file mode 100644 index 00000000..02250de8 --- /dev/null +++ b/internal/frontend/bridge-gui/bridge-gui/qml/SetupWizard/LeftPane.qml @@ -0,0 +1,147 @@ +// Copyright (c) 2023 Proton AG +// This file is part of Proton Mail Bridge. +// Proton Mail Bridge is free software: you can redistribute it and/or modify +// it under the terms of the GNU General Public License as published by +// the Free Software Foundation, either version 3 of the License, or +// (at your option) any later version. +// Proton Mail Bridge is distributed in the hope that it will be useful, +// but WITHOUT ANY WARRANTY; without even the implied warranty of +// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the +// GNU General Public License for more details. +// You should have received a copy of the GNU General Public License +// along with Proton Mail Bridge. If not, see . +import QtQml +import QtQuick +import QtQuick.Layouts +import QtQuick.Controls +import QtQuick.Controls.impl +import "." as Proton +import ".." + +Item { + id: root + + property ColorScheme colorScheme + + function showLogin2FA() { + descriptionLabel.text = qsTr("You have enabled two-factor authentication. Please enter the 6-digit code provided by your authenticator application."); + linkLabel1.linkText = ""; + linkLabel1.linkURL = ""; + linkLabel2.linkText = ""; + linkLabel2.linkURL = ""; + showLoginCommon(); + } + function showClientSelector() { + titleLabel.text = qsTr("Configure your email client"); + 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."); + linkLabel1.linkText = qsTr("Why do"); + linkLabel1.linkURL = "https://proton.me"; + linkLabel2.linkText = qsTr("I need"); + linkLabel2.linkURL = "https://proton.me"; + icon.source = "/qml/icons/img-mail-clients.svg"; + icon.sourceSize.height = 128; + icon.sourceSize.width = 128; + Layout.preferredHeight = 72; + Layout.preferredWidth = 72; + } + 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() { + root.description = qsTr("You have secured your account with a separate mailbox password."); + linkLabel1.linkText = ""; + linkLabel1.linkURL = ""; + linkLabel2.linkText = ""; + linkLabel2.linkURL = ""; + 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. "); + linkLabel1.linkText = qsTr("Why do I need Bridge?"); + linkLabel1.linkURL = "https://proton.me/support/bridge"; + linkLabel2.linkText = ""; + linkLabel2.linkURL = ""; + icon.Layout.preferredHeight = 148; + icon.Layout.preferredWidth = 265; + icon.source = "/qml/icons/img-welcome.svg"; + icon.sourceSize.height = 148; + icon.sourceSize.width = 265; + } + function showLogin() { + descriptionLabel.text = qsTr("Let's start by signing in to your Proton account."); + linkLabel1.linkText = qsTr("Create or upgrade your account"); + linkLabel1.linkURL = "https://proton.me/mail/pricing"; + linkLabel2.linkText = ""; + linkLabel2.linkURL = ""; + showLoginCommon(); + } + Connections { + function onLogin2FARequested() { + showLogin2FA(); + } + function onLogin2PasswordRequested() { + showLoginMailboxPassword(); + } + + target: Backend + } + ColumnLayout { + anchors.left: parent.left + anchors.right: parent.right + anchors.top: parent.top + spacing: 0 + + Image { + id: icon + Layout.alignment: Qt.AlignHCenter | Qt.AlignTop + Layout.preferredHeight: 72 + Layout.preferredWidth: 72 + fillMode: Image.PreserveAspectFit + source: "" + sourceSize.height: 72 + sourceSize.width: 72 + } + Label { + id: titleLabel + Layout.alignment: Qt.AlignHCenter + Layout.fillWidth: true + Layout.topMargin: 16 + colorScheme: root.colorScheme + horizontalAlignment: Text.AlignHCenter + text: "" + type: Label.LabelType.Heading + wrapMode: Text.WordWrap + } + Label { + id: descriptionLabel + Layout.alignment: Qt.AlignHCenter + Layout.fillWidth: true + Layout.topMargin: 96 + colorScheme: root.colorScheme + horizontalAlignment: Text.AlignHCenter + text: "" + type: Label.LabelType.Body + wrapMode: Text.WordWrap + } + LinkLabel { + id: linkLabel1 + Layout.alignment: Qt.AlignHCenter + Layout.topMargin: 96 + colorScheme: root.colorScheme + visible: (text !== "") + } + LinkLabel { + id: linkLabel2 + Layout.alignment: Qt.AlignHCenter + Layout.topMargin: 16 + colorScheme: root.colorScheme + visible: (text !== "") + } + } +} diff --git a/internal/frontend/bridge-gui/bridge-gui/qml/SetupWizard/LoginLeftPane.qml b/internal/frontend/bridge-gui/bridge-gui/qml/SetupWizard/LoginLeftPane.qml deleted file mode 100644 index 571dfad4..00000000 --- a/internal/frontend/bridge-gui/bridge-gui/qml/SetupWizard/LoginLeftPane.qml +++ /dev/null @@ -1,108 +0,0 @@ -// Copyright (c) 2023 Proton AG -// This file is part of Proton Mail Bridge. -// Proton Mail Bridge is free software: you can redistribute it and/or modify -// it under the terms of the GNU General Public License as published by -// the Free Software Foundation, either version 3 of the License, or -// (at your option) any later version. -// Proton Mail Bridge is distributed in the hope that it will be useful, -// but WITHOUT ANY WARRANTY; without even the implied warranty of -// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the -// GNU General Public License for more details. -// You should have received a copy of the GNU General Public License -// along with Proton Mail Bridge. If not, see . -import QtQml -import QtQuick -import QtQuick.Layouts -import QtQuick.Controls -import QtQuick.Controls.impl -import "." as Proton - -Item { - id: root - - property ColorScheme colorScheme - 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 - anchors.top: parent.top - spacing: 0 - - Image { - Layout.alignment: Qt.AlignHCenter | Qt.AlignTop - Layout.preferredHeight: 72 - Layout.preferredWidth: 72 - fillMode: Image.PreserveAspectFit - source: "/qml/icons/ic-bridge.svg" - sourceSize.height: 128 - sourceSize.width: 128 - } - Label { - Layout.alignment: Qt.AlignHCenter - Layout.fillWidth: true - Layout.topMargin: 16 - colorScheme: root.colorScheme - horizontalAlignment: Text.AlignHCenter - text: qsTr("Sign in to your Proton Account") - type: Label.LabelType.Heading - wrapMode: Text.WordWrap - } - Label { - Layout.alignment: Qt.AlignHCenter - Layout.fillWidth: true - Layout.topMargin: 96 - colorScheme: root.colorScheme - horizontalAlignment: Text.AlignHCenter - text: description - type: Label.LabelType.Body - wrapMode: Text.WordWrap - } - Label { - id: linkLabel - Layout.alignment: Qt.AlignHCenter - Layout.fillWidth: false - Layout.topMargin: 96 - colorScheme: root.colorScheme - horizontalAlignment: Text.AlignHCenter - text: root.helpLink - type: Label.LabelType.Body - visible: { - root.helpLink !== ""; - } - - onLinkActivated: function (link) { - Qt.openUrlExternally(link); - } - - HoverHandler { - acceptedDevices: PointerDevice.Mouse - cursorShape: Qt.PointingHandCursor - } - } - } -} \ No newline at end of file diff --git a/internal/frontend/bridge-gui/bridge-gui/qml/SetupWizard/OnboardingLeftPane.qml b/internal/frontend/bridge-gui/bridge-gui/qml/SetupWizard/OnboardingLeftPane.qml deleted file mode 100644 index e8a6a538..00000000 --- a/internal/frontend/bridge-gui/bridge-gui/qml/SetupWizard/OnboardingLeftPane.qml +++ /dev/null @@ -1,78 +0,0 @@ -// Copyright (c) 2023 Proton AG -// This file is part of Proton Mail Bridge. -// Proton Mail Bridge is free software: you can redistribute it and/or modify -// it under the terms of the GNU General Public License as published by -// the Free Software Foundation, either version 3 of the License, or -// (at your option) any later version. -// Proton Mail Bridge is distributed in the hope that it will be useful, -// but WITHOUT ANY WARRANTY; without even the implied warranty of -// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the -// GNU General Public License for more details. -// You should have received a copy of the GNU General Public License -// along with Proton Mail Bridge. If not, see . -import QtQml -import QtQuick -import QtQuick.Layouts -import QtQuick.Controls -import QtQuick.Controls.impl -import "." as Proton - -Item { - id: root - - property ColorScheme colorScheme - - ColumnLayout { - anchors.left: parent.left - anchors.right: parent.right - anchors.top: parent.top - spacing: 0 - - Image { - Layout.alignment: Qt.AlignHCenter | Qt.AlignTop - Layout.preferredHeight: 148 - Layout.preferredWidth: 265 - antialiasing: true - source: "/qml/icons/img-welcome.svg" - sourceSize.height: 148 - sourceSize.width: 265 - } - Label { - Layout.alignment: Qt.AlignHCenter - Layout.fillWidth: true - Layout.topMargin: 16 - colorScheme: root.colorScheme - horizontalAlignment: Text.AlignHCenter - text: qsTr("Welcome to\nProton Mail Bridge") - type: Label.LabelType.Heading - } - Label { - Layout.alignment: Qt.AlignHCenter - Layout.fillWidth: true - Layout.topMargin: 96 - colorScheme: root.colorScheme - horizontalAlignment: Text.AlignHCenter - 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. ") - type: Label.LabelType.Body - wrapMode: Text.WordWrap - } - Label { - Layout.alignment: Qt.AlignHCenter - Layout.fillWidth: false - Layout.topMargin: 48 - colorScheme: root.colorScheme - horizontalAlignment: Text.AlignHCenter - text: link("https://proton.me/support/bridge", qsTr("Why do I need Bridge?")) - type: Label.LabelType.Body - - onLinkActivated: function (link) { - Qt.openUrlExternally(link); - } - - HoverHandler { - acceptedDevices: PointerDevice.Mouse - cursorShape: Qt.PointingHandCursor - } - } - } -} \ No newline at end of file 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 183aae7e..51a26043 100644 --- a/internal/frontend/bridge-gui/bridge-gui/qml/SetupWizard/SetupWizard.qml +++ b/internal/frontend/bridge-gui/bridge-gui/qml/SetupWizard/SetupWizard.qml @@ -16,6 +16,7 @@ import QtQuick.Layouts import QtQuick.Controls import QtQuick.Controls.impl import "." as Proton +import ".." Item { id: root @@ -27,20 +28,24 @@ Item { } function start() { root.visible = true; - leftContent.currentIndex = 0; + leftContent.showOnboarding(); rightContent.currentIndex = 0; } + function startClientConfig() { + root.visible = true; + leftContent.showClientSelector(); + rightContent.currentIndex = 2; + } function startLogin() { root.visible = true; - leftContent.currentIndex = 1; + leftContent.showLogin(); rightContent.currentIndex = 1; - loginLeftPane.showSignIn(); loginRightPane.reset(true); } Connections { function onLoginFinished() { - root.closeWizard(); + startClientConfig(); } target: Backend @@ -55,7 +60,7 @@ Item { Layout.fillWidth: true color: root.colorScheme.background_norm - StackLayout { + LeftPane { id: leftContent anchors.bottom: parent.bottom anchors.bottomMargin: 96 @@ -63,23 +68,8 @@ Item { anchors.top: parent.top anchors.topMargin: 96 clip: true - currentIndex: 0 + colorScheme: root.colorScheme width: 444 - - // stack index 0 - OnboardingLeftPane { - Layout.fillHeight: true - Layout.fillWidth: true - colorScheme: root.colorScheme - } - - // stack index 1 - LoginLeftPane { - id: loginLeftPane - Layout.fillHeight: true - Layout.fillWidth: true - colorScheme: root.colorScheme - } } Image { id: mailLogoWithWordmark @@ -105,8 +95,8 @@ Item { anchors.horizontalCenter: parent.horizontalCenter anchors.top: parent.top anchors.topMargin: 96 - currentIndex: 0 clip: true + currentIndex: 0 width: 444 // stack index 0 @@ -129,26 +119,30 @@ Item { root.closeWizard(); } } + + // stack index 2 + ClientConfigSelector { + id: clientCOnfigSelector + Layout.fillHeight: true + Layout.fillWidth: true + colorScheme: root.colorScheme + } } - Label { + LinkLabel { id: reportProblemLink anchors.bottom: parent.bottom anchors.bottomMargin: 48 anchors.horizontalCenter: parent.horizontalCenter colorScheme: root.colorScheme horizontalAlignment: Text.AlignRight - text: link("#", "Report problem") + linkText: qsTr("Report problem") + linkURL: "#" width: 444 onLinkActivated: { root.visible = false; } - HoverHandler { - id: mouse - acceptedDevices: PointerDevice.Mouse - cursorShape: Qt.PointingHandCursor - } } } }