QML UI: rework single credential page to two pages

This commit tries to implement most of issue #515. It reworks the
one credential page, which its dynamic PIN part, into two pages.
Main driver of selecting one of the two pages is the showPin
boolean. Page 1 contains the email/passwd field (and the
option to use a no cloud setup). Page 2 only contains the PIN
part (and the option to cancel the process).

The Kirigami central button does not seem very handy here. We
need, for example, a cancel, sign-in and register, only register,
etc. buttons, which are not easy to handle in specific icons.
Therefore, normal pushbuttons are chosen to deal with user
interaction, and the Kirigami button is removed from these
pages.

Signed-off-by: Jan Mulder <jlmulder@xs4all.nl>

1 files changed, 60 insertions, 6 deletions

diff --git a/mobile-widgets/qml/CloudCredentials.qml b/mobile-widgets/qml/CloudCredentials.qml
index 121dcfe2e..720783142 100644
--- a/mobile-widgets/qml/CloudCredentials.qml
+++ b/mobile-widgets/qml/CloudCredentials.qml
@@ -53,6 +53,7 @@ Item {
 
 		Kirigami.Label {
 			text: qsTr("Email")
+			visible: !rootItem.showPin
 			font.pointSize: subsurfaceTheme.smallPointSize
 			color: subsurfaceTheme.secondaryTextColor
 		}
@@ -60,16 +61,15 @@ Item {
 		TextField {
 			id: login
 			text: manager.cloudUserName
+			visible: !rootItem.showPin
 			Layout.fillWidth: true
 			inputMethodHints: Qt.ImhEmailCharactersOnly |
 					  Qt.ImhNoAutoUppercase
-			onEditingFinished: {
-				saveCredentials()
-			}
 		}
 
 		Kirigami.Label {
 			text: qsTr("Password")
+			visible: !rootItem.showPin
 			font.pointSize: subsurfaceTheme.smallPointSize
 			color: subsurfaceTheme.secondaryTextColor
 		}
@@ -77,14 +77,12 @@ Item {
 		TextField {
 			id: password
 			text: manager.cloudPassword
+			visible: !rootItem.showPin
 			echoMode: TextInput.PasswordEchoOnEdit
 			inputMethodHints: Qt.ImhSensitiveData |
 					  Qt.ImhHiddenText |
 					  Qt.ImhNoAutoUppercase
 			Layout.fillWidth: true
-			onEditingFinished: {
-				saveCredentials()
-			}
 		}
 
 		Kirigami.Label {
@@ -97,5 +95,61 @@ Item {
 			Layout.fillWidth: true
 			visible: rootItem.showPin
 		}
+
+		RowLayout {
+			anchors.left: parent.left
+			anchors.right: parent.right
+			anchors.margins: Kirigami.Units.smallSpacing
+			spacing: Kirigami.Units.smallSpacing
+			visible: rootItem.showPin
+			SsrfButton {
+				id:registerpin
+				text: qsTr("Register") 
+				onClicked: {
+					saveCredentials()
+				}
+			}
+			Kirigami.Label {
+				text: ""  // Spacer between 2 button groups
+				Layout.fillWidth: true
+			}
+			SsrfButton {
+				id: cancelpin
+				text: qsTr("Cancel")
+				onClicked: {
+					manager.cancelCredentialsPinSetup()
+					rootItem.returnTopPage()
+				}
+			}
+		}
+
+		RowLayout {
+			anchors.left: parent.left
+			anchors.right: parent.right
+			anchors.margins: Kirigami.Units.smallSpacing
+			spacing: Kirigami.Units.smallSpacing
+			visible: !rootItem.showPin
+
+			SsrfButton {
+				id:signin_register_normal
+				text: qsTr("Sign-in or Register")
+				onClicked: {
+					saveCredentials()
+				}
+			}
+			Kirigami.Label {
+				text: ""  // Spacer between 2 button groups
+				Layout.fillWidth: true
+			}
+			SsrfButton {
+				id: toNoCloudMode
+				text: qsTr("No cloud mode")
+				onClicked: {
+					manager.syncToCloud = false
+					manager.credentialStatus = QMLManager.CS_NOCLOUD
+					manager.saveCloudCredentials()
+				}
+			}
+		}
 	}
 }