Indiquer la force d'un mot de passe sur Shopify

0

Indiquer la force d'un mot de passe sur Shopify - Fuznet

Pour éviter que nos clients Shopify se fassent voler leur compte, il est conseillé d'indiquer la force de leur mot de passe pour les inciter à le complexifier. 

Shopify ne propose pas cette fonctionnalité alors voici le code pour le faire soi-même.

L'exemple ci-dessous sera fait avec le thème Dawn.

1. Trouver le champ mot de passe dans le fichier de création de compte.

main login

2. Ajouter une ligne de code qui permettra d'afficher un message en fonction de certaines conditions.

Ajouter <p id="password-strength"></p> juste en dessous du code précédent.

password strenght

3. Ajouter le script en bas de page, avant {% schema %}

Ajouter le script suivant :

 <script>

function checkPasswordStrength() {
// variables
var password = document.getElementById("RegisterForm-password").value;
var strength = 0;
var tips;

// password length
if (password.length < 8) {
tips = "Ecrire un mot de passe plus long.";
} else {
strength += 1;
}

// numbers
if (password.match(/\d/)) {
strength += 1;
} else {
tips = "Inclure au moins un chiffre.";
}

// special characters
if (password.match(/[^a-zA-Z\d]/)) {
strength += 1;
} else {
tips = "Inclure au moins un caractère spécial.";
}

// results
if (strength < 2) {
return (document.getElementById("password-strength").innerHTML = tips);
} else if (strength === 2) {
return (document.getElementById("password-strength").innerHTML = tips);
} else {
return (document.getElementById("password-strength").innerHTML =
"Mot de passe fort.");
}
}

<script>

A cet emplacement :

script

Terminé !

4. Code complet

See the Pen Untitled by Ludovic (@Fuznet) on CodePen.

Retour au blog

Laisser un commentaire

Veuillez noter que les commentaires doivent être approuvés avant d'être publiés.