CodeCanyon

Smart Lock Login

Smart Lock Login

Smart Lock Login

Demo instructions (What you can do with the SmartLock.js)

STEP 1 – Register user

Demo Register
Here is the first example how you can easily add the SmartLock plug-in in your register form. For the demo, I’ve add a button that show a popup with the plug-in in it. You can also just add the plug-in directly in you register form.
Demo Register Smart Lock
Here is my popup with the SmartLock plug-in inside. The new user can now add his smart lock password and then we store his encoded password in the database.
STEP 2 – Login
Demo Login
As soon as you complete the registration, you can now try to login by clicking on the LOGIN tab. You can try login normally with you password typed with your keyboard or you may want to try to login with your SmartLock password.

Demo Login Normal Demo Login SmartLock

STEP 3 – Login with your mobile device
As I said before, the SmartLock plug-in is fully compatible with mobile device.
In the demo, just click the third tab “Mobile example”. You need to login normally with your “keyboard” typed password.
Demo Phone Login
As soon as you are logged, you can now click on the LOCK button at the top right corner of the screen. We are going to quickly lock the user account using the SmartLock plug-in.
Demo Phone Secure Page
Then, you can enter you quick password to quickly lock your account. (For the demo, we didn’t store the password in the database, we simulate it.)
Demo Phone Secure Page SmartLock
Click here to see the demo.

Description of Smart Lock Login

You can add SmartLock plug-in to your existing HTML code within seconds !!

No JQuery required to run this plug-in.

100% written in Javascript.

Easy to add to your code with 2 small lines of javascript code

Fully customizable

Here are some ideas that you can do with this JS plug-in

  • Quick lock/unlock user’s account(see DEMO)
  • Quick login system (see DEMO)
  • Mobile website security

You can add SmartLock plug-in to your existing HTML code within seconds !!

No JQuery required to run this plug-in

Description of Smart Lock Login

SmartLock is built with CSS3 and an HTML5 structure using the CANVAS technology. The idea behind it is to mimic a real life padlock. The CSS file and the JS file have been built in a way to let the user create as many designs as possible and customize them easily. You can easily create a quick login system specially made for mobile devices.

Promotion Picture

How does it work

In order to make a quick password for your login, you can click and turn from right to left the “padlock”. Note that if you start turning on your left, it will generate a different password than if you were doing it on your right. Also, if you make 2 complete turns, this is different than 3 or 4 turns and so on.

You can use this ready-to-use plug-in to create a fast login system. Please take a look at the demo and documentation for more details. NOTE: If you need any help with your own project, we will be more than happy to help you.

Changelog

1.0.0 – 20/08/2014

- First build of the project.
by
by
by
by
by
by