{#include base}
    {#title}Login passwordless{/title}
    {#add-header}
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script charset="UTF-8" src="/js/webauthn-debug.js" type="text/javascript"></script>
    <style>


        .code {
            white-space: pre;
        }

        .step {
            display: none;
        }
    </style>
    {/add-header}

<div class="container">
<div class="section">
    <div class="col s12 m7">
        <div class="card horizontal">
            <div class="card-stacked">
                <div class="card-content">
                    <h6>Create a new credential or use an existing one</h6>
                    <p>First the user enters their username:</p>
                    <input id="userName" placeholder="User name"/><br/>

                    <p>If they are a new user, they need to generate a new credential and register it with the application</p>
                    <button class="nextBtn waves-effect waves-light btn full-width" id="register">Register</button>

                    <p>If they are a returning user, their authenticator must prove they own the credential.</p>
                    <button class="nextBtn waves-effect waves-light btn full-width" id="login">Login</button>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="section step" id="server1-request">
    <div class="col s12 m7">
        <div class="card horizontal">
            <div class="card-stacked">
                <div class="card-content">
                    <h6>Request a challenge</h6>
                    <p>The interaction starts with an AJAX call.</p>
                    <div class="code">POST <span id="server1-url"></span>
                        <div id="server1-call"></div>
                    </div>
                    <button class="nextBtn waves-effect waves-light btn full-width">Request challenge</button>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="section step" id="server1-response">
    <div class="col s12 m7">
        <div class="card horizontal">
            <div class="card-stacked">
                <div class="card-content">
                    <h6>The challenge</h6>
                    <p>The server prepares a challenge for the browser to sign.</p>
                    <div class="code" id="server1-response-body"></div>
                    <button class="nextBtn waves-effect waves-light btn full-width">Continue</button>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="section step" id="navigator-request">
    <div class="col s12 m7">
        <div class="card horizontal">
            <div class="card-stacked">
                <div class="card-content">
                    <h6>WebAuthn API</h6>
                    <p>The challenge is passed to the browser call:</p>
                    <div class="code" id="navigator-call"></div>
                    <button class="nextBtn waves-effect waves-light btn full-width">Call Webauthn API</button>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="section step" id="navigator-response">
    <div class="col s12 m7">
        <div class="card horizontal">
            <div class="card-stacked">
                <div class="card-content">
                    <h6>Attestation</h6>
                    Which responds:
                    <div class="code" id="navigator-response-body"></div>
                    The <strong>response.clientDataJSON</strong> are base64 encoded:
                    <div class="code" id="navigator-clientDataJSON"></div>
                    <button class="nextBtn waves-effect waves-light btn full-width">Finish the interaction</button>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="section step" id="errors">
    <div class="col s12 m7">
        <div class="card horizontal">
            <div class="card-stacked">
                <div class="card-content">
                    <div id="result"></div>
                    <div id="trace"></div>
                </div>
            </div>
        </div>
    </div>
</div>
</div>

<form action="#" method="POST">
    <input name="sessionId" type="hidden" value="{sessionId}">
    <div id="form-generated"></div>
</form>
</div>

<script type="text/javascript">
    function tryDecodeBase64(str) {
        try {
            return atob(str);
        } catch (e) {
            return e + "";
        }
    }

    function tracer(stage, params) {
        console.log(stage, params)

        switch (stage) {
            case "register-request":
                return traceRegisterRequest(params);
            case "register-response":
                return traceRegisterResponse(params);
            case "credentials-create-request":
                return traceCredentialsCreateRequest(params);
            case "credentials-create-response":
                return traceCredentialsCreateResponse(params);
            case "login-request":
                return traceLoginRequest(params);
            case "login-response":
                return traceLoginResponse(params);
            case "credentials-get-request":
                return traceCredentialsGetRequest(params);
            case "credentials-get-response":
                return traceCredentialsGetResponse(params);
            default:
                return traceGeneric(stage, params);
        }
    }

    function continueButton(where, result) {
        const button = $("button", $(where)).show();
        if (button.length) {
            return new Promise((resolve, reject) => {
                button.click(() => {
                    resolve(result);
                    $(button).hide();
                });
            });
        } else {
            return Promise.resolve(result);
        }
    }

    function traceRegisterRequest(params) {
        $(".step").hide();
        $("#server1-request").show();
        $("#server1-url").html(params.url)
        $("#server1-call").html(JSON.stringify(params.body, null, 2));
        return continueButton("#server1-request", params);
    }

    function traceRegisterResponse(params) {
        $("#server1-response").show();
        $("#server1-response-body").html(JSON.stringify(params, null, 2));
        return continueButton("#server1-response", params);
    }

    function traceLoginRequest(params) {
        $(".step").hide();
        $("#server1-request").show();
        $("#server1-url").html(params.url)
        $("#server1-call").html(JSON.stringify(params.body, null, 2));
        return continueButton("#server1-request", params);
    }

    function traceLoginResponse(params) {
        $("#server1-response").show();
        $("#server1-response-body").html(JSON.stringify(params, null, 2));
        return continueButton("#server1-response", params);
    }

    function traceCredentialsCreateRequest(challenge) {
        $("#navigator-request").show();
        $("#navigator-call").html("navigator.credentials.create({ publicKey: ... });");
        return continueButton("#navigator-request", challenge);
    }

    function traceCredentialsCreateResponse(response) {
        $("#navigator-response").show();
        $("#navigator-response-body").html(JSON.stringify(response, null, 2));
        $("#navigator-clientDataJSON").html(JSON.stringify(JSON.parse(tryDecodeBase64(response.response.clientDataJSON)), null, 2));
        return continueButton("#navigator-response", response);
    }

    function traceCredentialsGetRequest(challenge) {
        $("#navigator-request").show();
        $("#navigator-call").html("navigator.credentials.get({ publicKey: ... });");
        return continueButton("#navigator-request", challenge);
    }

    function traceCredentialsGetResponse(response) {
        $("#navigator-response").show();
        $("#navigator-response-body").html(JSON.stringify(response, null, 2));
        $("#navigator-clientDataJSON").html(JSON.stringify(JSON.parse(tryDecodeBase64(response.response.clientDataJSON)), null, 2));
        return continueButton("#navigator-response", response);
    }

    function traceGeneric(stage, params) {
        const content = JSON.stringify(params);
        const trace = $("<div class='container'></div>").attr("id", stage).html(content).appendTo("#trace");
        return continueButton(trace, params);
    }

    function form(action, fields) {
        const $form = $("form").attr("action", action);
        const $fields = $("#form-generated", $form).empty()
        for ([key, value] of Object.entries(fields)) {
            console.log(key);
            $("<input type='hidden'>").attr("name", key).val(value).appendTo($fields)
        }
        $form.submit();
    }

    const webAuthn = new WebAuthn({
        callbackPath: '/q/webauthn/callback',
        registerPath: '/q/webauthn/register',
        loginPath: '/q/webauthn/login',
        // loginCallbackPath: '/webauthn/login',
        // registerCallbackPath: '/webauthn/register',
        debuggingFunction: tracer
    });

    const result = document.getElementById('result');

    const loginButton = document.getElementById('login');

    loginButton.onclick = () => {
        var userName = document.getElementById('userName').value;
        result.replaceChildren();
        webAuthn.loginOnly({ name: userName })
            .then(body => {
                form("/auth/passwordless/login", {
                    'webAuthnId': body.id,
                    'webAuthnRawId': body.rawId,
                    'webAuthnResponseClientDataJSON': body.response.clientDataJSON,
                    'webAuthnResponseAuthenticatorData': body.response.authenticatorData,
                    'webAuthnResponseSignature': body.response.signature,
                    'webAuthnResponseUserHandle': body.response.userHandle,
                    'webAuthnType': body.type
                });
            })
            .catch(err => {
                $("#errors").show()
                $("#result").html("Login failed: " + err);
                console.error(err);
            });
        return false;
    };

    const registerButton = document.getElementById('register');

    registerButton.onclick = () => {
        var userName = document.getElementById('userName').value;
        // var firstName = document.getElementById('firstName').value;
        // var lastName = document.getElementById('lastName').value;
        result.replaceChildren();


        webAuthn.registerOnly({ name: userName, displayName: userName /*firstName + " " + lastName*/})
            .then(body => {
                form("/auth/passwordless/register", {
                    'webAuthnId': body.id,
                    'webAuthnRawId': body.rawId,
                    'webAuthnResponseAttestationObject': body.response.attestationObject,
                    'webAuthnResponseClientDataJSON': body.response.clientDataJSON,
                    'webAuthnType': body.type
                });
            })
            .catch(err => {
                $("#errors").show()
                $("#result").html("Registration failed: " + err);
                console.error(err);
            });
        return false;
    };
</script>
{/include}