Visualize: login/logout usage sample

Test plugins

by NesterOne

HTML

<script src="http://code.jquery.com/jquery-2.1.0.js"></script>
<!--Provide URL to visualize.js-->
<script type='text/javascript' src="http://visualizejs-preview.eng.jaspersoft.com:8080/jasperserver-pro-branch/client/visualize.js"></script>
<div>
    <label class="control input text hidden" accesskey="o" for="orgId"> <span class="wrap">Organization:</span>

        <input id="orgId" name="orgId" disabled="true" type="text" autocapitalize="off" />
    </label>
    <label class="control input text" for="j_username"> <span class="wrap">User ID:</span>

        <input id="j_username" name="j_username" type="text" disabled="true" autocapitalize="off" />
    </label>
    <label class="control input password" for="j_password"> <span class="wrap">Password:</span>

        <input class="" id="j_password" name="j_password" disabled="true" type="password" />
    </label>
    <label class="control select" for="userTimezone">Time Zone:
        <select id="userTimezone" name="userTimezone" disabled="true">
            <option value="Europe/Helsinki" selected="">Europe/Helsinki - Eastern European Time</option>
            <option value="America/Los_Angeles">America/Los_Angeles - Pacific Standard Time</option>
            <option value="America/Denver">America/Denver - Mountain Standard Time</option>
            <option value="America/Chicago">America/Chicago - Central Standard Time</option>
            <option value="America/New_York">America/New_York - Eastern Standard Time</option>
            <option value="Europe/London">Europe/London - Greenwich Mean Time</option>
            <option value="Europe/Berlin">Europe/Berlin - Central European Time</option>
            <option value="Europe/Bucharest">Europe/Bucharest - Eastern European Time</option>
        </select>
    </label>
    <button id="login" disabled="true">Login</button>
    <button id="logout" disabled="true">Logout</button> <span class="message error">Authentication Error</span>
 <span class="message...

CSS

.control {
    display: block;
}
.control.input.text > .wrap {
    display:block;
}
.control.input.password > .wrap {
    display:block;
}
.error, .logout {
    color: red;
}
.success {
    color: green;
}
.message {
    display: none;
}

JavaScript

visualize(

function (v) {
    $("#selected_resource").change(function () {
        $("#container").html("");
        createReport($("#selected_resource").val(), v);
    });
    $("#login").click(function () {
        v.login(getAuthData()).done(function () {
            createReport($("#selected_resource").val(), v);
            showMessage(".success");
        }).fail(function () {
            showMessage(".error");
        });
    });
    $("#logout").click(function () {
        v.logout().done(function () {
            showMessage(".logout");
        });
    });
    $(':disabled').prop('disabled', false);
});

//create and render report to specific container
function createReport(uri, v) {
    v("#container").report({
        resource: uri,
        error: function (err) {
            alert(err.message);
        }
    });
};

function showMessage(selector) {
    $(".message").hide();
    $(selector).show();
};

function getAuthData() {
    return {
        name: $("#j_username").val(),
        password: $("#j_password").val(),
        organization: $("#orgId").val(),
        timezone: $("#userTimezone").val()
    }
};