Dodanie szczegółowej weryfikacji spełnienia wymogów bezpieczeństwa hasła
W tym artykule dowiesz się jak zmodyfikować swój szablon, aby dodać szczegółową weryfikację spełnienia wymogów bezpieczeństwa hasła.
Wskazówka
W tym artykule trzeba będzie wprowadzać zmiany w plikach js i scss. Z tego artykułu dowiesz się jak je kompilować i minifikować.
Szafir
W plikach common/address-form-register-full.html, customer-profile/customer-details/change-password-form.html, reminder.html, sign-in-customer-profile.html, sign-in.html, sign-up-no-address.html (w niektórych z tych plików występuje kilka razy) zastąp frazę:
{{ translations.FillProperPassword }}
poniższym kodem:
{{ translations.PasswordMustHave }}:
{{ translations.Min8Char }}
{{ translations.BigLetter }}
{{ translations.SmallLetter }}
{{ translations.Digit }}
{{ translations.SpecialChar }}
Teraz w pliku js/init.js wyszukaj frazę // password (nie // password mismatch) i zastąp cały warunek:
if(name == 'password' || name == 'passwordRepeat' || name == 'oldPassword'){
var regex = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*['!@#$%^&*()_+\-=[\]{},;:.?/])[A-Za-z\d'!@#$%^&*()_+\-=[\]{},;:.?/\u0000-~\u0080-þĀ-žƀ-ɎḀ-ỾⱠ-\u2c7e꜠-ꟾ]{8,}$/;
if(!regex.test(input.val())){
parent.find('.validation-password-lq').removeClass('hidden-lq');
input.addClass('validation-error-lq');
input.addClass('validation-error-ui');
} else {
parent.find('.validation-password-lq').addClass('hidden-lq');
input.removeClass('validation-error-ui');
}
}
poniższym kodem:
if(name == 'password' || name == 'passwordRepeat' || name == 'oldPassword'){
var regex = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*['!@#$%^&*()_+\-=[\]{},;:.?/])[A-Za-z\d'!@#$%^&*()_+\-=[\]{},;:.?/\u0000-~\u0080-þĀ-žƀ-ɎḀ-ỾⱠ-\u2c7e꜠-ꟾ]{8,}$/;
if(!regex.test(input.val())){
parent.find('.validation-password-lq').removeClass('hidden-lq');
input.addClass('validation-error-lq');
input.addClass('validation-error-ui');
var min8CharRegex = /^[A-Za-z\d'!@#$%^&*()_+\-=[\]{},;:.?/\u0000-~\u0080-þĀ-žƀ-ɎḀ-ỾⱠ-\u2c7e꜠-ꟾ]{8,}$/;
var bigLetterRegex = /^(?=.*[A-Z])[A-Za-z\d'!@#$%^&*()_+\-=[\]{},;:.?/\u0000-~\u0080-þĀ-žƀ-ɎḀ-ỾⱠ-\u2c7e꜠-ꟾ]{1,}$/;
var smallLetterRegex = /^(?=.*[a-z])[A-Za-z\d'!@#$%^&*()_+\-=[\]{},;:.?/\u0000-~\u0080-þĀ-žƀ-ɎḀ-ỾⱠ-\u2c7e꜠-ꟾ]{1,}$/;
var digitRegex = /^(?=.*\d)[A-Za-z\d'!@#$%^&*()_+\-=[\]{},;:.?/\u0000-~\u0080-þĀ-žƀ-ɎḀ-ỾⱠ-\u2c7e꜠-ꟾ]{1,}$/;
var specialCharRegex = /^(?=.*['!@#$%^&*()_+\-=[\]{},;:.?/])[A-Za-z\d'!@#$%^&*()_+\-=[\]{},;:.?/\u0000-~\u0080-þĀ-žƀ-ɎḀ-ỾⱠ-\u2c7e꜠-ꟾ]{1,}$/;
if(!min8CharRegex.test(input.val())){
parent.find('.min-8-char-lq').removeClass('passed-validation-ui');
parent.find('.min-8-char-lq i').removeClass('passed-validation-icon-ui');
} else {
parent.find('.min-8-char-lq').addClass('passed-validation-ui');
parent.find('.min-8-char-lq i').addClass('passed-validation-icon-ui');
}
if(!bigLetterRegex.test(input.val())){
parent.find('.big-letter-lq').removeClass('passed-validation-ui');
parent.find('.big-letter-lq i').removeClass('passed-validation-icon-ui');
} else {
parent.find('.big-letter-lq').addClass('passed-validation-ui');
parent.find('.big-letter-lq i').addClass('passed-validation-icon-ui');
}
if(!smallLetterRegex.test(input.val())){
parent.find('.small-letter-lq').removeClass('passed-validation-ui');
parent.find('.small-letter-lq i').removeClass('passed-validation-icon-ui');
} else {
parent.find('.small-letter-lq').addClass('passed-validation-ui');
parent.find('.small-letter-lq i').addClass('passed-validation-icon-ui');
}
if(!digitRegex.test(input.val())){
parent.find('.digit-lq').removeClass('passed-validation-ui');
parent.find('.digit-lq i').removeClass('passed-validation-icon-ui');
} else {
parent.find('.digit-lq').addClass('passed-validation-ui');
parent.find('.digit-lq i').addClass('passed-validation-icon-ui');
}
if(!specialCharRegex.test(input.val())){
parent.find('.special-char-lq').removeClass('passed-validation-ui');
parent.find('.special-char-lq i').removeClass('passed-validation-icon-ui');
} else {
parent.find('.special-char-lq').addClass('passed-validation-ui');
parent.find('.special-char-lq i').addClass('passed-validation-icon-ui');
}
} else {
parent.find('.validation-password-lq').addClass('hidden-lq');
input.removeClass('validation-error-ui');
}
}
Następnie w pliku scss/globals._globals2.scss dodaj na końcu poniższy kod:
.validation-password-lq i{
border: 1px solid $dangerColor;
border-radius: 50%;
font-size: 6px;
padding: 3px;
&::before{
content: "\e622";
}
&.passed-validation-icon-ui{
border: 1px solid $successColor;
background-color: $successColor;
color: #fff;
&::before{
content: "\e64c";
}
}
}
.passed-validation-ui{
color: $successColor;
}
Ostatnim krokiem będzie dodanie w Panelu Administracyjnym tłumaczeń do nowych wymogów. Tłumaczenia dodajemy w zakładce Wygląd sklepu -> Ustawienia -> Tłumaczenia. Tłumaczenia które należy dodać to:
PasswordMustHave: Hasło musi mieć
Min8Char: Minimum 8 znaków
BigLetter: Dużą literę
SmallLetter: Małą literę
Digit: Cyfrę
SpecialChar: Znak specjalny