Improve import keys password popup

src/qml/Base/HInterfaceBox.qml

@@ -59,11 +59,15 @@ HRectangle {
             spacing: interfaceBox.verticalSpacing
 
             Layout.fillWidth: true
+            Layout.topMargin:
+                interfaceTitle.visible ? 0 : interfaceBox.verticalSpacing
             Layout.leftMargin: interfaceBox.horizontalSpacing
             Layout.rightMargin: interfaceBox.horizontalSpacing
         }
 
         HRowLayout {
+            visible: buttonModel.length > 0
+
             Repeater {
                 id: interfaceButtonsRepeater
                 model: []
@@ -74,7 +78,9 @@ HRectangle {
                     id: button
                     text: modelData.text
                     icon.name: modelData.iconName || ""
-                    enabled: modelData.enabled && ! button.loading
+                    enabled: (modelData.enabled == undefined ?
+                              true : modelData.enabled) &&
+                             ! button.loading
                     onClicked: buttonCallbacks[modelData.name](button)
 
                     Layout.fillWidth: true

src/qml/Base/HPasswordPopup.qml

@@ -5,48 +5,105 @@ import "../SidePane"
 
 Popup {
     id: popup
-    width: window.width
     anchors.centerIn: Overlay.overlay
     modal: true
+    padding: 0
 
     onOpened: passwordField.forceActiveFocus()
 
+
+    property bool validateWhileTyping: false
+
+    property string acceptedPassword: ""
+    property var passwordValid: null
+    property bool okClicked: false
+
     property alias label: popupLabel
     property alias field: passwordField
-    property string password: ""
+
+
+    function verifyPassword(pass) {
+        // Implement me when using this component
+        return false
+    }
+
+
+    enter: Transition {
+        HNumberAnimation { property: "scale"; from: 0; to: 1; overshoot: 4 }
+    }
+
+    exit: Transition {
+        HNumberAnimation { property: "scale"; to: 0 }
+    }
 
     background: HRectangle {
         color: theme.controls.popup.background
     }
 
-    HColumnLayout {
-        width: parent.width
-        spacing: theme.spacing
+    contentItem: HInterfaceBox {
+        id: box
+        implicitWidth: theme.minimumSupportedWidthPlusSpacing
+        enterButtonTarget: "ok"
+        buttonModel: [
+            { name: "ok", text: qsTr("OK"), iconName: "ok",
+              enabled: passwordField.text &&
+                       (validateWhileTyping ? passwordValid : true) },
+            { name: "cancel", text: qsTr("Cancel"), iconName: "cancel" },
+        ]
+        buttonCallbacks: ({
+            ok: button => {
+                let password   = passwordField.text
+                okClicked      = true
+                button.loading = true
+
+                if (verifyPassword(password)) {
+                    passwordValid          = true
+                    popup.acceptedPassword = password
+                    popup.close()
+                } else {
+                    passwordValid = false
+                }
+
+                button.loading = false
+            },
+            cancel: button => { popup.close() },
+        })
+
 
         HLabel {
             id: popupLabel
             wrapMode: Text.Wrap
 
-            Layout.alignment: Qt.AlignCenter
-            Layout.minimumWidth: theme.minimumSupportedWidth
-            Layout.maximumWidth:
-                Math.min(480, window.width - theme.spacing * 2)
+            Layout.fillWidth: true
         }
 
-        HTextField {
-            id: passwordField
-            echoMode: TextInput.Password
-            focus: true
-            onAccepted: {
-                popup.password = text
-                popup.close()
+        HRowLayout {
+            spacing: box.horizontalSpacing
+
+            HTextField {
+                id: passwordField
+                placeholderText: qsTr("Passphrase")
+                echoMode: TextInput.Password
+                focus: true
+                error: passwordValid === false
+
+                onTextChanged: passwordValid =
+                    validateWhileTyping ? verifyPassword(text) : null
+
+                Layout.fillWidth: true
             }
 
-            Layout.alignment: Qt.AlignCenter
-            Layout.fillWidth: true
+            HIcon {
+                svgName: passwordValid ? "ok" : "cancel"
+                visible: Layout.preferredWidth > 0
 
-            Layout.preferredWidth: popupLabel.width
-            Layout.maximumWidth: popupLabel.width
+                Layout.preferredWidth:
+                    passwordValid == null ||
+                    (validateWhileTyping && ! okClicked && ! passwordValid) ?
+                    0 :implicitWidth
+
+                Behavior on Layout.preferredWidth { HNumberAnimation {} }
+            }
         }
     }
 }

src/qml/Base/HTextField.qml

@@ -8,9 +8,12 @@ TextField {
 
     readonly property QtObject _tf: theme.controls.textField
 
+    property bool error: false
+
     property bool bordered: true
     property color backgroundColor: _tf.background
     property color borderColor: _tf.border
+    property color errorBorder: _tf.errorBorder
     property color focusedBackgroundColor: _tf.focusedBackground
     property color focusedBorderColor: _tf.focusedBorder
     property alias radius: textFieldBackground.radius
@@ -20,7 +23,8 @@ TextField {
     background: Rectangle {
         id: textFieldBackground
         color: field.activeFocus ? focusedBackgroundColor : backgroundColor
-        border.color: field.activeFocus ? focusedBorderColor : borderColor
+        border.color: error ? errorBorder :
+                      field.activeFocus ? focusedBorderColor : borderColor
         border.width: bordered ? theme.controls.textField.borderWidth : 0
 
         Behavior on color { HColorAnimation { factor: 0.25 } }