LedDisplay/OmobiDisplayApp/ressources/qml/PasswordInputDelegate.qml

import QtQuick 2.0
import QtQuick.Controls 2.9
import QtQuick.Controls.Material 2.0
import QtQuick.Layouts 1.0

ItemDelegate {
    id: control

    property string value: ""
    property bool required: false
    property color textColor: control.required && value === "" ? "red":control.Material.foreground
    property string placeholderText: ""
    property string repeatPlaceholderText: ""
    property int minimumLength: 4
    property int maximumLength: 4

    onClicked: {
        textField.text = value
        textEditDialog.open()
    }

    Text {
        anchors {
            right: nextPageIconText.left
            verticalCenter: parent.verticalCenter
            rightMargin: control.padding
        }

        width: parent.width * 0.6
        elide: Text.ElideRight
        font.pixelSize: parent.font.pixelSize

        horizontalAlignment: Text.AlignRight

        text: "****"
    }

    Text {
        id: nextPageIconText

        anchors {
            right: parent.right
            verticalCenter: parent.verticalCenter
            rightMargin: control.padding
        }

        font.pixelSize: parent.height * 0.5
        font.styleName: fontAwesome.name

        verticalAlignment: Text.AlignVCenter

        text: "\uf105"
    }

    Dialog {
        id: textEditDialog
        parent: Overlay.overlay

        x: (parent.width - width) / 2
        y: (parent.height - height) / 2

        width: parent.width * 0.9

        Material.theme: control.Material.theme
        Material.accent: control.Material.accent
        modal: true

        title: control.text

        contentItem: ColumnLayout {
            TextField {
                id: textField

                Layout.fillWidth: true

                placeholderText: control.placeholderText
                text: control.value

                color: text.length < 4 || text.length > 4 ? "red":control.Material.foreground
            }

            TextField {
                id: repeatTextField

                Layout.fillWidth: true

                placeholderText: control.repeatPlaceholderText
                text: control.value

                color: repeatTextField.text !== textField.text ? "red":control.Material.foreground
            }
        }


        footer: DialogButtonBox {

            //  alignment: Qt.AlignHCenter
            buttonLayout: DialogButtonBox.GnomeLayout

            Material.background: "transparent"

            Button {
                flat: true
                enabled: !(textField.text.length < 4 || textField.text.length > 4) && textField.text === repeatTextField.text
                text: "save"
                DialogButtonBox.buttonRole: DialogButtonBox.AcceptRole
            }

            Button {
                flat: true
                text: "cancel"
                DialogButtonBox.buttonRole: DialogButtonBox.RejectRole
            }
        }

        onAccepted: {
            control.value = textField.text
        }
    }
}