Connexion rapide sur toutes les pages

Voir le sujet précédent Voir le sujet suivant Aller en bas

  • 0

Connexion rapide sur toutes les pages

Message par Walt le Sam 29 Oct 2016 - 12:30

Pop-up de connexion rapide

Ce tutoriel offre la possibilité d'ouvrir un pop-up de connexion au clic sur n'importe quel lien de connexion. Le formulaire de connexion est donc disponible sans changement de page (cliquez sur l'aperçu ci-dessous pour l'agrandir).



Création du script

Panneau d'administration Modules HTML et Javascript Gestion des codes javascript
La gestion des codes javascript doit être activée.

Créez un nouveau script que vous activerez sur toutes les pages, et insérez-y ce code :
Code:
$(function() {
    if (_userdata["session_logged_in"] == "0") {
        /* PERSONNALISATION DES TEXTES */
        var txt_username = "Nom d'utilisateur",
            txt_password = "Mot de passe",
            txt_login = "Connexion",
            txt_remember = "Rester connecté(e)",
            txt_guest = "Pas encore inscrit(e) ?",
            txt_create = "Créez un compte",
            txt_lost = "Mot de passe perdu ?",
            txt_recover = "Récupérez-le";
        /* FIN DE PERSONNALISATION - Ne rien modifier ci-après */

        $('body').prepend('<div id="quickloginform_overlay" style="display:none;z-index:2147483647"></div><div id="quickloginform" style="display:none;z-index:2147483647"><form id="fa-login-form" class="login-form" name="form_login" method="post" action="/login"><input type="text" maxlength="40" name="username" placeholder="' + txt_username + '" required=""><input type="password" maxlength="32" name="password" placeholder="' + txt_password + '" required=""><button name="login">' + txt_login + '</button><label><p>' + txt_remember + ' <input type="checkbox" style="vertical-align: middle;" name="autologin"></p></label><p style="float:left; text-align:left;">' + txt_guest + '<br><a href="/register">' + txt_create + '</a></p><p style="float:right; text-align:right;">' + txt_lost + '<br><a href="/profile?mode=sendpassword">' + txt_recover + '</a></p><div style="clear:both;"></div><input name="redirect" value="' + window.location.pathname + '" type="hidden"></form></div>');

        $('a[href*="/login"]').click(function() {
            $('#quickloginform, #quickloginform_overlay').fadeIn();
            $('#quickloginform input[name="username"]').focus();
            return false;
        });

        $(document).click(function(e) {
            if ($(e.target).closest('#quickloginform form').length === 0) {
                $('#quickloginform, #quickloginform_overlay').fadeOut();
            }
        });
        $(document).keyup(function(e) {
            if (e.keyCode == 27) {
                $('#quickloginform, #quickloginform_overlay').fadeOut();
            }
        });
    }
});


Personnalisation du script

L'ensemble des textes peuvent être personnalisés dans la première partie du script :
Code:
        var txt_username = "Nom d'utilisateur",
            txt_password = "Mot de passe",
            txt_login = "Connexion",
            txt_remember = "Rester connecté(e)",
            txt_guest = "Pas encore inscrit(e) ?",
            txt_create = "Créez un compte",
            txt_lost = "Mot de passe perdu ?",
            txt_recover = "Récupérez-le";
Veillez en tout état de cause à conserver les guillemets si vous les modifiez.

Insertion du CSS

Pour donner une apparence telle que celle vue précédemment, il vous faut ajouter le style.
Panneau d'administration Affichage Couleurs Feuille de style

Ajoutez ce code :
Code:
#quickloginform_overlay {
   background-color:#333;
   height:100%;
   left:0;
   opacity:0.7;
   position:fixed;
   top:0;
   width:100%;
}
#quickloginform {
   height:100%;
   position:fixed;
   top:20%;
   width:100%;
}
#quickloginform>form {
   background-color:#fff;
   box-sizing:border-box;
   margin:auto;
   padding:20px 30px;
   width:360px;
   border-radius:3px;
}
#quickloginform input[type="password"],#quickloginform input[type="text"] {
   background:#f2f2f2 none repeat scroll 0 0;
   border:0 none;
   box-sizing:border-box;
   font-family:"Helvetica";
   font-size:14px;
   margin:0 0 15px;
   outline:0 none;
   padding:15px;
   width:100%;
}
#quickloginform button {
   background-color:#369fcf;
   border:0 none;
   color:#ffffff;
   cursor:pointer;
   font-family:"Helvetica";
   font-size:14px;
   outline:0 none;
   padding:15px;
   text-transform:uppercase;
   width:100%;
}
#quickloginform p:nth-child(n) {
   margin-bottom:0;
   margin-top:20px;
   text-align:center;
}
#quickloginform form p {
   color:#b3b3b3;
   font-size:11px;
}
#quickloginform form a {
   color:#2b86b3;
   text-decoration: none;
}

Vous pouvez modifier l'apparence de ce formulaire de connexion comme bon vous semble. Par défaut, la couleur du bouton de connexion est la suivante : #369fcf. Elle peut être modifiée à la ligne 38 du code précédent.

Cette astuce est dès à présent fonctionnelle. Vous pouvez la tester en vous déconnectant de votre forum, et en cliquant sur le bouton de connexion.

Quelques remarques techniques :
  • Le formulaire s'ouvre au clic sur n'importe quel lien de connexion, qu'il soit contenu dans la barre de navigation ou ailleurs,
  • Le formulaire se ferme soit en cliquant n'importe où en dehors du formulaire, soit en appuyant sur la touche "Echap",
  • Une fois connecté, l'utilisateur est renvoyé systématiquement sur la page sur laquelle il se trouvait avant d'être connecté.

avatar

Walt
Modéractif
Modéractif

Masculin
Messages : 2040
Inscrit(e) le : 08/09/2015

Walt a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut


Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum