LoginView route

General
1

Hi,

I discover vaadin last nigth and I’m facing a little problem while I’m trying to use a LoginOverlay component with the following code :

LoginView

package com.example.application.views.login;

import org.slf4j.LoggerFactory;

import com.vaadin.flow.component.UI;
import com.vaadin.flow.component.html.Label;
import com.vaadin.flow.component.login.LoginI18n;
import com.vaadin.flow.component.login.LoginOverlay;
import com.vaadin.flow.component.orderedlayout.VerticalLayout;
import com.vaadin.flow.router.BeforeEvent;
import com.vaadin.flow.router.HasUrlParameter;
import com.vaadin.flow.router.OptionalParameter;
import com.vaadin.flow.router.Route;

import ch.qos.logback.classic.Logger;

@Route("login")
public class LoginView extends VerticalLayout implements HasUrlParameter<String> {
	
	private Logger logger = (Logger) LoggerFactory.getLogger(LoginView.class);
	
	private Label logoutLabel;

	public LoginView() {
		LoginOverlay component = new LoginOverlay();
		component.addLoginListener(e -> {
		    boolean isAuthenticated = true;
		    if (isAuthenticated) {
		    	 logger.info( "User authenticated");
		    	 UI.getCurrent().navigate("about");		    	 
		    } else {
		        component.setError(true);
		    }
		});
		LoginI18n i18n = LoginI18n.createDefault();
		i18n.setAdditionalInformation("To close the login form submit non-empty username and password");
		component.setI18n(i18n);
		add(component);				
		
	}


	@Override
	public void setParameter(BeforeEvent event, @OptionalParameter String parameter) {
		if (parameter != null && parameter.contentEquals("loggedout")) {
			logoutLabel.setVisible(true);
			logoutLabel.setText("You have been successfully logged out");
		}
	}
}

here is my main view code :

package com.example.application.views.about;

import java.util.ArrayList;
import java.util.List;

import com.example.application.views.main.MainView;
import com.example.entity.Address;
import com.example.entity.Person;
import com.vaadin.flow.component.charts.Chart;
import com.vaadin.flow.component.charts.model.ChartType;
import com.vaadin.flow.component.charts.model.Configuration;
import com.vaadin.flow.component.charts.model.Crosshair;
import com.vaadin.flow.component.charts.model.ListSeries;
import com.vaadin.flow.component.charts.model.Tooltip;
import com.vaadin.flow.component.charts.model.XAxis;
import com.vaadin.flow.component.charts.model.YAxis;
import com.vaadin.flow.component.dependency.CssImport;
import com.vaadin.flow.component.grid.Grid;
import com.vaadin.flow.component.html.Div;
import com.vaadin.flow.router.PageTitle;
import com.vaadin.flow.router.Route;

@Route(value = "about", layout = MainView.class)
@PageTitle("About")
@CssImport("./styles/views/about/about-view.css")
public class AboutView extends Div {

    public AboutView() {
        setId("about-view");
        List<Person> personList = new ArrayList<Person>();

        personList.add(new Person(100, "Lucas", "Kane", 68,
                new Address("12080", "Washington"), "127-942-237"));
        personList.add(new Person(101, "Peter", "Buchanan", 38,
                new Address("93849", "New York"), "201-793-488"));
        personList.add(new Person(102, "Samuel", "Lee", 53,
                new Address("86829", "New York"), "043-713-538"));
        personList.add(new Person(103, "Anton", "Ross", 37,
                new Address("63521", "New York"), "150-813-6462"));
        personList.add(new Person(104, "Aaron", "Atkinson", 18,
                new Address("25415", "Washington"), "321-679-8544"));
        personList.add(new Person(105, "Jack", "Woodward", 28,
                new Address("95632", "New York"), "187-338-588"));

        Grid<Person> grid = new Grid<>(Person.class);
        grid.setItems(personList);

        grid.removeColumnByKey("id");

        // The Grid<>(Person.class) sorts the properties and in order to
        // reorder the properties we use the 'setColumns' method.
        grid.setColumns("firstName", "lastName", "age", "phoneNumber");
        add(grid);
        add(createChart());
        
    }

    private Chart createChart () {
        Chart chart = new Chart();

        Configuration configuration = chart.getConfiguration();
        configuration.setTitle("Monthly Average Rainfall");
        configuration.setSubTitle("Source: WorldClimate.com");
        chart.getConfiguration().getChart().setType(ChartType.COLUMN);

        configuration.addSeries(new ListSeries("Tokyo", 49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4));
        configuration.addSeries(new ListSeries("New York", 83.6, 78.8, 98.5, 93.4, 106.0, 84.5, 105.0, 104.3, 91.2, 83.5, 106.6, 92.3));
        configuration.addSeries(new ListSeries("London", 48.9, 38.8, 39.3, 41.4, 47.0, 48.3, 59.0, 59.6, 52.4, 65.2, 59.3, 51.2));
        configuration.addSeries(new ListSeries("Berlin", 42.4, 33.2, 34.5, 39.7, 52.6, 75.5, 57.4, 60.4, 47.6, 39.1, 46.8, 51.1));

        XAxis x = new XAxis();
        x.setCrosshair(new Crosshair());
        x.setCategories("Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug",
                "Sep", "Oct", "Nov", "Dec");
        configuration.addxAxis(x);

        YAxis y = new YAxis();
        y.setMin(0);
        y.setTitle("Rainfall (mm)");
        configuration.addyAxis(y);

        Tooltip tooltip = new Tooltip();
        tooltip.setShared(true);
        configuration.setTooltip(tooltip);

        return (chart);
    }
}

The web page is never routed to about view how can I solve it ?

2

I think you have to use one of the navigation lifecycle methods to “reroute” instead of performing the navigation from the constructor. See https://vaadin.com/docs/v14/flow/routing/tutorial-routing-lifecycle.html#rerouting. Not sure if that helps, but please let me know in any case.

3

Hi Alejandro,

I solved my issue with the following code :

package com.example.application.model.login;

import java.util.Optional;

import com.example.application.Authenticator;
import com.example.application.model.Person;
import com.example.application.views.main.MainView;
import com.vaadin.flow.component.UI;
import com.vaadin.flow.component.dependency.CssImport;
import com.vaadin.flow.component.html.Div;
import com.vaadin.flow.component.login.AbstractLogin;
import com.vaadin.flow.component.login.LoginI18n;
import com.vaadin.flow.component.login.LoginOverlay;
import com.vaadin.flow.router.PageTitle;
import com.vaadin.flow.router.Route;
import com.vaadin.flow.server.VaadinSession;

@Route(value = “login”, layout = MainView.class)
@PageTitle(“Login”)
@CssImport(“./styles/views/login/login-view.css”)
public class LoginView extends Div {

public LoginView () {
    LoginOverlay component = new LoginOverlay();
	component.setOpened(true);
	LoginI18n i18n = LoginI18n.createDefault();
	i18n.setAdditionalInformation("To close the login form submit non-empty username and password");
	component.setI18n(i18n);
	component.addLoginListener( ( AbstractLogin.LoginEvent loginEvent ) -> {
		Authenticator authenticator = new Authenticator(); 
        Optional<Person> user = authenticator.authenticate( loginEvent.getUsername() , loginEvent.getPassword() );
        if ( user.isPresent() )
        {
            VaadinSession.getCurrent().setAttribute(user.get().getFirstName() + "" + user.get().getLastName(), user.get() );
            move(component);
        } else
        {
            component.setError( true );
        }
    } );
	add(component);	
}


private void move (LoginOverlay compoent) {
	compoent.close();
	UI.getCurrent().navigate("");
	
}

private boolean hasChanges() {
    // no-op implementation
    return true;
}

}

Thanks !