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 }}:
<div class="min-8-char-lq"><i class="ti-minus"></i> <span class="va-mid-ui">{{ translations.Min8Char }}</span></div>
<div class="big-letter-lq"><i class="ti-minus"></i> <span class="va-mid-ui">{{ translations.BigLetter }}</span></div>
<div class="small-letter-lq"><i class="ti-minus"></i> <span class="va-mid-ui">{{ translations.SmallLetter }}</span></div>
<div class="digit-lq"><i class="ti-minus"></i> <span class="va-mid-ui">{{ translations.Digit }}</span></div>
<div class="special-char-lq"><i class="ti-minus"></i> <span class="va-mid-ui">{{ translations.SpecialChar }}</span></div>

{{ translations.PasswordMustHave }}:

<div class="min-8-char-lq"><i class="ti-minus"></i> <span class="va-mid-ui">{{ translations.Min8Char }}</span></div>

<div class="big-letter-lq"><i class="ti-minus"></i> <span class="va-mid-ui">{{ translations.BigLetter }}</span></div>

<div class="small-letter-lq"><i class="ti-minus"></i> <span class="va-mid-ui">{{ translations.SmallLetter }}</span></div>

<div class="digit-lq"><i class="ti-minus"></i> <span class="va-mid-ui">{{ translations.Digit }}</span></div>

<div class="special-char-lq"><i class="ti-minus"></i> <span class="va-mid-ui">{{ translations.SpecialChar }}</span></div>

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');
	}
}

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');
	}
}

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;
}

.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

Dodanie szczegółowej weryfikacji spełnienia wymogów bezpieczeństwa hasła

Dodanie szczegółowej weryfikacji spełnienia wymogów bezpieczeństwa hasła

Szafir

Czy ten artykuł był pomocny?

Społeczność Comarch

Oferta e-Commerce

Przydatne linki

Kontakt