After Login View my Browser shows always the Password save/store credential

Vaadin 6 / 7 / 8
1

Hello,

a new Vaadin user here. Vaadin looks really nice and I had some fast results :slight_smile:

But I am not sure if my Login/Logout View Navigation is correct, because my browser asks me
after every click and navigation to another View, if my Password should be saved.

My setup is Vaadin 8 and Spring Boot. I checked some examples to see how this is done.
At the moment I am doing the following:

I have one MainUI class that is my ViewDisplay for Spring, that I use to show the Login View
and the other views:

@Push
@PushStateNavigation
@Theme("valo")
@SpringUI
@SpringViewDisplay
public class MainUI extends UI implements ViewDisplay {
...
@Autowired private SpringViewProvider provider;
@Autowired private SpringNavigator navigator;
private Panel holder = new Panel();

@Override
  protected void init(VaadinRequest request) {
    Responsive.makeResponsive(this);

    final VerticalLayout root = new VerticalLayout();
    root.setSizeFull();
    root.setMargin(false);
    setContent(root);

    holder.setSizeFull();

    root.addComponent(holder);
    root.setExpandRatio(holder, 0.9f);

    updateContent();
  }
  
  private void updateContent() {
    String auth = (String) VaadinSession.getCurrent().getAttribute(AUTH);
    if (auth != null) {
      // Authenticated user
      createDrawer(Behaviour.LEFT_RESPONSIVE);
      getNavigator().navigateTo(getNavigator().getState());
    } else {
      navigator.navigateTo(LoginView.VIEW_NAME);
    }
  }
  
  private void createDrawer(Behaviour behaviour) {
    AppLayoutComponent layout =
        AppLayout.getCDIBuilder(behaviour)
            .withViewProvider(() -> provider)
            .withNavigationElementInfoProducer(new DefaultSpringNavigationElementInfoProducer())
            .withTitle(APP_TITLE)
            .withDesign(AppLayoutDesign.MATERIAL)
            .add("Home", VaadinIcons.HOME, MainView.class)
            .add(SOME_VIEW, VaadinIcons.GROUP, SomeView.class)
            .build();
    layout.addStyleName("left");

    setContent(layout);
  }
  
  @Override
  public void showView(View view) {
    holder.setContent((Component) view);
  }
}

In my LoginView I just have a password field that I read and check:

@ViewScope
@SpringView(name = LoginView.VIEW_NAME)
public class LoginView extends VerticalLayout implements View {
  public static final String VIEW_NAME = "login";

  @Autowired private Login loginService;

  public LoginView() {
    log.info("LoginView created!");
  }

  @PostConstruct
  private void init() {
    log.info("init view");

    setSizeFull();
    setMargin(false);
    setSpacing(false);

    Component loginForm = loginForm();
    addComponent(loginForm);
    setComponentAlignment(loginForm, Alignment.TOP_CENTER);
  }

  private Component loginForm() {
    VerticalLayout form = new VerticalLayout();
    form.setSizeUndefined();
    form.setMargin(true);
    Responsive.makeResponsive(form);

    PasswordField password = new PasswordField("Password");
    password.setIcon(VaadinIcons.LOCK);
    password.addStyleName(ValoTheme.TEXTFIELD_INLINE_ICON);

    Button login = new Button("Login");
    login.addStyleName("small primary");
    login.addClickListener(
        event -> {
          final String value = password.getValue();
          String h = // do something with value

          if (loginService.checkSomething(h)) {
            VaadinSession.getCurrent().setAttribute("auth", "logged in");
            getUI().getNavigator().navigateTo(NavigationView.VIEW_NAME);
          } else {
            password.setComponentError(new UserError("Wrong Password!", ContentMode.TEXT, ErrorLevel.ERROR));
            password.setValue("");
          }
        });

    VerticalLayout v = new VerticalLayout(password, login);
    v.setComponentAlignment(login, Alignment.BOTTOM_LEFT);

    Panel p = new Panel("Login", v);
    form.addComponent(p);

    return form;
  }
}

The other views are very simple:

@VaadinSessionScope
@SpringView(name = MainView.VIEW_NAME)
public class MainView extends VerticalLayout implements View {
  public static final String VIEW_NAME = "";

  @Override
  public void enter(ViewChangeEvent event) {
    HorizontalLayout mainLayout = new HorizontalLayout(new Label("Welcome!"));
    setSizeFull();
    addComponent(mainLayout);
  }
}

After successful login I see the created AppLayoutComponent (see MainUI class). Clicking on Home and SomeView
will show the views correctly, but the browser will ask me if I want to save my credentials/password on every click.

Do you have suggestions on how to improve the Login View handling?
Do you see why the Browser always asks for the “password save”/“store credentials” dialog box?

Thank you

2

There is little to none you can do about that as that is a browser-feature that is not controllable by the client side. See https://stackoverflow.com/questions/41217019/how-to-prevent-a-browser-from-storing-password

3

Hello Ronny,

thanks for your answer. I do not try to remove the password storing dialog. The Problem was
that the browser behaved like it was showing my LoginView, but it was not.
After removing getNavigator().navigateTo(getNavigator().getState()); in the updateContent() method
and changing the destination view in the login button the issue disapeard.
I do not know what was causing the issue.

4

I found a workaround for this. Adding a viewChangeListener seems to solve this issue, at least in my use case.

getNavigator().addViewChangeListener(event -> {return true;});

After adding this, the browser prompts only when it’s supposed to.