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.
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.
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 :
Terminé !
4. Code complet
See the Pen Untitled by Ludovic (@Fuznet) on CodePen.
