Página 1 de 1

Formulario de logueo en panel flotante

Publicado: 04 Jun 2011, 20:07
por Dr0gNan
Buenas tardes a tod@s.

He implementado el panel flotante siguiente: http://web-kreation.com/demos/Sliding_l ... el_jquery/

Dicho panel funciona perfectamente, quiero poner el formulario de login y password propio de phpBB dentro de dicho panel.

He cogido la parte de codigo de "login_body.html" y la he adaptado añadiéndola a dicho panel. El problema que tengo es que al introducir el usuario y contraseña parece que no procesa bien la contraseña y lanza este error:

Imagen

Tampoco funciona el enlace "Olvidé mi contraseña" pero ese se puede quitar dejando solo el resto.

El codigo de dicho panel es el siguiente, esta en un archivo html independiente llamado "Panel.html":

Código: Seleccionar todo

<!--
	Copyright 2009 Jeremie Tisseau
	"Sliding Login Panel with jQuery 1.3.2" is distributed under the GNU General Public License version 3:
	http://www.gnu.org/licenses/gpl-3.0.html
-->

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<meta http-equiv="content-type" content="text/html; charset=utf-8" />	

<!-- stylesheets -->
<link rel="stylesheet" href="css/slide.css" type="text/css" media="screen" />
	
<!-- PNG FIX for IE6 --><!-- http://24ways.org/2007/supersleight-transparent-png-in-ie6 -->
<!--[if lte IE 6]>
	<script type="text/javascript" src="js/pngfix/supersleight-min.js"></script>
<![endif]-->
	 
<!-- jQuery - the core -->
<script src="js/jquery-1.3.2.min.js" type="text/javascript"></script>
<!-- Sliding effect -->
<script src="js/slide.js" type="text/javascript"></script>

<!-- Panel -->
<div id="toppanel">
	<div id="panel">
		<div class="content clearfix">
			<div class="left">
				<h1>Bienvenido a "El Bar de Alktodostemen"</h1>
				<h2>Elige una de las opciones siguientes para conectarte</h2>		
				<p class="grey">Con el nuevo sistema de gestión de "El Bar de Alktodostemen" puedes conectarte con el usuario desde el que te has registrado en el foro, desde tu cuenta de Facebook, etc.</p>
			</div>
			<div class="left">
				<!-- Login Form -->
				<form action="{S_LOGIN_ACTION}" method="post">
					<div class="gensmall" colspan="2" align="center"><span class="error">{LOGIN_ERROR}</span></div>
					<h1>Usuario registrado</h1>
					<label class="grey" for="log">{L_USERNAME}:</label>
					<input class="post" type="text" name="{USERNAME_CREDENTIAL}" size="25" value="{USERNAME}" tabindex="1" />
					<label class="grey" for="pwd">{L_PASSWORD}</label>
					<input class="post" type="password" name="{PASSWORD_CREDENTIAL}" size="25" tabindex="2" />
					<input type="checkbox" class="radio" name="autologin" tabindex="3" /> <span class="gensmall">{L_LOG_ME_IN}</span>
					
        			<div class="clear"></div>
					<input type="submit" name="login" class="bt_login" value="Login" tabindex="5" />
					<a class="gensmall" href="{U_SEND_PASSWORD}">{L_FORGOT_PASS}</a>
				</form>
			</div>
			<div class="left right">			
				<!-- Register Form -->
				<form action="#" method="post">
					<h1>Not a member yet? Sign Up!</h1>				
					<label class="grey" for="signup">Username:</label>
					<input class="field" type="text" name="signup" id="signup" value="" size="23" />
					<label class="grey" for="email">Email:</label>
					<input class="field" type="text" name="email" id="email" size="23" />
					<label>A password will be e-mailed to you.</label>
					<input type="submit" name="submit" value="Register" class="bt_register" />
				</form>
			</div>
		</div>
	</div> <!-- /login -->	
				</center>
	<!-- The tab on top -->	
	<div class="tab">
		<ul class="login">
			<li class="left">&nbsp;</li>
			<li id="toggle">
				<a id="open" class="open" onclick="return false" href="#">{L_RADIO}</a>
				<a id="close" class="close" onclick="return false" style="display: none;" href="#">{L_RADIO}</a>			
			</li> 
			<li class="right">&nbsp;</li>
		</ul> 
	</div> <!-- / top -->
</div> <!--panel -->
He revisado el codigo y no entiendo porque si llamo a "panel.html" desde "overall_header.html" no coge correctamente los datos introducidos por teclado.

La llamada al panel en "overall_header.html" esta asi:

Código: Seleccionar todo

<!-- INCLUDE panel.html -->

<body class="{S_CONTENT_DIRECTION}">

<a name="top"></a>
Muchas gracias a todos, la verdad es que ultimamente no hago mas que preguntar... :oops:

Por cierto, el foro con dicho cambio se puede ver en la siguiente URL: http://elbardealktodostemen.net/foro3

Un saludo y un abrazo :cerveza:

Re: Formulario de logueo en panel flotante

Publicado: 04 Jun 2011, 21:15
por leviatan21
hola Dr0gNan, algunas sugerencias :

1) en tu plantilla panel.html
Busca y eliminas estas cosas, que están sobrando :

Código: Seleccionar todo

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<meta http-equiv="content-type" content="text/html; charset=utf-8" />	

y

Código: Seleccionar todo

				</center>
Buscar :

Código: Seleccionar todo

                <!-- Login Form -->
                <form action="{S_LOGIN_ACTION}" method="post">
                    <div class="gensmall" colspan="2" align="center"><span class="error">{LOGIN_ERROR}</span></div>
                    <h1>Usuario registrado</h1>
                    <label class="grey" for="log">{L_USERNAME}:</label>
                    <input class="post" type="text" name="{USERNAME_CREDENTIAL}" size="25" value="{USERNAME}" tabindex="1" />
                    <label class="grey" for="pwd">{L_PASSWORD}</label>
                    <input class="post" type="password" name="{PASSWORD_CREDENTIAL}" size="25" tabindex="2" />
                    <input type="checkbox" class="radio" name="autologin" tabindex="3" /> <span class="gensmall">{L_LOG_ME_IN}</span>
                    
                    <div class="clear"></div>
                    <input type="submit" name="login" class="bt_login" value="Login" tabindex="5" />
                    <a class="gensmall" href="{U_SEND_PASSWORD}">{L_FORGOT_PASS}</a>
                </form>
 
Reemplazar por :

Código: Seleccionar todo

                <!-- Login Form -->
                <form action="{S_LOGIN_ACTION}" method="post">
                    <div class="gensmall" colspan="2" align="center"><span class="error">{LOGIN_ERROR}</span></div>
                    <h1>Usuario registrado</h1>
                    <label class="grey" for="log">{L_USERNAME}:</label>
                    <input class="post" type="text" name="username" size="25" tabindex="1" />
                    <label class="grey" for="pwd">{L_PASSWORD}</label>
                    <input class="post" type="password" name="password" size="25" tabindex="2" />
                    <input type="checkbox" class="radio" name="autologin" tabindex="3" /> <span class="gensmall">{L_LOG_ME_IN}</span>
                    <div class="clear"></div>
                    <input type="submit" class="bt_login" name="login" value="L_LOGIN" tabindex="5" />
                    <a class="gensmall" href="{U_SEND_PASSWORD}">{L_FORGOT_PASS}</a>
                    {S_LOGIN_REDIRECT}
                    {S_FORM_TOKEN}
                </form> 
2) en tu plantilla overall_header.html cambia :

Código: Seleccionar todo

<!-- INCLUDE panel.html -->

<body class="{S_CONTENT_DIRECTION}">

<a name="top"></a> 
Por :

Código: Seleccionar todo

<body class="{S_CONTENT_DIRECTION}">

<!-- INCLUDE panel.html -->

<a name="top"></a> 
Guardar todos los cambios, subir los archivos al servidor vía FTP y desde el ACP -> ESTILOS, actualizar las plantillas

Re: Formulario de logueo en panel flotante

Publicado: 05 Jun 2011, 00:07
por Foo_
Wow, que buena idea... yo andaba buscando algo parecido (pero sin jquery).
Una pregunta... cuando el usuario esta des-logueado dice: "Hola invitado!" y cuando se loguéa dice: "Hola <usuario>" ?

Mientras tanto voy a debuguearlo en localhost...
Gracias gurues.

Re: Formulario de logueo en panel flotante

Publicado: 05 Jun 2011, 09:48
por Dr0gNan
Oh yeah!, pero como eres tan majo? :D Muchas gracias, de verdad, me encanta, funciona de maravilla. el enlace de "Olvide mi contraseña" no va, pero he cogido y le he puesto 'a pelo' el enlace y funciona perfectamente:

Código: Seleccionar todo

    				<a class="gensmall" href="ucp.php?mode=sendpassword">{L_FORGOT_PASS}</a>
Gracias de nuevo, ahora a ver si implemento el boton del Facebook y alguna cosilla mas. :cerveza:
Foo_ escribió:Wow, que buena idea... yo andaba buscando algo parecido (pero sin jquery).
Una pregunta... cuando el usuario esta des-logueado dice: "Hola invitado!" y cuando se loguéa dice: "Hola <usuario>" ?

Mientras tanto voy a debuguearlo en localhost...
Gracias gurues.
No, eso lo tendrias que hacer tu, la verdad es que sería facil (no lo he probado) ya que he pensado en mostrar ese panel solo cuando no estas logueado. El codigo para lo que tu dices seria asi:

panel.html

Código: Seleccionar todo

    				<!-- Login Form -->
					
    				<form action="{S_LOGIN_ACTION}" method="post">
						<!-- IF not S_USER_LOGGED_IN -->
							<div class="gensmall" colspan="2" align="center"><span class="error">{LOGIN_ERROR}</span></div>
							<h1>Hola invitado</h1>
							<label class="grey" for="log">{L_USERNAME}:</label>
							<input class="post" type="text" name="username" size="25" tabindex="1" />
							<label class="grey" for="pwd">{L_PASSWORD}</label>
							<input class="post" type="password" name="password" size="25" tabindex="2" />
							<input type="checkbox" class="radio" name="autologin" tabindex="3" /> <span class="gensmall">{L_LOG_ME_IN}</span>
							<div class="clear"></div>
							<input type="submit" class="bt_login" name="login" value="L_LOGIN" tabindex="5" />
							<a class="gensmall" href="{U_SEND_PASSWORD}">{L_FORGOT_PASS}</a>
							{S_LOGIN_REDIRECT}
							{S_FORM_TOKEN}
						<!-- ELSE -->
							<h1>Hola {VARIABLE_USUARIO}</h1>
						<!-- ENDIF -->
    				</form>
En donde pone "VARIABLE_USUARIO" hay qu poner la variable que te da php al loguearte, he estado mirando pero no he dado con ella. :oops:

Por lo demas seria algo asi ;)

Saludos :)

Re: Formulario de logueo en panel flotante

Publicado: 05 Jun 2011, 16:00
por leviatan21
Dr0gNan escribió:el enlace de "Olvide mi contraseña" no va, pero he cogido y le he puesto 'a pelo' el enlace y funciona perfectamente:
debería ser :

Código: Seleccionar todo

<!-- IF U_SEND_PASSWORD --><a class="gensmall" href="{U_SEND_PASSWORD}">{L_FORGOT_PASS}</a><!-- ENDIF -->
Dr0gNan escribió:n donde pone "VARIABLE_USUARIO" hay qu poner la variable que te da php al loguearte, he estado mirando pero no he dado con ella.
El nombre del usuario registrado se obtiene con la variable S_USERNAME

Re: Formulario de logueo en panel flotante  Tema Solucionado

Publicado: 05 Jun 2011, 19:18
por Dr0gNan
Gracias de nuevo leviatan21 :cerveza:

Re: Formulario de logueo en panel flotante

Publicado: 06 Jun 2011, 01:12
por Foo_
Muy pero muy bueno ... aun no lo he probado, me he ido todo el finde y no he estado... :(
No cierren el tema hasta que lo perfeccionemos jejeje... (pliz) ... :?

:D