{# Aide « règles du mot de passe » + validation live.

   Paramètres :
     first_id   : id de l'input « mot de passe »
     second_id  : id de l'input « confirmation » (facultatif)
     min_length : longueur minimale (par défaut 8)

   Les règles affichées ici doivent rester le miroir des contraintes de
   App\Form\PlainPasswordType. #}
{% set min_length = min_length|default(8) %}
{% set second_id = second_id|default(null) %}

<div id="password-rules" class="form-text mt-2 mb-3">
	<p class="mb-1">Votre mot de passe doit contenir :</p>
	<ul class="list-unstyled mb-0 password-rules-list" data-password-rules-for="{{ first_id }}">
		<li data-rule="length"><i class="fas fa-circle rule-icon me-2"></i>au moins {{ min_length }} caractères</li>
		<li data-rule="upper"><i class="fas fa-circle rule-icon me-2"></i>au moins une majuscule (A-Z)</li>
		<li data-rule="digit"><i class="fas fa-circle rule-icon me-2"></i>au moins un chiffre (0-9)</li>
		<li data-rule="edges"><i class="fas fa-circle rule-icon me-2"></i>ni espace au début, ni espace à la fin</li>
		{% if second_id %}
			<li data-rule="match"><i class="fas fa-circle rule-icon me-2"></i>les deux champs doivent être identiques</li>
		{% endif %}
	</ul>
</div>

<style>
	.password-rules-list li {
		font-size: .875rem;
		color: #6c757d;
		transition: color .15s ease-in-out;
	}
	.password-rules-list .rule-icon {
		font-size: .5rem;
		vertical-align: middle;
	}
	.password-rules-list li.rule-ok {
		color: #198754;
	}
	.password-rules-list li.rule-ok .rule-icon::before {
		content: "\f00c"; /* fa-check */
		font-size: .75rem;
	}
	.password-rules-list li.rule-ko {
		color: #dc3545;
	}
	.password-rules-list li.rule-ko .rule-icon::before {
		content: "\f00d"; /* fa-times */
		font-size: .75rem;
	}
	.password-toggle-wrapper {
		position: relative;
	}
	.password-toggle-wrapper .password-toggle {
		position: absolute;
		top: 50%;
		right: .75rem;
		transform: translateY(-50%);
		z-index: 5;
		border: 0;
		background: transparent;
		color: #6c757d;
		padding: .25rem .5rem;
		cursor: pointer;
	}
	.password-toggle-wrapper .password-toggle:hover,
	.password-toggle-wrapper .password-toggle:focus {
		color: #212529;
	}
	.password-toggle-wrapper > .form-control {
		padding-right: 3rem;
	}
</style>

<script>
	(function () {
		var firstId = {{ first_id|json_encode|raw }};
		var secondId = {{ second_id|json_encode|raw }};
		var minLength = {{ min_length }};

		var first = document.getElementById(firstId);
		var second = secondId ? document.getElementById(secondId) : null;
		var list = document.querySelector('[data-password-rules-for="' + firstId + '"]');
		if (!first || !list) {
			return;
		}

		function rule(name) {
			return list.querySelector('[data-rule="' + name + '"]');
		}

		function mark(el, ok, touched) {
			if (!el) {
				return;
			}
			el.classList.toggle('rule-ok', ok);
			el.classList.toggle('rule-ko', touched && !ok);
		}

		function refresh() {
			var value = first.value;
			var touched = value.length > 0;

			mark(rule('length'), value.length >= minLength, touched);
			mark(rule('upper'), /[A-Z]/.test(value), touched);
			mark(rule('digit'), /\d/.test(value), touched);
			mark(rule('edges'), value === '' ? false : /^\S(.*\S)?$/.test(value), touched);

			if (second) {
				var bothFilled = touched && second.value.length > 0;
				mark(rule('match'), bothFilled && value === second.value, bothFilled);
			}
		}

		first.addEventListener('input', refresh);
		if (second) {
			second.addEventListener('input', refresh);
		}
		refresh();

		// Bouton afficher / masquer sur chaque champ mot de passe.
		[first, second].forEach(function (input) {
			if (!input || input.dataset.passwordToggleReady === '1') {
				return;
			}
			input.dataset.passwordToggleReady = '1';

			var wrapper = input.parentElement;
			if (!wrapper) {
				return;
			}
			wrapper.classList.add('password-toggle-wrapper');

			var button = document.createElement('button');
			button.type = 'button';
			button.className = 'password-toggle';
			button.setAttribute('aria-label', 'Afficher le mot de passe');
			button.setAttribute('aria-pressed', 'false');
			button.innerHTML = '<i class="fas fa-eye"></i>';

			button.addEventListener('click', function () {
				var show = input.type === 'password';
				input.type = show ? 'text' : 'password';
				button.setAttribute('aria-pressed', show ? 'true' : 'false');
				button.setAttribute('aria-label', show ? 'Masquer le mot de passe' : 'Afficher le mot de passe');
				button.innerHTML = show ? '<i class="fas fa-eye-slash"></i>' : '<i class="fas fa-eye"></i>';
			});

			wrapper.appendChild(button);
		});
	})();
</script>