Important Notice - Forums is archived
To simplify things and help our users to be more productive, we have archived the current forum and focus our efforts on helping developers on Stack Overflow. You can post new questions on Stack Overflow or join our Discord channel.

Vaadin lets you build secure, UX-first PWAs entirely in Java.
Free ebook & tutorial.
login overlay component
Hello,
Is there some method that we can add component to login form ?. I wanna make something like password change when new users log in...
Meanwhile, implementing something like password change when new users login is rather straightforward with the help of other components. For example, the following make use of the Dialog component:
LoginForm loginComponent = new LoginForm ();
loginComponent.addLoginListener(e -> {
boolean isAuthenticated = authenticate(e);
if (isAuthenticated) {
if (isFirstTimer())
showResetPasswordPrompt();
else
navigateToMainPage();
} else {
loginComponent.setError(true);
}
});
private void showResetPasswordPrompt() {
final Dialog dialog = new Dialog();
final PasswordField password = new PasswordField("New password");
final PasswordField passwordConfirm = new PasswordField("Confirm Password");
final Button submitButton = new Button();
submitButton.addClickListener(e -> {
final boolean isValidPassword = validatePassword(password, passwordConfirm);
if (isValidPassword) {
updatePassword(password);
navigateToMainPage();
} else {
// Show error message specifying the password requirements
}
});
dialog.add(password, passwordConfirm, submitButton);
dialog.open();
}
yes i know but would be nice if I could use components that exist. thx guys anyway
My need was to add a Link for SSO Login to the Form. My LoginView extends LoginOverlay. The following worked:
Anchor ssoLink = new Anchor(appUrl + "saml/login", "Login with SSO");
getElement().appendChild(ssoLink.getElement());
getElement().executeJavaScript("document.querySelector('form').appendChild(document.querySelector('a'))");
I found another solution (based on the one by @Simon Faust) which relies on Javascript only.
Here is an example (in this case, a link is added after the login button):
var node = document.createElement('A');
node.href = '_some_link_';
node.id = '_new_node_id_';
var textnode = document.createTextNode(_text_);
node.appendChild(textnode);
document.querySelector('[part=\"vaadin-login-native-form\"]').appendChild(node);
This script can be executed with:
this.getElement().executeJs(_script_);
where this
is the LoginOverlay
object.