Creating a Shaking Login Form
Tired of the plain old boring login forms? How about we add some jazz! If you have ever typed in your password wrongly on your Mac, you would have seen that the login screen will vibrate and kinda shriek to indicate that the password you entered is wrong. I always found that rather cool! It’s surprising how little this trick is being used in web applications today. So, I thought I will write up a tutorial on how to get this going.
2 Million+ Digital Assets, With Unlimited Downloads
Get unlimited downloads of 2 million+ design resources, themes, templates, photos, graphics and more. Envato Elements starts at $16 per month, and is the best creative subscription we've ever seen.
Before we get started, feel free to check out the finished example.
As you might have already guessed, this will require some JavaScript magic, or more specifically jQuery vodoo. I am trying my best not to go into a rant on the wonderfulness of jQuery right now (I am sure you already knew that anyway!), so let me just say that it gets the job done, and easily.
So, here goes! As I got started on this, the first thing I did was to have a look at how best to implement the shaking or vibrating effect on the login form. I suspected that it might be part of the jQuery effects library, and yes, there was a shake() function, but I also stumbled on a nice plugin by Andreas Lagerkvist, which did just about the same thing. I chose the plugin approach as it was the lightweight way to go.
The actual implementation is pretty straightforward. We have a plain form, wrapped in a DIV which we will label as login.
<div id="login"> <h3>Buzzing Login form</h3> <form action="" method="post"> <label for="username">Username:</label> <label for="pwd">Password:</label> </form> </div>
We next include the jQuery related JavaScript files in the head of the document.
<script type="text/javascript" src="jquery-1.3.2.min.js"></script> <script type="text/javascript" src="vibrate.js"></script>
Using jQuery, we will then set-up an onclick event handler on the submit button . We will process the login form and take an appropriate action using this function.
$(document).ready(function() {
$("#submit_butt").click( function() {
// configurations for the buzzing effect. Be careful not to make it too annoying!
var conf = {
frequency: 5000,
spread: 5,
duration: 500
};
/* do your AJAX call and processing here...
....
....
*/
// this is the call we make when the AJAX callback function indicates a login failure
$("#login").vibrate(conf);
// let's also display a notification
if($("#errormsg").text() == "")
$("#loginform").append('<p id="errormsg">Invalid username or password!</p>');
// clear the fields to discourage brute forcing :)
$("#username").val("");
$("#pwd").val("");
});
});
Define a set of configuration variables that define the nature of the buzzing effect. In case the login fails, just make a call to the vibrate() function using the configuration variables as parameter. A general word of caution – make sure you don’t have the buzzing effect in action for too long, as it might be irritating to the user if the form buzzes for a long time! I found a duration of 500ms comfortable. In addition, we also display a warning message to the user, and then proceed to clear the input fields.
And it’s as simple as that! You have a nifty login form ready.
On a final note, I have made a minor modification to Andreas’ original plugin to suit our application. The changes are documented on the code.
Try it out, and let us know how it works. If you get this implemented somewhere, do post up a link in the comments!