<?php
    PuzzleHTML::setIcon('<i class="fas fa-user-cog"></i>');
    PuzzleHTML::setTitleText($cambiar_clave_lg);
    echo PuzzleHTML::Title();
?>
<form class="needs-validation px-2" method="post" action="php_o/ajustes-cambiar-clave.php" novalidate>
    <div class="form-row">
        <div class="col-12 mb-3">
            <label for="firstPass"><?php echo $nueva_clave_lg; ?></label>
            <input type="password" class="form-control" name="firstPass" id="firstPass" placeholder="<?=$nueva_clave_lg ?>" required=>
            <div class="invalid-feedback">
                <?php echo $campo_obligatorio_lg; ?>
            </div>
        </div>
        <div class="col-12 mb-3">
            <label for="secondPass"><?= $repite_clave_lg; ?></label>
            <input type="password" class="form-control" id="secondPass" placeholder="<?php echo $repite_clave_lg; ?>" required>
            <div class="invalid-feedback">
                <?php echo $campo_obligatorio_lg; ?>
            </div>
        </div>
            <div ><small class="text-muted">
                <?= $pwd_debe_contenererr_lg; ?>
                <ul>
                    <li><?= $pwd_lenghterr_lg; ?></li>
                    <li><?= $pwd_mayuserr_lg; ?></li>
                    <li><?= $pwd_minuserr_lg; ?></li>
                    <li><?= $pwd_numbererr_lg; ?></li>
                </ul>
            </small></div>
    </div>
    <button class="btn btn-primary btn-block" type="submit">Submit form</button>
</form>

<script>
(function() {
  'use strict';
  window.addEventListener('load', function() {
    var forms = document.getElementsByClassName('needs-validation');
    var validation = Array.prototype.filter.call(forms, function(form) {
      form.addEventListener('submit', function(event) {
        var clave = document.getElementById('firstPass');
        var clave2 = document.getElementById('secondPass');
        if (form.checkValidity() === false) {
            event.preventDefault();
            event.stopPropagation();
        } else if(clave.value.length < 8 || clave.value.search(/[0-9]/) === -1 ||  clave.value.search(/[a-z]/) === -1 ||  clave.value.search(/[A-Z]/) === -1) {
            event.preventDefault();
            event.stopPropagation();
            clave1.classList.add('is-invalid');
        } else if(clave.value !== clave2.value) {
            event.preventDefault();
            event.stopPropagation();
            clave2.classList.add('is-invalid');
        } 
        form.classList.add('was-validated');

      }, false);
    });
  }, false);
})();
</script>