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:
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>
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.
<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 = {
'&': '&',
'<': '<',
'>': '>',
'"': '"',
"'": '''
};
return text.replace(/[&<>"']/g, function (m) { return map[m]; });
}
//Execute method when page is loaded
window.onload = checkErrorMessage;
</script>
Response.Redirect(redirectUrl);and replace redirectUrl with url of your custom login page.
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>
URL_TO_DEFAULT_ASPX should be replacced with url to Default.aspx page of HTTP Commander. For example http://yourserver.com/htcomnet/default.aspx
<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 = {
'&': '&',
'<': '<',
'>': '>',
'"': '"',
"'": '''
};
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>
Response.Redirect(redirectUrl);and replace redirectUrl with url of your custom login page.