import QtQuick 2.15
import QtQuick.Controls 2.15

TextField {
    id: field
    property bool reveal: false
    signal revealClicked()

    implicitHeight: 52
    leftPadding: 14
    rightPadding: 46
    echoMode: reveal ? TextInput.Normal : TextInput.Password
    color: "#e8e8e6"
    placeholderTextColor: "#9a9ca1"
    font.pixelSize: 15

    background: Rectangle {
        color: "#232427"
        border.color: field.activeFocus ? "#62a052" : "#44464b"
        border.width: field.activeFocus ? 1.5 : 1
    }

    Canvas {
        width: 20
        height: 20
        anchors.right: parent.right
        anchors.rightMargin: 12
        anchors.verticalCenter: parent.verticalCenter
        property bool aktiv: field.reveal
        onAktivChanged: requestPaint()
        onPaint: {
            var c = getContext("2d")
            c.reset()
            c.strokeStyle = aktiv ? "#62a052" : "#9a9ca1"
            c.lineWidth = 1.8
            c.beginPath()
            c.moveTo(2, 10)
            c.quadraticCurveTo(10, 2, 18, 10)
            c.quadraticCurveTo(10, 18, 2, 10)
            c.stroke()
            c.beginPath()
            c.arc(10, 10, 2.8, 0, 2 * Math.PI)
            c.stroke()
        }
    }

    MouseArea {
        anchors.right: parent.right
        anchors.verticalCenter: parent.verticalCenter
        width: 40
        height: 40
        cursorShape: Qt.PointingHandCursor
        onClicked: field.revealClicked()
    }
}