How to create nice modal login widget with a CJuiDialog

You are viewing revision #7 of this wiki article.
This version may not be up to date with the latest version.
You may want to view the differences to the latest version or see the changes made in this revision.

« previous (#5)next (#8) »

  1. Components
  2. Layout Config

Components

...folder /protected/components/UserLoginWidget.php... ...extending the CWidget class...

You have to extend the widget class and configure it for user login widget

class UserLoginWidget extends CWidget
{
    public $title='User login';
    public $visible=true; 
 
    public function init()
    {
        if($this->visible)
        {
       
        }
    }
 
    public function run()
    {
        if($this->visible)
        {
            $this->renderContent();
        }
    }
  
    protected function renderContent()
    {
        $form=new User;
        if(isset($_POST['User']))
        {
            $form->attributes=$_POST['User'];
            if($form->validate() && $form->login()){
                $url = $this->controller->createUrl('user/index');
	 	$this->controller->redirect($url);
	    }
        }
        $this->render('UserLogin',array('form'=>$form));
    }   
}

...folder /protected/components/views/UserLogin.php...

Configuring the view of UserLoginWidget class

<?php if(Yii::app()->user->isGuest) : ?>

<?php 
if($form->getErrors() != null) {
   $this->beginWidget('zii.widgets.jui.CJuiDialog', array(
     'id'=>'userloginwidget',
     'cssFile'=>'jquery-ui-1.8.7.custom.css',
     'theme'=>'redmond',
     'themeUrl'=>Yii::app()->request->baseUrl.'/css/ui',
     'options'=>array(
         'title'=>'User Login Errors',
         'autoOpen'=>true,
         'modal'=>true,
         'width'=>350,
     ),
   ));
}else{
   $this->beginWidget('zii.widgets.jui.CJuiDialog', array(
     'id'=>'userloginwidget',
     'cssFile'=>'jquery-ui-1.8.7.custom.css',
     'theme'=>'redmond',
     'themeUrl'=>Yii::app()->request->baseUrl.'/css/ui',
     'options'=>array(
         'title'=>'User Login',
         'autoOpen'=>false,
         'modal'=>true,
         'width'=>300,
     ),
   ));
}
?>

<?php echo CHtml::beginForm(Yii::app()->homeUrl); ?>

<?php echo CHtml::activeLabel($form,'username'); ?>
<?php echo CHtml::activeTextField($form,'username') ?>

<?php echo CHtml::activeLabel($form,'password'); ?>
<?php echo CHtml::activePasswordField($form,'password') ?>

<?php echo CHtml::activeCheckBox($form,'rememberMe'); ?>
<?php echo CHtml::activeLabel($form,'rememberMe'); ?>

<?php echo CHtml::submitButton('Submit'); ?>

<?php echo CHtml::error($form,'password'); ?>
<?php echo CHtml::error($form,'username'); ?>

<?php echo CHtml::endForm(); ?>

<?php $this->endWidget('zii.widgets.jui.CJuiDialog'); ?>
<?php endif; ?>

Layout Config

Calling the widget

<?php
$this->widget('zii.widgets.CMenu',array(
   'items'=>array(
      array('label'=>'User Llogin', 'url'=>'#','linkOptions'=>array( 'onclick'=>'$("#userloginwidget").dialog("open"); return false;'), 'visible'=>Yii::app()->user->isGuest),	
   ),
)); 

$this->widget('UserLoginWidget',array('visible'=>Yii::app()->user->isGuest)); 

?>