Personalizing a login form with jQuery and ColdFusion
This post is more than 2 years old.
So - I'm still not 100% sure what Quora is and why I would use it. It looks like a generic version of StackOverflow which could be cool. Right now my take is that it's "The site I keep hearing people talk about but I find impossible to spell." That being said I went to login this morning and noticed something I thought was really cool. Check out this screen shot.
I think that's pretty cool! Now - it may also be viewed as something of a privacy issue. I tried a few friend's email addresses and for it showed me their profile pics. I wasn't able to login as them - and - to be honest - I already knew what they looked like anyway - but it may be something that upsets some people. All I know is I saw it and wanted to recreate it as a proof of concept. Here's what I whipped up. I'm going to start on the server side. I didn't want to hook up to a real login system so all I did was return the gravatar URL for the email and a static name.
}component {remote struct function checkemail(string email) {
//look up to see if the user exists
//if true (and it's always true for us), return profile image
//for us this will be gravatar and return their name
var result = {};
if(isValid("email", arguments.email)) {
result.name = "John Smith";
result.profileimage = "http://www.gravatar.com/avatar/#lcase(hash(arguments.email))#?s=64";
}
return result;
}
Nothing here should be too complex. If it's a valid email I return a struct of data, otherwise I just return an empty structure. The front end is a bit more interesting.
<head> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> <script> $(document).ready(function() { }) </script> </head> <body> <form> <table> <tr> <td>email:</td> <td><input type="text" name="email" id="email"></td> <td rowspan="2"><div id="picSample"></div></td> </tr> <tr> <td>password:</td> <td><input type="password" name="password"></td> </tr> </table> </form> </body> </html><html>$("#email").blur(function() {
var value = $(this).val();
if(value.length==0) return;
$.post("test.cfc?method=checkemail&returnFormat=json", {"email":value}, function(res,code) {
if(res.PROFILEIMAGE && res.NAME) {
var s = "<img src=\"" + res.PROFILEIMAGE + "\"><br/>"+res.NAME;
$("#picSample").html(s);
}
}, "json");
});
Ok, first off, I apologize for the table. Sorry - until I can layout stuff that easy and that quick with CSS without having to look it up - I'm going to stick with tables. Just call me old and cranky. While you are laughing at my horrible design skills though take note of the email field and the div to the right of it. This is where we're going to display the user info. Now go up to the jQuery code.
I've got a blur listener on the on the email field. When it's fired, we run a POST request against the CFC above. When the result returns we see if we got data and if so, create a simple HTML string out of it. You can view the demo below.
Archived Comments
I do get an error message in 8:
Webpage error details
Message: 'console' is undefined
Line: 7
Char: 2
Code: 0
URI: http://www.coldfusionjedi.c...
Ah my little console hack is bad. You see - I try to be nice to non-console users and I get screwed. ;) Just going to edit out my calls for now.
Oh wait - I left a console.dir in there. Let me try w/o that.
This is interesting. But it just doesn't make sense to me . . . why display your avatar and name during login? You would think that whoever is logging in knows exactly who he is during the process, that he has access to the username/password being used.
Lola - to me - it was just cool. It felt like the application was welcoming me. Sure I know what I look like - but I still thought it was neat. It's the "small stuff" like that that sometimes draws users in.
No error message - but no image either... Running firefox version 3.6.13
Make sure you reload. If you had no Firebug, I had a console.dir in there.
OK - now I get:
Warning: Unexpected token in attribute selector: '!'.
Source File: http://www.coldfusionjedi.c...
Line: 0
Ahhh, that would make sense, to make the user feel engaged from the beginning.
Ray, I don't think there is a privacy issue here, in general, because as a user of gravatar you are basically giving them the authority to give your photo to anyone who has your email address, so in essence you said "yes, I want my photo to show up when someone has my email address"
@Sid: Boggle - do you even see a ! anywhere?
Sid - just tested w/ Firefox 3.X. It had Firebug and it worked ok.
Man - I just realized - my console hider is totally dumb. Just ignore it for now and use a browser w/ console. :)
I completely removed it Sid - I'll edit the blog post later (otp). But you should be able to run it.
Facebook had something like this for a while when you entered the wrong password it would show you the profile picture. It caused a mini uproars regarding privacy, since it was overriding the Profile picture privacy setting. They since then removed it.
I guess you could potentially see a breach if you bruteforce a list of random emails... not sure how it would be exploitable though.
Well it defiantly falls into that "that's cool" category. People love to see things interact with them as they go. Another use could be if you were running your own forums and/or website with profiles and avatars you could hit your own avatars.
Ray, <br>
For some reason, I can't get value return from cfc to jquery. Are there any settings I have to do on server side? Please help! Thanks. <br>
Here is my sample code.<br>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>check user</title>
<script type="text/javascript" src="http://ajax.googleapis.com/..."></script>
<script type="text/javascript">
$(document).ready(function() {
$('#username').blur(function(){
$('#msg').empty();
$.post('employee.cfc?method=chkUsername',
{Username : this.value},
function(response){
if (response == 1) {
$('#msg').html('This user exists in DB');
$('#username').attr('value', '').focus();
}
else{
$('#msg').html('This user does not exist in DB');
};
}
);
});
});
</script>
</head>
<body>
<div id="wrap">
<h1>Ajax Test (user: test exists)</h1>
<form id="myform" method="post">
Username: <input type="text" id="username" name="username"><span id="msg"></span><br />
Password: <input type="password" id="password" name="password">
</form>
</div>
</body>
</html>
What does Firebug, or your other network tool, tell you?
Thanks, Ray. I installed Firebug this morning and was able to troubleshoot the issue finally. It was because I turned on the Debug Output in CFADMIN. Thanks again.
I cannot stress enough how important Firebug (or any network tool) is. :) Luckily it is built into Chrome.