feat: login animation

This commit is contained in:
Richard Ramos 2020-06-22 15:32:00 -04:00 committed by Iuri Matias
parent 80b8d8f478
commit 4517b5bd28
2 changed files with 106 additions and 58 deletions

View File

@ -54,75 +54,103 @@ ModalPopup {
font.pixelSize: 12 font.pixelSize: 12
} }
footer: StyledButton { footer: Item {
id: submitBtn anchors.top: parent.bottom
anchors.bottom: parent.bottom
anchors.topMargin: Theme.padding
anchors.right: parent.right anchors.right: parent.right
anchors.rightMargin: Theme.padding anchors.bottom: popup.bottom
label: loading ? qsTr("Logging in...") : qsTr("Create password") anchors.left: parent.left
disabled: firstPasswordField.text === "" || repeatPasswordField.text === "" || loading Image {
id: loadingImg
MessageDialog { visible: loading
id: importError anchors.top: submitBtn.top
title: qsTr("Error importing account") anchors.topMargin: Theme.padding
text: qsTr("An error occurred while importing your account: ") anchors.right: submitBtn.left
icon: StandardIcon.Critical anchors.rightMargin: Theme.padding
standardButtons: StandardButton.Ok source: "../app/img/settings.svg"
onVisibilityChanged: { width: 20
loading = false height: 20
fillMode: Image.Stretch
RotationAnimator {
target: loadingImg;
from: 0;
to: 360;
duration: 1200
running: true
loops: Animation.Infinite
} }
} }
MessageDialog { StyledButton {
id: importLoginError id: submitBtn
title: qsTr("Login failed") anchors.bottom: parent.bottom
text: qsTr("Login failed. Please re-enter your password and try again.") anchors.topMargin: Theme.padding
icon: StandardIcon.Critical anchors.right: parent.right
standardButtons: StandardButton.Ok anchors.rightMargin: Theme.padding
onVisibilityChanged: { label: loading ? qsTr("Logging in...") : qsTr("Create password")
loading = false
}
}
MessageDialog { disabled: firstPasswordField.text === "" || repeatPasswordField.text === "" || loading
id: passwordsDontMatchError
title: qsTr("Error")
text: qsTr("Passwords don't match")
icon: StandardIcon.Warning
standardButtons: StandardButton.Ok
onAccepted: {
repeatPasswordField.clear()
repeatPasswordField.forceActiveFocus(Qt.MouseFocusReason)
}
}
Connections { MessageDialog {
target: onboardingModel id: importError
ignoreUnknownSignals: true title: qsTr("Error importing account")
onLoginResponseChanged: { text: qsTr("An error occurred while importing your account: ")
if (error) { icon: StandardIcon.Critical
standardButtons: StandardButton.Ok
onVisibilityChanged: {
loading = false loading = false
importLoginError.open()
} }
} }
}
onClicked : { MessageDialog {
if (firstPasswordField.text === "" || repeatPasswordField.text === "") { id: importLoginError
return 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 Connections {
const result = onboardingModel.storeDerivedAndLogin(repeatPasswordField.text); target: onboardingModel
const error = JSON.parse(result).error ignoreUnknownSignals: true
if (error) { onLoginResponseChanged: {
importError.text += error if (error) {
return importError.open() 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()
}
} }
} }
} }

View File

@ -133,7 +133,7 @@ Item {
Button { Button {
id: submitBtn id: submitBtn
visible: txtPassword.text.length > 0 visible: !loading && txtPassword.text.length > 0
width: 40 width: 40
height: 40 height: 40
anchors.left: txtPassword.right anchors.left: txtPassword.right
@ -150,7 +150,7 @@ Item {
anchors.horizontalCenter: parent.horizontalCenter anchors.horizontalCenter: parent.horizontalCenter
anchors.verticalCenter: parent.verticalCenter anchors.verticalCenter: parent.verticalCenter
// TODO replace by a real loading image // 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 width: 13.5
height: 17.5 height: 17.5
fillMode: Image.PreserveAspectFit 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 { MessageDialog {
id: loginError id: loginError
title: "Login failed" title: "Login failed"