How to Add icon "eye" in Flask WTForms PasswordField-CodePudding

Looking to add an icon toggle to a password field.

In my forms.py I have:

class LoginForm(FlaskForm):    
    email = StringField("Email Address", validators=[DataRequired(), Email()])
    eye_icon = Markup('<i  id="togglePassword" style="margin-left: -30px; cursor: pointer;"></i>') # Not currently doing anything
    password = PasswordField("Password", validators=[DataRequired()])

And in my login.html

 <div >
  {% if form.email.errors %}
    {{ form.email(class_="form-control is-invalid", placeholder="Email") }}
    <div >
    {% for error in form.email.errors %}
    <span> {{ error }} </span>
    {% endfor %}
    </div>
  {% else %}
    {{ form.email(class_="form-control ", placeholder="Email") }}
  {% endif %}
</div>
<div >
  {% if form.password.errors %}
    {{ form.password(class_="form-control is-invalid", placeholder="Password") }}
    <div >
      {% for error in form.password.errors %}
      <span> {{ error }} </span>
      {% endfor %}
    </div>
  {% else %}
    {{ form.password(class_="form-control shadow-none", placeholder="Password") }}
    <i  id="togglePassword" style="margin-left: -30px; cursor: pointer;"></i>
  {% endif %}
</div>

And I have my JS that toggles between showing the password. I just don't see how I can get the eye icon to show on the right of the password field like it shows on most login screens

CodePudding user response：

you could remove the styling from the password field, and apply it to a div that surrounds both the password field and the icon.

CodePudding user response：

I had to wrap the tag in a span tag, and add a class to my css to get it to work:

{{ form.password(class_="form-control ", placeholder="Password") }}
<span ><i  id="togglePassword" style="margin-left: 100px; cursor: pointer;"></i></span>

and css:

.p-viewer {
    z-index: 9999;
    position: absolute;
    top: 30%;
    right: 10px;
}