J'ai également eu ce problème. Cela pourrait être une autre raison. Cependant, je pourrais le résoudre en exécutant un nettoyage et une installation de Maven.

Lors de l'ajout d'un composant pour la première fois, la liste des dépendances internes du frontend peut ne pas avoir encore enregistré ce composant et donc ne pas charger les fichiers côté client associés à partir de npm au démarrage.

Dans ce cas, une simple installation maven est nécessaire pour mettre à jour la liste des dépendances frontales. Après cela, le serveur devrait charger automatiquement les fichiers respectifs et ainsi afficher correctement le composant.

Le LoginForm fonctionne pour moi. Votre problème est peut-être en dehors du code que vous avez montré ici. Nous aurions besoin de savoir comment vous avez instancié et affiché le LoginForm .

Exemple d'application

Voici un exemple d'application utilisant Vaadin 14.1.2. J'ai utilisé un nouveau projet de saveur "Plain Java Servlet" généré par la page de démarrage Vaadin . J'ai laissé le fichier POM intact. J'ai exécuté l'application en utilisant le serveur Jetty fourni et j'ai utilisé la version 79.0.3945.79 de Google Chrome (version officielle) (64 bits) pour macOS.

J'ai créé une classe User simple .

package work.basil.example;

import com.vaadin.flow.component.button.Button;
import com.vaadin.flow.component.login.AbstractLogin;
import com.vaadin.flow.component.login.LoginForm;
import com.vaadin.flow.component.notification.Notification;
import com.vaadin.flow.component.orderedlayout.VerticalLayout;
import com.vaadin.flow.router.Route;
import com.vaadin.flow.server.PWA;
import com.vaadin.flow.server.VaadinSession;

import java.util.Objects;
import java.util.Optional;

/**
 * The main view contains a button and a click listener.
 */
@Route ( "" )
@PWA ( name = "Project Base for Vaadin", shortName = "Project Base" )
public class MainView extends VerticalLayout
{

    public MainView ( )
    {
        this.display();
    }

    private void display ( )
    {
        if ( Objects.isNull( VaadinSession.getCurrent().getAttribute( User.class ) ) )
        {
            this.removeAll();
            this.add( this.makeLoginForm() );
        } else
        { // Else we have a User, so must be authenticated.
            this.removeAll();
            this.add( new ContentView() );
        }
    }

    private LoginForm makeLoginForm ( )
    {
        Authenticator authenticator = new Authenticator();
        LoginForm component = new LoginForm();
        component.addLoginListener( ( AbstractLogin.LoginEvent loginEvent ) -> {
            Optional < User > user = authenticator.authenticate( loginEvent.getUsername() , loginEvent.getPassword() );
            if ( user.isPresent() )
            {
                VaadinSession.getCurrent().setAttribute( User.class , user.get() );
                this.display();
            } else
            {
                component.setError( true );
            }
        } );
        return component;
    }
}

Et une classe Authenticator . Comment-out ou dans les lignes pour toujours passer l'utilisateur ou toujours refuser l'utilisateur, pour ce cas de démonstration simple.

package work.basil.example;

import com.vaadin.flow.component.html.H1;
import com.vaadin.flow.component.orderedlayout.VerticalLayout;

public class ContentView extends VerticalLayout
{
    public ContentView ( )
    {
        this.add( new H1( "Content goes here" ) );
    }
}

Une vue de contenu factice à afficher après que l'utilisateur a réussi authentifié.

package work.basil.example;

import java.util.Optional;
import java.util.UUID;

public class Authenticator
{
    Optional < User > authenticate ( String username , String password )
    {
        User user = new User( UUID.fromString( "76317e14-20a5-11ea-978f-2e728ce88125" ) , username );
        return Optional.of( user );
        //        return Optional.empty();
    }
}

Rassemblez le tout avec cette mise en page MainView .

package work.basil.example;

import java.util.Objects;
import java.util.UUID;

public class User
{
    private UUID id;
    private String username;

    public User ( UUID id , String username )
    {
        this.id = Objects.requireNonNull( id );
        this.username = Objects.requireNonNull( username );
    }

    // ------------|  Object  |---------------------------------
    @Override
    public boolean equals ( Object o )
    {
        if ( this == o ) return true;
        if ( o == null || getClass() != o.getClass() ) return false;
        User user = ( User ) o;
        return id.equals( user.id );
    }

    @Override
    public int hashCode ( )
    {
        return Objects.hash( id );
    }

    @Override
    public String toString ( )
    {
        return "User{ " +
                "id=" + id +
                " | username='" + username + '\'' +
                " }";
    }
}

Pour un "déconnexion", votre code n'a besoin que de supprimer l'objet User de la session et d'appeler à nouveau MainView :: display .