HTTP Commander  AJS 5.x
Manual

Note! This Manual is for the "Forms authentication" version. This version requires you to create each account and store credentials in the HTTP Commander XML database. If you have Windows server or Active Directory accounts already and want to use them in the HTTP Commander, you need to download the "Windows authentication" version! This Manual is for the Forms authentication version only!

Web file manager
Free Installation assistance
Manual Home page

How to use your own login page in HTTP Commander?

HTTP Commander have built-in login page, which can be customized via application settings and css style. But sometimes it is required (simplier) to use your own(corporate) login page with custom style and layout. In this section we will describe how to write custom login page for HTTP Commander.

Note. This article applies only to Forms authentication type.

There are 2 possible ways to send authentication request from custom login page:

  1. Using regular html form post
  2. Using AJAX request (without page reload)

Using regular html form post

  1. Place html form

    Place following html code on the web page.
    Div with id "error-message" will be used to display error messages. 

    <div class="error-message" id="error-message">
</div>
<form class="login-form" action="URL_TO_DEFAULT_ASPX" method="post">
        <input type="hidden" name="redirectOnError" value="URL_TO_LOGIN_PAGE">
        <input type="hidden" name="isjson" value="0" />
        <input name="username" type="text" placeholder="username" />
        <input name="password" type="password" placeholder="password" />
        <button>login</button>
        <p class="message">Not registered? <a href="URL_TO_DEFAULT_ASPX?Register=">Create an account</a></p>
</form>

  2. Set url to HTTP COmmander

    URL_TO_DEFAULT_ASPX should be replacced with url to Default.aspx pageof HTTP Commander. For example http://yourserver.com/htcomnet/default.aspx
    URL_TO_LOGIN_PAGE should be replaced with url of the page with login form.

  3. Put JavaScript code to display error messages

    In case of error occured during login process, user will be redirected to the page specified in the redirectOnError parameter. Usually it would be the same login page with login form.
    This page will be loaded with query string parameter "message" containing error message string.
    Here is sample JavaScript code to display error message from QueryString in Div element (with id "error_message") on the page: 
    <script>
    /**
    Check error message in query string and write it to special DIV element
    */
    function checkErrorMessage() {
        var messageString = (getParameterByName("message"));
        writeMessage(messageString, "error-message");
    }
    /**
    Write message to div with given ID
    */
    function writeMessage(message, divId) {
        if (message) {
            var errorDiv = document.getElementById(divId);
            if (errorDiv)
                errorDiv.innerHTML = escapeHtml(message);
        }
    }
    /**
    Get query string parameter by name
    */
    function getParameterByName(name, url) {
        if (!url) {
            url = window.location.href;
        }
        name = name.replace(/[\[\]]/g, "\\$&");
        var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"),
            results = regex.exec(url);
        if (!results) {
            return null;
        }
        if (!results[2]) {
            return '';
        }
        return decodeURIComponent(results[2].replace(/\+/g, " "));
    }
    /**
    Escape html tags to write to the page
    */
    function escapeHtml(text) {
        var map = {
            '&': '&amp;',
            '<': '&lt;',
            '>': '&gt;',
            '"': '&quot;',
            "'": '&#039;'
        };
        return text.replace(/[&<>"']/g, function (m) { return map[m]; });
    }
    //Execute method when page is loaded
    window.onload = checkErrorMessage;
</script>
  4. Finally, you will need to modify Logout.aspx page in order to load your custom login page after user logout.
    Open Logout.asppx page in editor, find following line of code : 
    Response.Redirect(redirectUrl);
    and replace redirectUrl with url of your custom login page.

Using AJAX post request

  1. Place html form

    In this case, you should place html form on the web page too.
    Please note, that you should set the value of hidden input field isjson to 1, redirectOnError input is not required.
    Also (in compare to regular html post method) onsubmit="login(event);" attribute is added to the form tag to react on form submit event. 

    <div class="error-message" id="error-message">
</div>
<form class="login-form" action="URL_TO_DEFAULT_ASPX" method="post" onsubmit="login(event);">
        <input type="hidden" name="isjson" value="1" />
        <input name="username" type="text" placeholder="username" />
        <input name="password" type="password" placeholder="password" />
        <button>login</button>
        <p class="message">Not registered? <a href="URL_TO_DEFAULT_ASPX?Register=">Create an account</a></p>
</form>

  2. Set url to HTTP Commander

    URL_TO_DEFAULT_ASPX should be replacced with url to Default.aspx page of HTTP Commander. For example http://yourserver.com/htcomnet/default.aspx

  3. Put JavaScript code on the page

    This Java script code will send XMLHttpRequest to the Default.aspx page of HTTP Commander and check response. If response is succesfull, the user will be automatially redirected to HTTP Commander. Otherwise error message will be displayed in the DIV element with id "error-message". 
    <script>
    /**
    Check error message in query string and write it to special DIV element
    */
    function checkErrorMessage() {
        var messageString = (getParameterByName("message"));
        writeErrorMessage(messageString);
    }
    function writeErrorMessage(message) {
        writeMessage(message, "error-message");
    }
    /**
    Write message to div with given ID
    */
    function writeMessage(message, divId) {
        if (message) {
            var errorDiv = document.getElementById(divId);
            if (errorDiv)
                errorDiv.innerHTML = escapeHtml(message);
        }
    }
    /**
    Get query string parameter by name
    */
    function getParameterByName(name, url) {
        if (!url) {
            url = window.location.href;
        }
        name = name.replace(/[\[\]]/g, "\\$&");
        var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"),
            results = regex.exec(url);
        if (!results) {
            return null;
        }
        if (!results[2]) {
            return '';
        }
        return decodeURIComponent(results[2].replace(/\+/g, " "));
    }
    /**
    Escape html tags to write to the page
    */
    function escapeHtml(text) {
        var map = {
            '&': '&amp;',
            '<': '&lt;',
            '>': '&gt;',
            '"': '&quot;',
            "'": '&#039;'
        };
        return text.replace(/[&<>"']/g, function (m) { return map[m]; });
    }
       
    /**
    * Get XMLHttpRequest instance for sending AJAX requests 
    */
    var getXhrInstance = (function () {
        var options = [
            function () { return new XMLHttpRequest(); },
            function () { return new ActiveXObject('MSXML2.XMLHTTP.7.0'); },
            function () { return new ActiveXObject('MSXML2.XMLHTTP.6.0'); },
            function () { return new ActiveXObject('MSXML2.XMLHTTP.5.0'); },
            function () { return new ActiveXObject('MSXML2.XMLHTTP.4.0'); },
            function () { return new ActiveXObject('MSXML2.XMLHTTP.3.0'); },
            function () { return new ActiveXObject('MSXML2.XMLHTTP'); },
            function () { return new ActiveXObject('Microsoft.XMLHTTP'); }
        ], i = 0, len = options.length, xhr;
        for (; i < len; ++i) {
            try {
                xhr = options[i];
                xhr();
                break;
            } catch (e) { }
        }
        return xhr;
    })();
    /**
        * Send AJAX request
        */
    function xhrRequest(url, callback, user, pass, ctx) {
        url = url || location.href;
        var x = getXhrInstance;
        var xhr = getXhrInstance();
        xhr.open('HEAD', url, true, user, pass);
        xhr.onreadystatechange = function () {
            if (xhr.readyState == 4) {
                callback.call(ctx || window, xhr.responseText, xhr);
            }
        };
        xhr.send(null);
        return xhr;
    }
    /**
    Method perform post request to default.aspx page with username and password specified in form.
    loginResult method called when server response received
    */
    function login(event) {
        var form = document.getElementById("login-form"),
            url = String(form.action || location.href || ''),
            user = String(document.getElementById("username").value || ''),
            pass = String(document.getElementById("password").value || ''),
            lang = String(document.getElementById("language") && document.getElementById("language").value || '');
        event.preventDefault();
        var xhr = getXhrInstance();
            
        var body = 'isjson=1&username=' + encodeURIComponent(user) +
            '&password=' + encodeURIComponent(pass)+
            '&language=' + encodeURIComponent(lang);
          
        xhr.open("POST", url, true)
        xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')
        xhr.onreadystatechange = function () {
            if (xhr.readyState == 4) {
                loginResult(xhr.responseText, xhr);
            }
        };
        xhr.send(body);
        return false;
    }
    /**
    Method executes when server response is received. 
    In case of sucessfull authentication,user redirected to default.aspx page,
    Otherwise error message displayed to the user.
    */
    function loginResult(responseText, xhrObject) {
        var json = JSON && JSON.parse(responseText);
        if (json)
        {
            if(json.success){
                var form = document.getElementById("login-form")
                location.href = form.action;
            }
            else{
                writeErrorMessage(json.message);
            }
        }
        else
            writeErrorMessage("Response could not be read!");
    }
</script>
  4. Finally, you will need to modify Logout.aspx page in order to load your custom login page after user logout.
    Open Logout.asppx page in editor, find following line of code : 
    Response.Redirect(redirectUrl);
    and replace redirectUrl with url of your custom login page.