Password toggle icon appears outside the input field of password

Created on 1 August 2024, 5 months ago

Problem/Motivation

I have configured the view_password module version 6.0 for Drupal 10.3.0 with the Bootstrap Barrio theme version 5.5.12. The configuration for the view_password module is as follows:

  • Form IDs: user_login_form, user_form
  • Classes: password-confirm, password-field

I have noticed that the password toggle "eye" icons are displayed outside the password input fields when using the Bootstrap Barrio 5.5.12 theme. The icons should ideally be displayed inside the password input control.

Additional Information:

  • Drupal Version: 10.3.0
  • Bootstrap Barrio Theme Version: 5.5.12
  • view_password Module Version: 6.0

Steps to reproduce

Install Drupal 10.3.0.
Install and activate the Bootstrap Barrio theme version 5.5.12.
Install and configure the view_password module version 6.0.
Configure the module with the following settings:

  • Form IDs: user_login_form, user_form
  • Classes: password-confirm, password-field

Navigate to a form that includes a password input (e.g., user edit form at /user/edit).

Thank you for your attention to this matter. I appreciate your help in resolving this issue.

Proposed resolution

The password toggle "eye" icons should be displayed inside the password input fields.

Remaining tasks

User interface changes

API changes

Data model changes

🐛 Bug report
Status

Active

Version

6.0

Component

User interface

Created by

🇫🇷France bruno_nct

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Comments & Activities

  • Issue created by @bruno_nct
  • 🇮🇳India Tirupati_Singh

    Hi @bruno_nct, the issue is occurring due to the classes password-confirm, password-field and to add multiple classes you have to separate classes using space instead of comma(,). And there's no need to add class in the Enter the form class here. field of the module configuration. This field is provided to add custom class to the password view icon to design it using CSS. So if you want to use this module to show/hide password field value then simply add the user_login_form, user_form in Enter the form id(s) here. field and leave the Enter the form class here. field as it is.

    And if you want to add multiple classes then separate each classes with space instead of separating it with comma(,) like this password-confirm password-field.

    I hope this will help in resolving your issue.

  • 🇫🇷France bruno_nct

    Hello,
    Thank you for your quick response. I have applied the modifications and here is the result:

    Export of the configuration:
    _core:
    default_config_hash: oQhVT7y0......
    form_ids: 'user_login_form,user_form,user_pass'
    span_classes: ''

    The display is correct for the administrator account as shown in the image below using the Claro 10.3.0 theme (administration theme).

    The display does not work on the Bootstrap Barrio 5.5.12 theme as shown in the image below.

    However, the display of the HTML code below shows that the show/hide password icon is present, but it is not displayed on the screen.

    When I apply the following configuration (which is a mistake for span_class), the display of the show/hide icon is no longer hidden on the Bootstrap Barrio 5.5.12 theme:
    _core:
    default_config_hash: oQhVT7y0lV.....
    form_ids: 'user_login_form,user_form,user_pass'
    span_classes: 'password-confirm password-field'

    Does this mean that the proper functioning of the module depends on the theme used?

    Best regards

  • 🇩🇪Germany anacolautti

    Hi everyone.
    First of all, thank you for your interest in this module, and the dedication you spent in creating this issue.
    I installed the Bootstrap Barrio theme, version 5.5.16 on a Drupal 10.3.2 and enabled the View Password module (tried both the dev and the 6.0.4 versions) with the default settings. I don't see the issue you're describing. This is what I see:

    To investigate further, I need a bit more help from you, because, I cant fix something that I don't see broken myself.

    Could you check which styles are being applied to the Icon and its containers, both with and without extra classes?

  • 🇩🇪Germany anacolautti

    Also, I just noticed when reviewing this other issue 💬 crosseye location Active , that this might be related to the display style of the button. Please check this comment 💬 crosseye location Active to see if this helps us find the issue.

  • Status changed to Postponed: needs info 5 months ago
  • Status changed to Closed: cannot reproduce about 2 months ago
  • 🇩🇪Germany anacolautti

    I'm closing this issue because of inactivity. Feel free to reopen it if needed.

Production build 0.71.5 2024