Simple Password Generator

Update: 3/23/2015- Added special characters.  Look for orange text to designate new lines in code.

A while back I became incredibly frustrated with my passwords.  Nothing seemed safe enough and I had a hard time coming up with ‘random’ passwords on my own.  So I wrote this.  It’s nothing complex and you can get this up and running in about 5-10 minutes.

The only real functionality is contained in the index.php file and the php/generator.php file.  The CSS and JS are mostly for show and for Bootstrapping and, obviously, can easily be modified for your own needs.

Please note that this is using an out-dated version of Bootstrap.  You may need to modify the code slightly if you are using Bootstrap v > 3

HERE’S THE WORKING DEMO IF’N YOU WANT TO SEE IT

1. To start, DOWNLOAD THE SOURCE FILES HERE
2. So, let’s get started with the index.php file.  You can either reference the downloaded version or write up your own interface but the important areas are the input field wherein you specify how many characters you want your password to be:

   <label for=”lengthfield”>NUMBER OF CHARACTERS:</label>
   <input type=”number” name=”lengthfield” id=”lengthfield” placeholder=”10″ /><br />
   <label>
   <input type=”checkbox” class=”checkbox” id=”inclSpecChar” name=”inclSpecChar” value=”yes” checked> <span class=”specCharSpan”>INCLUDE SPECIAL CHARACTERS (&, #, $, *, %, !, @)</span></label>
   <div id=”passwordBlock” class=”alert alert-block alert-success fade in hide”>
   <button class=”close” type=”button” data-dismiss=”alert”>×</button>
   <h3 class=”alert-heading”>HERE IS YOUR AWESOME NEW PASSWORD</h3>
   <h2 id=”passHere”></h2>
   <p id=”copyArea”><a id=”copyToClipBtn” class=”btn”></a>COPY PASSWORD TO CLIPBOARD</p>
   </div>

3. Some sort of a ‘submit’ button and the area wherein the password is displayed. Here’s mine:

    <a class=”btn btn-warning btn-large btn-success” id=”submitBtn” href=”#”>GENERATE PASSWORD</a>

   And here’s the corresponding code:

        $(“#submitBtn”).click(event, function(){
             $.ajax({
                  url: ‘php/generator.php’,
                  type: ‘POST’,
                  data: {charlength:$(“#lengthfield”).val(), $(“inclSpecChar”).val()},
                       success: function( msg ) {
                            $(“#passHere”).text( msg );
                            $(“#passwordBlock”).fadeIn(‘fast’);
                       },  //end on success
                       error: function( msg ){
                            alert(‘Failed to generate password. Please try again.\r\nError: ‘+msg);
                      }//end on fail
                 });//end ajax call
   });//end on submit click

4. Lastly, here’s the PHP that generates the password:

   
   $length = $_POST['charlength'];
if(!$length){
$length = 10;
}
if($_POST['inclSpecChar']=='yes'){
$vowels = htmlspecialchars('aeuyAEUY&$#*%@!');
} else {
$vowels = 'aeuyAEUY';
}
$consonants = 'bdghjmnpqrstvzBDGHJLMNPQRSTVWXZ23456789';
$addon = '';
$alt = time() % 2;
for ($i = 0; $i < $length; $i++) {
if ($alt == 1) {
$addon .= $consonants[(rand() % strlen($consonants))];
$alt = 0;
} else {
$addon .= $vowels[(rand() % strlen($vowels))];
$alt = 1;
}
}
echo $addon;

Yeah, so that’s pretty much it.  You could modify this as much as you need but here are the basics.  The Javascript / jQuery sends an Ajax POST request to the PHP file with the inputted value and interprets the return (echo) as the variable ‘msg’.  The PHP simply takes the specified length specified and spits out a randomly selected string of uppcase/lowercase letters and numbers.

WHAT’S NEXT?

In the next version I’ll update the Bootstrap and implement special characters (DONE!) so be on the lookout for that.  Thanks for reading!

Hit me up with any questions or anything.