feat(GODT-2767): client config page. [skip-ci]

This commit is contained in:
Xavier Michelon
2023-08-09 18:58:59 +02:00
parent 83b842b19d
commit 9ef7d133c0
5 changed files with 254 additions and 94 deletions

View File

@ -110,6 +110,7 @@
<file>qml/SetupWizard/ClientListItem.qml</file>
<file>qml/SetupWizard/LeftPane.qml</file>
<file>qml/SetupWizard/ClientConfigOutlookSelector.qml</file>
<file>qml/SetupWizard/ClientConfigParameters.qml</file>
<file>qml/SetupWizard/ClientConfigSelector.qml</file>
<file>qml/SetupWizard/ClientConfigWarning.qml</file>
<file>qml/SetupWizard/SetupWizard.qml</file>

View File

@ -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 <https://www.gnu.org/licenses/>.
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();
}
}
}
}

View File

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

View File

@ -54,7 +54,7 @@ Item {
}
Button {
Layout.alignment: Qt.AlignHCenter
Layout.preferredWidth: 320
Layout.fillWidth: true
colorScheme: root.colorScheme
text: qsTr("Let's start")

View File

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