tegakituesday.com/templates/modal.html.tera

<dialog>
    <div class="welcome">
        <h1>Welcome to {{ "title" | i18n(lang=lang) }}!</h1>
        <p>In order to participate in challenges, you must be a member of a participating Discord server.</p>
        <h2>Join a participating server</h2>
    </div>
    <div class="participating">
        <h1>Participating servers</h1>
    </div>
    <div class="servers">
        {% for guild in settings.guilds %}
        {% if guild.hidden or not guild.invite %}{% continue %}{% endif %}
        <div id="{{ guild.id }}" {% if guild.recommended %} class="recommended"{% endif %}>
            <img src="https://cdn.discordapp.com/icons/{{ guild.id }}/{{ guild.icon }}.webp?size=96" alt="Server icon"> 
            <div class="name">{{ guild.name }}</div>
            <a href="https://discord.gg/{{ guild.invite }}" class="joinButton disabled">
                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="icon" style="height: 1em">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M6.75 12a.75.75 0 11-1.5 0 .75.75 0 011.5 0zM12.75 12a.75.75 0 11-1.5 0 .75.75 0 011.5 0zM18.75 12a.75.75 0 11-1.5 0 .75.75 0 011.5 0z" />
                </svg>
            </a>
            {% if guild.recommended %}
            <div class="label-wrapper">
                <div class="label">Recommended</div>
            </div>
            {% endif %}
        </div>
        {% endfor %}
    </div>
</dialog>
<script>
const dialog = document.querySelector("dialog");
// Fetch guilds
let guilds = null;
const getGuilds = async () => {
    let is_in_participating_server = false;
    if (guilds === null) {
        // Create the guilds dictionary object
        guilds = {};

        // Create an EventSource object to listen to SSE events
        const eventSource = new EventSource('/get_guilds');

        // Event listener for 'message' events
        eventSource.addEventListener('message', event => {
            // Parse the data received from the event
            const [id, is_member] = event.data.split(',');

            // Add the key-value pair to the guilds dictionary
            const joined = is_member === 'true';
            guilds[id] = joined;

            if (joined) {
                is_in_participating_server = true;
            }
            setJoined(id, joined);
        });

        // Function to block execution until SSE events are done
        function waitForSSE() {
            return new Promise(resolve => {
                // Event listener for 'error' event
                // For some reason errors when completing
                eventSource.addEventListener('error', () => {
                    eventSource.close();
                    resolve();
                });
            });
        }

        // Call the function to block execution until SSE events are done
        await waitForSSE()
    }
    return is_in_participating_server;
}
// Show server modal, both for welcome and server list
const showServers = async () => {
    dialog.showModal();
    // If the user is logged in, load the guild list
    // and check if they have joined the available servers
    await getGuilds();
};
// Switch Join button to Joined for server
const setJoined = (id, joined) => {
    element = document.getElementById(id);
    if (element === null) {
        return;
    }
    // Check if already set as joined
    a = element.querySelector("a");
    if (a === null) {
        return;
    }
    if (joined) {
        const button = document.createElement("button");
        button.tagName = "button";
        button.className = "joinButton";
        button.disabled = true;
        button.innerHTML = "Joined"
        a.replaceWith(button);
    } else {
        a.innerHTML = "Join";
        a.classList.remove("disabled");
    }
}

// Check for welcomed cookie
const welcomed = () => document.cookie.split("; ").includes("welcomed=true");
// Load welcome modal, check if it is necessary
const loadServers = async () => {
    if (welcomed()) {
        // If already welcomed, remove welcome text
        // in case user pressed Join servers button
        document.querySelector("dialog .welcome").style.display = "none";
    } else {
        if (!(await getGuilds())) {
            showServers();
        }
        // Even if already in participating server,
        // set welcomed cookie so we don't have to run this request again
        document.cookie = 'welcomed=true; expires=Tue, 19 Jan 2038 03:14:07 UTC; SameSite=Strict; path=/';
    }
};
if (welcomed()) {
    // TODO: Remove welcome text via cookie check in template?
    document.querySelector("dialog .welcome").style.display = "none";
} else {
    document.querySelector("dialog .participating").style.display = "none";
    // If not welcomed, see if welcome is necessary
    loadServers();
}
</script>