Compact login block
This small module (modulette) provides you with a compact login block instead of the default one. It can be a good addition to the collapsible block, or the one-line login block.
The hook_form_alter block places the "Username" and "password" explanations into the fields, and disappear when we click into the input fields.
<?php
function compactlogin_form_alter($form_id, &$form) {
if ($form_id == 'user_login_block'){
$loginjs = "if (Drupal.jsEnabled) {
$(document).ready(function() {
$('input#edit-name').addClass('dimmed');
$('input#edit-name').val('".$form['name']['#title']."');
$('input#edit-name').focus( function() {
$(this).removeClass('dimmed');
$(this).val('');
});
$('input#edit-pass').addClass('dimmed');
$('input#edit-pass').val('".$form['pass']['#title']."');
$('input#edit-pass').get(0).type = 'text';
$('input#edit-pass').focus( function() {
this.type = 'password';
$(this).val('');
$(this).removeClass('dimmed');
});
return false;
});
}";
drupal_add_js($loginjs, 'inline');
$form['lmod']['name'] = $form['name'];
$form['lmod']['name']['#title'] = '';
$form['lmod']['name']['#default_value'] = $form['name']['#title'];
$form['lmod']['pass'] = $form['pass'];
$form['lmod']['pass']['#title'] = '';
$form['lmod']['submit'] = $form['submit'];
$form['lmod']['links'] = $form['links'];
unset($form['name']);
unset($form['pass']);
unset($form['submit']);
unset($form['links']);
}
?>The JavaScript takes care of clearing the values when we click into the fields, and also - since password fields do not support #default_value - adding some ***** into the password field.
Here is an info file I use for it:
name = Compact Login
package = Other
description = "Compact login block."Credits: I am sure I copied some of the form_alter code from somewhere on the forums, but I can't seem to find it now. Original page: snufkin, additions: dimmed class extension by jrust, use original form label by tasiak.
Some Additional goodies
added by jrust
This was just what I was looking for. I changed the javascript function to update the form fields when they receive focus so that they update even if the user tabs to them. Also added a class that dims out the default values and makes it so that the word "Password" is shown to the user.
if (Drupal.jsEnabled) {
$(document).ready(function() {
$('input#edit-name').addClass('dimmed');
$('input#edit-name').val('Username');
$('input#edit-name').focus( function() {
$(this).removeClass('dimmed');
$(this).val('');
});
$('input#edit-pass').addClass('dimmed');
$('input#edit-pass').val('Password');
$('input#edit-pass').get(0).type = 'text';
$('input#edit-pass').focus( function() {
this.type = 'password';
$(this).val('');
$(this).removeClass('dimmed');
});
return false;
});
}
Revised code
The code above is missing a closing curly brace at the end, which, if not corrected, would cause PHP errors or page blanking. Here is a revised version of this mini module as per this GHOP issue. It adheres more to the coding convention, shaves off a large amount of redundant code, and has more JavaScript improvements, such as being separated to an external file, not assuming that the
$namespace belongs to jQuery, and making use of jQuery's chaining mechanism.compactlogin.module
<?phpfunction compactlogin_form_alter($form_id, &$form) {
if ($form_id == 'user_login_block') {
$module_path = drupal_get_path('module', 'compactlogin');
$settings = array('compactlogin' => array(
'username' => $form['name']['#title'],
'password' => $form['pass']['#title']
));
drupal_add_js($settings, 'setting');
drupal_add_js($module_path .'/compactlogin.js', 'module');
}
}
?>
Don't forget to leave out the
?>at the end, as it is known to cause problems.compactlogin.js
if (Drupal.jsEnabled) {
(function($) {
$(document).ready(function() {
var labels = Drupal.settings.compactlogin;
$('label[@for="edit-name"], label[@for="edit-pass"]').remove();
$('#edit-name').val(labels.username).focus(function() {
$(this).val('');
});
$('#edit-pass').val(labels.password).attr('type', 'text').focus(function() {
$(this).attr('type', 'password').val('');
});
return false;
});
})(jQuery);
}
compactlogin.info can be left as it is.