Random Password Generator in Javascript

I’ve been wanting to have a simple password generator. There are a few solutions out on the internet, but none quite what I wanted. Here is a simple and customizable JavaScript password generator.

First I had to figure out what characters I would want in my password generator. There are the basic four, lowercase letters, uppercase letters, numbers, and symbols.

In this example, I have implemented those four. For the symbols, I went with “safe symbols”, which are the symbols that do not need to be escaped in most programming language’s strings. They are ~!@#%*-_=+.,:;.

The form HTML is simple. I am using bootstrap for this.

<form>
    <fieldset>
        <legend>Options</legend>
        <div class="form-group form-check">
            <input type="checkbox" class="form-check-input" id="chkOptLower" checked data-pool="abcdefghijklmopqrstuvwxyz">
            <label class="form-check-label" for="chkOptLower">Lower Case Alphabet</label>
        </div>
        <div class="form-group form-check">
            <input type="checkbox" class="form-check-input" id="chkOptLower" checked data-pool="ABCDEFGHIJKLMNOPQRSTUVWXYZ">
            <label class="form-check-label" for="chkOptLower">Upper Case Alphabet</label>
        </div>
        <div class="form-group form-check">
            <input type="checkbox" class="form-check-input" id="chkOptNumbers" checked data-pool="0123456789">
            <label class="form-check-label" for="chkOptNumbers">Numbers</label>
        </div>
        <div class="form-group form-check">
            <input type="checkbox" class="form-check-input" id="chkOptSymbolsSafe" data-pool="~!@#%*-_=+.,:;">
            <label class="form-check-label" for="chkOptSymbolsSafe">Safe Symbols</label>
        </div>
        <div class="form-group">
            <label for="txtLength">Length</label>
            <input type="number" class="form-control" id="txtLength" value="32">
        </div>
        <div class="form-group">
            <label for="txtPool">Character Pool</label>
            <input type="text" class="form-control" id="txtPool" value="">
        </div>
    </fieldset>
    <div class="form-group">
        <label for="txtOutput">Results</label>
        <textarea id="txtOutput" class="form-control" readonly></textarea>
    </div>
    <button type="button" id="btnGenerate" class="btn btn-primary">
        <i class="fal fa-dice"></i>
        Generate
    </button>
</form>

<form>

<legend>Options</legend>

<label class="form-check-label" for="chkOptLower">Lower Case Alphabet</label>

</div>

<label class="form-check-label" for="chkOptLower">Upper Case Alphabet</label>

</div>

<label class="form-check-label" for="chkOptNumbers">Numbers</label>

</div>

<label class="form-check-label" for="chkOptSymbolsSafe">Safe Symbols</label>

</div>

<label for="txtLength">Length</label>

</div>

<label for="txtPool">Character Pool</label>

</div>

</fieldset>

<label for="txtOutput">Results</label>

</div>

Generate

</button>

</form>

The .form-check-input is an important class that I am binding to.

Here’s the JavaScript.

$("#btnGenerate").on("click", function() {
    const t_pool = [...$("#txtPool").val()];
    let pool = [];
    $(t_pool).each(function(index,value){
        if(value !== "")
            pool.push(value);
    });
    let output = "";
    const length = $("#txtLength").val();
    while(output.length < length){
        output += pool[Math.floor(Math.random() * pool.length)];
    }
    $("#txtOutput").val(output);
});

$(".form-check-input").on("change", function() {
    updatePool();
});

function updatePool() {
    let pool = "";
    $(".form-check-input").each(function() {
        if($(this).is(':checked')){
            pool += $(this).attr('data-pool');
        }
    });
    $("#txtPool").val(pool);
}

$(document).ready(function() {
    updatePool();
});

$("#btnGenerate").on("click", function() {

const t_pool = [...$("#txtPool").val()];

let pool = [];

$(t_pool).each(function(index,value){

if(value !== "")

pool.push(value);

});

let output = "";

const length = $("#txtLength").val();

while(output.length < length){

output += pool[Math.floor(Math.random() * pool.length)];

}

$("#txtOutput").val(output);

});

$(".form-check-input").on("change", function() {

updatePool();

});

function updatePool() {

let pool = "";

$(".form-check-input").each(function() {

if($(this).is(':checked')){

pool += $(this).attr('data-pool');

}

});

$("#txtPool").val(pool);

}

$(document).ready(function() {

updatePool();

});

What is going on here?

We have our pool variable, which holds the pool of characters we can pick from. It comes from the text in the #txtPool textbox, which can be filled by hand. Checking the different checkboxes will populate #txtPool with what is in their data-pool attribute. Using the transpiler (line 2) enables support for multi-byte characters like emoji.

I have a demo of that at rndpwd.lupecode.com, feel free to use it to make any password you need. As it runs in your browser it does not impact my server.