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="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">Join</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 () => {
    if (guilds === null) {
        const response = await fetch("/get_guilds");
        const raw_json = await response.text()
        guilds = JSON.parse(raw_json);
    }
    return guilds;
}
// 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
    const guilds = await getGuilds();
    Object.keys(guilds).forEach(id => {
        if (guilds[id]) {
            const element = document.getElementById(id);
            if (element !== null) {
                const button = document.createElement("button");
                button.tagName = "button";
                button.className = "joinButton";
                button.disabled = true;
                button.innerHTML = "Joined"
                element.querySelector("a").replaceWith(button);
            }
        }
    })
};
// 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 {
        let is_in_participating_server = false;
        const guilds = await getGuilds();
        const ids = Object.keys(guilds);
        for (let i = 0; i < ids.length; i++) {
            if (guilds[ids[i]]) {
                is_in_participating_server = true;
                break;
            }
        }
        if (!is_in_participating_server) {
            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 {
    // If not welcomed, see if welcome is necessary
    loadServers();
}
</script>