Pop Up O Ventana Modal Para Login Y Registro

Buenas yii users,

Um, si quiero poner el login y registro en un pop up o ventana modal o algo por el estilo, en vez de una página propia para cada sección, como lo montaríais, es decir, he de pasarle el formulario de login y registro a cada vista para que recoja el error, intentar montarlo de alguna manera en el layout?.

Como lo planteáis vosotros?

Edit: Vamos, que ademas no puedo pasar los forms a los layouts.

Saludos.

Buenos días.

Podrías probar utilizando la extensión Fancybox o puedes revisar el siguiente ejemplo de popups Ejemplo Popup.

Un saludo.

PD.: acabo de revisar la web oficial de FancyBox y tiene un ejemplo de como usarlo para la pantalla de login en la sección Tips & Tricks.

Bueno, supongamos que levantar el pop up es cuestión de probar un rato, tengo fancy box para otras cosas también,

Ahora bien, el formulario estaría en el main o en un layout,ya que el formulario no te lleva a una página propia, como paso y trabajo el formulario ?, llevo un rato intentándolo y bueno, creo el formulario en el mismo main, y de hay puedo logearme, pero para trabajar los errores por ejemplo, via ajax? si recargo la pagina el formulario se crea de 0, no estoy teniendo buenas ideas para implementar un buen diseño para el login.

Gracias.

Edit, me autorespondo, con ajax upload puedes cambiar cualquier div, aunque no este en content.

Joder, no logro terminar de ajustarlo.

Tengo el siguiente formulario de login en main,

Digamos que lo que quiero, es que si el usuario no se logea o introduce los datos mal, avise por ajax del fallo, pero si no que se loge y redireccione.


<div class="login">

     

     <div class="form">

    <?php $form=$this->beginWidget('CActiveForm', array(

            'id'=>'login-form',

            'enableClientValidation'=>true,

            'clientOptions'=>array(

                    'validateOnSubmit'=>true,

            ),

        'action' => array("Web/login"),

    )); ?>

         


            <p class="note">Campos <span class="required">*</span> obligatorios.</p>


            <div class="row">

                    <?php echo $form->labelEx($model,'username'); ?>

                    <?php echo $form->textField($model,'username'); ?>

                    <?php echo $form->error($model,'username'); ?>

            </div>


            <div class="row">

                    <?php echo $form->labelEx($model,'password'); ?>

                    <?php echo $form->passwordField($model,'password'); ?>

                    <?php echo $form->error($model,'password'); ?>


            </div>


            <div class="row rememberMe">

                    <?php echo $form->checkBox($model,'rememberMe'); ?>

                    <?php echo $form->label($model,'rememberMe'); ?>

                    <?php echo $form->error($model,'rememberMe'); ?>

            </div>





            <div class="row buttons">

                    <?php echo CHtml::ajaxSubmitButton(

                            'Login',

                            Yii::app()->createUrl( 'Web/login'),

                                array(

                                'type' =>'s',

                                'update' => '.login',

                                'success' => 'js:function(){window.location="/ventana/"}', 

                                /*data'=>array('id_item'=>$comentario->id_item,

                                    'comentario'=>'js:jQuery(this).prev().val()',

                                    'id_padre'=>$comentario->id_comentario),

                                ), */

                                array(


                                'href'=>Yii::app()->createUrl( 'Web/alogin'),  

                                )

                        ));  ?>

            </div>


    <?php $this->endWidget(); ?>

Y mi controlador seria este :




 public function actionLogin()

        {

           

            var_dump($_POST['LoginForm']);

            $model=new LoginForm;

            // if it is ajax validation request

            if(isset($_POST['ajax']) && $_POST['ajax']==='login-form')

            {


                    echo CActiveForm::validate($model);

                    Yii::app()->end();

            }


            // collect user input data

            if(isset($_POST['LoginForm']))

            {

                    $model->attributes=$_POST['LoginForm'];

                    // validate user input and redirect to the previous page if valid

                   

                    if($model->validate() && $model->login())

                            //$this->redirect(Yii::app()->user->returnUrl); //ESTO es lo que falla, me interesa redireccionar

                        echo "";

                    else

                    {

                        echo "fail"; //ESTO OK

                    }

            }

  

Edit: solucionado añadiendole un ‘complete’ a las opciones del ajax, gracias.

Buenas Carlos,

Quiero hacer algo parecido, quiero conseguir una ventana modal con un form y que al dar al boton la validación se haga dentro de la misma ventana modal.

Tengo una vista ‘login’, donde hay un link que me lanza una vista modal con TbModal, de la siguiente forma:




<a href="#lost-password-modal" data-toggle="modal">Lost password?</a>



y en la misma vista ‘login’ tengo la parte del TbModal:




<?php $this->beginWidget('bootstrap.widgets.TbModal', array(

	    'id'=>'lost-password-modal',

        'options'=>array('keyboard'=>true, 'remote'=>Yii::app()->user->ui->passwordRecoveryUrl),		

	)); ?>

        <div class="modal-header">

            <a class="close" data-dismiss="modal">&times;</a>

            <h2>Recovery password</h2>

        </div>

         

        <div class="modal-body">

            <!--aqui me renderiza la vista del remote -->

        </div>


    <?php $this->endWidget(); ?>



La vista renderizada por el ‘remote’ dentro del “modal-body” es esta:




<?php if(Yii::app()->user->hasFlash('msgflash')): ?>

                <?php $this->widget('bootstrap.widgets.TbAlert', array(

                    'alerts'=>array(

				        'msgflash'=>array('closeText'=>'false')

				    ),

                )); ?>

				

            <?php else: ?>


                <div class="pwdrcv-form">

                    <?php $form=$this->beginWidget('bootstrap.widgets.TbActiveForm', array(

                    	'id'=>'id-form',

                    	'type'=>'inline',

						'enableClientValidation'=>false,

						//'performAjaxValidation'=>true,

                    	//'clientOptions'=>array(

                    	//	'validateOnSubmit'=>true,

                    	//),

                    )); ?>

                        

						<?php echo $form->errorSummary($model); ?>

						

                    	<?php echo $form->textFieldRow($model,'username'); ?>




						<?php $this->widget('bootstrap.widgets.TbButton', array(

                            'buttonType'=>'submit',

							'type'=>'success',

                            'label'=>'Recovery',

							'url'=>'#',

                        )); ?>

                    	

                    <?php $this->endWidget(); ?>

                </div>


            <?php endif; ?>



Lo que quiero es que el formulario de la vista modal se valide en la misma ventana modal, es decir, que si hay errores porque falta un campo, renderice los mensajes tipicos de (Yii Yii::app()->user->getFlash) que tiene la vista dentro de la ventana modal sin cerrarla.

Imagino que esto hay que hacerlo con ajax, pero… no tengo absolutamente ni idea de ajax, he estado mirando por ahi, he visto algún ejemplo como este y alguno más:

http://yiiframeworkenespanol.org/foro/showthread.php?tid=55

y vale… mas o menos entiendo como funciona, el problema es que al tenerlo en un TbModal no sé como implementarlo.

Alguien me puede dar alguna pista? algun ejemplo actionController + TbModal que pueda ver y entender el funcionamiento? Seria de una gran ayuda.

Muchas gracias de antemano.

Buenas, en primer lugar he tenido que pasar de utilizar widgets ya que me ha causado problemas de rendimiento (cargaba a lo último y se veía como se ocultaba…).

He utilizado a mano la librería de fancybox 2.Con esto ya podemos crear la ventana modal.

Para utilizar ajax, puedes utilziar un CHtml que implementa yii de forma muy sencilla.




 /*Mira primero como se llama , creo que CHtml::ajaxSubmitButton, el que tengo yo se lo añadi extra para meter un button en vez de imput.*/

 <?php echo CHtml::ajaxSubmitHtmlButton(

                '<i class="icon-arrow-right"></i><span>Entra</span>',

                Yii::app()->createUrl( 'Web/login'),

                    array(

                    'type' =>'s',

                     //aqui para decir que contenedor se va a actualizar

                    'update' => '.logine',

                    'complete' => 'js:function(){

                        if (!$(".loginerror").length){


                                    window.location="'.Yii::app()->getRequest()->getUrl().'";

                            }

                        }', 


                    array(

                    'href'=>Yii::app()->createUrl( 'Web/login'), 

                        'type'=>'button',

                    ),

            ));  ?>

    <?php $this->endWidget(); ?>

Y el controlador,


 public function actionLogin()

        {

           

            $model=new LoginForm;

            // if it is ajax validation request

            if(isset($_POST['ajax']) && $_POST['ajax']==='login-form')

            {


                    echo CActiveForm::validate($model);

                    Yii::app()->end();

            }


            // collect user input data

            if(isset($_POST['LoginForm']))

            {

                    $model->attributes=$_POST['LoginForm'];

                    // validate user input and redirect to the previous page if valid

                   Yii::app()->clientScript->scriptMap=array(

                    '/js/fancy/fancybox/jquery.fancybox.pack.js'=>false,

                    ); 

                    if($model->validate() && $model->login())

                            //$this->redirect(Yii::app()->user->returnUrl);

                        echo "";

                    else

                    {

                        //puedes utilizar renderpartial mejor.

                        echo '<div class="loginerror">Datos incorrectos</div>'; 

                    }

            }

Cuidado que al utilizar ajax aveces vuelve a cargar los js y te tira todo al traste.

Con esto Yii::app()->clientScript->scriptMap=array(

                '/js/fancy/fancybox/jquery.fancybox.pack.js'=&gt;false,


                );  le dices que js no volver a cargar.