436 lines
15 KiB
QML
436 lines
15 KiB
QML
import QtQuick 2.14
|
|
import QtQuick.Controls 2.14
|
|
import QtQuick.Layouts 1.12
|
|
|
|
import shared.panels 1.0
|
|
import shared.controls 1.0
|
|
import shared.stores 1.0
|
|
import utils 1.0
|
|
|
|
import StatusQ.Controls 0.1
|
|
import StatusQ.Core 0.1
|
|
import StatusQ.Core.Theme 0.1
|
|
import StatusQ.Components 0.1
|
|
import StatusQ.Popups 0.1
|
|
|
|
ColumnLayout {
|
|
id: root
|
|
|
|
property bool ready: newPswInput.text.length >= Constants.minPasswordLength && newPswInput.text === confirmPswInput.text && errorTxt.text === ""
|
|
property bool createNewPsw: true
|
|
property string title: createNewPsw ? qsTr("Create a password") : qsTr("Change your password")
|
|
property bool titleVisible: true
|
|
property real titleSize: 22
|
|
property string introText: {
|
|
if (createNewPsw) {
|
|
return qsTr("Create a password to unlock Status on this device & sign transactions.")
|
|
}
|
|
|
|
return qsTr("Change password used to unlock Status on this device & sign transactions.")
|
|
}
|
|
property string recoverText: qsTr("You will not be able to recover this password if it is lost.")
|
|
property string strengthenText: qsTr("Minimum %n character(s). To strengthen your password consider including:", "", Constants.minPasswordLength)
|
|
property bool highSizeIntro: false
|
|
|
|
property int contentAlignment: Qt.AlignHCenter
|
|
|
|
property var passwordStrengthScoreFunction: function () {}
|
|
|
|
readonly property int zBehind: 1
|
|
readonly property int zFront: 100
|
|
|
|
property alias currentPswText: currentPswInput.text
|
|
property alias newPswText: newPswInput.text
|
|
property alias confirmationPswText: confirmPswInput.text
|
|
property alias errorMsgText: errorTxt.text
|
|
|
|
signal returnPressed()
|
|
|
|
function forceNewPswInputFocus() { newPswInput.forceActiveFocus(Qt.MouseFocusReason) }
|
|
|
|
function reset() {
|
|
newPswInput.text = ""
|
|
currentPswInput.text = ""
|
|
confirmPswInput.text = ""
|
|
errorTxt.text = ""
|
|
strengthInditactor.strength = StatusPasswordStrengthIndicator.Strength.None
|
|
|
|
// Update focus:
|
|
if(root.createNewPsw)
|
|
newPswInput.forceActiveFocus(Qt.MouseFocusReason)
|
|
else
|
|
currentPswInput.forceActiveFocus(Qt.MouseFocusReason)
|
|
}
|
|
|
|
function checkPasswordMatches(onlyIfConfirmPasswordHasFocus = true) {
|
|
if (confirmPswInput.text.length === 0) {
|
|
return
|
|
}
|
|
|
|
if (onlyIfConfirmPasswordHasFocus && !confirmPswInput.focus) {
|
|
return
|
|
}
|
|
|
|
if(newPswInput.text.length >= Constants.minPasswordLength) {
|
|
if(confirmPswInput.text !== newPswInput.text) {
|
|
errorTxt.text = qsTr("Passwords don't match")
|
|
}
|
|
}
|
|
}
|
|
|
|
QtObject {
|
|
id: d
|
|
|
|
property bool containsLower: false
|
|
property bool containsUpper: false
|
|
property bool containsNumbers: false
|
|
property bool containsSymbols: false
|
|
|
|
readonly property var validatorRegexp: /^[!-~]{0,64}$/
|
|
readonly property string validatorErrMessage: qsTr("Only letters, numbers, underscores and hyphens allowed")
|
|
|
|
// Password strength categorization / validation
|
|
function lowerCaseValidator(text) { return (/[a-z]/.test(text)) }
|
|
function upperCaseValidator(text) { return (/[A-Z]/.test(text)) }
|
|
function numbersValidator(text) { return (/\d/.test(text)) }
|
|
// That incudes NOT extended ASCII printable symbols less space:
|
|
function symbolsValidator(text) { return (/[!-\/:-@[-`{-~]/.test(text)) }
|
|
|
|
function validateCharacterSet(text) {
|
|
if(!(d.validatorRegexp).test(text)) {
|
|
errorTxt.text = d.validatorErrMessage
|
|
return false
|
|
}
|
|
|
|
return true
|
|
}
|
|
|
|
// Used to convert strength from a given score to a specific category
|
|
function convertStrength(score) {
|
|
var strength = StatusPasswordStrengthIndicator.Strength.None
|
|
switch(score) {
|
|
case 0: strength = StatusPasswordStrengthIndicator.Strength.VeryWeak; break
|
|
case 1: strength = StatusPasswordStrengthIndicator.Strength.Weak; break
|
|
case 2: strength = StatusPasswordStrengthIndicator.Strength.SoSo; break
|
|
case 3: strength = StatusPasswordStrengthIndicator.Strength.Good; break
|
|
case 4: strength = StatusPasswordStrengthIndicator.Strength.Great; break
|
|
}
|
|
if(strength > 4)
|
|
strength = StatusPasswordStrengthIndicator.Strength.Great
|
|
return strength
|
|
}
|
|
|
|
// Password validation / error message selection:
|
|
function passwordValidation() {
|
|
// 3 rules to validate:
|
|
// * Password is in pwnd passwords database
|
|
if(isInPwndDatabase())
|
|
errorTxt.text = qsTr("This password has been pwned and shouldn't be used")
|
|
|
|
// * Common password
|
|
else if(isCommonPassword())
|
|
errorTxt.text = qsTr("This password is a common word and shouldn't be used")
|
|
|
|
// * Password too short
|
|
else if(isTooShort())
|
|
errorTxt.text = qsTr("Password must be at least %n character(s) long", "", Constants.minPasswordLength)
|
|
}
|
|
|
|
function isInPwndDatabase() {
|
|
// "TODO - Nice To Have: Pwnd password validation NOT implemented yet! "
|
|
return false
|
|
}
|
|
|
|
function isCommonPassword() {
|
|
// "TODO - Nice To Have: Common password validation NOT implemented yet! "
|
|
return false
|
|
}
|
|
|
|
function isTooShort() { return newPswInput.text.length < Constants.minPasswordLength }
|
|
}
|
|
|
|
implicitWidth: 460
|
|
spacing: Style.current.bigPadding
|
|
z: root.zFront
|
|
|
|
StatusBaseText {
|
|
Layout.alignment: root.contentAlignment
|
|
visible: root.titleVisible
|
|
text: root.title
|
|
font.pixelSize: root.titleSize
|
|
font.bold: true
|
|
color: Theme.palette.directColor1
|
|
}
|
|
|
|
ColumnLayout {
|
|
id: introColumn
|
|
|
|
Layout.fillWidth: true
|
|
Layout.alignment: root.contentAlignment
|
|
spacing: 4
|
|
|
|
StatusBaseText {
|
|
Layout.fillWidth: true
|
|
Layout.alignment: root.contentAlignment
|
|
|
|
text: root.introText
|
|
horizontalAlignment: root.contentAlignment
|
|
font.pixelSize: root.highSizeIntro ? Style.current.primaryTextFontSize : Style.current.tertiaryTextFontSize
|
|
wrapMode: Text.WordWrap
|
|
color: Theme.palette.baseColor1
|
|
}
|
|
|
|
StatusBaseText {
|
|
Layout.fillWidth: true
|
|
Layout.alignment: root.contentAlignment
|
|
|
|
text: root.recoverText
|
|
horizontalAlignment: root.contentAlignment
|
|
font.pixelSize: root.highSizeIntro ? Style.current.primaryTextFontSize : Style.current.tertiaryTextFontSize
|
|
wrapMode: Text.WordWrap
|
|
color: Theme.palette.dangerColor1
|
|
}
|
|
}
|
|
|
|
ColumnLayout {
|
|
StatusBaseText {
|
|
text: qsTr("Current password")
|
|
}
|
|
|
|
StatusPasswordInput {
|
|
id: currentPswInput
|
|
objectName: "passwordViewCurrentPassword"
|
|
|
|
property bool showPassword
|
|
|
|
z: root.zFront
|
|
visible: !root.createNewPsw
|
|
Layout.fillWidth: true
|
|
Layout.alignment: root.contentAlignment
|
|
placeholderText: qsTr("Enter current password")
|
|
echoMode: showPassword ? TextInput.Normal : TextInput.Password
|
|
rightPadding: showHideCurrentIcon.width + showHideCurrentIcon.anchors.rightMargin + Style.current.padding / 2
|
|
onAccepted: root.returnPressed()
|
|
|
|
StatusFlatRoundButton {
|
|
id: showHideCurrentIcon
|
|
visible: currentPswInput.text !== ""
|
|
anchors.verticalCenter: parent.verticalCenter
|
|
anchors.right: parent.right
|
|
anchors.rightMargin: 16
|
|
width: 24
|
|
height: 24
|
|
icon.name: currentPswInput.showPassword ? "hide" : "show"
|
|
icon.color: Theme.palette.baseColor1
|
|
|
|
onClicked: currentPswInput.showPassword = !currentPswInput.showPassword
|
|
}
|
|
}
|
|
}
|
|
|
|
StatusModalDivider {
|
|
Layout.fillWidth: true
|
|
Layout.alignment: root.contentAlignment
|
|
}
|
|
|
|
ColumnLayout {
|
|
spacing: 4
|
|
z: root.zFront
|
|
Layout.fillWidth: true
|
|
Layout.alignment: root.contentAlignment
|
|
|
|
StatusBaseText {
|
|
text: qsTr("New password")
|
|
}
|
|
|
|
StatusPasswordInput {
|
|
id: newPswInput
|
|
objectName: "passwordViewNewPassword"
|
|
|
|
property bool showPassword
|
|
|
|
Layout.alignment: root.contentAlignment
|
|
Layout.fillWidth: true
|
|
placeholderText: qsTr("Enter new password")
|
|
echoMode: showPassword ? TextInput.Normal : TextInput.Password
|
|
rightPadding: showHideNewIcon.width + showHideNewIcon.anchors.rightMargin + Style.current.padding / 2
|
|
|
|
onTextChanged: {
|
|
// Update password checkers
|
|
errorTxt.text = ""
|
|
// Update strength indicator:
|
|
strengthInditactor.strength = d.convertStrength(root.passwordStrengthScoreFunction(newPswInput.text))
|
|
|
|
if(!d.validateCharacterSet(text)) return
|
|
|
|
d.containsLower = d.lowerCaseValidator(text)
|
|
d.containsUpper = d.upperCaseValidator(text)
|
|
d.containsNumbers = d.numbersValidator(text)
|
|
d.containsSymbols = d.symbolsValidator(text)
|
|
|
|
if (text.length === confirmPswInput.text.length) {
|
|
root.checkPasswordMatches(false)
|
|
}
|
|
}
|
|
onAccepted: root.returnPressed()
|
|
|
|
StatusFlatRoundButton {
|
|
id: showHideNewIcon
|
|
visible: newPswInput.text !== ""
|
|
anchors.verticalCenter: parent.verticalCenter
|
|
anchors.right: parent.right
|
|
anchors.rightMargin: 16
|
|
width: 24
|
|
height: 24
|
|
icon.name: newPswInput.showPassword ? "hide" : "show"
|
|
icon.color: Theme.palette.baseColor1
|
|
|
|
onClicked: newPswInput.showPassword = !newPswInput.showPassword
|
|
}
|
|
}
|
|
|
|
StatusPasswordStrengthIndicator {
|
|
id: strengthInditactor
|
|
Layout.fillWidth: true
|
|
value: Math.min(Constants.minPasswordLength, newPswInput.text.length)
|
|
from: 0
|
|
to: Constants.minPasswordLength
|
|
labelVeryWeak: qsTr("Very weak")
|
|
labelWeak: qsTr("Weak")
|
|
labelSoso: qsTr("So-so")
|
|
labelGood: qsTr("Good")
|
|
labelGreat: qsTr("Great")
|
|
}
|
|
}
|
|
|
|
Rectangle {
|
|
Layout.fillWidth: true
|
|
Layout.fillHeight: true
|
|
Layout.minimumHeight: 80
|
|
border.color: Theme.palette.baseColor2
|
|
border.width: 1
|
|
color: "transparent"
|
|
radius: Style.current.radius
|
|
implicitHeight: strengthColumn.implicitHeight
|
|
implicitWidth: strengthColumn.implicitWidth
|
|
|
|
ColumnLayout {
|
|
id: strengthColumn
|
|
anchors.fill: parent
|
|
anchors.margins: Style.current.padding
|
|
anchors.verticalCenter: parent.verticalCenter
|
|
spacing: Style.current.padding
|
|
|
|
StatusBaseText {
|
|
id: strengthenTxt
|
|
Layout.fillHeight: true
|
|
Layout.alignment: Qt.AlignHCenter
|
|
wrapMode: Text.WordWrap
|
|
text: root.strengthenText
|
|
font.pixelSize: 12
|
|
color: Theme.palette.baseColor1
|
|
clip: true
|
|
}
|
|
|
|
RowLayout {
|
|
spacing: Style.current.padding
|
|
Layout.alignment: Qt.AlignHCenter
|
|
|
|
StatusBaseText {
|
|
id: lowerCaseTxt
|
|
text: "• " + qsTr("Lower case")
|
|
font.pixelSize: 12
|
|
color: d.containsLower ? Theme.palette.successColor1 : Theme.palette.baseColor1
|
|
}
|
|
|
|
StatusBaseText {
|
|
id: upperCaseTxt
|
|
text: "• " + qsTr("Upper case")
|
|
font.pixelSize: 12
|
|
color: d.containsUpper ? Theme.palette.successColor1 : Theme.palette.baseColor1
|
|
}
|
|
|
|
StatusBaseText {
|
|
id: numbersTxt
|
|
text: "• " + qsTr("Numbers")
|
|
font.pixelSize: 12
|
|
color: d.containsNumbers ? Theme.palette.successColor1 : Theme.palette.baseColor1
|
|
}
|
|
|
|
StatusBaseText {
|
|
id: symbolsTxt
|
|
text: "• " + qsTr("Symbols")
|
|
font.pixelSize: 12
|
|
color: d.containsSymbols ? Theme.palette.successColor1 : Theme.palette.baseColor1
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
ColumnLayout {
|
|
StatusBaseText {
|
|
text: qsTr("Confirm new password")
|
|
color: Theme.palette.baseColor1
|
|
}
|
|
|
|
StatusPasswordInput {
|
|
id: confirmPswInput
|
|
objectName: "passwordViewNewPasswordConfirm"
|
|
|
|
property bool showPassword
|
|
|
|
z: root.zFront
|
|
Layout.fillWidth: true
|
|
Layout.alignment: root.contentAlignment
|
|
placeholderText: qsTr("Enter new password")
|
|
echoMode: showPassword ? TextInput.Normal : TextInput.Password
|
|
rightPadding: showHideConfirmIcon.width + showHideConfirmIcon.anchors.rightMargin + Style.current.padding / 2
|
|
|
|
onTextChanged: {
|
|
errorTxt.text = ""
|
|
|
|
if(!d.validateCharacterSet(newPswInput.text)) return
|
|
|
|
d.passwordValidation();
|
|
if(text.length === newPswInput.text.length) {
|
|
root.checkPasswordMatches()
|
|
}
|
|
}
|
|
|
|
onFocusChanged: {
|
|
// When clicking into the confirmation input, validate if new password:
|
|
if(focus) {
|
|
d.passwordValidation()
|
|
}
|
|
// When leaving the confirmation input because of the button or other input component is focused, check if password matches
|
|
else {
|
|
root.checkPasswordMatches(false)
|
|
}
|
|
}
|
|
onAccepted: root.returnPressed()
|
|
|
|
StatusFlatRoundButton {
|
|
id: showHideConfirmIcon
|
|
visible: confirmPswInput.text !== ""
|
|
anchors.verticalCenter: parent.verticalCenter
|
|
anchors.right: parent.right
|
|
anchors.rightMargin: 16
|
|
width: 24
|
|
height: 24
|
|
icon.name: confirmPswInput.showPassword ? "hide" : "show"
|
|
icon.color: Theme.palette.baseColor1
|
|
|
|
onClicked: confirmPswInput.showPassword = !confirmPswInput.showPassword
|
|
}
|
|
}
|
|
}
|
|
|
|
StatusBaseText {
|
|
id: errorTxt
|
|
Layout.alignment: root.contentAlignment
|
|
Layout.fillHeight: true
|
|
font.pixelSize: 12
|
|
color: Theme.palette.dangerColor1
|
|
}
|
|
}
|