Runtime Revolution
 
Articles Other News

Quick Apps with Revolution:
Easy Password Dialogs

Go beyond the built-in facilities with just 14 lines of code

by Bill Marriott


Revolution provides an easy way for you to ask for passwords from users, the "ask password" command. This will automatically present a dialog box in which the input is "masked" -- you see a series of asterisks instead of the letters that are typed. We're all familiar with these kinds of password entry fields on web pages and other programs.

A limitation for some developers, however, is that the dialog presented by the ask password command is not extremely customizable. You are able to change the title of the window and the prompt text, but you cannot have multiple entry fields or control the layout of the window.

Authentication

The built-in "ask password" dialog in Revolution.

If you want to have more flexible password request screens, this is achievable by a wide variety of methods. A search of the forums will yield several different solutions. But I'd like to present what I think is the easiest solution to the problem.

A Little Image Goes A Long Way

The secret to the solution is the "imagesource" property in Revolution. This enables you to replace any character in a field with a graphic of any size. Importantly, the underlying text is not modified or destroyed in any way.

So the first step is to decide how you want to mask the characters in your password dialog. You can use asterisks, or the round bullet character popular in many programs. But the important thing is, it must be a graphic. I've decided to use a tiny padlock image.

Enlarged view of a 10x11 pixel padlock image

This image will behave almost like a custom "font" whenever you use it as the imagesource of a character. Again, you can make your own masking image; just make it small like this.

Once you've created your graphic import it into Revolution, and give it a name.

Intercepting Messages

The next element of this solution involves "catching" the user as they are typing and replacing their text with this "glyph" immediately, before they have a chance to see the actual characters. Each time a user presses a key in a field, a short conversation occurs within Revolution. Messages are sent to the engine, which responds by placing the text into the field as intended. The message we are interested in capturing is the "rawkeydown" message, which is sent whenever any key is pressed. Here is the script, which attach to the field used for editing:

on rawKeyDown
     send hideMyKeys to me in 0 seconds
     pass rawkeydown
end rawKeyDown

on hideMyKeys
     lock messages
     lock screen
     repeat with i = 1 to the number of characters in me
          if the imagesource of char i of me is not "tinyPadlock" then
               set the imagesource of char i of me to "tinyPadlock"
          end if
     end
repeat
     unlock messages
end hideMyKeys

The "on rawkeydown" handler triggers every time there is a keypress within the field. It's a little tricky because it uses the "...in N seconds" form of the send command. The tricky part is that the actual execution order of the commands is the opposite of the order in which they appear in the script!

Sending a message "in N seconds" means that the message will be sent once the handler is finished executing. So, when a user presses a key, the "send ... in N seconds" command causes Revolution to put a little "to-do" note at the end of the handler. Then it moves on to the next statement, which is to "pass" the rawKeyDown message onward through its normal path to the engine. Basically this is like saying, "Revolution, do whatever you would normally do when someone types in a field. But as soon as that's done, I want you to do something special for me in the hideMyKeys handler."

The hideMyKeys handler simply scans through all the text entered into the field and makes sure all the letters appear as padlock graphics. I lock the screen and lock messages to ensure that nothing interrupts this process. It's not something that you want to do with large blocks of text, but for passwords, it works just great!

A custom password entry screen with multiple fields and custom geometry

By doing things this way, the usual editing functions of a field are left undisturbed. Users can type anything they normally would be able to in a field, use the arrow keys, even cut and paste. It's just a bulletproof way to ensure that the characters themselves are masked from view. (By intercepting rawkeydown, and not keydown or one of the other messages, we ensure that our masking operation is handled whatever kind of editing is done within the field.)

When you want to find out what the user has entered for their password, you can access the contents of the field as if it were any normal Revolution field. Which brings up one little point in favor of the old "ask password" dialog... its results are automatically encrypted for you, which can be a bit more secure.

 
©2005 Runtime Revolution Ltd, 15-19 York Place, Edinburgh, Scotland, UK, EH1 3EB.
Questions? Email info@runrev.com for answers.