<!---
USAGE NOTE:
You cannot directly open this in the browser as ES modules are not supported on file://
Instead cd to packages/frontend dir (this and no other dir!) and run a local HTTP server with python:
% cd packages/frontend
% python3 -m http.server 8000
Then open http://localhost:8000/bin/github-cloud.html in your browser
-->
<html>
    <head>
        <meta charset="utf-8" />
        <title>Nango Github example page</title>
        <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
        <link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.indigo-pink.min.css" />
        <script defer src="https://code.getmdl.io/1.3.0/material.min.js"></script>
        <script type="module" src="/dist/index.js"></script>
    </head>
    <body>
        <noscript>JavaScript is required to proceed with the authentication.</noscript>

        <form action="#" id="public-key-container">
            <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label" style="margin-left: 20px">
                <input class="mdl-textfield__input" type="text" id="public-key" />
                <label class="mdl-textfield__label" for="sample3">Public Key</label>
            </div>
        </form>

        <p><button id="connect" class="mdl-button mdl-js-button mdl-button--raised mdl-button--colored" style="margin: 10px">Connect to Github</button></p>

        <p id="public-key-error" style="display: none; margin-left: 10px; color: red">
            Invalid Public Key. Please retrieve your Nango signup email to copy/paste the Public Key.
        </p>

        <div style="margin: 10px">
            <p id="result"></p>
        </div>

        <script type="module">
            import Nango from '/dist/index.js';

            var link = document.getElementById('connect');
            var publicKeyInput = document.getElementById('public-key');
            var publicKeyInputError = document.getElementById('public-key-error');

            link.addEventListener(
                'click',
                () => {
                    var publicKey = publicKeyInput.value;

                    if (!/^[0-9A-F]{8}-[0-9A-F]{4}-4[0-9A-F]{3}-[89AB][0-9A-F]{3}-[0-9A-F]{12}$/i.test(publicKey)) {
                        publicKeyInputError.style.display = 'block';
                        return;
                    }

                    var nango = new Nango({ publicKey: publicKey });
                    nango
                        .auth('github-cloud', '1')
                        .then((result) => {
                            var resultElement = document.getElementById('result');
                            resultElement.innerHTML = `SUCCESS: ${JSON.stringify(result)}`;
                        })
                        .catch((error) => {
                            console.log('Error');
                            var resultElement = document.getElementById('result');
                            resultElement.innerHTML = `ERROR: ${JSON.stringify(error)}`;
                        });
                },
                false
            );

            publicKeyInput.addEventListener('input', () => {
                publicKeyInputError.style.display = 'none';
            });
        </script>
    </body>
</html>