Issue in input-group & form-control add show/hide icon to password

[tundeemma]

<div class="input-group"> 
	<?php echo $this->Form->input('User.password', array('type' => 'password', 'label' => '', 'class' => 'form-control', 'placeholder' => 'Enter password')); ?>
<span class=class="password-toggle-icon"><i class="fas fa-eye"></i></span>
</div>

<script>
const passwordField = document.getElementById("password");
const togglePassword = document.querySelector(".password-toggle-icon i");

togglePassword.addEventListener("click", function () {
  if (passwordField.type === "password") {
    passwordField.type = "text";
    togglePassword.classList.remove("fa-eye");
    togglePassword.classList.add("fa-eye-slash");
  } else {
    passwordField.type = "password";
    togglePassword.classList.remove("fa-eye-slash");
    togglePassword.classList.add("fa-eye");
  }
});
</script>

How do i make the password show/hide on click the icon please

[nkdas91]

@tundeemma There's a mistake. Remove the extra class= from the <span>

<span class=class="password-toggle-icon">

Should be:

<span class="password-toggle-icon">

[tundeemma]

Thanks for the observation. That has been done but the icon is not showing inside the input control without giving any error message. What could be the problem?

…

On Fri, Dec 8, 2023, 1:51 PM Neeraj Kumar Das ***@***.***> wrote: @tundeemma <https://github.com/tundeemma> There's a mistake. Remove the extra class= from the <span> <span class=class="password-toggle-icon"> Should be: <span class="password-toggle-icon"> — Reply to this email directly, view it on GitHub <#39471 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AC3BFSPR3YETCOIB6UMLIWTYIMEOTAVCNFSM6AAAAABAHYF6A2VHI2DSMVQWIX3LMV43SRDJONRXK43TNFXW4Q3PNVWWK3TUHM3TOOJZGUZTA> . You are receiving this because you were mentioned.Message ID: ***@***.***>

[nkdas91]

.password-toggle-icon has to kept inside .input-group-text like:

<div class="input-group">
    <?php echo $this->Form->input('User.password', array('type' => 'password', 'label' => '', 'class' => 'form-control', 'placeholder' => 'Enter password')); ?>
    <div class="input-group-text">
        <span class="password-toggle-icon"><i class="fas fa-eye"></i></span>
    </div>
</div>

Or you may just add the input-group-text class to the password-toggle-icon:

<div class="input-group">
    <?php echo $this->Form->input('User.password', array('type' => 'password', 'label' => '', 'class' => 'form-control', 'placeholder' => 'Enter password')); ?>
    <span class="password-toggle-icon input-group-text"><i class="fas fa-eye"></i></span>
</div>

https://getbootstrap.com/docs/5.3/forms/input-group/