CODEWITHSUNDEEP
pythonflaskbootstrap-4flask-wtforms
ghawes
ghawes

Reputation: 303

How to Add icon "eye" in Flask WTForms PasswordField

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 class="icon-eye" id="togglePassword" style="margin-left: -30px; cursor: pointer;"></i>') # Not currently doing anything
    password = PasswordField("Password", validators=[DataRequired()])

And in my login.html

 <div class="form-group">
  {% if form.email.errors %}
    {{ form.email(class_="form-control is-invalid", placeholder="Email") }}
    <div class="invalid-feedback">
    {% for error in form.email.errors %}
    <span> {{ error }} </span>
    {% endfor %}
    </div>
  {% else %}
    {{ form.email(class_="form-control ", placeholder="Email") }}
  {% endif %}
</div>
<div class="form-group">
  {% if form.password.errors %}
    {{ form.password(class_="form-control is-invalid", placeholder="Password") }}
    <div class="invalid-feedback">
      {% for error in form.password.errors %}
      <span> {{ error }} </span>
      {% endfor %}
    </div>
  {% else %}
    {{ form.password(class_="form-control shadow-none", placeholder="Password") }}
    <i class="icon-eye" 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

Eye in wrong spot

Upvotes: 1

Views: 827

Answers (2)

ghawes
ghawes

Reputation: 303

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 class="p-viewer"><i class="icon-eye" id="togglePassword" style="margin-left: 100px; cursor: pointer;"></i></span>

and css:

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

Upvotes: 1

arrantate
arrantate

Reputation: 116

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

Upvotes: 0

Related Questions