New add-on: LoginForm

Flow
1


https://vaadin.com/directory#addon/loginform

Unlike the deprecated LoginForm in the Vaadin core, this add-on does works for all major browsers and not only for Firefox. Also, it does not load special HTML in an iframe, but you can build your own UI in plain Vaadin, using the components provided by the add-on. In technical terms, the add-on wraps the login UI in an HTML form element that submits a POST request to a dummy resource. The text field for user name and the password field have special attributes so that they are recognized by the password manager.

2

what i need to do with MyLoginForm class from your example code ?

3

You add an instance of it to your own layout. Just like you would add any other Vaadin component.

4

Nice addOn.

Thanks.

Just a small note:

The example “screenshot” uses the VerticalLoginForm,
but currently we must extend DefaultVerticalLoginForm.

5

Thank you for letting me know, I just corrected it.

6

Thanks for this add-on.
[s]

  1. I have to remove textField.addKeyDownHandler in LoginFormConnector.java, otherwise empty strings are submitted when I hit Enter on the remembered username in Firefox 26. setLoginMode(LoginMode.DEFERRED) did not help.
    Can that be fixed?
    [/s] Thanks for fixing it.

  2. Ironically, Firefox add-on “Remember Passwords” prevents this add-on from working. I guess it clones an older nsLoginManager.js.

7

I’m afraid I’m having problems using this add-on. Implementing the code example builds and displays a functional form but the login(String username, String password) method is not called when the login button is pressed. If I was to guess it looks like I need to explicitly wire in a ButtonClickListener in the createContent method but that would seem unlikely - it’s more possible something is not firing correctly in the implementation…

Some additional info on any other features/the API for this add-on would be handy e.g. is there is a facility for password/username field validation or does this need to be implemented separately?

8

I can imagine that this could happen if you register your own listeners on the text fields. Could that be the case? If not, how does your code look like ?

9

I don’t have this problem. What browser do you use? On the Javascript console do you see any error messages? Can you submit the form with the enter key?

10

No, nothing special. It happens with the simple example you’ve posted.
Testcase:

  1. Login with user1.
  2. Have Firefox save its password.
  3. Login with user2.
  4. Have Firefox save its password.
  5. Next time, login by choosing a username from the drop-down list. But don’t click on it, just press Enter.
11

OK, you’re right. I’ve never tried to hit enter while the auto complete is open. I always hit the tab key. Thanks for reporting this bug, I’ve fixed it in 0.3.2.

12

I am trying to use this with Weblogic server and I get this error message. Widgetset ‘com.vaadin.DefaultWidgetSet’ does not contain implementation for org.tiaa.cref.ui.forms.LoginForm. Check its component connector’s @Connect mapping, widgetsets GWT module description file and re-compile your widgetset. In case you have downloaded a vaadin add-on package, you might want to refer to add-on instructions.

I am using Eclipse IDE with Vaadin Plug In.

13

You should visit the
download page
 again, and see the instructions.

14

It seems not possible to use a NativeButton instead of a Button for createLoginButton.
I need a nativebutton because I only want to use an image and don’t want to have the default styling of a plain Button.

The code below allows to login, but I believe it doesn’t work because it will not submit/post the HTML form and thus clicking this button will not have the desired effect (remembering login).
Please note that I have stored userNameField and passwordField as class variables inside createContent(…) because there’s no way to get the username and password otherwise.

protected Button createLoginButton() 
{
  //return new Button(getLoginButtonCaption());
  return new NativeButton("", new ClickListener()
  {
    private static final long serialVersionUID = 2098963978545270642L;
    
    @Override
    public void buttonClick(ClickEvent event)
    {
      login(userNameField.getValue(), passwordField.getValue());
    }
  });
}

Could you check if you can fix this (possibly checking explicitly if it is a Button or a NativeButton). I guess there might be other users who want to use a NativeButton for the same styling reasons.

15

Thanks for the suggestion. Native login buttons are now supported in 0.3.3.

Please do not add the click listener explicitly, it will be added automatically.

16

I’ve upgraded and it works with a Native button too now.
Thanks for the quick fix!

17

I have “c.v.s.communication.ServerRpcHandler - RPC call to com.ejt.vaadin.loginform.shared.LoginFormRpc.submitCompleted received for connector 5 but no such connector could be found. Resynchronizing client.” warnings in my server log after some logins. Can this be prevented? This happens with Vaadin 7.1.13.

18

This would happen if the page content was changed before submitCompleted is handeled. Do you register your own listener on the login button?

19

Thank you. No I, don’t. Here’s my class:

public class LoginView extends LoginForm implements View {
  public static final String NAME= "login";
  private static final long serialVersionUID = 1L;

  @Override
  protected String getUserNameFieldCaption() {
    return "E-mail";
  }

  @Override
  protected String getPasswordFieldCaption() {
    return "Jelszó";
  }
  @Override

  protected String getLoginButtonCaption() {
    return "Belépés";
  }

  @Override
  protected Component createContent(TextField userNameField, PasswordField passwordField, Button loginButton) {
    VerticalLayout layout= new VerticalLayout();
    layout.setSpacing(true);
    layout.setMargin(true);

    layout.addComponent(new Label(Deployment.getLoginTitle()));
    userNameField.setWidth(20, Unit.EM);
    layout.addComponent(userNameField);
    layout.addComponent(passwordField);
    layout.addComponent(loginButton);
    return layout;
  }

  @Override
  public void enter(ViewChangeListener.ViewChangeEvent event) {
  }

  @Override
  protected void login(String userName, String password) {
    ((MainUI) getUI()).login(userName, password);
  }

}

MainUI.login() calls nav.navigateto().

nav is createad as

Navigator nav= new Navigator(mainUI, contentLayout); where contentLayout is CssLayout.

20

Have you tried calling setLoginMode(LoginMode.DEFERRED)?