Cette page ne doit être appliquée que si le script vous demande de passer la migration manuelle code.20250725.Web.TogglePasswordVisibility
Dans chaque formulaire de connexion, il est maintenant possible d'afficher ou masquer le mot de passe, au moyen d'un bouton au niveau du champ mot de passe.
Si votre charte n'étend pas une charte noyau et qu'il est possible de se connecter sur votre site (extranet ou intranet), vous devrez intégrer ce nouveau bouton.
!! Attention !! cette migration est obligatoire !! Sinon vos pages de connexion front seront cassées !
Voici la SCSS minimun à ajouter dans votre charte pour la page de connexion
.login-input-wrapper-password {
/* Hide password reveal button in MS Edge */
input::-ms-reveal {
display: none;
}
.toggle-visibility {
position: absolute;
right: 1rem;
top: 50%;
transform: translateY(-50%);
cursor: pointer;
z-index: 2;
margin: 0;
padding: 0;
border: none;
background: none;
}
}A ce stade le formulaire de connexion devrait faire apparaitre le bouton pour cacher/masquer le mot de passe à l'intérieur du champ "Mot de passe" de la manière suivante:
Voici un exemple de scss plus complet pour remplacer le texte Afficher/Masquer par un icône "oeil" / "oeil barré" (nécessite Font Awesome)
.login-input-wrapper-password {
/* Hide password reveal button in MS Edge */
input::-ms-reveal {
display: none;
}
.toggle-visibility {
position: absolute;
right: 1rem;
top: 50%;
transform: translateY(-50%);
cursor: pointer;
z-index: 2;
margin: 0;
padding: 0;
border: none;
background: none;
width: 1.2em;
font-size: 1.2em;
color: #6c6c6c;
&:before {
font-family: "Font Awesome 6 Free";
content: "\f06e";
}
&.hide {
&:before {
content: "\f070";
}
}
span {
position: absolute;
height: 1px;
width: 1px;
overflow: hidden;
white-space: nowrap;
clip: rect(0 0 0 0);
clip-path: inset(50%);
}
}
}Le rendu obtenu serait similaire à capture suivante :
A noter que cette migration a peut-être déjà été passée lors d'un upgrade 4.9.0 vers 4.9.1
Retour en haut