login overlay component

Flow
1

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…

2

Sounds like this ticket: https://github.com/vaadin/vaadin-login/issues/96

3

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();
}
4

yes i know but would be nice if I could use components that exist. thx guys anyway

5

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'))");
6

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.