Refactor LoginPage into separate components

harmonyqml/components/base/HButton.qml

@@ -12,6 +12,15 @@ Button {
 
     property int contentWidth: 0
 
+    signal canceled
+    signal clicked
+    signal doubleClicked
+    signal entered
+    signal exited
+    signal pressAndHold
+    signal pressed
+    signal released
+
     function loadingUntilFutureDone(future) {
         loading = true
         future.onGotResult.connect(function() { loading = false })
@@ -75,17 +84,29 @@ Button {
     }
 
     MouseArea {
-        z: 101
         anchors.fill: parent
         hoverEnabled: true
-        propagateComposedEvents: true
 
-        onEntered: overlayOpacity = checked ? 0 : 0.3
-        onExited: overlayOpacity = 0
-        onPressed: overlayOpacity += 0.3
+        onCanceled: button.canceled()
+        onClicked: button.clicked()
+        onDoubleClicked: button.doubleClicked()
+        onEntered: {
+            overlayOpacity = checked ? 0 : 0.3
+            button.entered()
+        }
+        onExited: {
+            overlayOpacity = 0
+            button.exited()
+        }
+        onPressAndHold: button.pressAndHold()
+        onPressed: {
+            overlayOpacity += 0.3
+            button.pressed()
+        }
         onReleased: {
             if (checkable) { checked = ! checked }
             overlayOpacity = checked ? 0 : 0.3
+            button.released()
         }
     }
 }

harmonyqml/components/base/HInterfaceBox.qml

@@ -0,0 +1,57 @@
+import QtQuick 2.7
+import QtQuick.Controls 2.2
+import QtQuick.Layouts 1.4
+
+HScalingBox {
+    id: interfaceBox
+
+    property alias title: interfaceTitle.text
+    property alias buttonModel: interfaceButtonsRepeater.model
+    property var buttonCallbacks: []
+    property string enterButtonTarget: ""
+
+    default property alias body: interfaceBody.children
+
+    function clickEnterButtonTarget() {
+        for (var i = 0; i < buttonModel.length; i++) {
+            var btn = interfaceButtonsRepeater.itemAt(i)
+            if (btn.name === enterButtonTarget) { btn.clicked() }
+        }
+    }
+
+    ColumnLayout {
+        anchors.fill: parent
+        id: mainColumn
+
+        HRowLayout {
+            Layout.alignment: Qt.AlignHCenter
+            Layout.margins: interfaceBox.margins
+
+            HLabel {
+                id: interfaceTitle
+                font.pixelSize: HStyle.fontSize.big
+            }
+        }
+
+        ColumnLayout { id: interfaceBody }
+
+        HRowLayout {
+            Repeater {
+                id: interfaceButtonsRepeater
+                model: []
+
+                HButton {
+                    property string name: modelData.name
+
+                    id: button
+                    text: modelData.text
+                    iconName: modelData.iconName || ""
+                    onClicked: buttonCallbacks[modelData.name](button)
+
+                    Layout.fillWidth: true
+                    Layout.preferredHeight: 32
+                }
+            }
+        }
+    }
+}

harmonyqml/components/base/HScalingBox.qml

@@ -0,0 +1,17 @@
+import QtQuick 2.7
+
+Rectangle {
+    property var container: parent
+
+    property real widthForHeight: 0.75
+    property int baseHeight: 300
+    property int startScalingUpAboveHeight: 1080
+
+    readonly property int baseWidth: baseHeight * widthForHeight
+    readonly property int margins: baseHeight * 0.03
+
+    color: Qt.hsla(1, 1, 1, 0.3)
+    height: Math.min(container.height, baseHeight)
+    width: Math.min(container.width, baseWidth)
+    scale: Math.max(1, container.height / startScalingUpAboveHeight)
+}