| AJS 4.x
Manual | Note! This Manual is for the "Windows authentication" version, which is designed to work with existing Windows server or Active Directory accounts and Windows authentication. If you want to create accounts by yourself and store their credentials in your own HTTP Commander XML database, you need to download the "Forms authentication" version! This Manual is for the Windows 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 id="login-form" class="login-form" action="URL_TO_DEFAULT_ASPX" method="post" onsubmit="login(event);">
                             <input type="hidden" name="isjson" value="1" />
                             <input id="username" name="username" type="text" placeholder="username" />
                             <input id="password" 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 ? form.action :'') || location.href || ''),
                       user = String((document.getElementById("username") ? document.getElementById("username").value : '') || ''),
                       pass = String((document.getElementById("password") ? 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.