Generate random password for the user, show and hide password

Posted in: PHP by musiitwa joseph 2015-02-21 at 14:19:35

image for Generate random password for the user, show and hide password A strong password is a combination of alphanumeric and non alphanumeric characters ie a - z, A - z, 0 - 9, !, @, #, %, ^, &, *, (, ), _, +, etc. Using range() and shuffle() random passwords can be generated, range() takes 3 parameters: start, end and step and returns an array while shuffle() takes one parameter, an array, and returns randomized order of the elements in the array.


function password_generator(){
//range() increments two parameters and creates an array, they can be a third parameter for numbers ie step to increment.
$low_case = range('a', 'z');
$cap_letters = range('A', 'Z');
$numbers = range(0, 9);
$non_alpha_num = array('?', '!', '@', '#', '$', '%', '^', '&', '*', '(', ')', '_', '+', '{', '}', '[', ']'); // you can add more as you want

//reordering the array
shuffle($low_case);
shuffle($cap_letters);
shuffle($numbers);
shuffle($non_alpha_num);

//the array collector is used to collect charaters at index 1 and 2 ()
$collector = array(
$low_case[0], $low_case[1],
$cap_letters[0], $cap_letters[1],
$numbers[0], $numbers[1],
$non_alpha_num[0], $non_alpha_num[1],
$low_case[2], $low_case[3],
$low_case[4], $low_case[5],
);

shuffle($collector);//reordering the array

foreach ($collector as $value) {
@$generated_password .= $value;
}//or $generated_password = implode($collector); implode() coverts an array to a string

return $generated_password;
}

echo password_generator();//contains random password each time it is called


/*
* You can also use password_generator() to give random passwords to users
* that do not remember their passwords. Assuming that users registered with
* their user names, passwords and email addresses. if one of the users forgot
* his/her password, you can provide a form to enter the email address,
* check the database for match, send the generated password to user and then
* update database with new password.
*
*/

?>




<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Password generator</title>
<style type="text/css">
body{
background-color:#D7D7D7;
margin:0;
padding:0;
font-family: Arial, Helvetica, sans-serif;
}
.container{
width:95%;
max-width:500px;
margin:auto;
}
.left{
float:left;
width:50%;
}
.right{
float:right;
width:50%;
}
.clear{
clear:both;
}
input[type="text"], input[type="password"]{
width:98%;
height:30px;
border-radius:5px;
border:none;
margin:2px;
box-shadow:0px 0px 2px rgba(0,0,0, 0.2) inset, 0px 0px 12px rgba(0,0,0, .3);
padding:2px 1%;
}

#pass{
color:#0033FF;
text-decoration:underline;
cursor:pointer;
}
#pass:hover{
color:#FF0000;
}
#password_container{
background-color:#C2EAB9;
position:relative;
overflow:hidden;
height:0px;
}
#generated_password{
padding:5px 30px;
}
#password_container #close{
background-color:#FF0000;
cursor:pointer;
color:#FFF;
width:20px;
position:absolute;
height:20px;
margin:5px;
text-align:center;
}

</style>
</head>

<body>
<div class="container">
<h2>Generate password</h2><br />
Enter password:<br />
<input type="password" value="" name="" id="password" /><br />
<div class="left">
<a href="" id="pass">generate password</a>
</div>
<div class="right">
<input type="checkbox" id="showPassword"/> Show password.
</div>
<div class="clear"></div>
<div id="password_container">
<div id="close">x</div>
<div id="generated_password">
<!-- this div is used to show the user the password, sothat he/she can note it down -->
Please copy this password: #########
</div>
</div>

</div>
<footer>
<br /><br />
<div style="text-align:center">
Tutorial by <b>Code eagles</b>. You can get more at <a href="http://www.codeeagles.com" target="_blank">www.codeeagles.com</a>
</div>
</footer>

<script type="text/javascript">
function _(x){//getting elements' ids
return document.getElementById(x);
}

_("close").onclick = function (){//closing the box
_("password_container").style.height = "0px";
_("password_container").style.border = "none";
};

_("pass").onclick = function(e){
e.preventDefault();
var password = _("password")
var generated_password = _("generated_password");

password.value = 'loading...';//you putting there a path to gif image

var request;

if (window.XMLHttpRequest){//for Chrome, Firefox, IE7+, Opera, Safari
request = new XMLHttpRequest();
}
else{//for IE5, IE6
request = new ActiveXObject("Microsoft.XMLHTTP");
}
request.open("GET", "passwords.php", true);
request.setRequestHeader("Content-type", "application/x-www-form-urlencoded");

request.onreadystatechange = function() {
if(request.readyState == 4 && request.status == 200) {
//4 = The connection is complete, the data was sent or retrieved.
//200 = The file has been retrieved and you are free to do something with it
_("password_container").style.border = "1px #00CC33 solid";
password.value = request.responseText;
generated_password.innerHTML = "Please copy this password: "+request.responseText;
}
}

request.send(null);

_("password_container").style.height = password_container.scrollHeight+"px";
_("password_container").style.transition = "all 0.3s linear 0s";

};

_("showPassword").onclick = function (){
(_("showPassword").checked)? _("password").type = "text": _("password").type = "password";
};
</script>


</body>
</html>

Tags:
ajax
javascript