Keypad Login

smithygotlost · #1 (**permalink**) 07-06-07, 10:25 AM

Rather Than The Usual Boring

Username :
Password :

i wanted to do something where users click in a code on a keypad

like your num pad thing

so that if you code was 1234

you click 1 2 3 4 and it lets you in or you put in your username then click you password in ! any ideas ?

job0107 · #2 (**permalink**) 07-06-07, 12:29 PM

I don't know if there is an easy solution for what you want to do.
Unless the code is the same for everyone.

In order to have unique passwords for everyone you would need to have stored them in a database or file along with a user name or account# for identity. You would have to use Javascript to manage all the different operations that would have to be performed.

1. Capture key presses.
2. Execute query routine to query database for a match.
3. If match found pass the user on to the next page.
4. If no match do steps 1 - 4 again.

It would probably slow your web site down to a crawl because there would be so many database queries.

If you used the same code for everyone then Javascript could manage that quite easily but then you wouldn't have any security.

smithygotlost · #3 (**permalink**) 07-06-07, 12:59 PM

yea i agree with the database it would be for 5 maybe 6 users preffered with different " Pin Codes "

it would be on a localhost ( intranet ) that it would be used it was just to make the page look good if anyone could have a pop at it i would love to see how it works lol

cheers mate

mike

job0107 · #4 (**permalink**) 07-06-07, 03:08 PM

I've reconsidered, this will do what you want.
Just have the Javascript assign the forms action property to the page
where you collect the pin# and do something with it.

One nice thing about this code is, your pin# doesn't have to be just numbers. You can use any alpha or numeric value. And if you want pin codes larger or smaller than 4 digits then change the value from 4 to what ever you want in the if statement in the Javascript. And of course change it in the text before the input element.

HTML Code:

<html>
<head>
<style>
.spn
{
 border:1px solid #000000;
 background:#cccccc;
 width:240px;
 padding-top:15px;
 padding-left:15px;
 font-weight:bold;
 color:#0000ff;
 }
.inpt
{
 width:40px;
 text-align:center;
 }
</style>
</head>
<body>
<span class="spn">
<form name="theForm" method="post">
Enter 4 digit Pin code: <input type="password" class="inpt" id="pin_code" name="pin_code" onkeyup="check_it()">
</form>
</span>
<script>
function check_it()
{
 var test_it = document.getElementById("pin_code").value;
 if(test_it.length == 4)
 {
  document.theForm.action = "http://your_page.com";
  theForm.submit();
  }
 }
document.getElementById("pin_code").focus();
</script>
</body>
</html>

smithygotlost · #5 (**permalink**) 07-06-07, 03:31 PM

very nice

is there anyway to really strech it to acutally make a table 3x3 with the number 1 to 9 in it so you click them on screen ? that would be so cool lol

sorry to be a pain

job0107 · #6 (**permalink**) 07-06-07, 03:44 PM

Yea that could be done. Give me a few minutes or so.

job0107 · #7 (**permalink**) 07-06-07, 04:50 PM

Ok, that was a little harder.

You can collect the value returned by the form with something like this:

PHP Code:


			
$pin_number = $_POST["theValue"];

Here it is:

HTML Code:

<html>
<head>
<style>
.tb
{
 background:#cccccc;
 }
.spn
{
 font-weight:bold;
 color:#0000ff;
 }
.inpt
{
 width:50px;
 height:50px;
 font-weight:bold;
 font-size:24px;
 text-align:center;
 color:#0000ff;
 }
</style>
</head>
<body>
<table class="tb" border=3>
<tr>
<td colspan=3 align="center">
<span class="spn">Enter 4 digit Pin code:</span>
</td>
</tr>
<tr>
<td>
<button class="inpt" id="b1" onclick="value1()">1</button>
</td>
<td>
<button class="inpt" id="b2" onclick="value2()">2</button>
</td>
<td>
<button class="inpt" id="b3" onclick="value3()">3</button>
</td>
</tr>
<tr>
<td>
<button class="inpt" id="b4" onclick="value4()">4</button>
</td>
<td>
<button class="inpt" id="b5" onclick="value5()">5</button>
</td>
<td>
<button class="inpt" id="b6" onclick="value6()">6</button>
</td>
</tr>
<tr>
<td>
<button class="inpt" id="b7" onclick="value7()">7</button>
</td>
<td>
<button class="inpt" id="b8" onclick="value8()">8</button>
</td>
<td>
<button class="inpt" id="b9" onclick="value9()">9</button>
</td>
</tr>
</table>
<form name="theForm" method="post">
<input type="hidden" name="theValue" id="theValue">
</form>
<script>
var test_it = '';
function value1(){test_it += 1;_test_it();}
function value2(){test_it += 2;_test_it();}
function value3(){test_it += 3;_test_it();}
function value4(){test_it += 4;_test_it();}
function value5(){test_it += 5;_test_it();}
function value6(){test_it += 6;_test_it();}
function value7(){test_it += 7;_test_it();}
function value8(){test_it += 8;_test_it();}
function value9(){test_it += 9;_test_it();}
function _test_it(){if(test_it.length == 4){do_it();}}
function do_it()
{
 document.getElementById("theValue").value = test_it;
 document.theForm.action = "http://your_page.com";
 theForm.submit();
 }
</script>
</body>
</html>

smithygotlost · #8 (**permalink**) 07-06-07, 05:06 PM

any luck ? :S

job0107 · #9 (**permalink**) 07-06-07, 05:36 PM

Here this version is a little more compact and easier to read:

HTML Code:

<html>
<head>
<style>
.tb{background:#cccccc;}
.spn{font-weight:bold;color:#0000ff;}
.btn
{
 width:50px;
 height:50px;
 font-weight:bold;
 font-size:24px;
 text-align:center;
 color:#0000ff;
 }
</style>
</head>
<body>
<table class="tb" border=3>
<tr>
<td colspan=3 align="center"><span class="spn">Enter 4 digit Pin code:</span></td>
</tr>
<tr>
<td><button class="btn" id="b1" onclick="value1()">1</button></td>
<td><button class="btn" id="b2" onclick="value2()">2</button></td>
<td><button class="btn" id="b3" onclick="value3()">3</button></td>
</tr>
<tr>
<td><button class="btn" id="b4" onclick="value4()">4</button></td>
<td><button class="btn" id="b5" onclick="value5()">5</button></td>
<td><button class="btn" id="b6" onclick="value6()">6</button></td>
</tr>
<tr>
<td><button class="btn" id="b7" onclick="value7()">7</button></td>
<td><button class="btn" id="b8" onclick="value8()">8</button></td>
<td><button class="btn" id="b9" onclick="value9()">9</button></td>
</tr>
</table>
<form name="theForm" method="post">
<input type="hidden" name="theValue" id="theValue">
</form>
<script>
var temp = '';
function value1(){temp += 1;test_it();}
function value2(){temp += 2;test_it();}
function value3(){temp += 3;test_it();}
function value4(){temp += 4;test_it();}
function value5(){temp += 5;test_it();}
function value6(){temp += 6;test_it();}
function value7(){temp += 7;test_it();}
function value8(){temp += 8;test_it();}
function value9(){temp += 9;test_it();}
function test_it()
{
 if(temp.length == 4)
 {
  document.getElementById("theValue").value = temp;
  document.theForm.action = "http://your_page.com";
  theForm.submit();
  }
 }
</script>
</body>
</html>

smithygotlost · #10 (**permalink**) 07-06-07, 05:44 PM

Meow How Sexy

Last Thing How Do I Get That To Check Against The Database To See If Their Code Is Right ?