Connexion rapide sur toutes les pages

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 :

Création du script

Citation :: 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).

Pop-up de connexion rapide sans affichage du mot de passe

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.

Pop-up de connexion rapide avec affichage du mot de passe

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_showmdp = "Afficher le mot de passe",
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><label><p>' + txt_showmdp + ' <input type="checkbox" style="vertical-align: middle;" name="visumdp" id="visumdp"></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;
});

$("#visumdp").on("click", function() {
if ($(this).is(":checked")) {
$('input[name="password"]').prop("type", "text");
} else {
$('input[name="password"]').prop("type", "password");
}
});

$(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 :

Pop-up de connexion rapide sans affichage du mot de passe

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.

Pop-up de connexion rapide avec affichage du mot de passe

Code:: var txt_username = "Nom d'utilisateur",
txt_password = "Mot de passe",
txt_login = "Connexion",
txt_remember = "Rester connecté(e)",
txt_showmdp = "Afficher le mot de passe",
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.

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