adding show password toggle in textfield

This commit is contained in:
Wayne Chen 2018-09-05 23:48:21 -07:00
parent 7a136812bf
commit 78fa52285f
3 changed files with 38 additions and 7 deletions

View file

@ -0,0 +1,5 @@
<svg width="31" height="23" viewBox="0 0 31 23" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M3.59534 11.0156C6.16042 13.4128 9.65987 15.5898 13.6042 16.1774C17.686 16.7856 22.4164 15.7196 27.3057 11.0659C22.0721 6.07309 17.0642 5.14115 12.9153 5.90073C8.99427 6.61859 5.69298 8.87688 3.59534 11.0156ZM12.455 3.27591C17.7727 2.30235 23.9836 3.74895 30.1053 10.1333L31 11.0664L30.1053 11.9994C24.3636 17.9875 18.4774 19.5983 13.2276 18.8161C8.06048 18.0463 3.70384 14.9892 0.837069 11.9994L0 11.1265L0.778477 10.1986C3.05338 7.48717 7.2318 4.23217 12.455 3.27591Z" fill="#3D3D3D"/>
<ellipse cx="15.6539" cy="10.9218" rx="3.65386" ry="3.81061" fill="#3D3D3D"/>
<line x1="25" y1="2.12132" x2="7.12132" y2="20" stroke="#3D3D3D" stroke-width="3" stroke-linecap="round"/>
</svg>

After

Width:  |  Height:  |  Size: 825 B

View file

@ -0,0 +1,4 @@
<svg width="31" height="16" viewBox="0 0 31 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M3.59534 8.01564C6.16042 10.4128 9.65987 12.5898 13.6042 13.1774C17.686 13.7856 22.4164 12.7196 27.3057 8.06585C22.0721 3.07309 17.0642 2.14115 12.9153 2.90073C8.99427 3.61859 5.69298 5.87688 3.59534 8.01564ZM12.455 0.275915C17.7727 -0.697651 23.9836 0.748949 30.1053 7.13329L31 8.06636L30.1053 8.99944C24.3636 14.9875 18.4774 16.5983 13.2276 15.8161C8.06048 15.0463 3.70384 11.9892 0.837069 8.99944L0 8.12646L0.778477 7.1986C3.05338 4.48717 7.2318 1.23217 12.455 0.275915Z" fill="#3D3D3D"/>
<ellipse cx="15.644" cy="7.92179" rx="3.65386" ry="3.81061" fill="#3D3D3D"/>
</svg>

After

Width:  |  Height:  |  Size: 721 B

View file

@ -86,7 +86,7 @@ Item {
width: 48
height: 48
}
ShortcutText {
id: mainTextContainer
anchors {
@ -142,6 +142,7 @@ Item {
onLinkActivated: loginDialog.openUrl(link)
}
onFocusChanged: {
root.text = "";
}
@ -151,7 +152,6 @@ Item {
id: passwordField
width: parent.width
placeholderText: "Password"
echoMode: showPassword.checked ? TextInput.Normal : TextInput.Password
activeFocusOnPress: true
ShortcutText {
@ -177,12 +177,34 @@ Item {
root.isPassword = true;
}
Keys.onReturnPressed: linkAccountBody.login()
}
Image {
id: showPasswordImage
x: parent.width - 40
height: parent.height
width: parent.width - (parent.width - 40)
source: "../../images/eyeOpen.svg"
}
CheckBox {
id: showPassword
text: "Show password"
Rectangle {
z: 10
x: parent.width - 40
width: parent.width - (parent.width - 40)
height: parent.height
color: "transparent"
MouseArea {
id: passwordFieldMouseArea
anchors.fill: parent
acceptedButtons: Qt.LeftButton
property bool showPassword: false
onClicked: {
showPassword = !showPassword;
passwordField.echoMode = showPassword ? TextInput.Normal : TextInput.Password;
showPasswordImage.source = showPassword ? "../../images/eyeClosed.svg" : "../../images/eyeOpen.svg";
}
}
}
Keys.onReturnPressed: linkAccountBody.login()
}
InfoItem {