Keypad component

Vaadin 6 / 7 / 8 Framework UI
1

Hey!

I’ve completed another of my pet components and am here now to share my success to the world! This is a component to enter passcodes that are numerical (PIN codes etc).

I started making this without any real usage purpose, it was more of practice to me on how to create components from scratch, in contrast to adding functionality to existing components. Wanted to still share it if someone would have some usage of it. It can be used for having a very simple login page for sites where security isn’t the most vital part.

You can attach three different listeners to this. The normal Vaadin ValueChangeListener will give you an event every time the user presses send. You can also attach something called CorrectValueListener and WrongValuelListener, which are triggered only when a right or wrong value is entered, respectively. You can yourself decide which of the listeners you want to use (or even attach all if you want to).

Here’s an example of the usage:

Keypad keypad = new Keypad();
layout.addComponent(keypad);
keypad.setPassCode(7348);
keypad.addListener((ValueChangeListener)this);
keypad.addListener((CorrectValueListener)this);
keypad.addListener((WrongValueListener)this);

and an implementation out of the listeners looks like this:

@Override
public void correctValueEntered(ValueEntered event) {
  getMainWindow().showNotification("that's correct!");
}

Here’s the
demo
 and here’s the
sources
.

2

Hi,

In order to make it more useful for practical applications, I would like to suggest some changes.

First of all, an application may not know a passcode in advance. It typically accepts whatever the user feeds in and then, matches against a stored value after doing a one-way conversion (encryption or some other techniques).
For security reasons, a stored value will not be equal to the “actual passcode”. Instead, it will be a converted value (usually computed by applying a one-way encryption).

So, if setPassCode() is never called or called with “null’” as the argument, do not fire the correctValueEntered and wrongValueEntered. Instead, you can have another method, say, valueEntered in which we can do the validation.

3

Cool !

I would also suggest to add an option to show either numeric or numeric+alphabet keypad - the widget can be very useful for creating a virtual keyboard for more secure access to protected applications (anti key logger solution).

Another good option would be some encryption of key codes, sent to the server, in order to survive even on non-ssl connections.