Vérifiez vos informations

Il semblerait que les informations techniques de votre profil n'aient pas été actualisées depuis un certain temps... Pour que l'aide apportée vous soit efficace, il est important que ces informations soient à jour : prenez quelques secondes pour confirmer ou compléter les informations suivantes.


Lien de votre forum
Version de ce forum
Vous êtes le fondateur de ce forum
Vous avez modifié le CSS de ce forum
Vous avez modifié les templates de ce forum
Votre navigateur

Connexion rapide sur toutes les pages

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

  • 0

Astuce Connexion rapide sur toutes les pages

Message par Walt 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).

Voir illustration :
Connexion rapide sur toutes les pages  GhBpEIo

Création du script


Panneau d'administration  Modules  HTML & JAVASCRIPT - Gestion des codes Javascript

Assurez-vous que la gestion des codes Javascript soit activée, puis créez un nouveau javascript ayant pour titre "Pop-up de connexion rapide" et pour placement "Sur toutes les pages" (plus d'informations sur la gestion des scripts).

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();
            }
        });
    }
});

N'oubliez pas de cliquer sur le bouton Valider pour sauvegarder les modifications.

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.

N'oubliez pas de cliquer sur le bouton Valider pour sauvegarder les modifications.

Insertion du CSS


Pour donner une apparence telle que celle vue précédemment, il vous faut ajouter le style.

Panneau d'administration  Affichage  Images et Couleurs - Couleurs (Onglet Feuille de style CSS)

Ajoutez le code suivant :

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.

N'oubliez pas de cliquer sur le bouton Valider pour sauvegarder les modifications.

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

Walt

Walt
Modéractif
Modéractif

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

Voir le profil de l'utilisateur
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