Login form on my home page?

my one will be based on css, if gmilazzo cant get images working on his code either i will chnage the css to use images. At the moment the one im making just runs on css styles :cool:

Chris
 
here is the CSS based login code:

Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>DirectAdmin Login Page</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
.tablestyle {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	border: 1px solid #000000;
	font-size: 12px;
}

</style>
<style type="text/css">

.buttonstyle {
}

</style>
<script language="javascript"> 
function Login(form) { 
var username = form.username.value; 
var password = form.password.value; 
var server = form.server.value; 
if (username && password && server) { 
var dalogin = "http://" + username + ":" + password + "@" + server + ":2222/"; 
window.location = dalogin; 
} 
else { 
alert("Please enter a Username and password."); 
} 
} 
</script>

</head>

<body>
<form name="login">
  <table width="100%" border="0" cellpadding="0" cellspacing="0">
    <tr> 
      <td colspan="2" class="tablestyle"><div align="center"><font color="#003366" size="2" face="Verdana, Arial, Helvetica, sans-serif"><strong>DIRECTADMIN 
          LOGIN</strong></font></div></td>
    </tr>
    <tr> 
      <td width="50%" height="50" valign="middle"><font size="2" face="Verdana, Arial, Helvetica, sans-serif">Username:</font></td>
      <td valign="middle"> <input name="username" type="text" class="tablestyle" maxlength="26"></td>
    </tr>
    <tr> 
      <td height="48" valign="middle"><font size="2" face="Verdana, Arial, Helvetica, sans-serif">Password:</font></td>
      <td><input name="password" type="password" class="tablestyle"></td>
    </tr>
    <tr> 
      <td width="50%" height="50" valign="middle"><font size="2" face="Verdana, Arial, Helvetica, sans-serif">Domain:</font></td>
      <td width="50%" height="50"><input name="server" type="text" class="tablestyle"> 
      </td>
    </tr>
    <tr> 
      <td colspan="2" class="tablestyle"><div align="center">
          <p class="buttonstyle"><br>
            <input type="button" name="button" value="Login!" onClick="Login(this.form)">
            <br>
            <br>
          </p>
        </div></td>
    </tr>
  </table>
  <div align="center"></div>
</form>
</body>
</html>

Enjoy it ;) if you need the images still , leave a message here :)

Chris
 
<form method="get">Username:<br />
<input name="username" id="username" type="text"
value="" /><br />
Password:<br />
<input name="password" id="password" type="password"
value="" /><br />
Domain Name:<br />
<input name="server" id="server" type="text"
value="" /><br />
<input type="image" value="imagelocation"
onclick="Login(this.form)" name="button" /></form>
</td>
<h2 align="center"> </h2>
</td>
</tr>
<tr>
<td>  </td>
</tr>
<tr>
<td colspan=2 align=center> </td>
</tr>
</table>
</div>
</form>
 
If that works, this version of the code should show an image submit button:

Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>DirectAdmin Login Page</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
.tablestyle {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	border: 1px solid #000000;
	font-size: 12px;
}

</style>
<style type="text/css">

.buttonstyle {
}

</style>
<script language="javascript"> 
function Login(form) { 
var username = form.username.value; 
var password = form.password.value; 
var server = form.server.value; 
if (username && password && server) { 
var dalogin = "http://" + username + ":" + password + "@" + server + ":2222/"; 
window.location = dalogin; 
} 
else { 
alert("Please enter a Username and password."); 
} 
} 
</script>

</head>

<body>
<form name="login">
  <table width="100%" border="0" cellpadding="0" cellspacing="0">
    <tr> 
      <td colspan="2" class="tablestyle"><div align="center"><font color="#003366" size="2" face="Verdana, Arial, Helvetica, sans-serif"><strong>DIRECTADMIN 
          LOGIN</strong></font></div></td>
    </tr>
    <tr> 
      <td width="50%" height="50" valign="middle"><font size="2" face="Verdana, Arial, Helvetica, sans-serif">Username:</font></td>
      <td valign="middle"> <input name="username" type="text" class="tablestyle" maxlength="26"></td>
    </tr>
    <tr> 
      <td height="48" valign="middle"><font size="2" face="Verdana, Arial, Helvetica, sans-serif">Password:</font></td>
      <td><input name="password" type="password" class="tablestyle"></td>
    </tr>
    <tr> 
      <td width="50%" height="50" valign="middle"><font size="2" face="Verdana, Arial, Helvetica, sans-serif">Domain:</font></td>
      <td width="50%" height="50"><input name="server" type="text" class="tablestyle"> 
      </td>
    </tr>
    <tr> 
      <td colspan="2" class="tablestyle"><div align="center">
          <p class="buttonstyle"><br>
            <input type="image" name="button" value="http://link.to/image.ext" onClick="Login(this.form)">
            <br>
            <br>
          </p>
        </div></td>
    </tr>
  </table>
  <div align="center"></div>
</form>
</body>
</html>
 
Hi Chris and gmilazzo,
I tried both of your scripts.

Chris, With the newer version for some reasone the image doesn't show up. When I click the image place holder the form resets :(

gmilazzo, With your button update the button shows up but the form rests and doesn't submit properly.

Thank you both for all your help.
I will just resize my page in photoshop to fit the default button for now. It' quite puzzling why these don't work. I tried the code in frontpage and also in a text editor to be sure, so???

Best Regards -Jason
 
Hi Chris,
I wasn't able to get it to work. Perhaps it does and I did something wrong. I don't have any experience with CSS. I added my image location in this part of your code. value="http://link.to/image.ext I did this in a text editor and saved the document as .html and then previewed in my browser.
Were you able to verify it on your end? Thanks- Jason
 
will make one based on CSS with image as background and you can chnage size and image then ;)

Chris
 
Thanks Chris, You are too kind and I mean that. Thanks for ll the time you are putting in helping me. I hope I can return the favore one day. -Jason :D
 
I'm currently looking into implementing a sessions based system which would make this type of thing a *whole* lot easier. Http auth just doesn't provide the flexibility we'd like.. (some browsers refuse to forget the passwords, so they can't log out). I'll make sure http auth still works, with the goal to have a sessions based system that can be used on top of it.

I'll keep you posted.

John
 
I think DirectAdmin needs a "real" login system, .htaccess / .htpasswd to me doesnt show the security is the best on there, also the htaccess cant be customised and makes thing much more difficult when creating custom login forms from your homepage.

Ensim style login is the way I think :cool:

Chris
 
HTML version:

Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>DirectAdmin Login Page</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
.tablestyle {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	border: 1px solid #000000;
	font-size: 12px;
}

</style>
<style type="text/css">

.buttonstyle {
	background-image: url([url]http://link.to/image.ext[/url]);
	width: 468px;
	height: 60px;
	border: 1px solid #000000;
}

</style>
<script language="javascript"> 
function Login(form) { 
var username = form.username.value; 
var password = form.password.value; 
var server = form.server.value; 
if (username && password && server) { 
var dalogin = "http://" + username + ":" + password + "@" + server + ":2222/"; 
window.location = dalogin; 
} 
else { 
alert("Please enter a Username and password."); 
} 
} 
</script>
</head>

<body>
<form name="login">
  <table width="100%" border="0" cellpadding="0" cellspacing="0">
    <tr> 
      <td colspan="2" class="tablestyle"><div align="center"><font color="#003366" size="2" face="Verdana, Arial, Helvetica, sans-serif"><strong>DIRECTADMIN 
          LOGIN</strong></font></div></td>
    </tr>
    <tr> 
      <td width="50%" height="50" valign="middle"><font size="2" face="Verdana, Arial, Helvetica, sans-serif">Username:</font></td>
      <td valign="middle"> <input name="username" type="text" class="tablestyle" maxlength="26"></td>
    </tr>
    <tr> 
      <td height="48" valign="middle"><font size="2" face="Verdana, Arial, Helvetica, sans-serif">Password:</font></td>
      <td><input name="password" type="password" class="tablestyle"></td>
    </tr>
    <tr> 
      <td width="50%" height="50" valign="middle"><font size="2" face="Verdana, Arial, Helvetica, sans-serif">Domain:</font></td>
      <td width="50%" height="50"><input name="server" type="text" class="tablestyle"> 
      </td>
    </tr>
    <tr> 
      <td colspan="2" class="tablestyle"><div align="center">
          <p><br>
            <input name="button" type="button" class="buttonstyle" onClick="Login(this.form)">
            <br>
            <br>
          </p>
        </div></td>
    </tr>
  </table>
  <div align="center"></div>
</form>
</body>
</html>
 
Here is the PHP version, your page will need to be .php also, just change the variables listed at the of the code.

Code: 
<?php

// change the below settings to anything you want :)

$pagetitle = "DirectAdmin Login Page";                  // Title of this page
$imagelink = "http://link.to/yourimage.ext";            // link to your image
$imagewidth = "100";                                    // width of your image (in pixels)
$imageheight = "30";                                    // Height of your image (in pixels)
$border = "#000000"                                     // Colour of the border placed around your button

?>


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title><?php echo "$pagetitle"; ?></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
.tablestyle {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	border: 1px solid #000000;
	font-size: 12px;
}

</style>
<style type="text/css">

.buttonstyle {
	background-image: url(<?php echo "$imagelink"; ?>);
	width: <?php echo "$imagewidth";?>px;
	height: <?php echo "$imageheight"; ?>px;
	border: 1px solid <?php echo "border"; ?>;
}

</style>
<script language="javascript"> 
function Login(form) { 
var username = form.username.value; 
var password = form.password.value; 
var server = form.server.value; 
if (username && password && server) { 
var dalogin = "http://" + username + ":" + password + "@" + server + ":2222/"; 
window.location = dalogin; 
} 
else { 
alert("Please enter a Username and password."); 
} 
} 
</script>
</head>

<body>
<form name="login">
  <table width="100%" border="0" cellpadding="0" cellspacing="0">
    <tr> 
      <td colspan="2" class="tablestyle"><div align="center"><font color="#003366" size="2" face="Verdana, Arial, Helvetica, sans-serif"><strong>DIRECTADMIN 
          LOGIN</strong></font></div></td>
    </tr>
    <tr> 
      <td width="50%" height="50" valign="middle"><font size="2" face="Verdana, Arial, Helvetica, sans-serif">Username:</font></td>
      <td valign="middle"> <input name="username" type="text" class="tablestyle" maxlength="26"></td>
    </tr>
    <tr> 
      <td height="48" valign="middle"><font size="2" face="Verdana, Arial, Helvetica, sans-serif">Password:</font></td>
      <td><input name="password" type="password" class="tablestyle"></td>
    </tr>
    <tr> 
      <td width="50%" height="50" valign="middle"><font size="2" face="Verdana, Arial, Helvetica, sans-serif">Domain:</font></td>
      <td width="50%" height="50"><input name="server" type="text" class="tablestyle"> 
      </td>
    </tr>
    <tr> 
      <td colspan="2" class="tablestyle"><div align="center">
          <p><br>
            <input name="button" type="button" class="buttonstyle" onClick="Login(this.form)">
            <br>
            <br>
          </p>
        </div></td>
    </tr>
  </table>
  <div align="center"></div>
</form>
</body>
</html>

Any more problems leave a message here ;)

Chris
 
Chris,

I just started playing with your lastest HTML version. It works very nicely, I think I will try integrating it in to my new site. :D

Thanks!
 
would you rather have it not require the domain and just username / password?

###

Thanks for the commnt Ryan :)
 
made it anyway :P ## for all who dont want the "domain" field just chnage the "address" variable in the php section ;) also the page must be saved as .php

Code: 
<?php

// change the below settings to anything you want :)

$pagetitle = "DirectAdmin Login Page";                  // Title of this page
$address = "111.111.111.111";                           // IP address used for login (can also be a domain)
$imagelink = "http://link.to/yourimage.ext";            // link to your image
$imagewidth = "100";                                    // width of your image (in pixels)
$imageheight = "30";                                    // Height of your image (in pixels)
$border = "#000000"                                     // Colour of the border placed around your button

?>


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title><?php echo "$pagetitle"; ?></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
.tablestyle {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	border: 1px solid #000000;
	font-size: 12px;
}

</style>
<style type="text/css">

.buttonstyle {
	background-image: url(<?php echo "$imagelink"; ?>);
	width: <?php echo "$imagewidth";?>px;
	height: <?php echo "$imageheight"; ?>px;
	border: 1px solid <?php echo "border"; ?>;
}

</style>
<script language="javascript"> 
function Login(form) { 
var username = form.username.value; 
var password = form.password.value; 
var server = form.server.value; 
if (username && password && server) { 
var dalogin = "http://" + username + ":" + password + "@" <?php echo "address"; ?>:2222";
window.location = dalogin; 
} 
else { 
alert("Please enter a Username and password."); 
} 
} 
</script>
</head>

<body>
<form name="login">
  <table width="100%" border="0" cellpadding="0" cellspacing="0">
    <tr> 
      <td colspan="2" class="tablestyle"><div align="center"><font color="#003366" size="2" face="Verdana, Arial, Helvetica, sans-serif"><strong>DIRECTADMIN 
          LOGIN</strong></font></div></td>
    </tr>
    <tr> 
      <td width="50%" height="50" valign="middle"><font size="2" face="Verdana, Arial, Helvetica, sans-serif">Username:</font></td>
      <td width="50%" valign="middle"> <input name="username" type="text" class="tablestyle" maxlength="26"></td>
    </tr>
    <tr> 
      <td height="48" valign="middle"><font size="2" face="Verdana, Arial, Helvetica, sans-serif">Password:</font></td>
      <td><input name="password" type="password" class="tablestyle"></td>
    </tr>
    <tr> 
      <td colspan="2" class="tablestyle"><div align="center"> 
          <p><br>
            <input name="button" type="button" class="buttonstyle" onClick="Login(this.form)">
            <br>
            <br>
          </p>
        </div></td>
    </tr>
  </table>
  <div align="center"></div>
</form>
</body>
</html>

Chris
 
ProWebUK said:
would you rather have it not require the domain and just username / password?
Click to expand...

I took it out in mine but it would become very useful once you had multiple DA boxes.
 
You must log in or register to reply here.
Back
Top