From dd5e745e3795816a3281408ea64a811ecab6fab8 Mon Sep 17 00:00:00 2001 From: Xavier Michelon Date: Wed, 2 Aug 2023 09:33:58 +0200 Subject: [PATCH] feat(GODT-2767): login right pane. [skip-ci] --- .../qml/SetupWizard/LoginLeftPane.qml | 32 ++++++- .../qml/SetupWizard/LoginRightPane.qml | 85 +++++++++---------- .../qml/SetupWizard/SetupWizard.qml | 4 + 3 files changed, 76 insertions(+), 45 deletions(-) diff --git a/internal/frontend/bridge-gui/bridge-gui/qml/SetupWizard/LoginLeftPane.qml b/internal/frontend/bridge-gui/bridge-gui/qml/SetupWizard/LoginLeftPane.qml index 34dcea05..571dfad4 100644 --- a/internal/frontend/bridge-gui/bridge-gui/qml/SetupWizard/LoginLeftPane.qml +++ b/internal/frontend/bridge-gui/bridge-gui/qml/SetupWizard/LoginLeftPane.qml @@ -21,8 +21,32 @@ Item { id: root property ColorScheme colorScheme - property string description: qsTr("Let's start by signing in to your Proton account.") + 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 @@ -59,13 +83,17 @@ Item { wrapMode: Text.WordWrap } Label { + id: linkLabel Layout.alignment: Qt.AlignHCenter Layout.fillWidth: false Layout.topMargin: 96 colorScheme: root.colorScheme horizontalAlignment: Text.AlignHCenter - text: link("https://proton.me/mail/pricing", qsTr("Create or upgrade your account")) + text: root.helpLink type: Label.LabelType.Body + visible: { + root.helpLink !== ""; + } onLinkActivated: function (link) { Qt.openUrlExternally(link); diff --git a/internal/frontend/bridge-gui/bridge-gui/qml/SetupWizard/LoginRightPane.qml b/internal/frontend/bridge-gui/bridge-gui/qml/SetupWizard/LoginRightPane.qml index a6764d9f..ad5a23f7 100644 --- a/internal/frontend/bridge-gui/bridge-gui/qml/SetupWizard/LoginRightPane.qml +++ b/internal/frontend/bridge-gui/bridge-gui/qml/SetupWizard/LoginRightPane.qml @@ -40,34 +40,6 @@ FocusScope { implicitHeight: children[0].implicitHeight implicitWidth: children[0].implicitWidth - state: "Page 1" - - states: [ - State { - name: "Page 1" - - PropertyChanges { - currentIndex: 0 - target: stackLayout - } - }, - State { - name: "Page 2" - - PropertyChanges { - currentIndex: 1 - target: stackLayout - } - }, - State { - name: "Page 3" - - PropertyChanges { - currentIndex: 2 - target: stackLayout - } - } - ] StackLayout { id: stackLayout @@ -169,10 +141,9 @@ FocusScope { Label { Layout.alignment: Qt.AlignHCenter - Layout.topMargin: 16 colorScheme: root.colorScheme text: qsTr("Sign in") - type: Label.LabelType.Title + type: Label.LabelType.Heading } Label { id: subTitle @@ -181,11 +152,11 @@ FocusScope { color: root.colorScheme.text_weak colorScheme: root.colorScheme text: qsTr("Enter your Proton Account details.") - type: Label.LabelType.Body + type: Label.LabelType.Lead } RowLayout { Layout.fillWidth: true - Layout.topMargin: 36 + Layout.topMargin: 48 spacing: 0 visible: errorLabel.text.length > 0 @@ -208,7 +179,7 @@ FocusScope { TextField { id: usernameTextField Layout.fillWidth: true - Layout.topMargin: 24 + Layout.topMargin: 48 colorScheme: root.colorScheme focus: true label: qsTr("Email or username") @@ -232,7 +203,7 @@ FocusScope { TextField { id: passwordTextField Layout.fillWidth: true - Layout.topMargin: 8 + Layout.topMargin: 48 colorScheme: root.colorScheme echoMode: TextInput.Password label: qsTr("Password") @@ -268,7 +239,7 @@ FocusScope { } Layout.fillWidth: true - Layout.topMargin: 24 + Layout.topMargin: 48 colorScheme: root.colorScheme enabled: !loading text: loading ? qsTr("Signing in") : qsTr("Sign in") @@ -278,11 +249,10 @@ FocusScope { } } Button { - id: cancelButton Layout.fillWidth: true - Layout.topMargin: 24 + Layout.topMargin: 32 colorScheme: root.colorScheme - enabled: !loading + enabled: !signInButton.loading secondary: true text: qsTr("Cancel") @@ -305,7 +275,6 @@ FocusScope { Label { Layout.alignment: Qt.AlignCenter - Layout.topMargin: 16 colorScheme: root.colorScheme text: qsTr("Two-factor authentication") type: Label.LabelType.Heading @@ -344,7 +313,7 @@ FocusScope { Button { id: twoFAButton Layout.fillWidth: true - Layout.topMargin: 24 + Layout.topMargin: 48 colorScheme: root.colorScheme enabled: !loading text: loading ? qsTr("Authenticating") : qsTr("Authenticate") @@ -359,6 +328,18 @@ FocusScope { Backend.login2FA(usernameTextField.text, Qt.btoa(twoFactorPasswordTextField.text)); } } + Button { + Layout.fillWidth: true + Layout.topMargin: 32 + colorScheme: root.colorScheme + enabled: !twoFAButton.loading + secondary: true + text: qsTr("Cancel") + + onClicked: { + root.abort(); + } + } } ColumnLayout { id: login2PasswordLayout @@ -374,15 +355,21 @@ FocusScope { Label { Layout.alignment: Qt.AlignCenter - Layout.topMargin: 16 colorScheme: root.colorScheme text: qsTr("Unlock your mailbox") type: Label.LabelType.Heading } + Label { + Layout.alignment: Qt.AlignCenter + Layout.topMargin: 8 + color: root.colorScheme.text_weak + colorScheme: root.colorScheme + type: Label.LabelType.Lead + } TextField { id: secondPasswordTextField Layout.fillWidth: true - Layout.topMargin: 8 + implicitHeight + 24 + subTitle.implicitHeight + Layout.topMargin: 48 colorScheme: root.colorScheme echoMode: TextInput.Password label: qsTr("Mailbox password") @@ -400,7 +387,7 @@ FocusScope { Button { id: secondPasswordButton Layout.fillWidth: true - Layout.topMargin: 24 + Layout.topMargin: 48 colorScheme: root.colorScheme enabled: !loading text: loading ? qsTr("Unlocking") : qsTr("Unlock") @@ -415,6 +402,18 @@ FocusScope { Backend.login2Password(usernameTextField.text, Qt.btoa(secondPasswordTextField.text)); } } + Button { + Layout.fillWidth: true + Layout.topMargin: 32 + colorScheme: root.colorScheme + enabled: !secondPasswordButton.loading + secondary: true + text: qsTr("Cancel") + + onClicked: { + root.abort(); + } + } } } } 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 17b3d02e..183aae7e 100644 --- a/internal/frontend/bridge-gui/bridge-gui/qml/SetupWizard/SetupWizard.qml +++ b/internal/frontend/bridge-gui/bridge-gui/qml/SetupWizard/SetupWizard.qml @@ -34,6 +34,7 @@ Item { root.visible = true; leftContent.currentIndex = 1; rightContent.currentIndex = 1; + loginLeftPane.showSignIn(); loginRightPane.reset(true); } @@ -61,6 +62,7 @@ Item { anchors.horizontalCenter: parent.horizontalCenter anchors.top: parent.top anchors.topMargin: 96 + clip: true currentIndex: 0 width: 444 @@ -73,6 +75,7 @@ Item { // stack index 1 LoginLeftPane { + id: loginLeftPane Layout.fillHeight: true Layout.fillWidth: true colorScheme: root.colorScheme @@ -103,6 +106,7 @@ Item { anchors.top: parent.top anchors.topMargin: 96 currentIndex: 0 + clip: true width: 444 // stack index 0