Mail Login

[redice]

Hi There,

I would like to add a Mail Login form on an image but dont know
how to go about this.

Could some one kindly let me know how this is done.

Regards
redice

[ddadmin]

You'll need to elaborate, as a "login form" and an image are two separate things.

[redice]

The Image is a simple box that has a username and password field to login into email. (webmail)

Now currently the login doesnt work. I would like to get this to work how may it be done?

[Twey]

The Image is a simple box that has a username and password fieldErm... you drew a login and password box on an image?

[redice]

trying to:)

[Twey]

You mean, in a graphics-editing program?

[redice]

yes or dreamweaver once iv imported the image.
is it do-able?

[redice]

<!--

function setFocus()
{
if (document.imp_login.imapuser.value == "") {
document.imp_login.imapuser.focus();
} else {
document.imp_login.pass.focus();
}
}


function submit_login(e)
{
if (typeof e != 'undefined' && !enter_key_trap(e)) {
return;
}

if (document.imp_login.imapuser.value == "") {
alert('Please provide your username.');
document.imp_login.imapuser.focus();
return false;
} else if (document.imp_login.pass.value == "") {
alert('Please provide your password.');
document.imp_login.pass.focus();
return false;
} else {
document.imp_login.loginButton.disabled = true;
document.imp_login.submit();
return true;
}
}
//-->
</script>

<form name="imp_login" action="http://webmail.cyber-clix.net/horde/imp/redirect.php" method="post" target="_parent">
<div align="center">
<input type="hidden" name="actionID" value="" />
<input type="hidden" name="url" value="" />
<input type="hidden" name="mailbox" value="INBOX" />
<input type="hidden" name="load_frameset" value="1" />
<input type="hidden" name="autologin" value="0" />
</div>
<div id="menu"></div>

<table width="100%"><tr><td align="center"><table width="300" align="center">

<tr>
<td colspan="2">
<input type="hidden" name="server" value="localhost" />
<input type="hidden" name="port" value="143" />
<input type="hidden" name="namespace" value="" />

<input type="hidden" name="maildomain" value="cyber-clix.net" />
<input type="hidden" name="protocol" value="imap/notls" />
<input type="hidden" name="realm" value="" />
</td>
</tr>

<tr>
<td colspan="2"><input type="hidden" name="folders" value="INBOX." /></td>
</tr>

<tr>
<td align="right" class="light"><b class="style1">Username</b></td>

<td align="left" class="light" nowrap="nowrap">
<input name="imapuser" type="text" class="style1" tabindex="1" value="" />
</td>
</tr>
<tr>
<td align="right" class="light"><b class="style1">Password</b></td>
<td align="left"><input name="pass" type="password" class="style1" tabindex="2" /></td>
</tr>

<tr>

<td align="right" class="light"><div align="right">
<input type="submit" class="style1" name="loginButton" tabindex="4" value="Log in" onclick="return submit_login();" />
</div></td>
</tr>


</table></td></tr></table>
</form>

<script language="JavaScript" type="text/javascript">
<!--

function updatePort()
{
}

function selectLang()
{
// We need to reload the login page here, but only if the user hasn't
// already entered a username and password.
if (document.imp_login.imapuser.value == '' &&
document.imp_login.pass.value == '') {
var lang_page = 'login.php?new_lang=' + document.imp_login.new_lang[document.imp_login.new_lang.selectedIndex].value;
self.location = lang_page;
}
}

if (parent.frames.horde_main) {
document.imp_login.target = '_parent';
}
//-->
</script>
<script language="JavaScript1.2" type="text/javascript">
<!--
// Setup the enter keytrap code.
if (window.document.captureEvents != null) {
window.document.captureEvents(Event.KEYPRESS);
window.document.onkeypress = submit_login;
}
//-->
</script>
<!-- This file contains any "Message Of The Day" Type information -->
<!-- It will be included below the log-in form on the login page. -->

<br />
<table width="100%"><tr>
</tr></table>
<script language="JavaScript1.5" type="text/javascript">
<!--
var _setHordeTitle = 1;
try {
if (document.title && parent.frames.horde_main) parent.document.title = document.title;
} catch (e) {
}
// -->
</script>
<script language="JavaScript" type="text/javascript">
<!--
if (typeof(_setHordeTitle) == 'undefined' && document.title && parent.frames.horde_main) parent.document.title = document.title;

// -->
</script>
<script language="JavaScript" type="text/javascript">
<!--
setFocus()
//-->



Am trying to get the above login script work on my website www.digitalclix.net on the login in the right top corner. How may i achieve tht?

Your help will be greatly appreciated:confused:

Redice

[Twey]

Am trying to get the above login script work on my website www.digitalclix.net on the login in the right top corner.Ah, I see. I thought you just drew a picture of a log-in form and expected it to function :p
You need to have a normal form (made with <form> tags), then have the image as a background.

[jstgermain]

here you go:



<!--

function setFocus()
{
if (document.imp_login.imapuser.value == "") {
document.imp_login.imapuser.focus();
} else {
document.imp_login.pass.focus();
}
}


function submit_login(e)
{
if (typeof e != 'undefined' && !enter_key_trap(e)) {
return;
}

if (document.imp_login.imapuser.value == "") {
alert('Please provide your username.');
document.imp_login.imapuser.focus();
return false;
} else if (document.imp_login.pass.value == "") {
alert('Please provide your password.');
document.imp_login.pass.focus();
return false;
} else {
document.imp_login.loginButton.disabled = true;
document.imp_login.submit();
return true;
}
}
//-->
</script>

<form name="imp_login" action="http://webmail.cyber-clix.net/horde/imp/redirect.php" method="post" target="_parent">
<div align="center">
<input type="hidden" name="actionID" value="" />
<input type="hidden" name="url" value="" />
<input type="hidden" name="mailbox" value="INBOX" />
<input type="hidden" name="load_frameset" value="1" />
<input type="hidden" name="autologin" value="0" />
</div>
<div id="menu"></div>

<table width="100%"><tr><td align="center"><table width="300" align="center">

<tr>
<td colspan="2">
<input type="hidden" name="server" value="localhost" />
<input type="hidden" name="port" value="143" />
<input type="hidden" name="namespace" value="" />

<input type="hidden" name="maildomain" value="cyber-clix.net" />
<input type="hidden" name="protocol" value="imap/notls" />
<input type="hidden" name="realm" value="" />
</td>
</tr>

<tr>
<td colspan="2"><input type="hidden" name="folders" value="INBOX." /></td>
</tr>

<tr>
<td align="right" class="light"><b class="style1">Username</b></td>

<td align="left" class="light" nowrap="nowrap">
<input name="imapuser" type="text" class="style1" tabindex="1" value="" />
</td>
</tr>
<tr>
<td align="right" class="light"><b class="style1">Password</b></td>
<td align="left"><input name="pass" type="password" class="style1" tabindex="2" /></td>
</tr>

<tr>

<td align="right" class="light"><div align="right">
<input style="background: url(http://www.methodcomptech.com/upload/simpsons.gif) ; width: 200 ; height: 200 ; " type="submit" border="0" class="style1" name="loginButton" tabindex="4" value="Log in" onclick="return submit_login();" />
</div></td>
</tr>


</table></td></tr></table>
</form>

<script language="JavaScript" type="text/javascript">
<!--

function updatePort()
{
}

function selectLang()
{
// We need to reload the login page here, but only if the user hasn't
// already entered a username and password.
if (document.imp_login.imapuser.value == '' &&
document.imp_login.pass.value == '') {
var lang_page = 'login.php?new_lang=' + document.imp_login.new_lang[document.imp_login.new_lang.selectedIndex].value;
self.location = lang_page;
}
}

if (parent.frames.horde_main) {
document.imp_login.target = '_parent';
}
//-->
</script>
<script language="JavaScript1.2" type="text/javascript">
<!--
// Setup the enter keytrap code.
if (window.document.captureEvents != null) {
window.document.captureEvents(Event.KEYPRESS);
window.document.onkeypress = submit_login;
}
//-->
</script>
<!-- This file contains any "Message Of The Day" Type information -->
<!-- It will be included below the log-in form on the login page. -->

<br />
<table width="100%"><tr>
</tr></table>
<script language="JavaScript1.5" type="text/javascript">
<!--
var _setHordeTitle = 1;
try {
if (document.title && parent.frames.horde_main) parent.document.title = document.title;
} catch (e) {
}
// -->
</script>
<script language="JavaScript" type="text/javascript">
<!--
if (typeof(_setHordeTitle) == 'undefined' && document.title && parent.frames.horde_main) parent.document.title = document.title;

// -->
</script>
<script language="JavaScript" type="text/javascript">
<!--
setFocus()
//-->


*************ALSO*************
ADD
border: 0;
to the style 1 in the css. :)

[Twey]

There's absolutely no need to use Javascript for this. CSS will be quite sufficient.

[jstgermain]

There's absolutely no need to use Javascript for this. CSS will be quite sufficient.

absolutely correct, but i was just trying to use the code that they wanted to have work. :)

[Twey]

Ah, yes, I see it. OK. :)

[redice]

Cheers guys.

Where do i place the code given to me by jstgermain
sorry for being such a pain.

Redice

[Twey]

Where you placed the code you gave to us in the first place, I daresay.

[redice]

hehe

actually i was told by a friend of mine to pick that code from the webmail (horde login) and use it to make a login (what i want to achieve) on the website homepage. So I did that and thus the begining of this thread :-)

Redice

[Twey]

So... where is it within Horde, in relation to the form?

P.S. nice choice of webmail client... (guess who else uses Horde) :p

[redice]

Horde rocks :-)

Ok what i did was pick out the form section from hordes mail login page.

thats the script I had given earlier. You could have a look at the pages script maybe even your own hordes login page.

Now i wanted to integrate it into my small form section as you would see on the page in the top right corner. Now thats where I am really confused

Redice

[jstgermain]

i dont know where you are going to put it, i just made it work for the code you gave.