demo/popup/index.htm


<head>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-material-design/4.0.2/bootstrap-material-design.css" />
    <link rel="stylesheet" href="./index.css" />

    <script src="../../dist/#-zoid-component.popup.js"></script>
</head>

<body>

    <h3>Log in</h3>

    <!-- Button to open the popup -->

    <button id="popupLogin" class="btn btn-primary">Popup Log In</button>

    <!-- Container to display the result of the login call -->

    <div id="result"></div>

    <script>

        // To render a popup we need to wait for a click event

        document.querySelector('#popupLogin').addEventListener('click', function () {

            // Hide the button

            document.querySelector('#popupLogin').style.display = 'none';

            // Render the component and pass down props to the popup

            zoidlogin.LoginZoidComponent({

                env: 'demo',

                prefilledEmail: 'foo@bar.com',

                // When the iframe window calls `window.xprops.onLogin(email)` this callback will be called

                onLogin: function(email) {

                    // Display the email address that was used to log in

                    document.querySelector('#result').innerText = email + ' logged in!';
                }

            }).render();
        });

    </script>

</body>