MyBrandedHOST -- Custom Login Page Code Explained

Custom Login Page Code Explained

To accomplish a remote login, we're simply passing login credentials off to cPanel / WHM. Security Warning: Use SSL on your login page. You definitely don't want to send your customers' login information out on the net in plain text.

To send these login credentials, we're going to use a form with a POST request. Normally we use the form like this:

									<form name="loginform" id="loginform" method="POST" action="http://mybrandedhost.com:2083/login/"></div>
									</form>

However, that only works if we're sending customers to one place, http://mybrandedhost.com:2083/login/. Since we want our customers to be able to go to their webmail (:2096), cPanel (:2083) or WHM (:2087), we'll have to be a bit more crafty. To accomplish this, we introduce some JavaScript and an HTML select:

									<script type="text/javascript">
											var servername = document.loginform.domain.value;
											var port = document.loginform.port.value;
											var theaction = "https://" + servername + ":" + port + "/login/"
											document.loginform.action = theaction;
											output = true;
									</script>
									
									<select name="port">
											<option value="2083">Manage my Domain</option>
											<option value="2096">Read my Email</option>
											<option value="2087">Manage my Server</option>
									</select>

Now, we're pulling the value of the select named port with:

												var port = document.loginform.port.value;

Then we're changing the action (target) of the form with:

												var theaction = "https://" + servername + ":" + port + "/login/"
												document.loginform.action = theaction;

To make sure that this works for all customers on all servers, we'll put them on the right server with this line:

												var servername = document.loginform.domain.value;

The rest of the JavaScript used is simply to warn the users when they haven't entered a value and to make the form fail in that case. so when we put everything together, we get this JavaScript:

										<script type="text/javascript">
										function craftAction () {
											document.getElementById("errorspace").innerHTML = '';
											var launch = 1;
											var output = false;
											if (document.loginform.domain.value == ''){
												document.getElementById("errorspace").innerHTML += '<font color=#FF0000>You must enter your domain name</font><br />';
												launch = 0;
											}
											if (document.loginform.pass.value == ''){
												document.getElementById("errorspace").innerHTML += '<font color=#FF0000>You must enter your password</font><br />';
												launch = 0;
											}
											if (document.loginform.user.value == ''){
												document.getElementById("errorspace").innerHTML += '<font color=#FF0000>You must enter your username</font><br />';
												launch = 0;
											}
											if (launch == 0){
												output = false;
											}
											else{
												var servername = document.loginform.domain.value;
												var port = document.loginform.port.value;
												var theaction = "https://" + servername + ":" + port + "/login/"
												document.loginform.action = theaction;
												output = true;
											}

											return output;

										}
										</script>

Now, there are a few important things to note about our HTML. Primarily, make sure that you have a space to show your users errors when the form check fails:

													<div id="errorspace"></div>

Make sure that your form is named loginform as that's what we reference above in the JavaScript. Also, since we've created the form's action in the above JavaScript, all we need to do is use onSubmit to call that JavaScript when the form is submitted:

												<form name="loginform" id="loginform" onSubmit="return craftAction();"></div>

Other than that, the rest of the form is a few inputs so just make sure you copy the names from the code below. Putting everything together on the HTML side gives us this code:

									<div id="errorspace"></div>
									<form name="loginform" id="loginform" onSubmit="return craftAction();"></div>
									<div class="form"><input type="text" name="domain" value="" /></div>
									<div class="form"><input type="text" name="user" value="" /></div>
									<div class="form"><input type="password" name="pass" value="" /></div>
									<div class="form"><select name="port">
														<option value="2083">Manage my Domain</option>
														<option value="2096">Read my Email</option>
														<option value="2087">Manage my Server</option>
													 </select>
									</div>
									<input type="hidden" name="login_theme" value="default">
									<br />
									<input type="image" src="images/submit.gif"> <!-- Alternately, this could be simply a input type="submit" -->
									</form>

Now that you understand the code, go ahead and build it into your site's look to get a working login form for your customers.