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's an example of SCSS to add to your charter for the login page.
Please note that CSS is different for each case!
This css replaces the button's Show/Hide text with an "eye" / "crossed-out eye" icon (requires Font Awesome, you can adapt with another font if necessary).
CASE 1/ Upgrading to 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%);
}
}
}CASE 2/ Upgrade to 4.9.2 or higher, without EVER having gone through 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%);
}
}
}CASE 3/ Upgrading from 4.9.1 to 4.9.2 or higher
You have already migrated to 4.9.1. Find the modified css or scss file and replace it:
- .toggle-visibility by .login-password-toggle-visibility
- .hide by .login-password-visibility-hide
The rendering of the login form should be similar to the following screenshot:
Back to top