tetratto/crates/app/src/public/html/profile/settings.html

{% extends "root.html" %} {% block head %}
<title>Settings - {{ config.name }}</title>
{% endblock %} {% block body %} {{ macros::nav() }}
<main class="flex flex-col gap-2">
    {% if profile.id != user.id %}
    <div class="card w-full red flex gap-2 items-center">
        {{ icon "skull" }}
        <b>Editing other user's settings! Please be careful.</b>
    </div>
    {% endif %}

    <div class="pillmenu">
        <a data-tab-button="account" class="active" href="#/account">
            {{ icon "smile" }}
            <span>{{ text "settings:tab.account" }}</span>
        </a>

        <a data-tab-button="profile" href="#/profile">
            {{ icon "user-round" }}
            <span>{{ text "settings:tab.profile" }}</span>
        </a>

        <a data-tab-button="theme" href="#/theme">
            {{ icon "paint-bucket" }}
            <span>{{ text "settings:tab.theme" }}</span>
        </a>

        <a data-tab-button="sessions" href="#/sessions">
            {{ icon "cookie" }}
            <span>{{ text "settings:tab.sessions" }}</span>
        </a>

        <a data-tab-button="connections" href="#/connections">
            {{ icon "cable" }}
            <span>{{ text "settings:tab.connections" }}</span>
        </a>
    </div>

    <div class="w-full flex flex-col gap-2" data-tab="account">
        <div class="card tertiary flex flex-col gap-2" id="account_settings">
            {% if config.stripe %}
            <div class="card-nest" ui_ident="supporter_card">
                <div class="card small flex items-center gap-2">
                    {{ icon "star" }}
                    <b>Supporter status</b>
                </div>

                <div class="card">
                    {% if is_supporter %}
                    <p>You <b>are</b> a supporter! Thank you for all that you do. You can manage your billing information below. <b>Please use your email address you supplied when paying to login to the billing portal.</b></p>
                    <a href="{{ config.stripe.billing_portal_url }}" class="button quaternary" target="_blank">Manage billing</a>
                    {% else %}
                    <p>You're <b>not</b> currently a supporter! No pressure, but it helps us do some pretty cool things! As a supporter, you'll get:</p>

                    <ul style="margin-bottom: 1rem">
                        <li>Vanity badge on profile</li>
                        <li>Ability to upload gif avatars/banners</li>
                        <li>Be an admin/owner of up to 10 communities</li>
                        <li>Use custom CSS on your profile</li>
                        <li>Ability to use community emojis outside of their community <b>(soon)</b></li>
                        <li>Ability to upload and use gif emojis <b>(soon)</b></li>
                    </ul>

                    <a href="{{ config.stripe.payment_link }}?client_reference_id={{ user.id }}" class="button" target="_blank">Become a supporter</a>
                    <span class="fade">Please use your <b>real email</b> when completing payment. It is required to manage your billing settings.</span>
                    {% endif %}
                </div>
            </div>
            {% endif %}

            <div class="card-nest" ui_ident="home_timeline">
                <div class="card small">
                    <b>Home timeline</b>
                </div>

                <div class="card">
                    <select
                        onchange="set_setting_field('default_timeline', event.target.selectedOptions[0].value)"
                    >
                        <option
                            value="MyCommunities"
                            selected="{% if home == '/' %}true{% else %}false{% endif %}"
                        >
                            My communities
                        </option>
                        <option
                            value="MyCommunitiesQuestions"
                            selected="{% if home == '/questions' %}true{% else %}false{% endif %}"
                        >
                            My communities (questions)
                        </option>

                        <option
                            value="PopularPosts"
                            selected="{% if home == '/popular' %}true{% else %}false{% endif %}"
                        >
                            Popular
                        </option>
                        <option
                            value="PopularQuestions"
                            selected="{% if home == '/popular/questions' %}true{% else %}false{% endif %}"
                        >
                            Popular (questions)
                        </option>

                        <option
                            value="FollowingPosts"
                            selected="{% if home == '/following' %}true{% else %}false{% endif %}"
                        >
                            Following
                        </option>
                        <option
                            value="FollowingQuestions"
                            selected="{% if home == '/following/questions' %}true{% else %}false{% endif %}"
                        >
                            Following (questions)
                        </option>

                        <option
                            value="AllPosts"
                            selected="{% if home == '/all' %}true{% else %}false{% endif %}"
                        >
                            All
                        </option>
                        <option
                            value="AllQuestions"
                            selected="{% if home == '/all/questions' %}true{% else %}false{% endif %}"
                        >
                            All (questions)
                        </option>
                    </select>

                    <span class="fade"
                        >This represents the timeline the home button takes you
                        to.</span
                    >
                </div>
            </div>

            <div class="card-nest desktop" ui_ident="notifications">
                <div class="card small">
                    <b>Notifications</b>
                </div>

                <div class="card flex flex-col gap-2">
                    <button id="notifications_button"></button>
                    <span class="fade">Notifications require you to keep {{ config.name }} open in your browser for real-time updates. This setting does not sync across browsers.</span>
                </div>
            </div>

            <script>
                setTimeout(() => {
                    trigger("me::notifications_button", [document.getElementById("notifications_button")]);
                }, 150)
            </script>

            <div class="card-nest" ui_ident="change_password">
                <div class="card small">
                    <b>{{ text "settings:label.change_password" }}</b>
                </div>

                <form
                    class="card flex flex-col gap-2"
                    onsubmit="change_password(event)"
                >
                    <div class="flex flex-col gap-1">
                        <label for="current_password"
                            >{{ text "settings:label.current_password" }}</label
                        >
                        <input
                            type="password"
                            name="current_password"
                            id="current_password"
                            placeholder="current_password"
                            required
                            minlength="6"
                            autocomplete="off"
                        />
                    </div>

                    <div class="flex flex-col gap-1">
                        <label for="new_password"
                            >{{ text "settings:label.new_password" }}</label
                        >
                        <input
                            type="password"
                            name="new_password"
                            id="new_password"
                            placeholder="new_password"
                            required
                            minlength="6"
                            autocomplete="off"
                        />
                    </div>

                    <button class="primary">
                        {{ icon "check" }}
                        <span>{{ text "general:action.save" }}</span>
                    </button>
                </form>
            </div>

            <div class="card-nest" ui_ident="change_username">
                <div class="card small">
                    <b>{{ text "settings:label.change_username" }}</b>
                </div>

                <form
                    class="card flex flex-col gap-2"
                    onsubmit="change_username(event)"
                >
                    <div class="flex flex-col gap-1">
                        <label for="new_username"
                            >{{ text "settings:label.new_username" }}</label
                        >
                        <input
                            type="text"
                            name="new_username"
                            id="new_username"
                            placeholder="new_username"
                            required
                            minlength="2"
                        />
                    </div>

                    <button class="primary">
                        {{ icon "check" }}
                        <span>{{ text "general:action.save" }}</span>
                    </button>
                </form>
            </div>

            <div class="card-nest" ui_ident="two_factor_authentication">
                <div class="card small">
                    <b>{{ text "settings:label.two_factor_authentication" }}</b>
                </div>

                <div class="card flex flex-col gap-2">
                    {% if profile.totp|length == 0 %}
                    <div id="totp_stuff" style="display: none">
                        <span
                            >Scan this QR code in a TOTP authenticator app (like
                            Google Authenticator):
                        </span>

                        <img id="totp_qr" style="max-width: 250px" />

                        <span>TOTP secret (do NOT share):</span>
                        <pre id="totp_secret"></pre>

                        <span
                            >Recovery codes (STORE SAFELY, these can only be
                            viewed once):</span
                        >

                        <pre id="totp_recovery_codes"></pre>
                    </div>

                    <button
                        class="quaternary green"
                        onclick="enable_totp(event)"
                    >
                        Enable TOTP 2FA
                    </button>
                    {% else %}
                    <pre id="totp_recovery_codes" style="display: none"></pre>

                    <div class="flex gap-2 flex-wrap">
                        <button
                            class="quaternary red"
                            onclick="refresh_totp_codes(event)"
                        >
                            Refresh recovery codes
                        </button>

                        <button
                            class="quaternary red"
                            onclick="disable_totp(event)"
                        >
                            Disable TOTP 2FA
                        </button>
                    </div>
                    {% endif %}
                </div>
            </div>
        </div>

        <div class="card-nest" ui_ident="change_password">
            <div class="card small flex items-center gap-2 red">
                {{ icon "skull" }}
                <b>{{ text "settings:label.delete_account" }}</b>
            </div>

            <form
                class="card flex flex-col gap-2"
                onsubmit="delete_account(event)"
            >
                <div class="flex flex-col gap-1">
                    <label for="current_password"
                        >{{ text "settings:label.current_password" }}</label
                    >
                    <input
                        type="password"
                        name="current_password"
                        id="current_password"
                        placeholder="current_password"
                        required
                        minlength="6"
                        autocomplete="off"
                    />
                </div>

                <button class="primary">
                    {{ icon "trash" }}
                    <span>{{ text "general:action.delete" }}</span>
                </button>
            </form>
        </div>

        <button onclick="save_settings()" id="save_button">
            {{ icon "check" }}
            <span>{{ text "general:action.save" }}</span>
        </button>
    </div>

    <div class="w-full hidden flex flex-col gap-2" data-tab="profile">
        <div class="card tertiary flex flex-col gap-2" id="profile_settings">
            <div class="card-nest" ui_ident="change_avatar">
                <div class="card small">
                    <b>{{ text "settings:label.change_avatar" }}</b>
                </div>

                <form
                    class="card flex gap-2 flex-row flex-wrap items-center"
                    method="post"
                    enctype="multipart/form-data"
                    onsubmit="upload_avatar(event)"
                >
                    <div class="flex gap-2 flex-row flex-wrap items-center">
                        <input
                            id="avatar_file"
                            name="file"
                            type="file"
                            accept="image/png,image/jpeg,image/avif,image/webp,image/gif"
                            class="w-content"
                        />

                        <button class="primary">{{ icon "check" }}</button>
                    </div>

                    <span class="fade"
                        >Images must be less than 8 MB large. Animated GIFs are only supported for supporter users. GIFs can be at most 2 MB large.</span
                    >
                </form>
            </div>

            <div class="card-nest" ui_ident="change_banner">
                <div class="card small">
                    <b>{{ text "settings:label.change_banner" }}</b>
                </div>

                <form
                    class="card flex flex-col gap-2"
                    method="post"
                    enctype="multipart/form-data"
                    onsubmit="upload_banner(event)"
                >
                    <div class="flex gap-2 flex-row flex-wrap items-center">
                        <input
                            id="banner_file"
                            name="file"
                            type="file"
                            accept="image/png,image/jpeg,image/avif,image/webp"
                            class="w-content"
                        />

                        <button class="primary">{{ icon "check" }}</button>
                    </div>

                    <span class="fade"
                        >Use an image of 1100x350px for the best results.</span
                    >
                </form>
            </div>
        </div>

        <button onclick="save_settings()" id="save_button">
            {{ icon "check" }}
            <span>{{ text "general:action.save" }}</span>
        </button>
    </div>

    <div
        class="card w-full tertiary hidden flex flex-col gap-2"
        data-tab="sessions"
    >
        {% for token in profile.tokens %}
        <div class="card w-full flex justify-between flex-collapse gap-2">
            <div class="flex flex-col gap-1">
                <b
                    style="
                        width: 200px;
                        overflow: hidden;
                        text-overflow: ellipsis;
                    "
                    >{{ token[1] }}</b
                >
                {% if is_helper %}
                <span class="flex gap-2 items-center">
                    <span class="fade"
                        ><a href="/api/v1/auth/user/find_by_ip/{{ token[0] }}"
                            ><code>{{ token[0] }}</code></a
                        ></span
                    >
                </span>
                {% else %}
                <span class="fade"><code>{{ token[0] }}</code></span>
                {% endif %}

                <span class="fade date">{{ token[2] }}</span>
            </div>

            <button
                class="quaternary red"
                onclick="remove_token('{{ token[1] }}')"
            >
                {{ text "general:action.delete" }}
            </button>
        </div>
        {% endfor %}
    </div>

    <div class="w-full hidden flex flex-col gap-2" data-tab="theme">
        <div class="card tertiary flex flex-col gap-2" id="theme_settings">
            {% if failing_color_keys|length > 0 %}
            <div
                class="card flex flex-col gap-2"
                style="background: white; color: black"
                ui_ident="awful_contrast"
            >
                <div class="flex gap-2 items-center">
                    <span class="desktop" style="display: contents"
                        >{{ icon "contrast" }}</span
                    >
                    <b>Some of your custom colors fail contrast checks:</b>
                </div>

                <ul>
                    {% for key in failing_color_keys %}
                    <li>{{ key[0] }} <b>{{ key[1] }} &lt; 4.5</b></li>
                    {% endfor %}
                </ul>
            </div>
            {% endif %}

            <div
                class="card w-full flex flex-wrap gap-2"
                ui_ident="import_export"
            >
                <button class="primary" onclick="import_theme_settings()">
                    {{ icon "upload" }}
                    <span>{{ text "settings:label.import" }}</span>
                </button>

                <button class="secondary" onclick="export_theme_settings()">
                    {{ icon "download" }}
                    <span>{{ text "settings:label.export" }}</span>
                </button>
            </div>

            <div class="card-nest" ui_ident="theme_preference">
                <div class="card small">
                    <b>Theme preference</b>
                </div>

                <div class="card">
                    <select
                        onchange="set_setting_field('theme_preference', event.target.selectedOptions[0].value)"
                    >
                        <option
                            value="Auto"
                            selected="{% if user.settings.theme_preference == 'Auto' %}true{% else %}false{% endif %}"
                        >
                            Auto
                        </option>
                        <option
                            value="Light"
                            selected="{% if user.settings.theme_preference == 'Light' %}true{% else %}false{% endif %}"
                        >
                            Light
                        </option>
                        <option
                            value="Dark"
                            selected="{% if user.settings.theme_preference == 'Dark' %}true{% else %}false{% endif %}"
                        >
                            Dark
                        </option>
                    </select>

                    <span class="fade"
                        >This represents your local site theme.</span
                    >
                </div>
            </div>

            <div class="card-nest" ui_ident="profile_theme">
                <div class="card small">
                    <b>Profile theme base</b>
                </div>

                <div class="card">
                    <select
                        onchange="set_setting_field('profile_theme', event.target.selectedOptions[0].value)"
                    >
                        <option
                            value="Auto"
                            selected="{% if user.settings.profile_theme == 'Auto' %}true{% else %}false{% endif %}"
                        >
                            Auto
                        </option>
                        <option
                            value="Light"
                            selected="{% if user.settings.profile_theme == 'Light' %}true{% else %}false{% endif %}"
                        >
                            Light
                        </option>
                        <option
                            value="Dark"
                            selected="{% if user.settings.profile_theme == 'Dark' %}true{% else %}false{% endif %}"
                        >
                            Dark
                        </option>
                    </select>

                    <span class="fade"
                        >This represents the site theme shown to users viewing
                        your profile.</span
                    >
                </div>
            </div>
        </div>

        <button onclick="save_settings()" id="save_button">
            {{ icon "check" }}
            <span>{{ text "general:action.save" }}</span>
        </button>
    </div>

    <div
        class="card w-full tertiary hidden flex flex-col gap-2"
        data-tab="connections"
    >
        <div class="card w-full flex flex-wrap gap-2">
            {% if config.connections.spotify_client_id and not
            profile.connections.Spotify %}
            <button
                class="quaternary"
                onclick="trigger('spotify::create_connection', ['{{ config.connections.spotify_client_id }}'])"
            >
                {{ icon "spotify" }}
                <span>Spotify</span>
            </button>
            {% endif %} {% if config.connections.last_fm_key and not
            profile.connections.LastFm %}
            <button
                class="quaternary"
                onclick="trigger('last_fm::create_connection', ['{{ config.connections.last_fm_key }}'])"
            >
                {{ icon "last_fm" }}
                <span>Last.fm</span>
            </button>
            {% endif %}
        </div>

        {% for key, value in profile.connections %}
        <div class="card-nest">
            <div class="card small flex items-center gap-2">
                {{ components::connection_icon(key=key) }}

                <!-- prettier-ignore -->
                <b class="flex items-center gap-2">
                    {% if value[0].data.name %}
                    <span>{{ value[0].data.name }}</span>
                    <span style="display: contents;" title="Verified connection">{{ icon "badge-check" }}</span>
                    {% else %}
                    <span>{{ key }}</span>
                    <span style="display: contents;">{{ icon "badge-alert" }}</span>
                    {% endif %}
                </b>
            </div>

            <div class="card flex flex-col gap-2">
                <button
                    class="quaternary red small"
                    onclick="trigger('connections::delete', ['{{ key }}'])"
                >
                    {{ text "general:action.delete" }}
                </button>

                <label for="{{ key }}-shown" class="flex items-center gap-2">
                    <input
                        type="checkbox"
                        <!-- prettier-ignore -->
                        {% if value[0].show_on_profile %}checked{% endif %}
                        id="{{ key }}-shown"
                        onchange="trigger('connections::push_con_shown', ['{{ key }}', event.target.checked])"
                        class="w-content"
                    />

                    <span>Shown on profile</span>
                </label>
            </div>
        </div>
        {% endfor %}
    </div>

    <!-- prettier-ignore -->
    <script type="application/json" id="settings_json">{{ user_settings_serde|safe }}</script>

    <script>
        setTimeout(() => {
            const ui = ns("ui");
            const settings = JSON.parse(
                document.getElementById("settings_json").innerHTML,
            );
            let tokens = JSON.parse("{{ user_tokens_serde|safe }}");

            globalThis.remove_token = async (id) => {
                if (
                    !(await trigger("atto::confirm", [
                        "Are you sure you would like to do this?",
                    ]))
                ) {
                    return;
                }

                // reconstruct tokens (but without the token with the given id)
                const new_tokens = [];

                for (const token of tokens) {
                    if (token[1] === id) {
                        continue;
                    }

                    new_tokens.push(token);
                }

                tokens = new_tokens;

                // send request to save
                fetch("/api/v1/auth/user/{{ profile.id }}/tokens", {
                    method: "POST",
                    headers: {
                        "Content-Type": "application/json",
                    },
                    body: JSON.stringify(tokens),
                })
                    .then((res) => res.json())
                    .then((res) => {
                        trigger("atto::toast", [
                            res.ok ? "success" : "error",
                            res.message,
                        ]);
                    });
            };

            globalThis.save_settings = () => {
                fetch("/api/v1/auth/user/{{ profile.id }}/settings", {
                    method: "POST",
                    headers: {
                        "Content-Type": "application/json",
                    },
                    body: JSON.stringify(settings),
                })
                    .then((res) => res.json())
                    .then((res) => {
                        trigger("atto::toast", [
                            res.ok ? "success" : "error",
                            res.message,
                        ]);
                    });
            };

            globalThis.change_password = (e) => {
                e.preventDefault();
                fetch("/api/v1/auth/user/{{ profile.id }}/password", {
                    method: "POST",
                    headers: {
                        "Content-Type": "application/json",
                    },
                    body: JSON.stringify({
                        from: e.target.current_password.value,
                        to: e.target.new_password.value,
                    }),
                })
                    .then((res) => res.json())
                    .then((res) => {
                        trigger("atto::toast", [
                            res.ok ? "success" : "error",
                            res.message,
                        ]);
                    });
            };

            globalThis.change_username = async (e) => {
                e.preventDefault();

                if (
                    !(await trigger("atto::confirm", [
                        "Are you sure you would like to do this?",
                    ]))
                ) {
                    return;
                }

                fetch("/api/v1/auth/user/{{ profile.id }}/username", {
                    method: "POST",
                    headers: {
                        "Content-Type": "application/json",
                    },
                    body: JSON.stringify({
                        to: e.target.new_username.value,
                    }),
                })
                    .then((res) => res.json())
                    .then((res) => {
                        trigger("atto::toast", [
                            res.ok ? "success" : "error",
                            res.message,
                        ]);
                    });
            };

            globalThis.delete_account = async (e) => {
                e.preventDefault();

                if (
                    !(await trigger("atto::confirm", [
                        "Are you sure you would like to do this?",
                    ]))
                ) {
                    return;
                }

                fetch("/api/v1/auth/user/{{ profile.id }}", {
                    method: "DELETE",
                    headers: {
                        "Content-Type": "application/json",
                    },
                    body: JSON.stringify({
                        password: e.target.current_password.value,
                    }),
                })
                    .then((res) => res.json())
                    .then((res) => {
                        trigger("atto::toast", [
                            res.ok ? "success" : "error",
                            res.message,
                        ]);
                    });
            };

            globalThis.upload_avatar = (e) => {
                e.preventDefault();
                e.target.querySelector("button").style.display = "none";

                fetch("/api/v1/auth/upload/avatar", {
                    method: "POST",
                    body: e.target.file.files[0],
                })
                    .then((res) => res.json())
                    .then((res) => {
                        trigger("atto::toast", [
                            res.ok ? "success" : "error",
                            res.message,
                        ]);

                        e.target
                            .querySelector("button")
                            .removeAttribute("style");
                    });

                alert("Avatar upload in progress. Please wait!");
            };

            globalThis.upload_banner = (e) => {
                e.preventDefault();
                e.target.querySelector("button").style.display = "none";

                fetch("/api/v1/auth/upload/banner", {
                    method: "POST",
                    body: e.target.file.files[0],
                })
                    .then((res) => res.json())
                    .then((res) => {
                        trigger("atto::toast", [
                            res.ok ? "success" : "error",
                            res.message,
                        ]);

                        e.target
                            .querySelector("button")
                            .removeAttribute("style");
                    });

                alert("Banner upload in progress. Please wait!");
            };

            globalThis.enable_totp = async (event) => {
                if (
                    !(await trigger("atto::confirm", [
                        "Are you sure you want to do this? You must have access to your TOTP codes to disable TOTP.",
                    ]))
                ) {
                    return;
                }

                fetch("/api/v1/auth/user/{{ user.id }}/totp", {
                    method: "POST",
                    headers: {
                        "Content-Type": "application/json",
                    },
                })
                    .then((res) => res.json())
                    .then((res) => {
                        trigger("atto::toast", [
                            res.ok ? "success" : "error",
                            res.message,
                        ]);

                        const [secret, qr, recovery_codes] = res.payload;

                        document.getElementById("totp_secret").innerText =
                            secret;
                        document.getElementById("totp_qr").src =
                            `data:image/png;base64,${qr}`;
                        document.getElementById(
                            "totp_recovery_codes",
                        ).innerText = recovery_codes.join("\n");

                        document.getElementById("totp_stuff").style.display =
                            "contents";
                        event.target.remove();
                    });
            };

            globalThis.disable_totp = async (event) => {
                if (
                    !(await trigger("atto::confirm", [
                        "Are you sure you want to do this?",
                    ]))
                ) {
                    return;
                }

                const totp_code = await trigger("atto::prompt", ["TOTP code:"]);

                if (!totp_code) {
                    return;
                }

                fetch("/api/v1/auth/user/{{ profile.id }}/totp", {
                    method: "DELETE",
                    headers: {
                        "Content-Type": "application/json",
                    },
                    body: JSON.stringify({ totp: totp_code }),
                })
                    .then((res) => res.json())
                    .then((res) => {
                        trigger("atto::toast", [
                            res.ok ? "success" : "error",
                            res.message,
                        ]);

                        event.target.remove();
                    });
            };

            globalThis.refresh_totp_codes = async (event) => {
                if (
                    !(await trigger("atto::confirm", [
                        "Are you sure you want to do this? The old codes will no longer work.",
                    ]))
                ) {
                    return;
                }

                const totp_code = await trigger("atto::prompt", ["TOTP code:"]);

                if (!totp_code) {
                    return;
                }

                fetch("/api/v1/auth/user/{{ profile.id }}/totp/codes", {
                    method: "POST",
                    headers: {
                        "Content-Type": "application/json",
                    },
                    body: JSON.stringify({ totp: totp_code }),
                })
                    .then((res) => res.json())
                    .then((res) => {
                        trigger("atto::toast", [
                            res.ok ? "success" : "error",
                            res.message,
                        ]);

                        document.getElementById(
                            "totp_recovery_codes",
                        ).innerText = res.payload.join("\n");
                        document.getElementById(
                            "totp_recovery_codes",
                        ).style.display = "block";

                        event.target.remove();
                    });
            };

            const account_settings =
                document.getElementById("account_settings");
            const profile_settings =
                document.getElementById("profile_settings");
            const theme_settings = document.getElementById("theme_settings");

            ui.refresh_container(account_settings, [
                "supporter_card",
                "home_timeline",
                "notifications",
                "change_password",
                "change_username",
                "two_factor_authentication",
            ]);
            ui.refresh_container(profile_settings, [
                "change_avatar",
                "change_banner",
            ]);
            ui.refresh_container(theme_settings, [
                "awful_contrast",
                "import_export",
                "theme_preference",
                "profile_theme",
            ]);

            ui.generate_settings_ui(
                account_settings,
                [
                    [
                        ["display_name", "Display name"],
                        "{{ profile.settings.display_name }}",
                        "input",
                    ],
                    [
                        ["biography", "Biography"],
                        settings.biography,
                        "textarea",
                    ],
                    [
                        ["status", "Status"],
                        settings.status,
                        "textarea",
                    ],
                    [
                        ["warning", "Profile warning"],
                        settings.warning,
                        "textarea",
                    ],
                ],
                settings,
            );

            ui.generate_settings_ui(
                profile_settings,
                [
                    [[], "Privacy", "title"],
                    [
                        [
                            "private_profile",
                            "Only allow users I'm following to view my profile",
                        ],
                        "{{ profile.settings.private_profile }}",
                        "checkbox",
                    ],
                    [
                        [
                            "private_chats",
                            "Only allow users I'm following to add me to chats",
                        ],
                        "{{ profile.settings.private_chats }}",
                        "checkbox",
                    ],
                    [
                        [
                            "private_communities",
                            "Keep my joined communities private",
                        ],
                        "{{ profile.settings.private_communities }}",
                        "checkbox",
                    ],
                    [
                        ["private_last_seen", "Keep my last seen time private"],
                        "{{ profile.settings.private_last_seen }}",
                        "checkbox",
                    ],
                    [[], "Questions", "title"],
                    [
                        [
                            "enable_questions",
                            "Allow users to ask you questions",
                        ],
                        "{{ profile.settings.enable_questions }}",
                        "checkbox",
                    ],
                    [
                        [
                            "allow_anonymous_questions",
                            "Allow anonymous questions",
                        ],
                        "{{ profile.settings.allow_anonymous_questions }}",
                        "checkbox",
                    ],
                    [
                        ["motivational_header", "Motivational header"],
                        settings.motivational_header,
                        "input",
                    ],
                    [[], "Anonymous", "title"],
                    [
                        ["anonymous_username", "Anonymous username"],
                        settings.anonymous_username,
                        "input",
                    ],
                    [
                        ["anonymous_avatar_url", "Anonymous avatar URL"],
                        settings.anonymous_avatar_url,
                        "input",
                    ],
                    [[], "Misc", "title"],
                    [
                        ["hide_dislikes", "Hide post dislikes"],
                        "{{ profile.settings.hide_dislikes }}",
                        "checkbox",
                    ],
                    [
                        [],
                        "Hides dislikes on all posts. Users can still dislike your posts, you just won't be able to see it.",
                        "text",
                    ],
                ],
                settings,
            );

            const can_use_custom_css =
                "{{ user.permissions|has_supporter }}" === "true";

            const theme_settings_ui_json = [
                [
                    [
                        "disable_other_themes",
                        "Disable the profile theme of other users",
                    ],
                    "{{ profile.settings.disable_other_themes }}",
                    "checkbox",
                ],
                [[], "Theme builder", "title"],
                [
                    [],
                    "Allow the site to build the theme for you given a base hue, saturation, and lightness. Scroll down to the next section to manually build the theme.",
                    "text",
                ],
                [
                    ["theme_hue", "Theme hue (integer 0-255)"],
                    "{{ profile.settings.theme_hue }}",
                    "input",
                ],
                [
                    ["theme_sat", "Theme sat (percentage 0%-100%)"],
                    "{{ profile.settings.theme_sat }}",
                    "input",
                ],
                [
                    ["theme_lit", "Theme lit (percentage 0%-100%)"],
                    "{{ profile.settings.theme_lit }}",
                    "input",
                ],
                [[], "Manual theme builder", "title"],
                [[], "Override individual colors.", "text"],
                // surface
                [
                    ["theme_color_surface", "Surface"],
                    "{{ profile.settings.theme_color_surface }}",
                    "color",
                    {
                        description: "Page background.",
                    },
                ],
                [
                    ["theme_color_text", "Text"],
                    "{{ profile.settings.theme_color_text }}",
                    "color",
                    {
                        description:
                            "Text on elements with the surface background.",
                    },
                ],
                [
                    ["theme_color_text_link", "Links"],
                    "{{ profile.settings.theme_color_text_link }}",
                    "color",
                    {
                        description: "Links on all elements.",
                    },
                ],
                // lowered
                [[], "", "divider"],
                [
                    ["theme_color_lowered", "Lowered"],
                    "{{ profile.settings.theme_color_lowered }}",
                    "color",
                    {
                        description:
                            "Some cards, buttons, or anything else with a darker background color than the surface.",
                    },
                ],
                [
                    ["theme_color_text_lowered", "Text"],
                    "{{ profile.settings.theme_color_text_lowered }}",
                    "color",
                    {
                        description:
                            "Text on elements with the lowered backgrounds.",
                    },
                ],
                [
                    ["theme_color_super_lowered", "Super lowered"],
                    "{{ profile.settings.theme_color_super_lowered }}",
                    "color",
                    {
                        description: "Borders.",
                    },
                ],
                // raised
                [[], "", "divider"],
                [
                    ["theme_color_raised", "Raised"],
                    "{{ profile.settings.theme_color_raised }}",
                    "color",
                    {
                        description:
                            "Some cards, buttons, or anything else with a lighter background color than the surface.",
                    },
                ],
                [
                    ["theme_color_text_raised", "Text"],
                    "{{ profile.settings.theme_color_text_raised }}",
                    "color",
                    {
                        description:
                            "Text on elements with the raised backgrounds.",
                    },
                ],
                [
                    ["theme_color_super_raised", "Super raised"],
                    "{{ profile.settings.theme_color_super_raised }}",
                    "color",
                    {
                        description: "Some borders.",
                    },
                ],
                // primary
                [[], "", "divider"],
                [
                    ["theme_color_primary", "Primary"],
                    "{{ profile.settings.theme_color_primary }}",
                    "color",
                    {
                        description:
                            "Primary color; navigation bar, some buttons, etc.",
                    },
                ],
                [
                    ["theme_color_text_primary", "Text"],
                    "{{ profile.settings.theme_color_text_primary }}",
                    "color",
                    {
                        description:
                            "Text on elements with the primary backgrounds.",
                    },
                ],
                [
                    ["theme_color_primary_lowered", "Lowered"],
                    "{{ profile.settings.theme_color_primary_lowered }}",
                    "color",
                    {
                        description: "Hover state for primary buttons.",
                    },
                ],
                // secondary
                [[], "", "divider"],
                [
                    ["theme_color_secondary", "Secondary"],
                    "{{ profile.settings.theme_color_secondary }}",
                    "color",
                    {
                        description: "Secondary color.",
                    },
                ],
                [
                    ["theme_color_text_secondary", "Text"],
                    "{{ profile.settings.theme_color_text_secondary }}",
                    "color",
                    {
                        description:
                            "Text on elements with the secondary backgrounds.",
                    },
                ],
                [
                    ["theme_color_secondary_lowered", "Lowered"],
                    "{{ profile.settings.theme_color_secondary_lowered }}",
                    "color",
                    {
                        description: "Hover state for secondary buttons.",
                    },
                ],
            ];

            if (can_use_custom_css) {
                theme_settings_ui_json.push([[], "Advanced", "title"]);
                theme_settings_ui_json.push([
                    ["theme_custom_css", "Custom CSS"],
                    settings.theme_custom_css,
                    "textarea",
                    {
                        description:
                            "Custom CSS input embedded into your theme.",
                    },
                ]);
            }

            ui.generate_settings_ui(
                theme_settings,
                theme_settings_ui_json,
                settings,
            );

            globalThis.import_theme_settings = () => {
                const input = document.createElement("input");
                input.type = "file";
                input.accept = "application/json";
                document.body.appendChild(input);

                input.addEventListener("change", async (e) => {
                    const json = JSON.parse(await e.target.files[0].text());

                    for (const setting of Object.entries(json)) {
                        settings[setting[0]] = setting[1];
                    }

                    input.remove();
                    save_settings();

                    setTimeout(() => {
                        window.location.reload();
                    }, 150);
                });

                input.click();
            };

            globalThis.export_theme_settings = () => {
                const theme_settings = {
                    profile_theme: settings.profile_theme,
                };

                for (const setting of Object.entries(settings)) {
                    if (setting[0].startsWith("theme_")) {
                        theme_settings[setting[0]] = setting[1];
                    }
                }

                const blob = new Blob(
                    [JSON.stringify(theme_settings, null, 4)],
                    {
                        type: "appliction/json",
                    },
                );
                const url = URL.createObjectURL(blob);

                const anchor = document.createElement("a");
                anchor.href = url;
                anchor.setAttribute("download", "theme.json");

                document.body.appendChild(anchor);
                anchor.click();
                anchor.remove();
            };
        });
    </script>
</main>
{% endblock %}