moment/src/qml/Base/HPasswordPopup.qml

import QtQuick 2.12
import QtQuick.Controls 2.12
import QtQuick.Layouts 1.12
import "../SidePane"

Popup {
    id: popup
    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


    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
    }

    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.fillWidth: true
        }

        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
            }

            HIcon {
                svgName: passwordValid ? "ok" : "cancel"
                visible: Layout.preferredWidth > 0

                Layout.preferredWidth:
                    passwordValid == null ||
                    (validateWhileTyping && ! okClicked && ! passwordValid) ?
                    0 :implicitWidth

                Behavior on Layout.preferredWidth { HNumberAnimation {} }
            }
        }
    }
}