<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:th="https://www.thymeleaf.org">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Spring Authorization Server sample</title>
    <link rel="stylesheet" href="/webjars/bootstrap/css/bootstrap.css" th:href="@{/webjars/bootstrap/css/bootstrap.css}" />
</head>
<body>
<div th:replace="~{page-templates :: navbar}"></div>
<div class="container">
    <div class="row py-5">
        <div class="col-md-5">
            <h2>Device Activation</h2>
            <p>Please visit <a th:href="${verificationUri}" th:text="${verificationUri?.replaceFirst('https?://', '')}"></a> on another device to continue.</p>
            <p class="mt-5">Activation Code</p>
            <div class="card text-bg-light">
                <span class="card-body" style="font-size: 2em; letter-spacing: 2rem" th:text="${userCode}"></span>
                <form id="authorize-form" th:action="@{/device_authorize}" method="post">
                    <input type="hidden" id="device_code" name="device_code" th:value="${deviceCode}" />
                </form>
            </div>
        </div>
        <div class="col-md-7">
            <img src="/assets/img/devices.png" th:src="@{/assets/img/devices.png}" class="img-responsive" alt="Devices">
        </div>
    </div>
</div>
<script src="/webjars/bootstrap/js/bootstrap.bundle.min.js" th:src="@{/webjars/bootstrap/js/bootstrap.bundle.min.js}"></script>
<script src="/webjars/jquery/jquery.min.js" th:src="@{/webjars/jquery/jquery.min.js}"></script>
<script src="/webjars/popper.js/umd/popper.js" th:src="@{/webjars/popper.js/umd/popper.js}"></script>
<script type="text/javascript">
    function authorize() {
        let deviceCode = $('#device_code').val();
        let csrfToken = $('[name=_csrf]').val();
        if (deviceCode) {
            $.ajax({
                url: '/device_authorize',
                method: 'POST',
                data: {
                    device_code: deviceCode,
                    _csrf: csrfToken
                },
                timeout: 0
            }).fail((err) => {
                let response = err.responseJSON;
                if (response.errorCode === 'authorization_pending') {
                    console.log('authorization pending, continuing to poll...');
                } else if (response.errorCode === 'slow_down') {
                    console.log('slowing down...');
                    slowDown();
                } else if (response.errorCode === 'token_expired') {
                    console.log('token expired, stopping...');
                    clear();
                    location.href = '/';
                } else if (response.errorCode === 'access_denied') {
                    console.log('access denied, stopping...');
                    clear();
                    location.href = '/';
                }
            }).done(() => window.location.href = '/device_authorized');
        }
    }

    function schedule() {
        authorize.handler = window.setInterval(authorize, authorize.interval * 1000);
    }

    function clear() {
        if (authorize.handler !== null) {
            window.clearInterval(authorize.handler);
        }
    }

    function slowDown() {
        authorize.interval += 5;
        clear();
        schedule();
    }

    authorize.interval = 5;
    authorize.handler = null;

    window.addEventListener('load', schedule);
</script>
</body>
</html>
