Call JavaScript function by pressing button

Flow
1

This is my code in Vaadin so far:

@JsModule("test.js")
public class TestPage extends Composite<VerticalLayout> {

    private Button buttonPrimary0 = new Button();

    public TestPage() {

            buttonPrimary0.setText("Create token");
            buttonPrimary0.setWidthFull();
            buttonPrimary0.addThemeVariants(ButtonVariant.LUMO_PRIMARY);
            layoutColumn2.add(buttonPrimary0);
            buttonPrimary0.addClickListener(e -> {
                    UI.getCurrent().getPage().executeJs("register");
                });
        }
}

This is the JavaScript file which needs to attached to the button (already done).
The function ´register´ should be performed and fetch server-side data. Of course these
information should be printed out.

    this.register = function(webAuthnRegisterRequest) {

        //some code
        //completely irrelevant

        }

You can find here the full source code: https://github.com/privacyidea/webauthn-client/blob/master/pi-webauthn.js

2

What actually happens when you click the button?

3

Nothing

4

Note you could do as well

        buttonPrimary0.addClickListener(e -> {
                getElement().executeJs("register($0);", webAuthnRegisterRequest);
            });
5

Just noting that your function needs a parameter

6

Also I am not sure if your import is right

7

It should be perhaps

@JsModule(“./test.js”)

If the file is

frontend/test.js

8

What this js function is supposed to do. I am just wondering that you have a strange parameter there for something called from serverside

9

The file is in frontend/src/test.js

10

Ok, then you need to import it

@JsModule(“./src/test.js”)

11

The data should be fetched from server url.

12

Which data?

13

Check here an example of JS file integration

14
15

JSON parameters

16

You probably need to define the register function in window

17

The line UI.getCurrent().getPage().executeJs(“register($0);”, webAuthnRegisterRequest); is the problem. The 2nd parameter webAuthnRegisterRequest is marked red.

18

That means you don’t have a variable called webAuthnRegisterRequest on the server.

19

It is defined in the Javascript file.

20

Background: I need a WebAuthn token to be created on a privacyIDEA server. For this process I need some data. The JavaScript function does exactly this job. It fetches the required data and send it back to me.