107 lines
3.0 KiB
QML
107 lines
3.0 KiB
QML
// A password entry with a reveal toggle.
|
|
//
|
|
// Deliberately not the clipboard popover's SearchField with different text: a
|
|
// Wi-Fi key typed into a field that echoes it is readable by anyone behind you,
|
|
// and a search glyph in front of a password prompt is simply wrong. Masked by
|
|
// default, revealable while held, because the reason people want to see it is
|
|
// to check a character they just typed.
|
|
|
|
import QtQuick
|
|
import qs.config
|
|
|
|
Rectangle {
|
|
id: root
|
|
|
|
property alias text: input.text
|
|
property string placeholder: "Password"
|
|
property bool revealed: false
|
|
|
|
signal accepted
|
|
|
|
implicitHeight: 32
|
|
radius: Theme.pillRadius
|
|
color: Theme.alpha(Theme.fg, 0.07)
|
|
// Not left at 0 so the focus ring has something to animate. See the note in
|
|
// modules/clipboard/SearchField.qml.
|
|
border.width: 1
|
|
border.color: input.activeFocus ? Theme.alpha(Theme.accent, 0.55) : "transparent"
|
|
|
|
Behavior on border.color {
|
|
ColorAnimation { duration: Theme.durFast }
|
|
}
|
|
|
|
function grab(): void {
|
|
input.forceActiveFocus();
|
|
}
|
|
|
|
function clear(): void {
|
|
input.text = "";
|
|
root.revealed = false;
|
|
}
|
|
|
|
TextInput {
|
|
id: input
|
|
|
|
anchors.left: parent.left
|
|
anchors.leftMargin: 13
|
|
anchors.right: revealButton.left
|
|
anchors.rightMargin: 8
|
|
anchors.verticalCenter: parent.verticalCenter
|
|
|
|
activeFocusOnTab: true
|
|
color: Theme.fg
|
|
selectionColor: Theme.alpha(Theme.accent, 0.5)
|
|
selectedTextColor: Theme.fg
|
|
font.family: Theme.fontFamily
|
|
font.pixelSize: Theme.fontSize
|
|
echoMode: root.revealed ? TextInput.Normal : TextInput.Password
|
|
passwordCharacter: "•"
|
|
clip: true
|
|
|
|
onAccepted: root.accepted()
|
|
|
|
Text {
|
|
anchors.fill: parent
|
|
verticalAlignment: Text.AlignVCenter
|
|
visible: input.text === ""
|
|
text: root.placeholder
|
|
color: Theme.fgMuted
|
|
font.family: Theme.fontFamily
|
|
font.pixelSize: Theme.fontSize
|
|
elide: Text.ElideRight
|
|
}
|
|
}
|
|
|
|
Rectangle {
|
|
id: revealButton
|
|
|
|
anchors.right: parent.right
|
|
anchors.rightMargin: 5
|
|
anchors.verticalCenter: parent.verticalCenter
|
|
width: 26
|
|
height: 24
|
|
radius: 7
|
|
color: revealHover.hovered ? Theme.alpha(Theme.fg, 0.12) : "transparent"
|
|
border.width: 0
|
|
visible: input.text !== ""
|
|
|
|
Text {
|
|
anchors.centerIn: parent
|
|
// Nerd Font eye / eye-slash. fontMono is used for icon glyphs only.
|
|
text: root.revealed ? "\u{F070}" : "\u{F06E}"
|
|
font.family: Theme.fontMono
|
|
font.pixelSize: 12
|
|
color: root.revealed ? Theme.accent : Theme.fgMuted
|
|
}
|
|
|
|
HoverHandler {
|
|
id: revealHover
|
|
cursorShape: Qt.PointingHandCursor
|
|
}
|
|
|
|
TapHandler {
|
|
onTapped: root.revealed = !root.revealed
|
|
}
|
|
}
|
|
}
|