I am currently working on a Node.js project and I am attempting to incorporate an eye icon using Bootstrap into the password input field for visibility. Below is the code snippet of my input field:
<div class="container">
<form action='/register' method='post'>
<h1 class="text-center">Enter data for form</h1>
/* some other fields */
<div class="form-group input-group">
<input class="form-control item" type="password" name="password" id="password"
minlength="8" pattern="^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[^\da-zA-Z]).{8,}$" id="password" placeholder="Password" required autocomplete="off">
<i class="far fa-eye-slash" id="togglePassword"></i>
</div>
<div class="form-group text-center">
<button class="btn btn-primary btn-block save-info"
type="submit">Register </button>
</div>
</form>
</div>
The issue lies with the positioning of the eye icon. Below are all the necessary CSS styles:
.container{
display: flex;
align-items: center;
justify-content: center;
padding:50px 0;
}
.container form, .hello {
max-width:900px;
padding:20px 30px;
border-radius:10px;
box-shadow:4px 4px 15px rgba(0, 0, 0, 0.2);
margin: 0 auto;
background-color: #FFFACD;
}
.container .form-group {
border-radius:10px;
margin-bottom:25px;
padding:5px 10px;
}
.container .save-info {
border-radius:20px;
padding:10px 20px;
font-size:18px;
font-weight:bold;
background-color:#3f93ff;
border:none;
color:white;
margin-top:10px;
}
.container .text-center {
font-size: xx-large;
color:#154360;
}
#togglePassword {
position: relative;
/* left: 85%;*/
cursor: pointer;
margin-top: 10px;
}
I attempted to use the togglePassword identifier as shown above, but the result was less than ideal with the eye icon appearing awkwardly after the input field. I also experimented with the following code:
#togglePassword {
position: absolute;
left: 92%;
cursor: pointer;
margin-top: 10px;
}
However, when I started typing in the password, the eye icon disappeared which indicates faulty logic. Can someone provide a better solution or any suggestions to improve the appearance and functionality of the eye icon for comfortable and user-friendly interaction? The goal is to allow users to click on the eye icon to show/hide their password securely.