Drupal7：创建没有模块的水平登录栏

Posted 2021-02-25

Do you know that you can create a new form directly from theme template.php without the need of creating a module in Drupal 7?

Armed with that knowledge, we will build a new login form and transform it to become a horizontal login bar.

You might asked, why create a new login form while you can form alter the standard login block form (user_login_block) ? The reason for this is very simple, the standard login block form will be altered by other contribution module such as captcha module and it would not be possible to display the captcha in a tight spaced horizontal bar. Not to mentioned other standard module such as openid will also altered the module and adds its own html tag.

So by creating a new login form we will be able to create a clean and slim horizontal login bar without the worry about other contribution module messing the layout of our horizontal login bar.

To do this we need to add a few functions to the theme template.php.

/** Function 1 : create a $form array for our new login form
*/
<?php
function horizontal_login_block($form) {
$form['#action'] = url($_GET['q'], array('query' => drupal_get_destination()));
$form['#id'] = 'horizontal-login-block';
$form['#validate'] = user_login_default_validators();
$form['#submit'][] = 'user_login_submit';
$form['#prefix'] = '
';
$form['#suffix'] = '
';
$form['name'] = array(
'#type' => 'textfield',
'#prefix' => '
',
'#suffix' => '
',
'#maxlength' => USERNAME_MAX_LENGTH,
'#size' => 15,
'#required' => TRUE,
'#default_value' => 'Username',
'#attributes' => array('onblur' => "if (this.value == '') {this.value = 'Username';}", 'onfocus' => "if (this.value == 'Username') {this.value = '';}" ),
);
$form['pass'] = array(
'#type' => 'password',
'#maxlength' => 60,
'#size' => 15,
'#required' => TRUE,
'#prefix' => '
',
'#suffix' => '
',
);
$form['actions'] = array('#type' => 'actions');
$form['actions']['submit'] = array('#type' => 'submit', '#value' => '');
return $form;
}
?>
/** 
This function will create a div wrapper for the login form and div wrapper for the login textfield and password textfield. Also the function will embed a javascript function to display "Username" in the username textfield which will be changed when the textfield is clicked. This is important because the function didn't have any title field to let user differentiate between username field and password field.
 
Next we will need to create the actual function for building the form array and output it as html tag
 
Function 2 : Determine if user is not logged in -> show the login form but if user is logged in -> display greeting message instead
*/
<?php
function login_bar() {
global $user;
if ($user->uid == 0) {
$form = drupal_get_form('horizontal_login_block');
return render($form);
} else {
// you can also integrate other module such as private message to show unread / read messages here
return '
' . t('Welcome back ') . ucwords($user->name) . '
 
';
}
}
?>
/** This function will switch between anonymous user and logged in user. You will need to call this function in the area that you wish for the login bar to appears.
 
Last thing is the css, you will need to create a new css / use the theme css to add these simple css code :
*/
<?php
/** Login Bar **/
.usericon, .passicon {
float: left;
width: 180px;
padding-left: 36px; /** create space for small 24px x 24px icon **/
height: 24px;
}
#loginbar {width: auto; float: right;}
#loginbar .form-actions {display: none;}
#loginbar p { color: #fff; font-size: 1.1em; font-weight: bold;}
?>
/** 
If you notice, the functions still build the login submit button, without this the form will not submit thus no login process will ever happen. To tackle this, we just need to hide the login submit button via css
 
To see this code in action, you can visit : http://zenith.victheme.com
*/