How to create nice modal login widget with a CJuiDialog

You are viewing revision #4 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.

next (#5) »

  1. Components
  2. Layout Config
  3. Demo

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'); ?>
<br/>
<?php echo CHtml::activeTextField($form,'username') ?>


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

<?php echo CHtml::activeCheckBox($form,'rememberMe'); ?>
<?php echo CHtml::activeLabel($form,'rememberMe'); ?>
&nbsp;<?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)); 

?>

Demo

In the right top corrner click on PRIJAVA...