Page 1 sur 1

[phpBB 3.0.x] Vérification de complexité du mot de passe

Posté : lun. 28 déc. 2009 15:21
par Dakin Quelia
» Vérification de complexité du mot de passe

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: Avant, ajoutez:

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',
    )
); 
» Modifications template

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]);
		}
	}
Après, ajoutez:

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";
	   }
	}
Ouvrez le fichier template « styles/{VOTRE_THEME}/template/ucp_register.html ».

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>
Remplacez par:

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>
» Modifications de la feuille de style

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;
}
» Rafraichissement et vidage du cache

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