| Availability |
Odoo Online
Odoo.sh
On Premise
|
| Lines of code | 182 |
| Technical Name |
password_eyes_icon |
| License | LGPL-3 |
| Versions | 16.0 17.0 18.0 |
Password Eyes Icon
Enhance password field visibility with a toggle icon
Overview
The Password Eyes Icon module enhances the user experience in Odoo 18, 17, 16 by adding a visibility toggle (eye icon) to password fields. This allows users to easily show or hide password content with a single click, improving usability while maintaining security.
Features
Main Features
-
Backend Field Widget: Adds a custom field widget
password_eyes_iconthat can be applied to anycharfield in form views -
Login Page Integration: Automatically adds the
eye icon to password fields on:
- Login page
- Signup page
- Password reset page
- Modern UX: Simple, intuitive interface following standard password visibility patterns
- Responsive Design: Works properly on both desktop and mobile devices
Technical Information
- Version: Compatible with Odoo 18, 17, 16
- Dependencies:
webmodule - License: LGPL-3
Usage
Backend Forms
To add the password visibility toggle to a field in your form views:
<field name="password_field" widget="password_eyes_icon" password="True"/>
The password="True" attribute ensures the field is
treated as a password in all contexts.
Public Pages
The eye icon is automatically added to:
- Password field on login page
- Password & confirm password fields on reset password page
- Password & confirm password fields on signup page Note: The icon is will be visible on the signup and reset password pages if the auth_signup module is installed and the xml code is enabled.
How It Works
The module consists of two main components:
- Backend Widget: An OWL component that extends the standard CharField with visibility toggle functionality.
- Public Pages Integration: Custom JavaScript and inherited templates that add the eye icon to password fields on public-facing pages.
Customization
The appearance of the eye icon can be customized by modifying the SCSS files:
-
static/src/scss/password_eyes_icon.scss(for backend)
Troubleshooting
If the icon is not appearing:
- Clear your browser cache
- Verify the module is properly installed
- Check browser console for JavaScript errors
Please log in to comment on this module