Redirect to login after successful registration

Question

I have a Vaadin Spring Boot frontend and want to redirect users to the login page after they entered their data in a registration form, clicked "sign up" and the backend returned a 201 created. I implemented code for it and it works, but only after the user clicks on "sign up" a second time. After the first click their data gets sent to the backend and stored in my database, but it takes a second click to redirect them to the login page.

private UI ui;

private HorizontalLayout createButtonLayout() {
        HorizontalLayout layout = new HorizontalLayout();
        layout.addClassName("column-layout");

        Button registerButton = new Button("Registrieren");
        registerButton.addClickListener(event -> {
            String email = emailField.getValue();
            String password = passwordField.getValue();
            String confirmPassword = confirmPasswordField.getValue();

            sendRegistrationRequest(email, password, confirmPassword);
        });

        registerButton.getStyle().set("cursor", "pointer");
        registerButton.addThemeName("primary");
        layout.add(registerButton);
        return layout;
    }

public void sendRegistrationRequest(String email, String password) {
        JsonObject payload = Json.createObject();
        payload.put("email", email);
        payload.put("password", password);

        try {
            HttpClient httpClient = HttpClient.newHttpClient();
            String registrationEndpoint = "/users/registration";
            String apiUrl = apiBaseUrl + registrationEndpoint;
            HttpRequest request = HttpRequest.newBuilder()
                    .uri(URI.create(apiUrl))
                    .header("Content-Type", "application/json")
                    .POST(HttpRequest.BodyPublishers.ofString(payload.toJson()))
                    .build();

            httpClient.sendAsync(request, HttpResponse.BodyHandlers.ofString())
                    .thenApply(response -> {
                        log.info(response.statusCode() + " " + response.body());
                        this.ui.access(() -> handleResponse(response.statusCode()));
                        return null;
                    })
                    .exceptionally(e -> {
                        onError("Netzwerkfehler: " + e.getMessage());
                        return null;
                    });
        } catch (Exception e) {
            onError("Fehler bei der Registrierung: " + e.getMessage());
        }
}

private void handleResponse(int statusCode) {
        if (statusCode == 201) {
            Notification.show("Registrierung erfolgreich.");
            ui.navigate(LoginView.class);
        } else if (statusCode == 400) {
            Notification.show("Ungültige Eingaben. Bitte überprüfen Sie Ihre Daten.");
        } else {
            Notification.show("Registrierung fehlgeschlagen. Fehlercode: " + statusCode);
        }
    }

Answer 1

Below are some suggestions you can try:

1. Disable the button after the first click
2. Wrap up all the UI-related operations in ui.access()
3. Navigation should happen immediately after successful registration, requiring only one click

Please try the above points and see if your application works.