How to create nice modal login widget with a CJuiDialog

You are viewing revision #8 of this wiki article.
This is the latest version of this article.
You may want to see the changes made in this revision.

« previous (#7)

  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)); 

?>