[REQUEST] Ajax/DHTML Login Box with Redirection

Looking for a MOD? Have a MOD request? Post here for help. (Note: This forum is community supported; phpBB does not have official MOD authors)
Get Involved
Locked
baerenwurm
Registered User
Posts: 131
Joined: Wed Nov 06, 2002 2:38 pm
Location: Germany

[REQUEST] Ajax/DHTML Login Box with Redirection

Post by baerenwurm » Sun Mar 08, 2009 7:37 pm

Hi.

I'd like to have a customizable JavaScript login box like the one on this site.

Image

After logging in, it should redirect the user to the last page he was previously viewing.

Here's the code for the phpBB2 MOD (no redirection the the last page included):

MOD instructions:

Code: Select all

##############################################################
## MOD Title:  Login Box
## MOD Author: DerEine < s.simon79@gmx.de > (Stefan Simon) http://www.orionmods.de
##             Inspiriert von der DHMTL Login Box
##	       Giga4000 < webmaster@mx-forums.de > (Felix Mau) http://www.mx-forums.de
## MOD Description: Fügt dem Header eine Loginbox hinzu.
##                  Beim Klick auf "Login" wird man nun nicht mehr zur Loginseite
##                  geleitet, sondern kann direkt in diese Box Nickname und Passwort eingeben.
##                  Das Bild kann beliebig ersetzt werden.
## MOD Version: 1.0.0
##
## Installation Level: Easy
## Installation Time:   Minuten
## Files To Edit: 2
##                templates/cback/cback.css
##                templates/cback/overall_header.tpl
## Included Files: 2
##############################################################
## For Security Purposes, Please Check: http://www.phpbb.com/mods/downloads/ for the
## latest version of this MOD. Downloading this MOD from other sites could cause malicious code
## to enter into your phpBB Forum. As such, phpBB will not offer support for MODs not offered
## in our MOD-Database, located at: http://www.phpbb.com/mods/downloads/
##############################################################
## Before Adding This MOD To Your Forum, You Should Back Up All Files Related To This MOD
##############################################################
#
#-----[ COPY ]------------------------------------------
#
templates/cback/images/login.png   to     templates/cback/images/login.png
templates/cback/dhtml_login_box.js to     templates/cback/dhtml_login_box.js
#
#-----[ OPEN ]------------------------------------------
#
templates/cback/cback.css

#
#-----[ FIND ]------------------------------------------
#
# Oder einfach am Ende einfügen
.tblr
{
  background: url(images/tb4_r.gif) no-repeat;
  width:8px
}

#
#-----[ AFTER, ADD ]------------------------------------------
# Ja, die Raute vor login_box gehört dazu ;-)

#login_box
{
  background: url(images/login.png) no-repeat;
  width:      300px;
  height:     300px;
  position:   absolute;
  top:        500px;
  left:       10%;
  font:       Verdana,Arial,Helvetica,sans-serif;
  font-size:  12px;
  color:      #333333;
  z-index:    100;
}

#
#-----[ OPEN ]------------------------------------------
#
templates/cback/overall_header.tpl

#
#-----[ FIND ]------------------------------------------
#
</head>

#
#-----[ BEFORE, ADD ]------------------------------------------
#
# Ersetze /cback/ durch Dein aktuelles Style!
<!-- BEGIN switch_user_logged_out -->
<script language="javascript" type="text/javascript" src="templates/cback/dhtml_login_box.js"></script>
<!-- END switch_user_logged_out -->

#
#-----[ FIND ]------------------------------------------
#
<body>

#
#-----[ AFTER, ADD ]------------------------------------------
#
<!-- BEGIN switch_user_logged_out -->
<div id="login_box" style="display: none;" onmouseover="clearhidemenu()" onmouseout="delayhidemenu()">
<form method="post" action="{S_LOGIN_ACTION}">
<table cellspacing="2" cellpadding="10" border="0" align="center" width="75%">
<tr>
<td><br /><br /><br /><span class="genmed">Username:</span><br /><input class="post" type="text" name="username" size="10" /></td>
</tr>
<tr>
<td><span class="genmed">Passwort:</span><br /><input class="post" type="password" name="password" size="10" maxlength="32" /></td>
</tr>
<tr>
<td><!-- BEGIN switch_allow_autologin -->
    <input class="text" type="checkbox" name="autologin" /><br /><span class="genmed">{L_AUTO_LOGIN}</span><br />
    <!-- END switch_allow_autologin --></td>
</tr>
<tr>
<td><input type="submit" class="mainoption" name="login" value="{L_LOGIN}" /></td>
</tr>
</table>
</form></div>
<!-- END switch_user_logged_out -->

#
#-----[ FIND ]------------------------------------------
#
<a href="{U_LOGIN_LOGOUT}">{L_LOGIN_LOGOUT}</a>

#
#-----[ REPLACE WITH ]------------------------------------------
#
<a href="{U_LOGIN_LOGOUT}" onclick="return (window.showhide) ? showhide('login_box', this) : true;">{L_LOGIN_LOGOUT}</a>

#
#-----[ SAVE/CLOSE ALL FILES ]------------------------------------------
#
# EoM
dhtml_login_box.js:

Code: Select all

/* <![CDATA[ */
/***********************************************
* DHTML Login Box © Felix Mau (www.mx-forums.de)
* This notice must stay intact for legal use
***********************************************/

function absLeft(obj) {
	return (obj.offsetParent) ? obj.offsetLeft+absLeft(obj.offsetParent) : obj.offsetLeft;
}

function absTop(obj) {
	return (obj.offsetParent) ? obj.offsetTop+absTop(obj.offsetParent) : obj.offsetTop;
}

function showhide(id, link) {
	var obj = document.getElementById(id);
	(obj.style.display == 'none') ? obj.style.display = 'block' : obj.style.display = 'none';
	obj.style.top = absTop(link)+15 + 'px';
	obj.style.left = absLeft(link)-obj.offsetWidth+100 + 'px';
	return false;
}

function delayhidemenu() {
	return delayhide = setTimeout('document.getElementById(\'login-box\').style.display = \'none\'', 250);
}

function clearhidemenu() {
	if (typeof delayhide != 'undefined') {
		clearTimeout(delayhide);
	}
}
/* ]]> */

Locked

Return to “[3.0.x] MOD Requests”