Ce composant est un champ permettant de saisir du texte libre.
Documentation : Figma
Langage: HTML
<label class="form-label" for="password_913275180">
Mot de passe<span class="required"> *</span></label>
<div class="input-group">
<input autocapitalize="none" autocomplete="current-password" autocorrect="off" class="form-control input-password-with-toggle" id="password_913275180" name="password_913275180" required type="password">
<div class="input-group-append">
<button class="btn btn-reset btn-ratio-square d-none" data-toggle-password="hide" data-target="password_913275180" id="hide-password--password_913275180" type="button" data-ft-tooltip="Masquer le mot de passe" data-ft-vocalize="false">
<span aria-hidden="true" class="icon icon-eye-close"></span>
<span class="sr-only">Masquer le mot de passe</span>
</button>
<button class="btn btn-reset btn-ratio-square" data-toggle-password="show" data-target="password_913275180" id="show-password--password_913275180" type="button" data-ft-tooltip="Afficher le mot de passe" data-ft-vocalize="false">
<span aria-hidden="true" class="icon icon-eye"></span>
<span class="sr-only">Afficher le mot de passe</span>
</button>
</div>
</div> // L'aperçu n'est pas disponible pour les dépendances externes
// Bouton de visualisation du mot de passe en clair
document.addEventListener('DOMContentLoaded', () => {
document.querySelectorAll('[data-toggle-password]').forEach((el) => {
el.addEventListener('click', (e) => {
let $input = document.querySelector("#" + el.getAttribute('data-target')),
action = el.getAttribute('data-toggle-password'),
type = action === 'show' ? 'text' : 'password',
toggle = action === 'show' ? 'hide' : 'show';
$input.setAttribute('type', type);
el.classList.add('d-none');
let $toggle = el.parentNode.querySelector('[data-toggle-password="' + toggle + '"]');
$toggle.classList.remove('d-none');
$toggle.focus();
});
});
document.querySelectorAll('form').forEach((form) => {
form.addEventListener('submit', (e) => {
console.log(this);
form.querySelectorAll('[data-toggle-password]').forEach((el) => {
const $input = document.querySelector("#" + el.getAttribute('data-target'));
if ($input.getAttribute('type') === 'text') {
$input.setAttribute('type', 'password');
}
});
});
});
});