×
Namespaces

Variants
Actions

QML Change Password Dialog

From Nokia Developer Wiki
Jump to: navigation, search
Featured Article
25 Mar
2012

This code snippet provides a Symbian-specific custom QML dialog for changing a password (ChangePasswordDialog).

Article Metadata
Tested with
SDK: Nokia Qt SDK 1.2
Devices(s): all devices based on Symbian Anna, Nokia Belle
Compatibility
Platform(s): Symbian Anna, Nokia Belle
Symbian
Device(s): All
Dependencies: Symbian Qt Quick Components 1.1
Platform Security
Capabilities: None
Article
Keywords: Qml, password, dialog
Created: Den123 (06 Mar 2012)
Last edited: kiran10182 (01 Nov 2013)

Change Password Dialog

Note.pngNote: This QML element has been added to the Symbian Community Qt Quick Component Extras. There are no similar dialogs in the Symbian Qt Quick Components.

Overview

The code snippet below shows the full QML-component that implements this functionality.

The component uses CommonDialog as a base and offers following settings:

  • showClearPassword - do not mask password and confirm
  • minNumberOfCharacters - allow to define minimum number of password characters (if 0 then empty password is allowed)
  • function advancedCheck( pwd ) - allow to define own password check. This function should return error message if something is wrong or empty string if all is ok.

Separate object (hintArea) is used for showing warnings ("Minimum number of characters: 6", "Password does not match confirm!", error mess from advancedCheck function). Showing and hiding of hintArea is performed using animation ( NumberAnimation for property height ).

Source code

ChangePasswordDialog.qml:

import QtQuick 1.1
import com.nokia.symbian 1.1
 
CommonDialog {
id: root
privateCloseIcon: true // show close button in the right corner of dialogs title
 
titleText: qsTr( "Set Password" )
 
property alias edPasswordPlaceholderText: edPassword.placeholderText
property alias edConfirmPlaceholderText: edPasswordConfirm.placeholderText
 
property string password: ""
 
property bool showClearPassword: false
property int minNumberOfCharacters: 6
 
property string msgMinNumberOfCharacters: qsTr( "Minimum number of characters: " )
property string msgPasswordDoesNotMatchConfirm: qsTr( "Password does not match confirm!" )
 
 
function advancedCheck( pwd )
{
// this function may contain additional password check
// if something wrong - function should return error message,
// otherwise function should return empty string
 
return ""
}
 
function launch() {
password = ""
edPassword.text = ""
edPasswordConfirm.text = ""
open()
}
 
 
// we want to use only one button with own onClicked handler
buttons: Item {
id: buttonContainer
 
LayoutMirroring.enabled: false
LayoutMirroring.childrenInherit: true
 
width: parent.width
height: privateStyle.toolBarHeightLandscape + platformStyle.paddingSmall * 2
 
Row {
id: buttonRow
objectName: "buttonRow"
anchors.centerIn: parent
spacing: platformStyle.paddingMedium
 
ToolButton {
id: btOk
text: qsTr( "Ok" )
onClicked: {
 
// check password and confirmation
hintArea.state = "Hide"
if( edPassword.text != edPasswordConfirm.text )
showHint( msgPasswordDoesNotMatchConfirm )
else {
if( edPassword.text.length < minNumberOfCharacters )
showHint( msgMinNumberOfCharacters + minNumberOfCharacters )
else
{
var msg = advancedCheck( edPassword.text )
if( msg.length !== 0 )
showHint( msg )
else
{
password = edPassword.text
accept();
}
}
}
}
}
}
}
 
 
content: Item {
id: content
height: edPassword.height * 2 + column.spacing * 2 + hintArea.height +
column.anchors.topMargin + column.anchors.bottomMargin
width: parent.width
anchors.top: parent.top
 
Column {
id: column
spacing: platformStyle.paddingMedium
anchors.fill: parent
anchors {
leftMargin: platformStyle.borderSizeMedium
rightMargin: platformStyle.borderSizeMedium
topMargin: platformStyle.borderSizeMedium
}
 
TextField {
id: edPassword
anchors.left: parent.left
anchors.right: parent.right
echoMode: showClearPassword ? TextInput.Normal : TextInput.Password
placeholderText: qsTr( "Enter password" )
onTextChanged: hintArea.state = "Hide"
}
 
TextField {
id: edPasswordConfirm
anchors.left: parent.left
anchors.right: parent.right
echoMode: showClearPassword ? TextInput.Normal : TextInput.Password
placeholderText: qsTr( "Confirm password" )
onTextChanged: hintArea.state = "Hide"
}
 
 
Item {
id: hintArea
state: "Hide"
anchors.left: parent.left
anchors.right: parent.right
property alias text: hintText.text
 
states: [
State {
name: "Show"
PropertyChanges { target: hintArea; height: hintText.paintedHeight }
},
State {
name: "Hide"
PropertyChanges { target: hintArea; height: 1 }
}
]
 
// add hide-show animation
transitions: [
Transition {
from: "Hide"; to: "Show"
NumberAnimation { target: hintArea; properties: "height"; duration: 300; easing.type: Easing.OutQuad }
},
Transition {
from: "Show"; to: "Hide"
NumberAnimation { target: hintArea; properties: "height"; duration: 300; easing.type: Easing.OutQuad }
}
]
 
Text {
id: hintText
anchors.fill: parent
anchors.margins: 1
 
horizontalAlignment: Text.AlignHCenter
color: platformStyle.colorHighlighted
wrapMode: Text.WordWrap
text: ""
}
}
}
}
 
function showHint( msg )
{
hintArea.text = msg
hintArea.state = "Show"
}
}

How to use:

    ToolButton {
anchors.centerIn: parent
text: qsTr("Set password")
onClicked: dlg.launch();
}
 
ChangePasswordDialog {
id: dlg
minNumberOfCharacters: 3
onAccepted: console.log( "New password: " + dlg.password )
onRejected: console.log( "Password not defined" )
 
function advancedCheck( pwd )
{
// just for fun
return pwd === "123" ? qsTr( "Password is too simple!" ) : ""
}
}
This page was last modified on 1 November 2013, at 00:43.
144 page views in the last 30 days.
×