Yii 1.1: How to create nice modal login widget with a CJuiDialog

32 followers

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

Total 3 comments

#13384 report it
hemc at 2013/05/27 03:50am
Show dialog box permanently when user is not logged in

Thanks for wonderful wiki. I want to keep displaying this from and keep inactive all background view when user is not logged in. Please tell me how can i achieve this with this widget. Thanks in advance.

#4944 report it
waterloomatt at 2011/08/31 05:47am
@adinugro re: Focus
<?php $form=$this->beginWidget('CActiveForm', array(
        'focus'=>($model->hasErrors()) ? '.error:first' : array($form, 'username'),
)); ?>
#3034 report it
Daniel at 2011/03/09 06:46am
open and focus and username textfield

Hi,

I like this wiki, just wondering how could I make the username textfield is focused when the dialog is open?

cheers,

Leave a comment

Please to leave your comment.

Write new article