Password

The WPasswordEdit widget is a line edit that hides its content. This replaces the use of the EchoMode in WLineEdit that was used for this purpose.

Example
source 
  void PasswordEditDefault() {
    WTemplate form = new WTemplate(WString.tr("passwordEditDefault-template"));
    form.addFunction("id", WTemplate.Functions.id);
    final WPasswordEdit psw = new WPasswordEdit();
    form.bindWidget("password", psw);
    psw.setPlaceholderText("Enter a password");
    psw.setAutoComplete(AutoCompleteMode.Off);
    WPushButton button = new WPushButton("Save");
    form.bindWidget("save", button);
    final WText out = new WText();
    form.bindWidget("out", out);
    button
        .clicked()
        .addListener(
            this,
            () -> {
              if (psw.validate() != ValidationState.Valid) {
                out.setText("You should enter a password!");
              } else {
                out.setText("You entered the password " + psw.getText());
              }
            });
  }

Auto-complete

In most cases, you will want to use this widget with auto-complete so that the browser can complete the fields for the user. This auto-complete attribute can be set with the method setAutoComplete(). By default, the value is AutoCompleteMode.On, which lets the browser guess what it should autocomplete the field with. While any of the auto-complete modes can be used, the most relevant for the WPasswordEdit are AutoCompleteToken.CurrentPassword and AutoCompleteToken.NewPassword which tells the browser that it should be filled respectively with a known or a new password.

Example
source 
  void PasswordEditAutocomplete() {
    WTemplate form = new WTemplate(WString.tr("PasswordEditAutocomplete-template"));
    form.addFunction("id", WTemplate.Functions.id);
    final WLineEdit username = new WLineEdit();
    form.bindWidget("username", username);
    username.setAutoComplete(AutoCompleteMode.Username);
    final WPasswordEdit psw = new WPasswordEdit();
    form.bindWidget("password", psw);
    psw.setAutoComplete(AutoCompleteMode.CurrentPassword);
    WPushButton button = new WPushButton("Login");
    form.bindWidget("login", button);
    final WText out = new WText();
    form.bindWidget("out", out);
    button
        .clicked()
        .addListener(
            this,
            () -> {
              if (username.getText().length() == 0) {
                out.setText("You should enter your Username!");
              } else {
                if (psw.validate() != ValidationState.Valid) {
                  out.setText("You should enter your password!");
                } else {
                  out.setText("You are logged in as " + username.getText());
                }
              }
            });
  }

Top

Using native validation

It is also possible to use the browser's native validation methods such as minlength, required and pattern, by using the setNativeControl() method. Keep in mind that this validation is only done before an HTML form is submitted.

Example
source 
  void PasswordEditNative() {
    WTemplate form = new WTemplate(WString.tr("PasswordEditNative-template"));
    form.addFunction("id", WTemplate.Functions.id);
    WLineEdit username = new WLineEdit();
    form.bindWidget("username", username);
    username.setAutoComplete(AutoCompleteMode.Username);
    WPasswordEdit psw = new WPasswordEdit();
    form.bindWidget("password", psw);
    psw.setAutoComplete(AutoCompleteMode.NewPassword);
    psw.setNativeControl(true);
    psw.setPattern("^(?=.*\\d)(?=.*[a-z])(?=.*[A-Z]).{1,}$");
    psw.setMinLength(5);
    psw.setToolTip(
        "Password should be at least of lenth 5 and contain an uppercase letter, a lowercase letter and a number.");
  }

Note that the methods setMinLength() setRequired() setPattern() and validate() will work the same way regardless of whether nativeControl is set to true or false.

Revealing the password

By default, the WPasswordEdit widget hides the characters that are typed into it. The method setRevealButtonEnabled() adds a button inside the field with which the user can reveal the password. The password can also be shown or hidden from the server side with the method setTextVisible().

Example
source 
  void PasswordEditReveal() {
    WTemplate form = new WTemplate(WString.tr("PasswordEditReveal-template"));
    form.addFunction("id", WTemplate.Functions.id);
    final WPasswordEdit psw = new WPasswordEdit();
    form.bindWidget("password", psw);
    psw.setPlaceholderText("Enter a password");
    psw.setAutoComplete(AutoCompleteMode.Off);
    psw.setRevealButtonEnabled(true);
    final WPushButton toggle = new WPushButton("Show");
    form.bindWidget("toggle", toggle);
    toggle
        .clicked()
        .addListener(
            this,
            () -> {
              psw.setTextVisible(!psw.isTextVisible());
              toggle.setText(psw.isTextVisible() ? "Hide" : "Show");
            });
    psw.textVisibilityChanged()
        .addListener(
            this,
            () -> {
              toggle.setText(psw.isTextVisible() ? "Hide" : "Show");
            });
  }

Top