Fork me on GitHub




(1) 2 »


Ajout 'Qualité du mot de passe' dans formulaire d'inscription
Admin Frxoops
Inscrit: 05/03/2005 05:20
De Vaucluse
Messages: 960
Edit slider84 le 28/09/2013: modification du chemin de formpasswordcheck (en rouge)

Un petit tuto pour rajouter 'Qualité du mot de passe' (la même que l'on trouve lors du choix du mot de passe de l'administrateur à l'installation de xoops) dans le formulaire d'inscription afin de sensibiliser un peu nos chers utilisateurs.
Je n'ai pas réinventé la poudre mais juste transposé du code existant récupéré dans la partie installation de xoops.

1- Côté php:
- Créer un formpasswordcheck.php dans /class/xoopsform (faire une copie de formpassword.php).
- Dans ce fichier modifier le nom de la classe XoopsFormPassword en XoopsFormPasswordCheck
class XoopsFormPasswordCheck extends XoopsFormElement

Iden pour le nom de la fonction:
function XoopsFormPasswordCheck($caption$name$size$maxlength$value ''$autoComplete false)

Et enfin la fonction render():
function render()
    {
        return 
'<input type="password" name="' $this->getName() .  '" onkeyup='passwordStrength(this.value)'"''" id="' $this->getName() . '" size="' $this->getSize() . '" maxlength="' $this->getMaxlength() . '" value="' $this->getValue() . '"' $this->getExtra() . ' ' . ($this->autoComplete '' 'autocomplete="off" ') . '/>
<br>
<script type="text/javascript">
                var desc = new Array();
                desc[0] = "Mot de passe absent";
                desc[1] = "Très facile";
                desc[2] = "Facile";
                desc[3] = "Simple";
                desc[4] = "Moyen";
                desc[5] = "Bon";
                desc[6] = "Très bon";
        </script>
<div id="passwordmetter" class="xoform-help">
<label class="xolabel" for='
passwordStrength'><strong>Qualité du mot de passe: </strong></label>
                <div id='
passwordStrength' class='strength0'>
                    <span id='
passwordDescription'>Mot de passe absent</span>
                </div>
</div>'
;
    }

Modifier (dans /class) le fichier xoopsload.php en rajoutant dans la fonction loadCoreConfig() la ligne suivante:
'xoopsformpasswordcheck' => XOOPS_ROOT_PATH '/class/xoopsform/formpasswordcheck.php',

Toujours dans /class, modifier le fichier xoopsformloader.php en rajoutant:
xoops_load('XoopsFormPasswordCheck');

Dans /modules/profile/include, modifier la fonction profile_getRegisterForm dans le fichier forms.php afin de remplacer le premier XoopsFormPassword par notre nouvel élément de formulaire:
$elements[0][] = array('element' => new XoopsFormPasswordCheck(_US_PASSWORD'pass'3532''), 'required' => true);

2- Côté Javascript:
-Dans /include, rajouter la fonction suivante dans le fichier xoops.js
function passwordStrength(password)
{
    if (
password.length == 0) {
        var 
score   0;
    } else {
        var 
score   1;

        
//if password bigger than 6 give 1 point
        
if (password.length 6score++;

        
//if password has both lower and uppercase characters give 1 point
        
if ( ( password.match(/[a-z]/) ) && ( password.match(/[A-Z]/) ) ) score++;
        
//if password has at least one number give 1 point
        
if (password.match(/d+/)) score++;
        
//if password has at least one special caracther give 1 point
        
if ( password.match(/.[!,@,#,$,%,^,&,*,?,_,~,-,(,)]/) )        score++;
        //if password bigger than 12 give another 1 point
        
if (password.length 12score++;
    }
    
document.getElementById("passwordDescription").innerHTML desc[score];
    
document.getElementById("passwordStrength").className "strength" score;
}

3- Un petit peu de css pour la mise en forme.
Rajouter les lignes suivantes dans le fichier xoops.css (à la racine du site)
/* Password streng */
#passwordmetter {
    
position :                  relative;
    
right:                      -7px;
    
top:                        2px;
    
width:                      200px;
    
padding:                    0 5px 5px;
    
border :                    1px solid #555;
    
backgroundnone;
}
#passwordmetter label, #passwordgenerator, #passwordgenerator input{
    
text-align:                 center;
}
#passwordDescription {
    
text-align:                 center;
    
position:                   relative;
    
top:                        2px;
}

#passwordStrength {
    
text-align:                 center;
    
height:                     20px;
    
display:                    block;
    
margin-bottom:              .25em;
    
font-weight:                bold;
}

.
strength0 widthautobackground#ccc; }
.strength1 widthautobackground#ccc; }
.strength2 widthautobackground#f00; }
.strength3 widthautobackground#ff5f5f; }
.strength4 widthautobackground#56e500; }
.strength5 widthautobackground#4dcd00; }
.strength6 widthautobackground#399800; }
.strength0 span color#000; }
.strength1 span color#000; }
.strength2 span color#fff; }
.strength3 span color#fff; }
.strength4 span color#000; }
.strength5 span color#000; }
.strength6 span color#fff; }

Et voilà le résultat final qui fonctionne parfaitement sur une 2.5.6.

Open in new window

Posté le : 13/06/2013 11:13

Edité par slider84 sur 28/09/2013 14:13:48
Edité par slider84 sur 28/09/2013 14:26:38
Edité par slider84 sur 28/09/2013 14:27:37
Edité par slider84 sur 28/09/2013 14:30:18
Edité par slider84 sur 28/09/2013 14:45:33
Partager Twitter Partagez cette article sur GG+
Re: Ajout 'Qualité du mot de passe' dans formulaire d'inscription
Admin Frxoops
Inscrit: 16/05/2003 18:10
De Rhone-Alpes
Messages: 4051
Excellent travail !!!

Si j'abusais, je te demanderais si c'était possible d'internationaliser les affichages...


Posté le : 13/06/2013 12:00

Open in new window
Partager Twitter Partagez cette article sur GG+
Re: Ajout 'Qualité du mot de passe' dans formulaire d'inscription
Xoops accro
Inscrit: 27/07/2005 16:10
De France
Messages: 2970
Super travail.A demander à nos développeur du core d'intégrer ca directement dedans ;)

Posté le : 13/06/2013 12:13
Partager Twitter Partagez cette article sur GG+
Re: Ajout 'Qualité du mot de passe' dans formulaire d'inscription
Admin Frxoops
Inscrit: 16/03/2009 16:40
De Tende (06)
Messages: 3528
Merci slider84, proposition d'ajout pour Xoops 2.5.7 faite ici.

Posté le : 13/06/2013 12:57

Open in new window

Xoopseuse Mai 2012 | Responsable équipe internationale | Recherche avancée en bas de page !
Partager Twitter Partagez cette article sur GG+
Re: Ajout 'Qualité du mot de passe' dans formulaire d'inscription
Admin Frxoops
Inscrit: 05/03/2005 05:20
De Vaucluse
Messages: 960
Edit slider84 le 28/09/2013: modification du code de la fonction render()

Merci à tous !!!

Citation :
Si j'abusais, je te demanderais si c'était possible d'internationaliser les affichages...

Il suffisait de demander
Dans /language/french/global.php rajouter:
define("_CHECKPWDQUAL""Qualité du mot de passe:");
define("_CHECKPWD0""Mot de passe absent");
define("_CHECKPWD1""Très facile");
define("_CHECKPWD2""Facile");
define("_CHECKPWD3""Simple");
define("_CHECKPWD4""Moyen");
define("_CHECKPWD5""Bon");
define("_CHECKPWD6""Très bon");

Et dans la fonction render() de /class/xoopsform/formpasswordcheck.php:

/*hack password quality check*/
function render()
{
return '<input type="password" name="' . $this->getName() . '" onkeyup=\'passwordStrength(this.value)\'"'. '" id="' . $this->getName() . '" size="' . $this->getSize() . '" maxlength="' . $this->getMaxlength() . '" value="' . $this->getValue() . '"' . $this->getExtra() . ' ' . ($this->autoComplete ? '' : 'autocomplete="off" ') . '/>
<br>
<script type="text/javascript">
var desc = new Array();
desc[0] = "'._CHECKPWD0.'";
desc[1] = "'._CHECKPWD1.'";
desc[2] = "'._CHECKPWD2.'";
desc[3] = "'._CHECKPWD3.'";
desc[4] = "'._CHECKPWD4.'";
desc[5] = "'._CHECKPWD5.'";
desc[6] = "'._CHECKPWD6.'";
</script>
<div id="passwordmetter" class="xoform-help">
<label class="xolabel" for=\'passwordStrength\'><strong>'._CHECKPWDQUAL.'</strong></label>
<div id=\'passwordStrength\' class=\'strength0\'>
<span id=\'passwordDescription\'>'._CHECKPWD0.'</span>
</div>
</div>';
}
/*end hack*/

Et voilà !!!

Posté le : 13/06/2013 19:52

Edité par slider84 sur 28/09/2013 16:06:44
Edité par slider84 sur 28/09/2013 16:08:42
Partager Twitter Partagez cette article sur GG+
Re: Ajout 'Qualité du mot de passe' dans formulaire d'inscription
Admin Frxoops
Inscrit: 16/03/2009 16:40
De Tende (06)
Messages: 3528
Wouah merci !

Posté le : 13/06/2013 21:19

Open in new window

Xoopseuse Mai 2012 | Responsable équipe internationale | Recherche avancée en bas de page !
Partager Twitter Partagez cette article sur GG+
Re: Ajout 'Qualité du mot de passe' dans formulaire d'inscription
Admin Frxoops
Inscrit: 16/05/2003 18:10
De Rhone-Alpes
Messages: 4051
Super, slider !!!

Excellent boulot,
on devrait le trouver par défaut dans la prochaine version !
Merci cesag pour l'ajout !

Posté le : 13/06/2013 21:44

Open in new window
Partager Twitter Partagez cette article sur GG+
Re: Ajout 'Qualité du mot de passe' dans formulaire d'inscription
Admin Frxoops
Inscrit: 05/03/2005 05:20
De Vaucluse
Messages: 960
Content d'avoir pu apporter une petite pierre à l'édifice .

Pour aller au bout des choses (avant que Alain abuse encore un peu ) on peut aussi modifier le formulaire de changement de mot de passe:
Dans /modules/profile/changepass.php remplacer le deuxiéme XoopsFormPassword par XoopsFormPasswordCheck.
$form->addElement(new XoopsFormPasswordCheck(_PROFILE_MA_NEWPASSWORD'newpass'1550), true);

Open in new window

Posté le : 14/06/2013 18:06
Partager Twitter Partagez cette article sur GG+
Re: Ajout 'Qualité du mot de passe' dans formulaire d'inscription
Régulier
Inscrit: 29/09/2007 20:52
De Aire-sur-l'Adour (Landes)
Messages: 139
[font=Arial]Bonjour slider

J'ai un petit problème avec ton tuto concernant la qualité du mot de masse.

J'ai suivi tes instruction mais j'ai un souci au niveau de la fonction "render" dans formpasswordchkeck



Et enfin la fonction render():
function render()
{
return '<input type="password" name="' . $this->getName() . '" onkeyup='passwordStrength(this.value)'"'. '" id="' . $this->getName() . '" size="' . $this->getSize() . '" maxlength="' . $this->getMaxlength() . '" value="' . $this->getValue() . '"' . $this->getExtra() . ' ' . ($this->autoComplete ? '' : 'autocomplete="off" ') . '/>
<br>
<script type="text/javascript">
var desc = new Array();
desc[0] = "Mot de passe absent";
desc[1] = "Très facile";
desc[2] = "Facile";
desc[3] = "Simple";
desc[4] = "Moyen";
desc[5] = "Bon";
desc[6] = "Très bon";
</script>
<div id="passwordmetter" class="xoform-help">
<label class="xolabel" for='passwordStrength'><strong>Qualité du mot de passe: </strong></label>
<div id='passwordStrength' class='strength0'>
<span id='passwordDescription'>Mot de passe absent</span>
</div>
</div>';
}


Une erreur de code apparait et je n'arrive pas à voir où elle se trouve


ici

return '<input type="password" name="' . $this->getName() . '" onkeyup='passwordStrength(this.value)'"'. '" id="' . $this->getName() . '" size="' . $this->getSize() . '" maxlength="' . $this->getMaxlength() . '" value="' . $this->getValue() . '"' . $this->getExtra() . ' ' . ($this->autoComplete ? '' : 'autocomplete="off" ') . '/>


et ici

<label class="xolabel" for='passwordStrength'><strong>Qualité du mot de passe: </strong></label>
<div id='passwordStrength'



Apparemment personne n'a soulevé le problème... Est-ce moi qui ait fait une erreur.

Merci d'avance


Posté le : 28/09/2013 13:38

Les vérités que l'on aime le moins à apprendre sont celles que l'on a le plus d'intérêt à savoir.
Partager Twitter Partagez cette article sur GG+
Re: Ajout 'Qualité du mot de passe' dans formulaire d'inscription
Admin Frxoops
Inscrit: 05/03/2005 05:20
De Vaucluse
Messages: 960
Bonjour papi,

Je viens de corriger une petite coquille dans le post d'origine: le fichier formpasswordcheck est à créer dans /class/xoopsform et non dans /class.

Ensuite, je pense que le code proposé pour la fonction à été un peu trop "nettoyé" par xoops (il manque quelques \)
Essaie de prendre directement le code ci-dessous pour la fonction render()

/*hack password quality check*/
function render()
{
return '<input type="password" name="' . $this->getName() . '" onkeyup=\'passwordStrength(this.value)\'"'. '" id="' . $this->getName() . '" size="' . $this->getSize() . '" maxlength="' . $this->getMaxlength() . '" value="' . $this->getValue() . '"' . $this->getExtra() . ' ' . ($this->autoComplete ? '' : 'autocomplete="off" ') . '/>
<br>
<script type="text/javascript">
var desc = new Array();
desc[0] = "'._CHECKPWD0.'";
desc[1] = "'._CHECKPWD1.'";
desc[2] = "'._CHECKPWD2.'";
desc[3] = "'._CHECKPWD3.'";
desc[4] = "'._CHECKPWD4.'";
desc[5] = "'._CHECKPWD5.'";
desc[6] = "'._CHECKPWD6.'";
</script>
<div id="passwordmetter" class="xoform-help">
<label class="xolabel" for=\'passwordStrength\'><strong>'._CHECKPWDQUAL.'</strong></label>
<div id=\'passwordStrength\' class=\'strength0\'>
<span id=\'passwordDescription\'>'._CHECKPWD0.'</span>
</div>
</div>';
}
/*end hack*/

Posté le : 28/09/2013 14:35

Open in new window

Xoops 2.5.7.2 - Debian 8.2 - Apache 2.4.10 - MySQL 5.5.47 - Php 5.6.17
Partager Twitter Partagez cette article sur GG+

 Haut   Précédent   Suivant
(1) 2 »



Vous pouvez voir les sujets.
Vous ne pouvez pas débuter de nouveaux sujets.
Vous ne pouvez pas répondre aux contributions.
Vous ne pouvez pas éditer vos contributions.
Vous ne pouvez pas effacez vos contributions.
Vous ne pouvez pas ajouter de nouveaux sondages.
Vous ne pouvez pas voter en sondage.
Vous ne pouvez pas attacher des fichiers à vos contributions.
Vous ne pouvez pas poster sans approbation.

Propulsé avec XOOPS | Graphisme adapté par Tatane, Grosdunord, Montuy337513

67 Personne(s) en ligne (53 Personne(s) connectée(s) sur Forum) | Utilisateur(s): 0 | Invité(s): 67 | Plus ...