Website Control Login with jQuery

Having multiple websites with different environment can be a pain to use or switch between them. This gave me an idea to create a control panel automated in jQuery. This is my real first go with  jQuery, as all other were snippets which end up in the bin.

I already had a simple HTML page with buttons which posted login information to the login page so I could login with a single click. This page was made simple and addition websites required a new form with new hidden input fields and a button. Repeat this for each site added was becoming tedious and that is were the idea lit up.

I wanted a simple array which contains all the websites name, environment, username and password located nicely in one place. This way it’s easier to manta in the website being located in a nicely tight place. With this in mind, the following was coded.

var operators = [
    { name: "Site1", env: "Env1", username: "testuser1", password: "testpass1" },
    { name: "Site2", env: "Env2", username: "testuser2", password: "testpass2" },
    { name: "Site3", env: "Env3", username: "testuser3", password: "testpass3" },
];

With this set, I can add or remove entries at will without any real code involved.

Now it’s time for the JavaScript magic to happen. Forms all work the same, thus having a target location were to post and parameters to pass to the website. I needed a form with 2 parameters, a username and a password so it does login automatically. Yes I’m very lazy, but when managing websites all with their flavored username and password, it’s hard to remember them all. Being a developer there’s no risk in exposing passwords as the aim of this page is to be used on my computer to connect to testing servers were I’m logging in and out every minute.

jQuery came handy when building dynamic elements according to the entries in the array specified above. The code is simple, all it does is to loop through all website entries, creates a button for each and attaches a click event. The click event handles all the parameter settings, in my case, the username and password. The parameters are attached to the form dynamically and an action is set to the form according to the selected button. After all is set, the form is submitted with all parameters necessary.

$(document).ready(function() {
    for (var index in operators) {
        var operator = operators[index];
        $("<input type='button'>") // create a button
            .val(operator.env + " " + operator.name + " Site") // set button text
            .appendTo("#content") // append to main div
            .click(function() { // click event
                var operatorClicked = operators[$(":button").index(this)]; // get operator with the index of the clicked button
                $("form")
                    .append($("<input>").attr("type", "hidden").attr("name", "username").val(operatorClicked.username)) // create form username
                    .append($("<input>").attr("type", "hidden").attr("name", "password").val(operatorClicked.password)) // create form password
                    .attr("action", "http://" + operatorClicked.name.toLowerCase() + "." + operatorClicked.env.toLowerCase() + ".<<xwebsitex>>.com") // set url
                    .submit(); // submit form
            });
    }
});

The body only contained a form tag and a div were I could add the buttons. The div isn’t really necessary as i could have just added the buttons directly to the body.

This could be improved a lot by creating a more complex definition of the website object defined in the array operators. Some style should be added as well to even out all buttons on screen. For now this is what I needed and it works wonders.

If you have any suggestions on how to improve the code let me know as this is my first push at jQuery.

Advertisement