feat(GODT-2767): login right pane. [skip-ci]

This commit is contained in:
Xavier Michelon
2023-08-02 09:33:58 +02:00
parent c8f0d7f32a
commit dd5e745e37
3 changed files with 76 additions and 45 deletions

View File

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

View File

@ -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();
}
}
}
}
}

View File

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