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.

Published by

dankaufmanjs

I am a web developer with almost twenty years experience currently working for a local non-profit organization. I started working in HTML with Dreamweaver in 1996 then moved to Flash a few years later. Many years were spent mastering Actionscript only to have Flash die out. Luckily, I had also been programming in Javascript for a while so the transition to HTML5/CSS/Javascript was relatively painless. During the Flash years I had gotten into PHP and MySQL for server-side dynamic content. I have been able to incorporate my knowledge of these languages - and a few new ones picked up along the way- to move seamlessly into mobile application development and now (thanks to frameworks like node-js and NighTrain) have also started developing desktop applications that run in tandem with sister mobile and web-based applications. I also spent years working in digital media- mostly television and video. Final Cut Pro Studio was my game- editing with FCP & Motion was my specialty. Also did a bit of audio work: mastering, recording my personal music, etc. These are a few of my favourite things: HTML5, CSS3, jQuery, Javascript, PHP, MySQL, Cordova, Apache, Brackets, Photoshop, Dreamweaver, PhoneGap, XCode, coffee, Middle Eastern food, organic farming and Virgil's root beer. Oh yeah- I guess my family's alright, too.

Leave a Reply