LiveCode - Building a Password Creator Dialog

UNDER CONSTRUCTION

After searching for some examples I noticed several people was looking for a way to mask passwords as they were typed in.

I decided to build a password creator and document it here. To create a single field login would require a small modification.

The object here is to:

• • Show how to mask the password as it is being entered in. how to avoid a second line being entered in the text entry field when Return or Enter is pressed.

  • Show how to block illegal characters being entered.

  • Show how compare the two passwords on the fly and act upon it.

What I used:

• • Two text entry fields (I named them pWord1 and pWord2)

  • Red Label displaying Passwords do not match (named pwNoMatch)

  • 'Cancel' button (named pwCancel)

  • 'Ok' button (named pwOK)

  • 'Reset' button (named pwReset)

To show only asterisks

Description of the code in pWord1 (fig.2)

• • A variable to store the password since the text boxes will only display asterisks.

  • In on keyDown

    • I test for illegal characters and block them.

    • Append characters entered to password.

    • Echo only asterisks in text field.

  • In on backspaceKey I was able to make the backspace key work as it should.

    • I backspaced the variable (deleted the last character in the variable)

    • At the same time I backspaced over the last asterisk in the text field.

  • In on rawKeyDown I tested for the keys Tab, Return and Enter

  • I wanted to prevent problems like the Return or the Enter key adding a new

  • line to the password text field. I did this for testing the key and blocking it from

  • being passed on. Other keys that were able to pass the tests were forward on.

Snapshot of the actual Code in the text field pWord1. Notice: you can download all the snapshots as text in the zipped file at the bottom of page.

If you wanted to use bullets instead of asterisks the code would be

put "•" after field "pWord1"

You can use just about anything to mask your password. Just look at your character map for ideas.

The code in pWord2 is similar to the code in ipWord1. The main differences are:

• • references to pWord2 instead of pWord1

  • references to gPW2 instead of gPW1

  • When the Tab, Return, or Enter is pressed, the focus isn't shifted from the second text field. Just ignores keystroke and prevents a second line being added to the text entry field.

Below is a snapshot of pWord2

Description of the code in the Card CheckPassword . (fig 4)

• • Added the global varables so the passwords can be compared.

  • The code in on OpenCard makes sure the text entry fields are cleared and the focus is set in the first password entry field.

  • The function doPWmatch compares the two passwords to see if they match. If so the red warning label is hidden and the Ok button is enabled. It is called when a character entered in either of the two password entry fields. It is also called each time the backspace is pressed.

  • The function ClearFields clears the variables for holding the passwords, the entry fields and sets the focus into the first entry field.

Here is the snapshot of the code inserted in the card.

Next in fig.5 is the code in the Reset button. It just a call for the function Clearfields found in the card CheckPasswords.

I leave it up to you to write your own code for what your program does when the Ok button is clicked.

Snapshots are available as text files at the end of of page.

~ END ~

Version of LiveCode used: 9.0.0 - Build 15017