<html>

<head>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous">
    </script>
</head>

<body>

    <div id="successDialog" class="alert alert-success" role="alert" style="display: none;">
        <p>Your account has been activated! Welcome onboard.</p>
        <p>Log in <a href="login.html">here</a></p>
    </div>

    <div id="errorDialog" class="alert alert-danger" role="alert" style="display: none;">
        URL either invalid or account already activated.
    </div>

    <script src="../js/constants.js"></script>
    <script src="../js/utils.js"></script>

    <script>
        window.addEventListener("load", async function () {
            await activateAccount();
        });

        async function activateAccount() {
            const code = new URLSearchParams(window.location.search).get('q');
            if (!code) {
                document.getElementById('errorDialog').style.display = 'block';
                return;
            }

            const response = await fetch(`${API_URL}/persons/me/activation`, {
                method: 'POST',
                headers: createHeaders(null),
                body: JSON.stringify({
                    code
                }),
            });

            if (response.ok) {
                document.getElementById('successDialog').style.display = 'block';
            } else {
                document.getElementById('errorDialog').style.display = 'block';
            }
        }
    </script>

</body>

</html>