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 un exemple de SCSS à ajouter dans votre charte pour la page de connexion.
Attention la CSS est différente selon votre cas !
Cette css remplace le texte Afficher/Masquer du bouton par une icône "oeil" / "oeil barré" (nécessite Font Awesome, vous pouvez adapter avec une autre font si nécessaire)
CAS 1/ Mise à jour vers une 4.9.1 :
.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%);
}
}
}CAS 2/ Mise à jour vers une 4.9.2 ou plus, sans JAMAIS être passé par une 4.9.1
.login-input-wrapper-password {
/* Hide password reveal button in MS Edge */
input::-ms-reveal {
display: none;
}
.login-password-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";
}
&.login-password-visibility-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%);
}
}
}CAS 3/ Mise à jour 4.9.1 vers 4.9.2 ou plus
Vous avez déjà passé la migration vers la 4.9.1. Retrouver le fichier css ou scss modifié et remplacer:
- .toggle-visibility par .login-password-toggle-visibility
- .hide par .login-password-visibility-hide
Le rendu du formulaire de connexion devrait être similaire à la capture suivante :
Retour en haut