<div class="bg-white rounded-button w-full md:p-7 p-5 gap-2.5">
<span class="font-semibold md:text-2xl text-xl">Mon mot de passe</span>
<div class="text-center text-text-light">
<div x-data="initCheckPasswordCreate()"
class="flex flex-col gap-2.5 py-7.5"
data-password="false"
>
<div class="form-element password w-full" x-data="{ show: false }"
:class="!isValid && 'error'">
<input name="oldpassword"
class="form-input w-full"
id="oldpassword" type="password"
:type="show ? 'text' : 'password'"
title="Nom"
placeholder=" "
pattern="\S+"
minlength="8"
required>
<label class="label" for="oldpassword">
<span>Mot de passe actuel</span>
</label>
<span @click="show = !show">
<span :class="{'hidden' : show}">
<?= icon('password-see', 'text-icon'); ?>
</span>
<span :class="{'hidden' : !show}" class="hidden">
<?= icon('password-unsee', 'text-icon'); ?>
</span>
</span>
</div>
<div class="form-element password w-full" x-data="{ show: false }"
:class="!isValid && 'error'">
<input name="password"
class="form-input w-full"
id="password" type="password"
:type="show ? 'text' : 'password'"
title="Nom"
placeholder=" "
pattern="\S+"
minlength="8"
required
x-on:input="$parent.checkPasswordStrength(); $parent.checkPasswordsMatch()"
>
<label class="label" for="password">
<span>Nouveau mot de passe</span>
</label>
<span @click="show = !show">
<span :class="{'hidden' : show}">
<?= icon('password-see', 'text-icon'); ?>
</span>
<span :class="{'hidden' : !show}" class="hidden">
<?= icon('password-unsee', 'text-icon'); ?>
</span>
</span>
</div>
<div class="form-element password w-full" x-data="{ show: false }">
<input name="password_confirm"
class="form-input w-full"
id="password_confirm"
type="password"
:type="show ? 'text' : 'password'"
title="Nom"
placeholder=" "
pattern="\S+"
required
x-on:change="$parent.checkPasswordsMatch()"
x-on:keyup="$parent.checkPasswordsMatch()"
>
<label class="label" for="password_confirm">
<span>Répéter votre mot de passe</span>
</label>
<span @click="show = !show">
<span x-show="!show">
<?= icon('password-see', 'text-icon'); ?>
</span>
<span x-show="show" x-cloak>
<?= icon('password-unsee', 'text-icon'); ?>
</span>
</span>
</div>
<p class="text-error text-sm invisible" :class="{'invisible' : !error}" x-text="error"></p>
<div class="text-left">
<span class="text-text text-sm font-medium">Fiablité : <span
x-text="passwordStrengthText">Faible</span></span>
<div class="flex">
<span class="mt-1.5 mb-1 border-b-4 border-error w-1/4 block rounded-sm"
:class="{
'border-error w-1/4' : passwordStrength < 1,
'border-warning w-1/2' : passwordStrength === 1,
'border-primary-light w-3/4' : passwordStrength === 2,
'border-success w-full' : passwordStrength === 3
}"
></span>
<span class="mt-1.5 mb-1 border-b-4 border-[#E5E5F4] w-3/4 block rounded-sm"
:class="{
'w-3/4' : passwordStrength < 1,
'w-1/2' : passwordStrength === 1,
'w-1/4' : passwordStrength === 2,
'w-0' : passwordStrength === 3
}"></span>
</div>
<span class="block mt-1.5 text-tiny leading-4 text-red-lighter"
x-text="errorMessages.invalid"></span>
</div>
</div>
<script>
function initCheckPasswordCreate() {
return {
passwordInput: null,
confirmInput: null,
passwordsMatching: true,
passwordStrength: 0,
passwordStrengthText: 'Faible',
isValid: true,
error: null,
errorMessages: {
invalid: 'Ce champ doit contenir au minium 8 caractères dont 1 majuscule, 1 minuscule et 1 chiffre.',
notMatch: 'Les deux mots de passe ne correspondent pas.'
},
init() {
this.passwordInput = this.$root.querySelector('#password');
this.confirmInput = this.$root.querySelector('#password_confirm');
const current = this;
document.addEventListener('check-password-validity', function () {
current.checkPasswordValidity();
});
},
checkPasswordsMatch() {
if (this.passwordInput.value ===
this.confirmInput.value || this.confirmInput.value === '') {
this.passwordsMatching = true;
this.error = null
return true;
}
this.passwordsMatching = false;
this.error = this.errorMessages.notMatch;
return false;
},
checkPasswordStrength() {
this.isValid = true;
let value = this.passwordInput.value;
let secureWeight = 0;
if (value.length >= 8) secureWeight = secureWeight + 1;
if (value.match(/(?=.*\d)(?=.*[a-z])(?=.*[A-Z])/)) secureWeight = secureWeight + 1;
if (value.match(/[!@#$%^&*(),.?:{}|<>=+~_§\-]/)) secureWeight = secureWeight + 1;
this.passwordStrength = secureWeight;
switch (secureWeight) {
case 1:
this.passwordStrengthText = "Moyen";
break;
case 2:
this.passwordStrengthText = "Élevé";
break;
case 3:
this.passwordStrengthText = "Très élevé";
break;
default:
this.passwordStrengthText = "Faible";
}
},
checkPasswordValidity() {
this.isValid = true;
const value = this.passwordInput.value;
if (value === '' || value.length < 8 || !value.match(/(?=.*[a-z])/) || !value.match(/(?=.*[A-Z])/) || !value.match(/(?=.*\d)/)) this.isValid = false;
if (!this.isValid) {
this.passwordInput.setCustomValidity(this.errorMessages.invalid)
this.error = this.errorMessages.invalid;
} else {
if (!this.checkPasswordsMatch()) {
this.passwordInput.setCustomValidity(this.errorMessages.notMatch)
this.error = this.errorMessages.notMatch;
} else {
this.passwordInput.setCustomValidity('');
this.error = null;
}
}
this.$dispatch('password-validity', this.isValid);
return this.isValid;
}
}
}
</script>
<button class="btn btn-primary btn-full-width mt-4">Enregistrer</button>
</div>
</div>