Creating a Pattern Lock with JavaScript and HTML

Recently I was working on the web app to create a pattern lock which could be used as an alternative to traditional password methodology. Though this was just an experiment to try out, it wouldn't hurt to include it in the future apps especially on the mobile platforms. (Which will require more complex thoughts to make it more secure than it is now)

So the inspiration for this project was obviously a Samsung phone which has this cool pattern lock which can be used to unlock the device. I speculated for a while if this could be done with JS and CSS and accepted a challenge to do it.

In order to give it a real world feel, I also created a backend to store pattern sequence and username in the MySQL database to later retrieve and give dummy access to user. If your username has never been entered into the system, it will take it and pattern and store it into database. There is no way to overwrite previously stored pattern for given user. (Since I am not doing any session management in this tiny tiny app. But this is something could be thought for future enhancements)

So simply, if you are a new user, pick up an unique username and record your pattern. Next time, be ready with this pattern and username and app will notify with Hi #username when this combination matches with database pair.

Here are some the screenshots to look into,

Home page

This is the example of some of crazy patterns you can create with this web app

When you successfully create a pattern and store it in the backend along with uniquely chosen username

Message when you are successfully able to log in with newly created username and lock pattern (Which is just a sequence of numbers)

It was quite a fun project to do on typical Friday evenings.

Full source code is available on Github Here.

You can also play with live demo Here