Fork me on GitHub

Rapport de message :*
 

Ajout 'Qualité du mot de passe' dans formulaire d'inscription

Titre du sujet : Ajout 'Qualité du mot de passe' dans formulaire d'inscription
par slider84 sur 13/06/2013 11:13:45

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', 35, 32, ''), '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 > 6) score++;

        //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 > 12) score++;
    }
    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;
    background: none;
}
#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 { width: auto; background: #ccc; }
.strength1 { width: auto; background: #ccc; }
.strength2 { width: auto; background: #f00; }
.strength3 { width: auto; background: #ff5f5f; }
.strength4 { width: auto; background: #56e500; }
.strength5 { width: auto; background: #4dcd00; }
.strength6 { width: auto; background: #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
Propulsé avec XOOPS | Graphisme adapté par Tatane, Grosdunord, Montuy337513

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