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 
#include <Wt/WLabel.h>
#include <Wt/WPasswordEdit.h>
#include <Wt/WPushButton.h>
#include <Wt/WText.h>
#include <Wt/WTemplate.h>
#include <Wt/WString.h>


auto form = std::make_unique<Wt::WTemplate>(Wt::WString::tr("passwordEditDefault-template"));
form->addFunction("id", &Wt::WTemplate::Functions::id);

auto psw = form->bindWidget("password", std::make_unique<Wt::WPasswordEdit>());
psw->setPlaceholderText("Enter a password");
psw->setAutoComplete(Wt::AutoCompleteMode::Off);

auto button = form->bindWidget("save", std::make_unique<Wt::WPushButton>("Save"));

auto out = form->bindWidget("out", std::make_unique<Wt::WText>());

button->clicked().connect([=] {
    if (psw->validate() != Wt::ValidationState::Valid)
        out->setText("You should enter a password!");
    else {
        out->setText("You entered the password " + psw->text());
    }
});

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 
#include <Wt/WLabel.h>
#include <Wt/WLineEdit.h>
#include <Wt/WPasswordEdit.h>
#include <Wt/WPushButton.h>
#include <Wt/WText.h>
#include <Wt/WTemplate.h>
#include <Wt/WString.h>


auto form = std::make_unique<Wt::WTemplate>(Wt::WString::tr("PasswordEditAutocomplete-template"));
form->addFunction("id", &Wt::WTemplate::Functions::id);

auto username = form->bindWidget("username", std::make_unique<Wt::WLineEdit>());
username->setAutoComplete(Wt::AutoCompleteMode::Username);

auto psw = form->bindWidget("password", std::make_unique<Wt::WPasswordEdit>());
psw->setAutoComplete(Wt::AutoCompleteMode::CurrentPassword);

auto button = form->bindWidget("login", std::make_unique<Wt::WPushButton>("Login"));

auto out = form->bindWidget("out", std::make_unique<Wt::WText>());

button->clicked().connect([=] {
    if (username->text().empty()) {
        out->setText("You should enter your Username!");
    } else if (psw->validate() != Wt::ValidationState::Valid) {
        out->setText("You should enter your password!");
    } else {
        out->setText("You are logged in as " + username->text());
    }
});

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 
#include <Wt/WLabel.h>
#include <Wt/WLineEdit.h>
#include <Wt/WPasswordEdit.h>
#include <Wt/WPushButton.h>
#include <Wt/WText.h>
#include <Wt/WTemplate.h>
#include <Wt/WString.h>


auto form = std::make_unique<Wt::WTemplate>(Wt::WString::tr("PasswordEditNative-template"));
form->addFunction("id", &Wt::WTemplate::Functions::id);

auto username = form->bindWidget("username", std::make_unique<Wt::WLineEdit>());
username->setAutoComplete(Wt::AutoCompleteMode::Username);

auto psw = form->bindWidget("password", std::make_unique<Wt::WPasswordEdit>());
psw->setAutoComplete(Wt::AutoCompleteMode::NewPassword);
psw->setNativeControl(true);

// This pattern forces the password to contain at least one uppercase, one lowercase and one digit.
// This is just an example! We discourage you to use this regex as a safe production pattern.
psw->setPattern("^(?=.*\\d)(?=.*[a-z])(?=.*[A-Z]).{1,}$");

// Sets the minimum length of the password to 5 characters.
// Again, this is just an example! We strongly encourage you to have a higher minimum length for production.
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.

Top