Vaadin开发中如何将现有登录视图重构为LoginOverlay实现

• 作为Java与Vaadin开发新手，希望优化现有登录模块代码，计划将原有自定义Div实现的登录视图，重写为Vaadin官方提供的LoginOverlay组件实现
• 学习过程中参考了相关技术教学示例，确认LoginOverlay是更适配登录场景的组件实现方案
• 目前仅完成初步代码转换，运行存在异常，核心问题为loginOverlay.addLoginListener的逻辑写法不正确，所用开发环境为IntelliJ 2020.3.4
• 需要可正常运行的实现方法指导

原有可正常运行的登录代码 #

public class LoginView extends Div {

    public LoginView(AuthService authService) {
        setId("login-view");
        var username = new TextField("Username");
        var password = new PasswordField("Password");
        add(
                new H1("Welcome"),
                username,
                password,
                new Button("Login", event -> {
                    try {
                        authService.authenticate(username.getValue(), password.getValue());
                        UI.getCurrent().navigate("home");
                    } catch (AuthService.AuthException e) {
                        Notification.show("Wrong credentials.");
                    }
                }),
                new RouterLink("Register", RegisterView.class)
        );
    }
}

初步转换后存在运行问题的代码 #

public class LoginView2 extends Composite<LoginOverlay> {

    public LoginView2(AuthService authService) {
        setId("login-view");

        LoginOverlay loginOverlay = getContent();
        loginOverlay.setTitle("Welcom");
        loginOverlay.setDescription("Manage your business tasks");
        loginOverlay.setOpened(true);

        loginOverlay.addLoginListener(event -> {try {
            if(authService.authenticate(username.getValue(), password.getValue());
                        UI.getCurrent().navigate("home");
                    } catch (AuthService.AuthException e) {
                        Notification.show("Wrong credentials.");
                    }
                }),
                new RouterLink("Register", RegisterView.class);
          }
        }
    }
}

上述代码存在语法结构错乱、未定义变量引用、事件回调逻辑拆分错误的问题，调试过程中伴随多处编译与运行报错。

内容的提问来源于stack exchange，提问作者undressed