QML Change Password Dialog

Comments

Hamishwillee - Fantastic job

Hi Den

Implementations of QML components for Symbian that people are going to need, and which are reusable, is exactly what we need. This is the inspiration behind the contributor of the month topic for both this and last month (see Wiki_Home "Wanted").

I have subedited this to add an Abstract, create a few sections, and use Icode to mark up inline code. I think its more readable. Hope you agree. You could split this QML up a bit and explain it in more detail, but its quite clear as-is.

In terms of "how you've done it", I think its quite in-line with the Symbian "way".

However if it were me I'd:

• Add minimum number of characters as a check instead of allowing empty password
  • Perhaps add filters for allowing only numbers etc.
• Remove the Go button and automatically start matching as soon as the number is over the minimum. When both values match, then close the dialog without Go button
• In the case where clear text is used, you can remove the confirmation field since they can see what they are doing wrong.

As a complete aside, I'm wondering if we should define a project for these sorts of components or somehow get them added into git in the standard "Extras". Any thoughts on that?

Regards

Hamish

hamishwillee 06:15, 7 March 2012 (EET)

Den123 - Nice ideas

Hi Hamish,

Yes, I agree with your corrections. Also I like your idea about minimum number of characters, I will add this feature and correct the article.

Separate project for such sorts of components - good idea. How many articles/components for this project we already have? Maybe we should wait for at least for several new articles?

Den123 07:51, 7 March 2012 (EET)

Hamishwillee - Excellent

Thanks very much. I liked this so much that I've referenced the article from the home page in the Wanted section. I've also recommended it as "Featured", but there is quite a lot of competition for that this week. Great job.

Separate project for such sorts of components - good idea. How many articles/components for this project we already have? Maybe we should wait for at least for several new articles?

1. I think we can start the project with only one component, IF we can think up a number of other standard components that we'd like to see. This gives us a roadmap and something to ask any new joiners for. I'm more than happy to co-manage this with you if you want my help. I'm good on documentation and OK at QML.
2. Providing a brief overview on how to write platform specific components would also be helpful - ie I like that you wrote this out of existing platform components, thereby inheriting platform style without having to do anything special.

If you're happy to go ahead I suggest you create the project and upload your code. Add me as co-admin (if you're OK with that). I prefer very permissive licensing and Mercurial. I can then start creating some docs.

Cheers

H

hamishwillee 02:20, 8 March 2012 (EET)

Den123 - Project

I will start project later, now Projects pages are offline for maintenance.

Den123 11:13, 11 March 2012 (EET)

Hamishwillee - Thanks

Lets continue the discussion on that project once you're able to create it.

hamishwillee 00:32, 12 March 2012 (EET)

Den123 - I have started project

http://projects.developer.nokia.com/symqtquickextras ChangePasswordDialog is a part of this project.

Do not know why, but Summary page shows error :(

Den123 19:59, 12 March 2012 (EET)

Bkly nokia - Include RAknKeyLock API to implement QML screen locker?

Will you able to include RAknKeyLock API to implement QML screen locker? Any clues how to utilize above QML to integrate with RAknKeyLock API?

It would be nice if able to do so.

bkly_nokia 13:12, 12 April 2012 (EEST)

Log in or Join to leave comments.

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

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: croozeus (25 Mar 2012)

Note: This QML element has been added to the symcommunityqtquickextras 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!" ) : ""
        }
    }