HTML: Custom Helm Login Form

**Staff: Warren Ashcroft** · 12th November 2005, 11:51 PM

Hello Guys,
A couple of people have been asking how to create custom login forms for Helm, since this dosent directly relate to Red Fox Hosting Im posting this in Code Sharing forum (though Helm installations used with this code need to be running at least one Red Fox AddOns theme or skin).

Obviously, you would need to apply your own style/formatting to the code along with replacing the occurrences of yourdomain.com with the appropriate values

Standard Login Form

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Control Panel Login</title>
<meta http-equiv="Content-type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="Content-Style-Type" content="text/css">
</head>
<body>
<form name="frmLogon" action="http://cp.yourdomain.com/default.asp" method="POST">
<table border="0" cellpadding="0" cellspacing="0" width="25%">
 <tr>
  <td align="right" width="25%">Username:&nbsp;</td>
  <td width="75%"><input type="text" name="txtUsername" size="20" value=""></td>
 </tr>
 <tr>
  <td align="right">Password:&nbsp;</td>
  <td><input type="password" name="txtPassword" size="20" value=""></td>
 </tr>
 <tr>
  <td colspan="2"><hr></td>
 </tr>
 <tr>
  <td align="right">Skin:&nbsp;</td>
  <td><select name="selInterface" style="WIDTH: 180px">
   <option value="explorerxp" SELECTED>Helm Explorer XP</option>
   <option value="helmcoffeecup">Helm Coffee Cup</option>
   <option value="helmextreme">Helm Extreme</option>
   <option value="helmfreeflow">Helm FreeFlow</option>
   <option value="helmuk">Helm UK</option>
   <option value="helmusa">Helm USA</option>
   <option value="metal">Helm Metal (Silver)</option>
   <option value="metalblue">Helm Metal (Blue)</option>
   <option value="metalgreen">Helm Metal (Green)</option>
   <option value="metalorange">Helm Metal (Orange)</option>
   <option value="simplexp">Helm Simple XP</option>
   <option value="standard">Helm Original</option>
  </select></td>
 </tr>
 <tr>
  <td colspan="2"><hr></td>
 </tr>
 <tr>
  <td align="right">Theme:&nbsp;</td>
  <td><select name="selTheme" style="WIDTH: 180px">
   <option value="3D-XP">3D XP</option>
   <option value="Aqua">Aqua</option>
   <option value="Aquatica">Aquatica</option>
   <option value="ArtIcons">Art Icons</option>
   <option value="ArtIcons3D">Art Icons 3D</option>
   <option value="BasicXP">Basic XP</option>
   <option value="BasicXPv2">Basic XP Version 2</option>
   <option value="BasicXPv3">Basic XP Version 3</option>
   <option value="Business">Business</option>
   <option value="Candy">Candy</option>
   <option value="Chemicals">Chemical Control</option>
   <option value="ComicStrip">Comic Strip</option>
   <option value="CoolBlue">Cool Blue</option>
   <option value="Crystal">Crystal</option>
   <option value="DeveloperXP">Developer XP</option>
   <option value="FoldersXP">Folders XP</option>
   <option value="Gant">Gant</option>
   <option value="Gorilla">Gorilla</option>
   <option value="JuniorXP">Junior XP</option>
   <option value="Kids">Kids</option>
   <option value="KungFu">KungFu Karate</option>
   <option value="LinuxKDM">Linux KDM</option>
   <option value="Mercury">Mercury</option>
   <option value="Milky">Milky</option>
   <option value="ModernXP">Modern XP</option>
   <option value="ObjectXP">Object XP</option>
   <option value="OhMyRabbit">Oh My Rabbit!!</option>
   <option value="OnTheFarm">On The Farm</option>
   <option value="OutlineXP">Outline XP</option>
   <option value="Paper">Paper</option>
   <option value="Phantom">Phantom</option>
   <option value="PlasticXP" SELECTED>Plastic XP</option>
   <option value="PlasticXPv2">Plastic XP Version 2</option>
   <option value="ProServer">Professional Server</option>
   <option value="Sharp">Sharp</option>
   <option value="Sketch">Sketch</option>
   <option value="Sky">Sky</option>
   <option value="Smilies">Smilies</option>
   <option value="SmoothMetal">Smooth Metal</option>
   <option value="SmoothMetalGold">Smooth Metal Gold</option>
   <option value="Solid">Solid</option>
   <option value="Squareheads">Squareheads</option>
   <option value="Titanium">Titanium</option>
   <option value="VisualXP">Visual XP</option>
   <option value="WinFolders">Windows Folders</option>
   <option value="Blue">Standard (Blue)</option>
   <option value="Green">Standard (Green)</option>
   <option value="Red">Standard (Red)</option>
   <option value="XP">Standard (XP)</option>
  </select></td>
 </tr>
 <tr>
  <td colspan="2"><hr></td>
 </tr>
 <tr>
  <td align="right">Language:&nbsp;</td>
  <td><select name="selLanguageCode" style="WIDTH: 180px">
   <option value="EN" SELECTED>English</option>
   <option value="AR">Arabic (????????)</option>
   <option value="zh-CN">Chinese (Simplified)</option>
   <option value="zh-TW">Chinese (Traditional)</option>
   <option value="CR">Croatian</option>
   <option value="DU">Dutch (Nederlands)</option>
   <option value="EN-US">English (US)</option>
   <option value="FR">French (Francais)</option>
   <option value="GM">German (Deutsch)</option>
   <option value="IT">Italian (Italiano)</option>
   <option value="PL">Polish (Polski)</option>
   <option value="PT">Portuguese</option>
   <option value="PT-BR">Portuguese (Brazil)</option>
   <option value="SP">Spanish (Espanol)</option>
   <option value="EN-EN">Spanish (Spain) (Espanol)</option>
   <option value="TR">Turkish (Turkce)</option>
  </select></td>
 </tr>
 <tr>
  <td colspan="2"><hr></td>
 </tr>
 <tr>
  <td></td>
  <td><input type="submit" name="btnProcess" value="Logon">&nbsp;Remember Me: <input type="checkbox" name="RememberMe"></td>
 </tr>
 <tr>
  <td colspan="2" align="center"><br><a href="http://cp.yourdomain.com/forgotPassword.asp">Click here if you have lost your logon details</a></td>
 </tr>
</table>
</form>
<script language="javascript">
<!--
 document.frmLogon.txtUsername.focus();
//-->
</script>
</body>
</html>

Customised Login Form
As you can see in this example, you can prevent selection, and force the use of skin and/or theme and/or language by passing your own values (as in the standard select lists) as hidden form fields:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Control Panel Login</title>
<meta http-equiv="Content-type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="Content-Style-Type" content="text/css">
</head>
<body>
<form name="frmLogon" action="http://cp.yourdomain.com/default.asp" method="POST">
<table border="0" cellpadding="0" cellspacing="0" width="25%">
 <tr>
  <td align="right" width="25%">Username:&nbsp;</td>
  <td width="75%"><input type="text" name="txtUsername" size="20" value=""></td>
 </tr>
 <tr>
  <td align="right">Password:&nbsp;</td>
  <td><input type="password" name="txtPassword" size="20" value=""></td>
 </tr>
 <tr>
  <td colspan="2"><hr></td>
 </tr>
 <tr>
  <td></td>
  <td><input type="submit" name="btnProcess" value="Logon">&nbsp;Remember Me: <input type="checkbox" name="RememberMe"></td>
 </tr>
 <tr>
  <td colspan="2" align="center"><br><a href="http://cp.yourdomain.com/forgotPassword.asp">Click here if you have lost your logon details</a></td>
 </tr>
</table>
<input type="hidden" name="LockTheme" value="false">
<input type="hidden" name="LockInterface" value="false">
<input type="hidden" name="LockLanguage" value="false">
<input type="hidden" name="HelmLoginURL" value="http://www.yourdomain.com/helmlogin.html">
<input type="hidden" name="selTheme" value="ModernXP">
<input type="hidden" name="selInterface" value="explorerxp">
<input type="hidden" name="selLanguageCode" value="FR">
</form>
<script language="javascript">
<!--
 document.frmLogon.txtUsername.focus();
//-->
</script>
</body>
</html>

You will also see in the customised login form these hidden values:

Code:

<input type="hidden" name="LockTheme" value="false">
<input type="hidden" name="LockInterface" value="false">
<input type="hidden" name="LockLanguage" value="false">
<input type="hidden" name="HelmLoginURL" value="http://www.yourdomain.com/helmlogin.html">

By changing any of the Lock variables to a value true - you prevent the Helm user from changing the theme and/or skin and/or language once they are logged in to Helm - useful if you need complete UI control.

Remember to set the HelmLoginURL variable value, as this will be the login page that the user will be redirected to, when they logout of Helm.

Control Panel Online Status (Red Fox Hosting only)
In either login form, you have a couple of options with regards to control panel online status, the most basic one using JavaScript - place this block of code in the HTML HEAD section:

Code:

<script type="text/javascript" language="javascript" src="http://cp.yourdomain.com/status.js"></script>
<script type="text/javascript" language="javascript">
<!--
if(!helmOnline()){
	window.location = "http://www.yourdomain.com/helmoffline.htm";
}
//-->
</script>

Of for those with coding skills, an XML file containing the online status boolean can be obtained at:

http://cp.yourdomain.com/status.xml

**RFH Reseller: nick** · 13th November 2005, 12:19 AM

Nice one warren, I've been thinking about doing that and perhaps now I might get round to it!

**RFH Reseller: Sol** · 16th November 2005, 02:23 AM

Thanks for that Warren.

I had created a custom login in the past by simply ripping of the cp.domain.com page and placing it at another URL as recommended. However, I didn't know you could lock the skin and interface.

Also, I actually linked to the rounded corner images at the cp.domain.com url, which got changed during an upgrade and hence meant my nice blue form suddenly got green corners.

**Staff: Warren Ashcroft** · 16th November 2005, 08:21 AM

Originally Posted by Sol

Also, I actually linked to the rounded corner images at the cp.domain.com url, which got changed during an upgrade and hence meant my nice blue form suddenly got green corners.

Blue was changed to green quite a while ago...

**RFH Reseller: Sol** · 1st December 2005, 05:27 AM

Originally Posted by Warren Ashcroft

You will also see int he customised login form these hidden values:

Code:

<input type="hidden" name="LockTheme" value="false">
<input type="hidden" name="LockInterface" value="false">
<input type="hidden" name="LockLanguage" value="false">

By changing any of these values to true - you prevent the Helm user from changing the theme and/or skin and/or language once they are logged in to Helm - useful if you need complete UI control.

Can you please confirm this functionality as I am not seeing this. I have tried setting LockTheme and LockInterface to true and when I login using a customer account within my reseller account I can change both themes and skins.

**Staff: Warren Ashcroft** · 1st December 2005, 09:35 AM

They should be working - Ill check...

**RFH Reseller: Sol** · 1st December 2005, 01:50 PM

Whilst we are discussing this, is there any way to change the page the users are directed to when they click the Logoff link in helm?

**Staff: Warren Ashcroft** · 16th December 2005, 04:00 AM

Hello There,
Sorry about the delay in replying to this - all customisable settings are now working, and I've added a new one "HelmLoginURL", see above for more info.