This page should only be applied if the script asks you to pass the manual migration code.20250725.Web.TogglePasswordVisibility
In each login form, it is now possible to show or hide the password, by means of a button in the password field.
If your charter doesn't extend to a core charter and it's possible to connect to your site (extranet or intranet), you'll need to integrate this new button.
!! Warning !! this migration is mandatory !! Otherwise your front connection pages will be broken !
Here is the minimum SCSS to add to your charter for the login page
.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;
}
}At this point, the login form should display a button to hide/unhide the password in the "Password" field, as follows:
Here's a more complete scss example to replace the Show/Hide text with an "eye" / "crossed-out eye" icon (requires 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%);
}
}
}The resulting rendering would be similar to the following capture:
Note that this migration may already have been carried out when upgrading from 4.9.0 to 4.9.1.
Back to top