Vaadin LoginOverlay

user_15193706 0
Viewed 259

I am very new to both java and vaadin. Hope to be able to get some good tips on how I can improve my code. I would like to rewrite the code below to use Vaadin´s -> LoginOverlay instead of the code below.

As I said, I'm trying to learn so I have used the code for this example: https://www.youtube.com/watch?v=oMKks5AjaSQ&t=1158s

However, LoginOverlay seems to be a better way to display its login part through. As in this example: https://www.youtube.com/watch?v=pteip-kZm4M

So my question is how can you write the code below as a LoginOverlay.

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)
    );
}

}

I have only come this far to convert the code.

A clarification of the new part of the code. The code does not work. The part with loginOverlay.addLoginListener (event -> probably needs to be written in a different way. I'm using IntelliJ 2020.3.4 if that is of any help.

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);
      }
    }
}

}

enter image description here enter image description here Super grateful for all the help you can give. Many thanks to everyone who makes stackoverflow so amazing.

vaadin authentication
1 Answers

Copy-pasting code snippets with little idea about what the code does is a recipe for disaster, especially when it comes to security.

You have all kinds of errors in your code: misplaced braces, using variables that do not exist, and a RouterLink far from where it belongs.

I understand you've got to start somewhere. I would recommend starting from code that actually compiles, and then gradually adding things, testing what you have so far at every step.

Here are some tips for your LoginView2:

  1. Remove the whole loginOverlay.addLoginListener(...) code, including the authService.authenticate call and the RouterLink. Make sure that you can run the application at this point, and that you can see the login overlay.
  2. Add back the login listener, but for now just show a notification in it. Test that you can run the application, and that if you click Login, your notification is displayed.
loginOverlay.addLoginListener(event -> {
    Notification.show("This is working");
});

  1. Implement the authentication. You have a call to authService.authenticate(...) inside an if-statement, but the method does not return anything. Instead, it throws an exception if the authentication fails, hence the try-catch. This means that inside the try { ... } block, any code you put after the authService.authenticate(...) call is only executed if it did not throw an exception, i.e. if the authentication was successful.

  2. There are no username or password variables. The first YouTube video had defined these variables in the form of text fields. With the login overlay, it creates those fields for you, so how do you get the corresponding values from it?

user_33580290
Related