From 9ef7d133c0233597f6c0bbbaae159c609f82d1f1 Mon Sep 17 00:00:00 2001 From: Xavier Michelon Date: Wed, 9 Aug 2023 18:58:59 +0200 Subject: [PATCH] feat(GODT-2767): client config page. [skip-ci] --- .../bridge-gui/bridge-gui/Resources.qrc | 1 + .../SetupWizard/ClientConfigParameters.qml | 128 +++++++++++ .../qml/SetupWizard/ClientConfigWarning.qml | 4 +- .../bridge-gui/qml/SetupWizard/Onboarding.qml | 2 +- .../qml/SetupWizard/SetupWizard.qml | 213 ++++++++++-------- 5 files changed, 254 insertions(+), 94 deletions(-) create mode 100644 internal/frontend/bridge-gui/bridge-gui/qml/SetupWizard/ClientConfigParameters.qml diff --git a/internal/frontend/bridge-gui/bridge-gui/Resources.qrc b/internal/frontend/bridge-gui/bridge-gui/Resources.qrc index 30269cb5..d3651c83 100644 --- a/internal/frontend/bridge-gui/bridge-gui/Resources.qrc +++ b/internal/frontend/bridge-gui/bridge-gui/Resources.qrc @@ -110,6 +110,7 @@ qml/SetupWizard/ClientListItem.qml qml/SetupWizard/LeftPane.qml qml/SetupWizard/ClientConfigOutlookSelector.qml + qml/SetupWizard/ClientConfigParameters.qml qml/SetupWizard/ClientConfigSelector.qml qml/SetupWizard/ClientConfigWarning.qml qml/SetupWizard/SetupWizard.qml diff --git a/internal/frontend/bridge-gui/bridge-gui/qml/SetupWizard/ClientConfigParameters.qml b/internal/frontend/bridge-gui/bridge-gui/qml/SetupWizard/ClientConfigParameters.qml new file mode 100644 index 00000000..426581fa --- /dev/null +++ b/internal/frontend/bridge-gui/bridge-gui/qml/SetupWizard/ClientConfigParameters.qml @@ -0,0 +1,128 @@ +// 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 +import ".." + +Rectangle { + id: root + property var wizard + property ColorScheme colorScheme: wizard.colorScheme + color: colorScheme.background_weak + readonly property bool genericClient: SetupWizard.Client.Generic === wizard.client + + Item { + id: centeredContainer + anchors.horizontalCenter: parent.horizontalCenter + anchors.top: parent.top + anchors.bottom: parent.bottom + width: 800 + + ColumnLayout { + anchors.left: parent.left + anchors.right: parent.right + anchors.top: parent.top + anchors.bottomMargin: 96 + anchors.topMargin: 32 + spacing: 0 + Label { + Layout.alignment: Qt.AlignHCenter + Layout.fillWidth: true + colorScheme: root.colorScheme + horizontalAlignment: Text.AlignHCenter + text: qsTr("Configure %1").arg(wizard.clientName()) + type: Label.LabelType.Heading + wrapMode: Text.WordWrap + } + Label { + id: descriptionLabel + Layout.alignment: Qt.AlignHCenter + Layout.fillWidth: true + Layout.topMargin: 8 + color: colorScheme.text_weak + colorScheme: root.colorScheme + horizontalAlignment: Text.AlignHCenter + text: genericClient ? qsTr("Here are the IMAP and SMTP configuration parameters for your email client") : + qsTr("Here are your email configuration parameters for %1. \nWe have prepared an easy to follow configuration guide to help you setup your account in %1.").arg(wizard.clientName()) + type: Label.LabelType.Body + wrapMode: Text.WordWrap + } + RowLayout { + id: configuration + + property string currentAddress: wizard.user ? wizard.user.address : "" + + Layout.fillHeight: true + Layout.fillWidth: true + Layout.topMargin: 32 + spacing: 64 + Configuration { + Layout.fillWidth: true + colorScheme: root.colorScheme + hostname: Backend.hostname + password: wizard.user ? wizard.user.password : "" + port: Backend.imapPort.toString() + security: Backend.useSSLForIMAP ? "SSL" : "STARTTLS" + title: qsTr("IMAP") + username: configuration.currentAddress + } + Configuration { + Layout.fillWidth: true + colorScheme: root.colorScheme + hostname: Backend.hostname + password: wizard.user ? wizard.user.password : "" + port: Backend.smtpPort.toString() + security: Backend.useSSLForSMTP ? "SSL" : "STARTTLS" + title: qsTr("SMTP") + username: configuration.currentAddress + } + } + + Button { + Layout.alignment: Qt.AlignHCenter + Layout.preferredWidth: 444 + Layout.topMargin: 32 + colorScheme: root.colorScheme + text: qsTr("Open configuration guide") + visible: !genericClient + } + + Button { + Layout.alignment: Qt.AlignHCenter + Layout.preferredWidth: 444 + Layout.topMargin: 32 + colorScheme: root.colorScheme + text: qsTr("Done") + onClicked: root.wizard.closeWizard() + } + } + + LinkLabel { + id: reportProblemLink + anchors.bottom: parent.bottom + anchors.bottomMargin: 48 + anchors.right: parent.right + colorScheme: root.colorScheme + horizontalAlignment: Text.AlignRight + text: link("#", qsTr("Report problem")) + + onLinkActivated: { + wizard.closeWizard(); + } + } + } +} diff --git a/internal/frontend/bridge-gui/bridge-gui/qml/SetupWizard/ClientConfigWarning.qml b/internal/frontend/bridge-gui/bridge-gui/qml/SetupWizard/ClientConfigWarning.qml index 039bcc95..60bab587 100644 --- a/internal/frontend/bridge-gui/bridge-gui/qml/SetupWizard/ClientConfigWarning.qml +++ b/internal/frontend/bridge-gui/bridge-gui/qml/SetupWizard/ClientConfigWarning.qml @@ -65,7 +65,7 @@ Item { horizontalAlignment: Text.AlignHCenter colorScheme: root.colorScheme text: qsTr("Do not enter your Proton account password in you email application.") - type: Label.LabelType.Body_bold + type: Label.LabelType.Body wrapMode: Text.WordWrap } Item { @@ -89,7 +89,7 @@ Item { text: qsTr("I understand") onClicked: { - root.wizard.closeWizard(); + root.wizard.showClientParams(); } } Item { diff --git a/internal/frontend/bridge-gui/bridge-gui/qml/SetupWizard/Onboarding.qml b/internal/frontend/bridge-gui/bridge-gui/qml/SetupWizard/Onboarding.qml index 37880371..1e40b491 100644 --- a/internal/frontend/bridge-gui/bridge-gui/qml/SetupWizard/Onboarding.qml +++ b/internal/frontend/bridge-gui/bridge-gui/qml/SetupWizard/Onboarding.qml @@ -54,7 +54,7 @@ Item { } Button { Layout.alignment: Qt.AlignHCenter - Layout.preferredWidth: 320 + Layout.fillWidth: true colorScheme: root.colorScheme text: qsTr("Let's start") 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 d116c623..e7d176c8 100644 --- a/internal/frontend/bridge-gui/bridge-gui/qml/SetupWizard/SetupWizard.qml +++ b/internal/frontend/bridge-gui/bridge-gui/qml/SetupWizard/SetupWizard.qml @@ -69,23 +69,31 @@ Item { function closeWizard() { root.visible = false; } + function showOutlookSelector() { root.visible = true; + rootStackLayout.currentIndex = 0; leftContent.showOutlookSelector(); rightContent.currentIndex = 3; } + function start() { root.visible = true; + rootStackLayout.currentIndex = 0; leftContent.showOnboarding(); rightContent.currentIndex = 0; } + function startClientConfig() { root.visible = true; + rootStackLayout.currentIndex = 0; leftContent.showClientSelector(); rightContent.currentIndex = 2; } + function startLogin(wasSignedOut = false) { root.visible = true; + rootStackLayout.currentIndex = 0; root.userID = ""; root.address = ""; root.wasSignedOut = wasSignedOut; @@ -96,10 +104,17 @@ Item { function showClientWarning() { root.visible = true; + rootStackLayout.currentIndex = 0; leftContent.showClientConfigWarning(); rightContent.currentIndex = 4 } + function showClientParams() { + root.visible = true; + rootStackLayout.currentIndex = 1; + + } + Connections { function onLoginFinished() { startClientConfig(); @@ -107,114 +122,130 @@ Item { target: Backend } - RowLayout { + + StackLayout { + id: rootStackLayout anchors.fill: parent - spacing: 0 - Rectangle { - id: leftHalf + // rootStackLayout index 0 + RowLayout { Layout.fillHeight: true Layout.fillWidth: true - color: root.colorScheme.background_norm + spacing: 0 - LeftPane { - id: leftContent + Rectangle { + id: leftHalf + Layout.fillHeight: true + Layout.fillWidth: true + color: root.colorScheme.background_norm - anchors.bottom: parent.bottom - anchors.bottomMargin: 96 - anchors.horizontalCenter: parent.horizontalCenter - anchors.top: parent.top - anchors.topMargin: 96 - clip: true - colorScheme: root.colorScheme - width: 444 - wizard: root - } - Image { - id: mailLogoWithWordmark - anchors.bottom: parent.bottom - anchors.bottomMargin: 48 - anchors.horizontalCenter: parent.horizontalCenter - fillMode: Image.PreserveAspectFit - height: 24 - mipmap: true - source: root.colorScheme.mail_logo_with_wordmark - } - } - Rectangle { - id: rightHalf - Layout.fillHeight: true - Layout.fillWidth: true - color: root.colorScheme.background_weak + LeftPane { + id: leftContent - StackLayout { - id: rightContent - anchors.bottom: parent.bottom - anchors.bottomMargin: 96 - anchors.horizontalCenter: parent.horizontalCenter - anchors.top: parent.top - anchors.topMargin: 96 - clip: true - currentIndex: 0 - width: 444 - - // stack index 0 - Onboarding { - Layout.fillHeight: true - Layout.fillWidth: true + anchors.bottom: parent.bottom + anchors.bottomMargin: 96 + anchors.horizontalCenter: parent.horizontalCenter + anchors.top: parent.top + anchors.topMargin: 96 + clip: true colorScheme: root.colorScheme - - onOnboardingAccepted: root.startLogin() + width: 444 + wizard: root } + Image { + id: mailLogoWithWordmark + anchors.bottom: parent.bottom + anchors.bottomMargin: 48 + anchors.horizontalCenter: parent.horizontalCenter + fillMode: Image.PreserveAspectFit + height: 24 + mipmap: true + source: root.colorScheme.mail_logo_with_wordmark + } + } + Rectangle { + id: rightHalf + Layout.fillHeight: true + Layout.fillWidth: true + color: root.colorScheme.background_weak - // stack index 1 - Login { - id: login - Layout.fillHeight: true - Layout.fillWidth: true - colorScheme: root.colorScheme + StackLayout { + id: rightContent + anchors.bottom: parent.bottom + anchors.bottomMargin: 96 + anchors.horizontalCenter: parent.horizontalCenter + anchors.top: parent.top + anchors.topMargin: 96 + clip: true + currentIndex: 0 + width: 444 - onLoginAbort: { - root.closeWizard(); + // stack index 0 + Onboarding { + Layout.fillHeight: true + Layout.fillWidth: true + colorScheme: root.colorScheme + + onOnboardingAccepted: root.startLogin() + } + + // stack index 1 + Login { + id: login + Layout.fillHeight: true + Layout.fillWidth: true + colorScheme: root.colorScheme + + onLoginAbort: { + root.closeWizard(); + } + } + + // stack index 2 + ClientConfigSelector { + id: clientConfigSelector + Layout.fillHeight: true + Layout.fillWidth: true + wizard: root + } + // stack index 3 + ClientConfigOutlookSelector { + id: clientConfigOutlookSelector + Layout.fillHeight: true + Layout.fillWidth: true + wizard: root + } + // stack index 4 + ClientConfigWarning { + id: clientConfigWarning + Layout.fillHeight: true + Layout.fillWidth: true + wizard: root } } + LinkLabel { + id: reportProblemLink + anchors.bottom: parent.bottom + anchors.bottomMargin: 48 + anchors.horizontalCenter: parent.horizontalCenter + colorScheme: root.colorScheme + horizontalAlignment: Text.AlignRight + text: link("#", qsTr("Report problem")) + width: 444 - // stack index 2 - ClientConfigSelector { - id: clientConfigSelector - Layout.fillHeight: true - Layout.fillWidth: true - wizard: root - } - // stack index 3 - ClientConfigOutlookSelector { - id: clientConfigOutlookSelector - Layout.fillHeight: true - Layout.fillWidth: true - wizard: root - } - // stack index 4 - ClientConfigWarning { - id: clientConfigWarning - Layout.fillHeight: true - Layout.fillWidth: true - wizard: root + onLinkActivated: { + root.visible = false; + } } } - LinkLabel { - id: reportProblemLink - anchors.bottom: parent.bottom - anchors.bottomMargin: 48 - anchors.horizontalCenter: parent.horizontalCenter - colorScheme: root.colorScheme - horizontalAlignment: Text.AlignRight - text: link("#", qsTr("Report problem")) - width: 444 + } - onLinkActivated: { - root.visible = false; - } - } + // rootStackLayout index 1 + ClientConfigParameters { + id: clientConfigParameters + Layout.fillHeight: true + Layout.fillWidth: true + wizard: root } } }