Yii Framework Forum: Pop Up O Ventana Modal Para Login Y Registro - Yii Framework Forum

Jump to content

Page 1 of 1
  • You cannot start a new topic
  • You cannot reply to this topic

Pop Up O Ventana Modal Para Login Y Registro Rate Topic: -----

#1 User is offline   carlosyii 

  • Newbie
  • Yii
  • Group: Members
  • Posts: 15
  • Joined: 20-September 12

Posted 08 January 2013 - 06:26 AM

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.
0

#2 User is offline   lagogz 

  • Advanced Member
  • PipPipPip
  • Yii
  • Group: Members
  • Posts: 421
  • Joined: 30-November 12
  • Location:Galiza

Posted 09 January 2013 - 04:08 AM

View Postcarlosyii, on 08 January 2013 - 06:26 AM, said:

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.
-----------------------------------------------------------------------------------------------
------------------------------- VISITEN FOCUCHASART --------------------------------
-----------------------------------------------------------------------------------------------
1

#3 User is offline   carlosyii 

  • Newbie
  • Yii
  • Group: Members
  • Posts: 15
  • Joined: 20-September 12

Posted 09 January 2013 - 11:24 AM

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.
0

#4 User is offline   carlosyii 

  • Newbie
  • Yii
  • Group: Members
  • Posts: 15
  • Joined: 20-September 12

Posted 10 January 2013 - 11:17 AM

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.
0

#5 User is offline   menxaca 

  • Standard Member
  • PipPip
  • Yii
  • Group: Members
  • Posts: 121
  • Joined: 26-November 12
  • Location:Talavera de la Reina, Spain

Posted 01 March 2013 - 12:44 PM

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://yiiframeworke...read.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.
0

#6 User is offline   carlosyii 

  • Newbie
  • Yii
  • Group: Members
  • Posts: 15
  • Joined: 20-September 12

Posted 04 March 2013 - 02:48 AM

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'=>false,
); le dices que js no volver a cargar.
0

Share this topic:


Page 1 of 1
  • You cannot start a new topic
  • You cannot reply to this topic

1 User(s) are reading this topic
0 members, 1 guests, 0 anonymous users