PasswordField with Eye-Icon

I am using Vaadin 8.

How can i get a PasswordField with an Eye-Icon like here: https://cdn.vaadin.com/vaadin-text-field/1.1.0-alpha4/demo/password.html

My Code is

PasswordField password = new PasswordField("Password");

Hi,
Try this.

PasswordField passField = new PasswordField();
passField.setRevealButtonVisible(true);

Cheers,
Stefan

Hi Stefan, the PasswordField doesn’t seem to have the setRevealButtonVisible() function available as of Vaadin 8.12.0.

You can add the eye icon, but only to the left of the component:

passField.addStyleName(ValoTheme.TEXTFIELD_INLINE_ICON);
passField.setIcon(VaadinIcons.EYE);

but the icon won’t respond to clicks and won’t reveal the password.

I also can’t seem to find any kind of Vaadin 8 TextField decorator at https://vaadin.com/directory .

I’ve opened a feature request at https://github.com/vaadin/framework/issues/12146

Hi,

It is pretty simple create own extension to the Password field.
This one adds eye icon into pwd field when user click it pwd is visible one sec and reset back to the ***.

Server side code.

public class ShowPasswordExtension extends AbstractExtension {
  private static final long serialVersionUID = 1L;

  public ShowPasswordExtension() {super();}

  public static ShowPasswordExtension extend(PasswordField field) {
    ShowPasswordExtension e = new ShowPasswordExtension();
    e.extend((AbstractClientConnector) field);
    return e;
  }

Client side code

@Connect(ShowPasswordExtension.class)
public class ShowPasswordExtensionConnector extends AbstractExtensionConnector
    implements AttachEvent.Handler {
  private static final long serialVersionUID = 1L;

  private VPasswordField textField;

  private transient Timer trigger;

  private Timer getTrigger() {
    if (this.trigger != null) {
      return trigger;
    }
    trigger = new Timer() {

      @Override
      public void run() {
        textField.getElement().setAttribute("type", "password");
      }
    };
    return trigger;
  }

  @Override
  protected void extend(ServerConnector target) {
    textField = (VPasswordField) ((ComponentConnector) target).getWidget();
    textField.addStyleName("showpassword-textfield");
    textField.addAttachHandler(this);
  }

  public native void addShowButtonClickListener(Element el)
  /*-{
      var self = this;
      el.onclick = $entry(function () {
          self.@com.test.vaadin.ui.widgetset.client.connectors.ShowPasswordExtensionConnector::showPassword()();
      });
  }-*/;

  public native void removeShowButtonClickListener(Element el)
  /*-{
      el.onclick = null;
  }-*/;

  @Override
  public void onAttachOrDetach(AttachEvent event) {
    if (event.isAttached()) {
      Element showPasswordButtonElement = DOM.createDiv();
      showPasswordButtonElement.addClassName("showpassword-button");
      textField.getElement().getParentElement()
          .insertAfter(showPasswordButtonElement, textField.getElement());
      addShowButtonClickListener(showPasswordButtonElement);
    } else {
      Element parentElement = textField.getElement().getParentElement();
      Element showPasswordButtonElement = null;
      if (parentElement != null) {
        for (int i = 0; i < parentElement.getChildCount(); i++) {
          Node n = parentElement.getChild(i);
          if (n instanceof Element) {
            if ("showpassword-button".equals(((Element) n).getClassName())) {
              showPasswordButtonElement = (Element) n;
              break;
            }
          }
        }
        if (showPasswordButtonElement != null) {
          parentElement.removeChild(showPasswordButtonElement);
          removeShowButtonClickListener(showPasswordButtonElement);
        }
      }
    }
  }

  private void showPassword() {
    Element elem = textField.getElement();
    elem.setAttribute("type", "text");
    elem.focus();
    Timer t = this.getTrigger();
    if (t.isRunning()) {
      t.cancel();
    }
    t.schedule(1000);
  }
}

SCSS styling

  .showpassword-textfield {
    padding-right: 2rem !important;
  }
  .showpassword-button {
    display: inline-block;
    vertical-align: middle;
    right: 1.5em;
    width: $v-font-size;
    cursor: pointer;
    position: relative;
    border:1px solid transparent;
    padding: round($v-unit-size/9) 0;
    
	  &:after {
	    content: "\F06E";
	    font-family: FontAwesome;
	    color: $v-font-color;
	  }
	}

Usage example

ShowPasswordExtension.extend(this.passwordField);