demo/iframe/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/login-zoid-component.frame.js"></script>
</head>

<body>

    <h3>Log in</h3>

    <!-- Container for our zoid component to render into -->

    <div id="container"></div>

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

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

    <script>

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

        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('#container');

    </script>

</body>