From 4517b5bd28e0b478f5126024a395166660aaf96e Mon Sep 17 00:00:00 2001 From: Richard Ramos Date: Mon, 22 Jun 2020 15:32:00 -0400 Subject: [PATCH] feat: login animation --- ui/onboarding/CreatePasswordModal.qml | 140 +++++++++++++++----------- ui/onboarding/Login.qml | 24 ++++- 2 files changed, 106 insertions(+), 58 deletions(-) diff --git a/ui/onboarding/CreatePasswordModal.qml b/ui/onboarding/CreatePasswordModal.qml index 6be4bfde43..c314568cd7 100644 --- a/ui/onboarding/CreatePasswordModal.qml +++ b/ui/onboarding/CreatePasswordModal.qml @@ -54,75 +54,103 @@ ModalPopup { font.pixelSize: 12 } - footer: StyledButton { - id: submitBtn - anchors.bottom: parent.bottom - anchors.topMargin: Theme.padding + footer: Item { + anchors.top: parent.bottom anchors.right: parent.right - anchors.rightMargin: Theme.padding - label: loading ? qsTr("Logging in...") : qsTr("Create password") + anchors.bottom: popup.bottom + anchors.left: parent.left - disabled: firstPasswordField.text === "" || repeatPasswordField.text === "" || loading - - MessageDialog { - id: importError - title: qsTr("Error importing account") - text: qsTr("An error occurred while importing your account: ") - icon: StandardIcon.Critical - standardButtons: StandardButton.Ok - onVisibilityChanged: { - loading = false + Image { + id: loadingImg + visible: loading + anchors.top: submitBtn.top + anchors.topMargin: Theme.padding + anchors.right: submitBtn.left + anchors.rightMargin: Theme.padding + source: "../app/img/settings.svg" + width: 20 + height: 20 + fillMode: Image.Stretch + RotationAnimator { + target: loadingImg; + from: 0; + to: 360; + duration: 1200 + running: true + loops: Animation.Infinite } } - MessageDialog { - id: importLoginError - title: qsTr("Login failed") - text: qsTr("Login failed. Please re-enter your password and try again.") - icon: StandardIcon.Critical - standardButtons: StandardButton.Ok - onVisibilityChanged: { - loading = false - } - } + StyledButton { + id: submitBtn + anchors.bottom: parent.bottom + anchors.topMargin: Theme.padding + anchors.right: parent.right + anchors.rightMargin: Theme.padding + label: loading ? qsTr("Logging in...") : qsTr("Create password") - MessageDialog { - id: passwordsDontMatchError - title: qsTr("Error") - text: qsTr("Passwords don't match") - icon: StandardIcon.Warning - standardButtons: StandardButton.Ok - onAccepted: { - repeatPasswordField.clear() - repeatPasswordField.forceActiveFocus(Qt.MouseFocusReason) - } - } + disabled: firstPasswordField.text === "" || repeatPasswordField.text === "" || loading - Connections { - target: onboardingModel - ignoreUnknownSignals: true - onLoginResponseChanged: { - if (error) { + MessageDialog { + id: importError + title: qsTr("Error importing account") + text: qsTr("An error occurred while importing your account: ") + icon: StandardIcon.Critical + standardButtons: StandardButton.Ok + onVisibilityChanged: { loading = false - importLoginError.open() } } - } - onClicked : { - if (firstPasswordField.text === "" || repeatPasswordField.text === "") { - return + MessageDialog { + id: importLoginError + title: qsTr("Login failed") + text: qsTr("Login failed. Please re-enter your password and try again.") + icon: StandardIcon.Critical + standardButtons: StandardButton.Ok + onVisibilityChanged: { + loading = false + } } - if (repeatPasswordField.text !== firstPasswordField.text) { - return passwordsDontMatchError.open() + + MessageDialog { + id: passwordsDontMatchError + title: qsTr("Error") + text: qsTr("Passwords don't match") + icon: StandardIcon.Warning + standardButtons: StandardButton.Ok + onAccepted: { + repeatPasswordField.clear() + repeatPasswordField.forceActiveFocus(Qt.MouseFocusReason) + } } - // TODO this doesn't seem to work because the function freezes the view - loading = true - const result = onboardingModel.storeDerivedAndLogin(repeatPasswordField.text); - const error = JSON.parse(result).error - if (error) { - importError.text += error - return importError.open() + + Connections { + target: onboardingModel + ignoreUnknownSignals: true + onLoginResponseChanged: { + if (error) { + loading = false + importLoginError.open() + } + } + } + + onClicked : { + if (firstPasswordField.text === "" || repeatPasswordField.text === "") { + return + } + if (repeatPasswordField.text !== firstPasswordField.text) { + return passwordsDontMatchError.open() + } + // TODO this doesn't seem to work because the function freezes the view + loading = true + const result = onboardingModel.storeDerivedAndLogin(repeatPasswordField.text); + const error = JSON.parse(result).error + if (error) { + importError.text += error + return importError.open() + } } } } diff --git a/ui/onboarding/Login.qml b/ui/onboarding/Login.qml index d1a988867d..bfe534825d 100644 --- a/ui/onboarding/Login.qml +++ b/ui/onboarding/Login.qml @@ -133,7 +133,7 @@ Item { Button { id: submitBtn - visible: txtPassword.text.length > 0 + visible: !loading && txtPassword.text.length > 0 width: 40 height: 40 anchors.left: txtPassword.right @@ -150,7 +150,7 @@ Item { anchors.horizontalCenter: parent.horizontalCenter anchors.verticalCenter: parent.verticalCenter // TODO replace by a real loading image - source: loading ? "../app/img/refresh.svg" : "../app/img/arrowUp.svg" + source: "../app/img/arrowUp.svg" width: 13.5 height: 17.5 fillMode: Image.PreserveAspectFit @@ -170,6 +170,26 @@ Item { } } + Image { + id: loadingImg + visible: loading + anchors.left: txtPassword.right + anchors.leftMargin: Theme.padding + anchors.verticalCenter: txtPassword.verticalCenter + source: "../app/img/settings.svg" + width: 30 + height: 30 + fillMode: Image.Stretch + RotationAnimator { + target: loadingImg; + from: 0; + to: 360; + duration: 1200 + running: true + loops: Animation.Infinite + } + } + MessageDialog { id: loginError title: "Login failed"