Password Check

<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="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>Votre 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>Confirmer 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>

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