Improve layout of login dialog

- Add margins consistent with other pages
- Top-align the dialog, we want to keep the inputs as high as possible
  on the screen to prevent the on-screen-keyboard from covering them
- Add a checkbox to show the password, with input on mobile devices,
  this is a commonly found and useful feature
- Remove Cancel button, this is just navigation chrome, the user can
  simply use the back button in the top bar (will be fixed in a
  subsequent patch)

Signed-off-by: Sebastian Kügler <sebas@kde.org>
Signed-off-by: Dirk Hohndel <dirk@hohndel.org>

1 files changed, 18 insertions, 12 deletions

diff --git a/qt-mobile/qml/Preferences.qml b/qt-mobile/qml/Preferences.qml
index 8f4a15328..36da051e6 100644
--- a/qt-mobile/qml/Preferences.qml
+++ b/qt-mobile/qml/Preferences.qml
@@ -16,11 +16,13 @@ Item {
 
 	GridLayout {
 		columns: 2
-		anchors.centerIn: parent
-		width: parent.width
+		anchors.fill: parent
+		anchors.margins: units.gridUnit
 
 		Label {
 			text: "Enter your Subsurface cloud credentials"
+			Layout.bottomMargin: units.largeSpacing
+			font.pointSize: units.titlePointSize
 			Layout.columnSpan: 2
 		}
 
@@ -46,6 +48,18 @@ Item {
 		}
 
 		Label {
+			text: "Show password"
+		}
+
+		CheckBox {
+			checked: false
+			id: showPassword
+			onCheckedChanged: {
+				password.echoMode = checked ? TextInput.Normal : TextInput.Password
+			}
+		}
+
+		Label {
 			text: "Save Password locally"
 		}
 
@@ -54,6 +68,7 @@ Item {
 			id: savePassword
 		}
 
+		Item { width: units.gridUnit; height: width }
 		Item {
 			height: saveButton.height
 			width: saveButton.width
@@ -72,16 +87,7 @@ Item {
 		}
 
 		Item {
-			height: cancelButton.height
-			width: cancelButton.width
-			Button {
-				id: cancelButton
-				text: "Cancel"
-
-				onClicked: {
-					stackView.pop();
-				}
-			}
+			Layout.fillHeight: true
 		}
 	}
 }