CakePHP & Ajax : formulaire de login dans fenêtre modale (bootstrap)

Par LivinInChina, il y a 12 ans

Proposition de tutoriels

Salut à toutes et à tous!
J'ai remarqué que beaucoup de site utilise des fenêtres modales pour proposer à leurs membres de se connecter ou de s'inscrire.
Dans mes applications, je créé toujours une page entière pour la connexion et parfois même une autre pour l'inscription si elle
ne peuvent pas être ensemble. Je trouve bien mieux l'idée d'avoir un bouton de connexion/inscription qui ouvre une boite modale.
Ca évite les redirections, ça facilite l'utilisation et tout ce qui attrait à l'inscription ou à la connexion se passe dans cette
boite : affichage des messages d'erreurs par exemple. De plus, je ne pense pas qu'avoir une page pour la connexion et/ou pour
l'inscription soit bénéfique au SEO. Ce ne sont pas des pages importantes à référencer. Cela ne concerne que moi.
Le meilleur exemple que j'ai trouvé c'est sur le site Comment ça marche mais apparemment
il y a un problème quand on entre de mauvais identifiants, il ne gère pas les erreurs.
Serait t-il donc possible d'avoir un tuto sur un formulaire de connexion dans une fenêtre modale avec Bootstrap 3 pourquoi pas
et la gestion des messages erreurs qui s'affiche dans la boite le tout en Ajax avec CakePHP?
En espérant que d'autres soient intéressé :)
Merci!

1 réponse

Airday, il y a 12 ans

Salut, j'utilise Bootstrap et pour un de mes projets j'arrive au resultat que "commentcamarche" possede.
Dans mon default.ctp

<header class="navbar transparent navbar-inverse">
        <div class="navbar-inner" style="border-radius:0px;">
            <div class="container">
                <nav class="nav-collapse collapse">
                    <ul id="nav" class="nav pull-right">
            <!--nocache-->
            <li>
              <a class="dropdown-toggle" data-toggle="dropdown" href="#home">Se connecter</a>
              <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
                <?php
                  echo $this->Form->create('User', array('action' => 'login','inputDefaults' => array('div' => false, 'label' => false)));
                  echo $this->Form->input('username', array('placeholder' => 'Identifiant', 'class' => 'input input-large'));
                  echo $this->Form->input('password', array('placeholder' => 'Mot de passe', 'class' => 'input input-large'));
                  echo $this->Form->end(array('label' => 'Connexion', 'class' => 'btn btn-success connect', 'div' => false,'style' => array('clear:left')));
                ?>
                <p><em><?php echo $this->Html->link('Mot de passe oublié ?', array('controller' => 'users', 'action' => 'forgot')); ?></em></p>
              </ul>
            </li>
            <!--/nocache-->
            <?php } ?>
                    </ul>
                </nav>
            </div>
        </div>
    </header>

J'ai aussi créer un fichier login.ctp dans View/Users/login.ctp avec le formulaire qui se trouve au dessus.

Dans un fichier Javascript 

// Setup drop down menu
    $('.dropdown-toggle').dropdown();

    // Fix input element click problem
    $('.dropdown-menu input, .dropdown-menu label').click(function(e) {
        e.stopPropagation();
    });

J'ai ce petit bout de code qui me permet de me connecter directement depuis ma homepage comme "commentcamarche".