A travers cette documentation, nous allons vous expliquer comment ajouter un système de vérification de la complexité du mot de passe choisi par l'utilisateur lorsqu'il remplit le formulaire d'inscription..
» Définir les clés de langue
Ici, nous définissons les clés de langues utilisées dans le fichier template.
Ouvrez le fichier template « language/fr/common.php ».
Cherchez:
Code : Tout sélectionner
?>
Code : Tout sélectionner
// Système de vérification complexité du mot de passe - by Dakin Quelia
$lang = array_merge($lang, array(
'COMP_LOW' => 'Faible',
'COMP_MID' => 'Moyen',
'COMP_STR' => 'Fort',
)
);
Nous allons ici définir la fonction que l'on utilisera dans le fichier template d'inscription. Et nous vous indiquons comment ajouter la partie qui affichera le niveau de complexité du mot de passe.
Ouvrez le fichier template « styles/{VOTRE_THEME}/template/overall_header.html ».
Cherchez:
Code : Tout sélectionner
window.onunload = function()
{
for (var i = 0; i < onunload_functions.length; i++)
{
eval(onunload_functions[i]);
}
}
Code : Tout sélectionner
function evalPwd(s)
{
var cmpx = 0;
if (s.length >= 1)
{
cmpx++;
if (s.search("[A-Z]") != -1)
{
cmpx++;
}
if (s.search("[0-9]") != -1)
{
cmpx++;
}
if (s.length >= 8 || s.search("[\x20-\x2F\x3A-\x40\x5B-\x60\x7B-\x7E]") != -1)
{
cmpx++;
}
}
if (cmpx == 0)
{
document.getElementById("weak").className = "nrm";
document.getElementById("medium").className = "nrm";
document.getElementById("strong").className = "nrm";
}
else if (cmpx == 1)
{
document.getElementById("weak").className = "red";
document.getElementById("medium").className = "nrm";
document.getElementById("strong").className = "nrm";
}
else if (cmpx == 2)
{
document.getElementById("weak").className = "yellow";
document.getElementById("medium").className = "yellow";
document.getElementById("strong").className = "nrm";
}
else
{
document.getElementById("weak").className = "green";
document.getElementById("medium").className = "green";
document.getElementById("strong").className = "green";
}
}
Cherchez:
Code : Tout sélectionner
<dd><input type="password" tabindex="4" name="new_password" id="new_password" size="25" value="{PASSWORD}" class="inputbox autowidth" title="{L_NEW_PASSWORD}" /></dd>
Code : Tout sélectionner
<dd><input type="password" tabindex="4" name="new_password" id="new_password" size="25" value="{PASSWORD}" onkeyup="evalPwd(this.value);" class="inputbox autowidth" title="{L_NEW_PASSWORD}" />
<div id="sm"><ul><li id="weak" class="nrm">{L_COMP_LOW}</li><li id="medium" class="nrm">{L_COMP_MID}</li><li id="strong" class="nrm">{L_COMP_STR}</li></ul></div></dd>
Ouvrez le fichier CSS « styles/{VOTRE_THEME}/theme/colours.css ».
Il nous restait à définir les classes utilisées par le script.
A la fin, ajoutez:
Code : Tout sélectionner
/* CSS relative to Password testing. */
#weak, #medium
{
border-right:solid 1px #DEDEDE;
}
#sm
{
margin:0px;
padding:0px;
height:14px;
font-family:Tahoma, Arial, sans-serif;
font-size:9px;
}
#sm ul
{
border:0px;
margin:0px;
padding:0px;
list-style-type:none;
text-align:center;
}
#sm ul li
{
display:block;
float:left;
text-align:center;
padding:0px 0px 0px 0px;
margin:0px;
height:14px;
}
.nrm
{
width:66px;
color:#adadad;
text-align:center;
padding:2px;
background-color:#F1F1F1;
display:block;
vertical-align:middle;
}
.red
{
width:66px;
color:#FFFFFF;
text-align:center;
padding:2px;
background-color:#FF6F6F;
display:block;
vertical-align:middle;
}
.yellow
{
width:66px;
color:#FFFFFF;
text-align:center;
padding:2px;
background-color:#FDB14D;
display:block;
vertical-align:middle;
}
.green
{
width:66px;
color:#FFFFFF;
text-align:center;
padding:2px;
background-color:#A0DA54;
display:block;
vertical-align:middle;
}
Maintenant que vous avez effectué toutes les modifications, il ne vous reste plus qu'à rafraîchir le template et le thème (onglet Styles) et de vider le cache (onglet Général).