Cómo hacer un login AJAX alternativo
El login normal de Drupal es un formulario que, en caso de error, conduce a otra página. El objetivo es un formulario que use AJAX para el login y permita mostrar los mensajes de error sin cargar otra página.
El bloque
Creo un bloque (my-login) con este contenido:
El bloque muestra un formulario simple para el login y una lista de enlaces para el usuario ya logueado.
Javascript
misc/js/login.js contiene el javascript:
El script invoca a la acción user/login.json, definida en el módulo misc.
Acción
En el módulo misc, para la acción user/login.json:
Creo un bloque (my-login) con este contenido:
<?php
global $user;
?>
<?php if ($user->uid): ?>
<div id="block-my-login">
<div class="title"><?php echo l(t('Login'), 'user', array('attributes'=>array('id'=>'btn-my-login'))) ?></div>
<div class="content">
<ul>
<li>
<?php echo l(t('Mi cuenta'), 'user') ?>
</li>
<li>
<?php echo l(t('Salir'), 'logout') ?>
</li>
</ul>
</div>
</div>
<?php else: ?>
<div id="block-my-login">
<div class="title"><?php echo l(t('Login'), 'user', array('attributes'=>array('id'=>'btn-my-login'))) ?></div>
<div class="content">
<form id="user-login">
<div class="username">
<label><?php echo t('Usuario') ?></label><input type="text" id="name" name="name" class="input text"/>
</div>
<div class="password">
<label><?php echo t('Contraseña') ?></label><input type="password" id="password" name="password" class="input password"/>
</div>
<div class="submit">
<input type="submit" id="submit" value="<?php echo t('Entrar') ?>" class="button submit"/>
</div>
</form>
<div id="loginresult"></div>
<div class="remember">
<?php echo l(t('Olvidé mi contraseña'), 'user/password', array('attributes'=>array('id'=>'remember'))) ?>
</div>
<div class="register">
<input type="button" id="register" value="<?php echo t('Registrarme') ?>" class="button register"/>
</div>
</div>
</div>
<?php endif ?>
<?php
drupal_add_js(drupal_get_path('module', 'misc') . '/js/login.js');
?>
El bloque muestra un formulario simple para el login y una lista de enlaces para el usuario ya logueado.
Javascript
misc/js/login.js contiene el javascript:
$(function() {
$('#block-my-login .title')
.click(function(e) {
e.preventDefault();
$('#botones-verdes .content').slideUp('slow');
$('.content', $(this).parent()).slideToggle('slow');
return false;
});
$('#user-login').submit(function() {
var url = Drupal.settings.basePath + 'user/login.json';
$.post(url, $(this).serialize(), function(data) {
var result = Drupal.parseJson(data);
if (!result.error || result.error == 0) {
window.location.href = Drupal.settings.basePath + 'user';
} else {
$('#loginresult').show().html(result.result);
}
});
return false;
});
$('#register').click(function(e) {
e.preventDefault();
window.location.href = Drupal.settings.basePath + 'user/register';
return false;
});
});
El script invoca a la acción user/login.json, definida en el módulo misc.
Acción
En el módulo misc, para la acción user/login.json:
/**
* Implements hook_menu
*/
function misc_menu() {
...
$items['user/login.json'] = array(
'page callback' => 'misc_login_json',
'access callback' => 'user_is_anonymous',
);
return $items;
}
...
function misc_login_json() {
if (!isset($_POST['name']) && !isset($_POST['password'])) {
echo json_encode(array('error'=>t('Se requiere $_POST[\'name\'] y $_POST[\'password\']')));
return;
}
$name = $_POST['name'];
$password = $_POST['password'];
if ($msg = user_validate_name($name)) {
echo json_encode(array('error'=>1, 'result'=>$msg));
return;
}
$account = user_load(array('name' => $name, 'pass' => $password, 'status' => 1));
if ($account) {
user_external_login($account);
echo json_encode(array('result'=>'OK'));
return;
} else {
echo json_encode(array('error'=>1, 'result'=>t('Por favor verifique su nombre de usuario y contraseña.')));
return;
}
return;
}


Comentarios
Publicar un comentario