api home template

2024-08-26 20:06:23 +01:00
21 changed files with 214 additions and 383 deletions
--- a/.bumpversion.cfg
+++ b/.bumpversion.cfg
@ -1,5 +1,5 @@
 [bumpversion]
-current_version = 0.3.4
+current_version = 0.3.3
 commit = True
 tag = True

--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@ -1,24 +1,9 @@

-**v0.3.4**
-
- Fix: Refresh data tables after deleting any number of entries (corbz/PYRSS-Website#38)
- Enhancement: `data-field` implementation for subscription form
- Enhancement: Improved the offcanvas navbar on smaller screens, to be less ugly
- Fix: Select2 dropdown search bars always using light theme, regardless of user choice
- Enhancement: Clearer help label on the 'Add Server' modal/form
- Enhancement: Add wiki link button to footer
- Fix: "ordering=unknown" by only applying ordering if it's truthy
- Fix: Exception caused by unfinished queryset method on the `/api/guild-settings/` endpoint
- Enhancement: rewrote `confirmDeleteModal` into less specific `confirmationModal` with specifiable styles
- Fix: Several potential xss attack vectors
- Fix: 'Add Pyrss' button incorrectly not opening in new tab
-
 **v0.3.3**

 - Enhancement: Added some refreshing new fonts (sora & atkison hyperlegible)
 - Enhancement: all table cells no longer wrap text
 - Fix: fixed a padding issue with link-style buttons in table cells
- Enhancement: `DISCORD_SCOPES` as env var, rather than hard coded
 - Other: added license file

 **v0.3.2**
--- a/apps/api/urls.py
+++ b/apps/api/urls.py
@ -4,6 +4,7 @@ from django.urls import path, include
 from rest_framework.authtoken.views import obtain_auth_token

 from .views import (
+    APIHome,
    SubChannel_ListView,
    SubChannel_DetailView,
    Filter_ListView,
@ -22,6 +23,7 @@ from .views import (
 )

 urlpatterns = [
+    path("", APIHome.as_view(), name="home"),
    path("api-auth/", include("rest_framework.urls", namespace="rest_framework")),
    path("api-token-auth/", obtain_auth_token),

--- a/apps/api/views.py
+++ b/apps/api/views.py
@ -5,6 +5,7 @@ import logging
 from django.db.models import Subquery
 from django.db.utils import IntegrityError
 from django_filters import rest_framework as rest_filters
+from django.views.generic import TemplateView
 from rest_framework import status, permissions, filters, generics
 from rest_framework.response import Response
 from rest_framework.pagination import PageNumberPagination
@ -41,6 +42,10 @@ def is_automated_admin(user):
    return user.user_type == DiscordUser.USER_TYPES.AUTOMATED_USER and user.is_superuser


+class APIHome(TemplateView):
+    template_name = "rest_framework/api.html"
+
+
 # =================================================================================================
 # SubChannel Views

@ -63,15 +68,6 @@ class SubChannel_ListView(generics.ListCreateAPIView):
    filterset_fields = ["id", "channel_id", "channel_name", "subscription"]
    search_fields = ["channel_name"]

-    def get_queryset(self):
-        if self.request.user.is_superuser:
-            return SubChannel.objects.all()
-
-        saved_guilds = SavedGuilds.objects.filter(added_by=self.request.user)
-        guild_ids = [guild.guild_id for guild in saved_guilds]
-
-        return SubChannel.objects.filter(subscription__guild_id__in=guild_ids)
-
    def post(self, request):
        serializer = self.get_serializer(data=request.data)
        serializer.is_valid(raise_exception=True)
@ -103,15 +99,6 @@ class SubChannel_DetailView(generics.RetrieveUpdateDestroyAPIView):
    serializer_class = SubChannelSerializer
    queryset = SubChannel.objects.all().order_by("id")

-    def get_queryset(self):
-        if self.request.user.is_superuser:
-            return SubChannel.objects.all()
-
-        saved_guilds = SavedGuilds.objects.filter(added_by=self.request.user)
-        guild_ids = [guild.guild_id for guild in saved_guilds]
-
-        return SubChannel.objects.filter(subscription__guild_id__in=guild_ids)
-

 # =================================================================================================
 # Filter Views
@ -429,10 +416,7 @@ class GuildSettings_ListView(generics.ListCreateAPIView):
        if self.request.user.is_superuser:
            return GuildSettings.objects.all()

-        saved_guilds = SavedGuilds.objects.filter(added_by=self.request.user)
-        guild_ids = [guild.guild_id for guild in saved_guilds]
-
-        return GuildSettings.objects.filter(guild_id__in=guild_ids)
+        return GuildSettings.objects.filter(added_by=self.request.user)

    def post(self, request):
        saved_guilds = SavedGuilds.objects.filter(added_by=request.user)
@ -519,15 +503,6 @@ class TrackedContent_ListView(generics.ListCreateAPIView):

        return self.read_serializer_class

-    def get_queryset(self):
-        if self.request.user.is_superuser:
-            return TrackedContent.objects.all()
-
-        saved_guilds = SavedGuilds.objects.filter(added_by=self.request.user)
-        guild_ids = [guild.guild_id for guild in saved_guilds]
-
-        return TrackedContent.objects.filter(subscription__guild_id__in=guild_ids)
-
    def post(self, request):
        serializer = self.get_serializer(data=request.data)
        serializer.is_valid(raise_exception=True)
@ -559,15 +534,6 @@ class TrackedContent_DetailView(generics.RetrieveUpdateDestroyAPIView):
    serializer_class = TrackedContentSerializer_POST
    queryset = TrackedContent.objects.all().order_by("-creation_datetime")

-    def get_queryset(self):
-        if self.request.user.is_superuser:
-            return TrackedContent.objects.all()
-
-        saved_guilds = SavedGuilds.objects.filter(added_by=self.request.user)
-        guild_ids = [guild.guild_id for guild in saved_guilds]
-
-        return TrackedContent.objects.filter(subscription__guild_id__in=guild_ids)
-

 class ArticleMutator_ListView(generics.ListCreateAPIView):
    """
--- a/apps/static/css/base.css
+++ b/apps/static/css/base.css
@ -27,51 +27,4 @@
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: var(--discord-blurple);
    --bs-btn-disabled-border-color: var(--discord-blurple);
-}
-
-/* Widths with breakpoints */
-
-/* Small (sm) and down */
-@media (max-width: 576px) {
-    .w-sm-25 { width: 25%; }
-    .w-sm-50 { width: 50%; }
-    .w-sm-75 { width: 75%; }
-    .w-sm-100 { width: 100%; }
-    .w-sm-auto { width: auto; }
-}
-
-/* Medium (md) and down */
-@media (max-width: 768px) {
-    .w-md-25 { width: 25%; }
-    .w-md-50 { width: 50%; }
-    .w-md-75 { width: 75%; }
-    .w-md-100 { width: 100%; }
-    .w-md-auto { width: auto; }
-}
-
-/* Large (lg) and down */
-@media (max-width: 992px) {
-    .w-lg-25 { width: 25%; }
-    .w-lg-50 { width: 50%; }
-    .w-lg-75 { width: 75%; }
-    .w-lg-100 { width: 100%; }
-    .w-lg-auto { width: auto; }
-}
-
-/* Extra large (xl) and down */
-@media (max-width: 1200px) {
-    .w-xl-25 { width: 25%; }
-    .w-xl-50 { width: 50%; }
-    .w-xl-75 { width: 75%; }
-    .w-xl-100 { width: 100%; }
-    .w-xl-auto { width: auto; }
-}
-
-/* Extra extra large (xxl) and down */
-@media (max-width: 1400px) {
-    .w-xxl-25 { width: 25%; }
-    .w-xxl-50 { width: 50%; }
-    .w-xxl-75 { width: 75%; }
-    .w-xxl-100 { width: 100%; }
-    .w-xxl-auto { width: auto; }
 }
--- a/apps/static/css/home/select2.css
+++ b/apps/static/css/home/select2.css
@ -1,6 +1,11 @@
 /* Select 2 */

 .select2-selection {
+    /* border: 1px solid var(--border-colour) !important; */
+    /* box-shadow: none !important; */
+    /* -webkit-box-shadow: none !important; */
+    /* border-radius: var(--bs-border-radius); */
+    /* transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; */
    background-color: var(--bs-body-bg) !important;
    font-size: 1rem !important;
    padding: 0.375rem 0.75rem !important;
@ -23,6 +28,15 @@
    color: var(--bs-body-color) !important;
 }

+/* .select2-selection:focus {
+    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25) !important;
+    -webkit-box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25) !important;
+} */
+
+/* .select2-dropdown {
+    border: 1px solid var(--border-colour) !important;
+} */
+
 .select2-selection__choice {
  display: flex;
  align-items: center;
@ -67,23 +81,14 @@
    border-color: #86b7fe;
    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
 }
+/* color: var(--bs-body-color);
+  background-color: var(--bs-body-bg);
+  border-color: #86b7fe;
+  outline: 0;
+  box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25); */

 .select2-container--bootstrap .select2-dropdown {
    border-color: #86b7fe;
-    background-color: var(--bs-body-bg);
-}
+    /* box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25); */

-.select2-container--bootstrap .select2-search--dropdown .select2-search__field {
-    background-color: var(--bs-body-bg);
-    padding: 0.375rem 0.75rem;
-    font-size: 1rem;
-    font-weight: 400;
-    line-height: 1.5;
-    color: var(--bs-body-color);
-    -webkit-appearance: none;
-    -moz-appearance: none;
-    appearance: none;
-    border: var(--bs-border-width) solid var(--bs-border-color);
-    border-radius: var(--bs-border-radius-sm);
-    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
 }
--- a/apps/static/js/api.js
+++ b/apps/static/js/api.js
@ -28,8 +28,7 @@ function makeQuerystring(filters, sort) {
    for (key in filters) {
        querystring += `${key}=${filters[key]}&`;
    }
-
-    return sort ? querystring += `ordering=${sort}` : querystring;
+    return querystring += `ordering=${sort}`;
 }

 // Saved Guilds
@ -65,7 +64,8 @@ async function loadChannels(guildId) {

 async function getSubscriptions(filters, sort) {
    let querystring = makeQuerystring(filters, sort);
-    return await ajaxRequest(`/api/subscription/${querystring}`, "GET");
+        url = `/api/subscription/${querystring}`;
+    return await ajaxRequest(url, "GET");
 }

 async function getSubscription(id) {
@ -116,7 +116,8 @@ async function deleteSubChannels(subscriptionId) {

 async function getFilters(filters, sort) {
    let querystring = makeQuerystring(filters, sort);
-    return await ajaxRequest(`/api/filter/${querystring}`, "GET");
+        url = `/api/filter/${querystring}`;
+    return await ajaxRequest(url, "GET");
 }

 async function getFilter(id) {
--- a/apps/static/js/base.js
+++ b/apps/static/js/base.js
@ -19,24 +19,6 @@ function getCurrentDateTime() {
    return `${year}-${month}-${day}T${hours}:${minutes}`;
 }

-// Sanitise a given string to remove HTML, making it DOM safe.
-function sanitise(string) {
-    if (typeof string !== "string") {
-        return string;
-    }
-
-    const map = {
-        '&': '&amp;',
-        '<': '&lt;',
-        '>': '&gt;',
-        '"': '&quot;',
-        "'": '&#x27;',
-        "/": '&#x2F;',
-    };
-    const reg = /[&<>"'/]/ig;
-    return string.replace(reg, (match) => map[match]);
-  }
-
 $(document).ready(function() {
    // Activate all tooltips
    $('[data-bs-toggle="tooltip"]').tooltip();
--- a/apps/static/js/home/content.js
+++ b/apps/static/js/home/content.js
@ -46,9 +46,7 @@ async function initContentTable() {
                data: "title",
                className: "text-truncate",
                render: function(data, type, row) {
-                    const title = sanitise(data);
-                    const url = sanitise(row.url);
-                    return `<a href="${url}" class="btn btn-link text-start text-decoration-none" target="_blank">${title}</a>`
+                    return `<a href="${row.url}" class="btn btn-link text-start text-decoration-none" target="_blank">${data}</a>`
                }
            },
            {
@ -56,8 +54,7 @@ async function initContentTable() {
                data: "subscription.name",
                className: "text-nowrap",
                render: function(data, type, row) {
-                    const subName = sanitise(data);
-                    return `<button type="button" onclick="goToSubscription(${row.subscription.id})" class="btn btn-link text-start text-decoration-none">${subName}</button>`
+                    return `<button type="button" onclick="goToSubscription(${row.subscription.id})" class="btn btn-link text-start text-decoration-none">${data}</button>`
                }
            },
            {
@ -73,9 +70,7 @@ async function initContentTable() {
                data: "channel_id",
                className: "text-start",
                render: function(data, type, row) {
-                    const channelId = sanitise(data);
-                    const messageId = sanitise(row.message_id);
-                    return `<div class="resolve-channel-name text-center" data-channel-id="${channelId}" data-msg-id="${messageId}">
+                    return `<div class="resolve-channel-name text-center" data-channel-id="${data}" data-msg-id="${row.message_id}">
                                <div class="spinner-border spinner-border-sm" role="status">
                                    <span class="visually-hidden">Loading...</span>
                                </div>
@ -103,8 +98,7 @@ async function initContentTable() {
                orderable: false,
                className: "p-0",
                render: function(data, type, row) {
-                    const embedColour = sanitise(row.subscription.embed_colour);
-                    return `<div class="h-100" style="background-color: #${embedColour}; width: .25rem;">&nbsp;</div>`
+                    return `<div class="h-100" style="background-color: #${row.subscription.embed_colour}; width: .25rem;">&nbsp;</div>`
                }
            }
        ]
@ -134,9 +128,8 @@ function startResolveChannelNamesTask() {
 }

 function resolveChannelNames(guildId) {
-    if (!discordChannels.length) {
+    if (!discordChannels.length)
        return false
-    }

    $(".resolve-channel-name").each(function() {
        const channelId = $(this).data("channel-id");
@ -172,26 +165,20 @@ async function deleteSelectedContent() {
    const rows = contentTable.rows(".selected").data().toArray();
    const names = rows.map(row => { return row.title });
    const namesString = arrayToHtmlList(names, true).prop("outerHTML");
-    const isMany = names.length > 1;
+    const multiple = names.length > 1;

-    await confirmationModal(
-        `Delete ${isMany ? "Many Tracked Contents" : "a Tracked Content"}`,
-        `Do you wish to permanently delete ${isMany ? "these" : "this"} <b>${names.length}</b> Tracked Content${isMany ? "s" : ""}?<br><br>${namesString}`,
-        "danger",
+    await confirmDeleteModal(
+        `Confirm ${multiple ? "Multiple Deletions" : "Deletion"}`,
+        `Do you wish to permanently delete ${multiple ? "these" : "this"} <b>${names.length}</b> content${multiple ? "s" : ""}?<br><br>${namesString}`,
        async () => {
            rows.forEach(async row => { await deleteTrackedContent(row.id) });

            showToast(
                "danger",
-                `Deleted ${names.length} Content${isMany ? "s" : ""}`,
+                `Deleted ${names.length} Content${multiple ? "s" : ""}`,
                `${arrayToHtmlList(names, false).prop("outerHTML")}`,
                12000
            );
-
-            // Multi-deletion can take time, this timeout ensures the refresh is accurate
-            setTimeout(async () => {
-                await loadContent(getCurrentlyActiveServer().guild_id);
-            }, 600);
        },
        null
    );
--- a/apps/static/js/home/filters.js
+++ b/apps/static/js/home/filters.js
@ -40,8 +40,7 @@ async function initFiltersTable() {
                title: "Name",
                data: "name",
                render: function(data, type, row) {
-                    const name = sanitise(data);
-                    return `<button type="button" onclick="showEditFilterModal(${row.id})" class="btn btn-link text-start text-decoration-none">${name}</button>`
+                    return `<button type="button" onclick="showEditFilterModal(${row.id})" class="btn btn-link text-start text-decoration-none">${data}</button>`
                }
            },
            {
@ -56,7 +55,7 @@ async function initFiltersTable() {
                        case 5: return "Fuzzy Match";
                        default:
                            console.error(`unknown matching algorithm '${data}'`);
-                            return sanitise(data);
+                            return data;
                    }
                }
            },
@ -253,14 +252,12 @@ $(document).on("selectedServerChange", async function() {
 $("#deleteEditFilter").on("click", async function() {
    const filterId = parseInt($("#filterId").val());
    const filter = filtersTable.row(function(idx, row) { return row.id === filterId }).data();
-    const filterName = sanitise(filter.name);

    $("#filterFormModal").modal("hide");

-    await confirmationModal(
-        "Delete a Filter",
-        `Do you wish to permanently delete <b>${filterName}</b>?`,
-        "danger",
+    await confirmDeleteModal(
+        "Confirm Deletion",
+        `Do you wish to permanently delete <b>${filter.name}</b>?`,
        async () => {
            await deleteFilter(filterId);
            await loadFilters(getCurrentlyActiveServer().guild_id);
@ -268,7 +265,7 @@ $("#deleteEditFilter").on("click", async function() {
            showToast(
                "danger",
                "Deleted a Filter",
-                filterName,
+                filter.name,
                12000
            );
        },
@ -282,29 +279,24 @@ async function deleteSelectedFilters() {
    const rows = filtersTable.rows(".selected").data().toArray();
    const names = rows.map(row => row.name);
    const namesString = arrayToHtmlList(names, true).prop("outerHTML");
-    const isMany = names.length > 1;
+    const multiple = names.length > 1;

-    await confirmationModal(
-        `Delete ${isMany ? "Many Filters" : "a Filter"}`,
-        `Do you wish to permanently delete ${isMany ? "these" : "this"} <b>${names.length}</b> filter${isMany ? "s" : ""}?<br><br>${namesString}`,
-        "danger",
+    await confirmDeleteModal(
+        `Confirm ${multiple ? "Multiple Deletions" : "Deletion"}`,
+        `Do you wish to permanently delete ${multiple ? "these" : "this"} <b>${names.length}</b> filter${multiple ? "s" : ""}?<br><br>${namesString}`,
        async () => {
            rows.forEach(async row => { await deleteFilter(row.id) });
-    
+
            showToast(
                "danger",
-                `Delete ${names.length} Subscription${isMany ? "s" : ""}`,
+                `Delete ${names.length} Subscription${multiple ? "s" : ""}`,
                `${arrayToHtmlList(names, false).prop("outerHTML")}`,
                12000
            );
-    
-            // Multi-deletion can take time, this timeout ensures the refresh is accurate
-            setTimeout(async () => {
-                await loadFilters(getCurrentlyActiveServer().guild_id);
-            }, 600);
+
+            await loadFilters(getCurrentlyActiveServer().guild_id);
        },
        null
-
    );
 }

--- a/apps/static/js/home/index.js
+++ b/apps/static/js/home/index.js
@ -155,33 +155,23 @@ $(document).ready(function() {
    });
 });

-async function confirmationModal(title, bodyText, style, acceptFunc, declineFunc) {
-    let $modal = $("#confirmationModal");
-
-    // Ensure valid style and apply it to the confirm button
-    if (!["danger", "success", "warning", "info", "primary", "secondary"].includes(style)) {
-        throw new Error(`${style} is not a valid style`);
-    }
-    $modal.find(".modal-confirm-btn").addClass(`btn-${style}`);
-
+async function confirmDeleteModal(title, description, acceptFunc, declineFunc) {
+    let $modal = $("#confirmDeleteModal");
    $modal.find(".modal-title").text(title);
-    $modal.find(".modal-body > p").html(bodyText);
-
-    $modal.find(".modal-confirm-btn").off("click").on("click", async function(e) {
+    $modal.find(".modal-body > p").html(description);
+    $modal.find(".confirm-delete-btn").off("click").on("click", async function(e) {
        await acceptFunc()
        $modal.modal("hide");
    });
-
-    $modal.find(".modal-dismiss-btn").off("click").on("click", async function(e) {
+    $modal.find(".dismiss-delete-btn").off("click").on("click", async function(e) {
        if (declineFunc) await declineFunc();
        $modal.modal("hide");
    });
-
    $modal.modal("show");
 }

 function arrayToHtmlList(array, bold=false) {
-    $ul = $("<ul>").addClass("mb-0");
+    $ul = $("<ul>");

    array.forEach(item => {
        let $li = $("<li>");
--- a/apps/static/js/home/servers.js
+++ b/apps/static/js/home/servers.js
@ -35,7 +35,7 @@ function addToLoadedServers(server, selectNew=true) {
    loadedServers[id] = server;

    // Display the loaded server
-    addServerTemplate(id, sanitise(server.guild_id), sanitise(server.name), sanitise(server.icon), sanitise(server.permissions), sanitise(server.owner));
+    addServerTemplate(id, server.guild_id, server.name, server.icon, server.permissions, server.owner);

    // Select the newly added server
    if (selectNew) {
@ -90,10 +90,10 @@ async function loadServerOptions() {
        servers.forEach(server => {
            $("#serverOptions").append($("<option>", {
                value: server.id,
-                text: sanitise(server.name),
-                "data-icon": sanitise(server.icon),
-                "data-permissions": sanitise(server.permissions),
-                "data-isowner": sanitise(server.owner)
+                text: server.name,
+                "data-icon": server.icon,
+                "data-permissions": server.permissions,
+                "data-isowner": server.owner
            }));
        });
    }
@ -199,7 +199,7 @@ async function registerNewServer(serverName, serverGuildId, serverIconHash, serv
    try { response = await newSavedGuild(formData); }
    catch (err) {
        if (err.status === 409)
-            showToast("warning", "Server Conflict", `Can't add ${sanitise(serverName)} because it already exists.`, 10000);
+            showToast("warning", "Server Conflict", `Can't add ${serverName} because it already exists.`, 10000);
        else
            console.error(JSON.stringify(err, null, 4));
            
@ -221,8 +221,8 @@ function selectServer(primaryKey) {
    $(`#serverList .server-item[data-id=${primaryKey}]`).addClass("active")    

    // Display details of the selected server
-    $("#selectedServerContainer .selected-server-name").text(sanitise(server.name));
-    $("#selectedServerContainer .selected-server-id").text(sanitise(server.guild_id));
+    $("#selectedServerContainer .selected-server-name").text(server.name);
+    $("#selectedServerContainer .selected-server-id").text(server.guild_id);
    $("#selectedServerContainer .selected-server-icon").attr("src", `https://cdn.discordapp.com/icons/${server.guild_id}/${server.icon}.webp?size=80`);

    // Disable all loaded servers
@ -253,10 +253,9 @@ $("#deleteSelectedServerBtn").on("click", async function() {
    ];
    const notesString = arrayToHtmlList(notes).prop("outerHTML");

-    await confirmationModal(
+    await confirmDeleteModal(
        "Close this server?",
        `This is a safe, non-permanent action:<br><br>${notesString}`,
-        "warning",
        deleteSelectedServer,
        null
    );
@ -295,19 +294,23 @@ function resolveServerStrings() {
    const server = getCurrentlyActiveServer();

    // Server names
-    $(".resolve-to-server-name").text(sanitise(server.name));
+    $(".resolve-to-server-name").text(server.name);

    // Server Guild Ids
-    $(".resolve-to-server-id").text(sanitise(server.guild_id))
+    $(".resolve-to-server-id").text(server.guild_id)

    // Bot Invite links
    $(".resolve-to-invite-link").attr("href", `https://discord.com/oauth2/authorize
 ?client_id=${discordClientId}
 &permissions=2147534848
 &scope=bot+applications.commands
-&guild_id=${sanitise(server.guild_id)}
+&guild_id=${server.guild_id}
 &disable_guild_select=true`);

 }

+$("#backToSelectServer").on("click", function() {
+
+});
+
 // #endregion
--- a/apps/static/js/home/subscriptions.js
+++ b/apps/static/js/home/subscriptions.js
@ -43,8 +43,7 @@ async function initSubscriptionTable() {
                data: "name",
                className: "text-truncate",
                render: function(data, type, row) {
-                    const name = sanitise(data);
-                    return `<button type="button" onclick="showEditSubModal(${row.id})" class="btn btn-link text-start text-decoration-none">${name}</button>`;
+                    return `<button type="button" onclick="showEditSubModal(${row.id})" class="btn btn-link text-start text-decoration-none">${data}</button>`;
                }
            },
            {
@ -52,8 +51,7 @@ async function initSubscriptionTable() {
                data: "url",
                className: "text-truncate",
                render: function(data, type) {
-                    const url = sanitise(data);
-                    return `<a href="${url}" class="btn btn-link text-start text-decoration-none" target="_blank">${url}</a>`;
+                    return `<a href="${data}" class="btn btn-link text-start text-decoration-none" target="_blank">${data}</a>`;
                }
            },
            { 
@ -61,8 +59,7 @@ async function initSubscriptionTable() {
                data: "channels_count",
                className: "text-center",
                render: function(data) {
-                    const channelsCount = sanitise(data);
-                    return `<span class="badge text-bg-secondary">${channelsCount}</span>`;
+                    return `<span class="badge text-bg-secondary">${data}</span>`;
                }
            },
            {
@ -87,14 +84,13 @@ async function initSubscriptionTable() {
                orderable: false,
                className: "text-center",
                render: function(data, type) {
-                    if (!data) { return "" }
-                    const extraNotes = sanitise(data);
+                    if (!data) return "";
                    return $(`
                        <i class="bi bi-chat-left-text"
                            data-bs-trigger="hover focus"
                            data-bs-toggle="popover"
                            data-bs-title="Extra Notes"
-                            data-bs-content="${extraNotes}">
+                            data-bs-content="${data}">
                        </i>
                    `).popover()[0];
                }
@ -112,8 +108,7 @@ async function initSubscriptionTable() {
                orderable: false,
                className: "p-0",
                render: function(data, type, row) {
-                    const embedColour = sanitise(row.embed_colour);
-                    return `<div class="h-100" style="background-color: #${embedColour}; width: .25rem;">&nbsp;</div>`
+                    return `<div class="h-100" style="background-color: #${row.embed_colour}; width: .25rem;">&nbsp;</div>`
                }
            }
        ]
@ -122,31 +117,6 @@ async function initSubscriptionTable() {
    bindTableCheckboxes("#subTable", subTable, "#subscriptionsTabPane .table-del-btn");
 }

-async function updateSubFromObject(sub, handleErrorMsg=true) {
-    let data = {
-        "name": sub.name,
-        "url": sub.url,
-        "guild_id": sub.guild_id,
-        "extra_notes": sub.extra_notes,
-        "embed_colour": sub.embed_colour,
-        "article_fetch_image": sub.article_fetch_image,
-        "published_threshold": sub.published_threshold,
-        "active": sub.active
-    };
-
-    let formData = new FormData();
-
-    for (key in data) {
-        formData.append(key, data[key]);
-    }
-
-    sub.article_title_mutators.forEach(mutator => formData.append("article_title_mutators", mutator.id));
-    sub.article_desc_mutators.forEach(mutator => formData.append("article_desc_mutators", mutator.id));
-    sub.filters.forEach(filter => formData.append("filters", filter));
-
-    return await saveSubscription(sub.id, formData, handleErrorMsg=handleErrorMsg);
-}
-
 $("#subscriptionsTabPane").on("change", ".sub-toggle-active", async function () {

    /*
@ -165,16 +135,30 @@ $("#subscriptionsTabPane").on("change", ".sub-toggle-active", async function ()
        subTable.data(sub).draw();

        // Update the database
-        const subId = await updateSubFromObject(sub, handleErrorMsg=false);
-
-        if (!subId) {
+        const subPrimaryKey = await saveSubscription(
+            sub.id,
+            sub.name,
+            sub.url,
+            sub.guild_id,
+            sub.extra_notes,
+            sub.filters,
+            {
+                title: sub.article_title_mutators.map(mutator => mutator.id),
+                desc: sub.article_desc_mutators.map(mutator => mutator.id)
+            },
+            sub.embed_colour,
+            sub.article_fetch_image,
+            sub.published_threshold,
+            active,
+            handleErrorMsg=false
+        );
+        if (!subPrimaryKey)
            throw Error("This subscription no longer exists.");
-        }

        showToast(
            active ? "success" : "danger",
            "Subscription " + (active ? "Activated" : "Deactivated"),
-            "Subscription ID: " + subId
+            "Subscription ID: " + subPrimaryKey
        );
    }
    catch (error) {
@ -187,10 +171,7 @@ $("#subscriptionsTabPane").on("change", ".sub-toggle-active", async function ()
    }
    finally {
        // Re-enable toggles after 500ms
-        setTimeout(() => {
-            $(".sub-toggle-active").prop("disabled", false); },
-            500
-        );
+        setTimeout(() => { $(".sub-toggle-active").prop("disabled", false); }, 500)
    }    
 });

@ -252,93 +233,70 @@ async function showEditSubModal(subId) {
    $("#subFormModal").modal("show");
 }

-function getValueFromField(elem) {
-    const tagName = elem.tagName.toLowerCase();
-    const $elem = $(elem);
-
-    if (tagName) { return $elem.val() }
-
-    switch ($elem.attr("type")) {
-        case "checkbox":
-            return $elem.prop("checked");
-
-        default:
-            return $elem.val();
-    }
-}
-
 $("#subForm").on("submit", async function(event) {
    event.preventDefault();

-    let subId = $("#subId").val();
-    let guildId = getCurrentlyActiveServer().guild_id;
+    var id = $("#subId").val();
+        name = $("#subName").val();
+        url = $("#subUrl").val();
+        guildId = getCurrentlyActiveServer().guild_id;
+        extraNotes = $("#subExtraNotes").val();
+        subChannels = Object.fromEntries($("#subChannels option:selected").toArray().map(channel => [channel.value, $(channel).data("name")]));
+        subFilters = $("#subFilters option:selected").toArray().map(filter => parseInt(filter.value));
+        subMutators = {
+            title: $("#subTitleMutators option:selected").toArray().map(mutator => parseInt(mutator.value)),
+            desc: $("#subDescMutators option:selected").toArray().map(mutator => parseInt(mutator.value))
+        }
+        subEmbedColour = $("#subEmbedColour .colour-text").val().split("#")[1];
+        articleFetchImage = $("#subArticleFetchImage").prop("checked")
+        publishedThreshold = $("#subPubThreshold").val();
+        active = $("#subActive").prop("checked");

-    // TODO: move this into a function, so I can fix the active toggle switches which are broken due to this change
+    var subPrimaryKey = await saveSubscription(id, name, url, guildId, extraNotes, subFilters, subMutators, subEmbedColour, articleFetchImage, publishedThreshold, active);

-    let formData = new FormData();
-    formData.append("guild_id", guildId);
-
-    // Populate formdata with [data-field] control values
-    $('#subForm [data-field], #subAdvancedModal [data-field]').each(function() {
-        const value = getValueFromField(this);
-        formData.append($(this).data("field"), value);
-    });
-
-    // Add title mutators to formdata
-    $("#subTitleMutators option:selected").toArray().map(mutator => parseInt(mutator.value)).forEach(
-        mutator => formData.append("article_title_mutators", mutator)
-    );
-
-    // Add description mutator to formdata
-    $("#subDescMutators option:selected").toArray().map(mutator => parseInt(mutator.value)).forEach(
-        mutator => formData.append("article_desc_mutators", mutator)
-    );
-
-    // Add Filters to formdata
-    $("#subFilters option:selected").toArray().forEach(
-        filter => formData.append("filters", parseInt(filter.value))
-    );
-
-    // This field is constructed differently, so needs to be specifically added
-    formData.append("embed_colour", getColourInputVal("subEmbedColour", false));
-
-
-    subId = await saveSubscription(subId, formData);
-
-    if (subId) {
-        showToast("success", "Subscription Saved", `Subscription ID ${subId}`);
-    }
-    else {
-        showToast("danger", "Error Saving Subscription", "");
-        return;
+    if (!subPrimaryKey) {
+        alert("prevented /subscriptions/false/subchannels");
+        return
    }

-    await deleteSubChannels(subId);
-    $("#subChannels option:selected").each(async function() {
-        let $channel = $(this);
-        let channelFormData = new FormData();
-        channelFormData.append("channel_id", $channel.val());
-        channelFormData.append("channel_name", $channel.data("name"));
-        channelFormData.append("subscription", subId);
-        await newSubChannel(channelFormData);
-    });
+    await deleteSubChannels(subPrimaryKey);
+    for (channelId in subChannels) {
+        await saveSubChannel(channelId, subChannels[channelId], subPrimaryKey);
+    }
+
+    if (subPrimaryKey) {
+        showToast("success", "Subscription Saved", "Subscription ID: " + subPrimaryKey);
+        await loadSubscriptions(guildId);
+    }

-    await loadSubscriptions(guildId);
    $("#subFormModal").modal("hide");
 });

-async function saveSubscription(id, formData, handleErrorMsg=true) {
-    let response
+async function saveSubscription(id, name, url, guildId, extraNotes, filters, mutators, embedColour, articleFetchImage, publishedTheshold, active, handleErrorMsg=true) {
+    var formData = new FormData();
+    formData.append("name", name);
+    formData.append("url", url);
+    formData.append("guild_id", guildId);
+    formData.append("extra_notes", extraNotes);
+    filters.forEach(filter => formData.append("filters", filter));
+    mutators.title.forEach(mutator => formData.append("article_title_mutators", mutator));
+    mutators.desc.forEach(mutator => formData.append("article_desc_mutators", mutator));
+    formData.append("embed_colour", embedColour);
+    formData.append("article_fetch_image", articleFetchImage);
+    formData.append("published_threshold", publishedTheshold);
+    formData.append("active", active);
+
+    var response;

    try {
-        response = id === "-1" ? await newSubscription(formData) : await editSubscription(id, formData);
+        if (id === "-1") response = await newSubscription(formData);
+        else response = await editSubscription(id, formData); 
    }
    catch (err) {
-        console.error(err);
+        console.error(err)

-        if (handleErrorMsg) {
+        if (handleErrorMsg)
            showToast("danger", "Subscription Error", err.responseText, 18000);
-        }

        return false;
    }
@ -346,7 +304,12 @@ async function saveSubscription(id, formData, handleErrorMsg=true) {
    return response.id;
 }

-async function saveSubChannel(formData) {
+async function saveSubChannel(channelId, channelName, subscriptionId) {
+    var formData = new FormData();
+    formData.append("channel_id", channelId);
+    formData.append("channel_name", channelName);
+    formData.append("subscription", subscriptionId);
+
    var response

    try {
@ -434,22 +397,20 @@ async function updateDefaultSubEmbedColour(settings=null) {
 $("#deleteEditSub").on("click", async function() {
    const subId = parseInt($("#subId").val());
    const sub = subTable.row(function(idx, row) { return row.id === subId }).data();
-    const subName = sanitise(sub.name);    
-
+    
    $("#subFormModal").modal("hide");

-    await confirmationModal(
-        "Delete a Subscription",
-        `Do you wish to permanently delete <b>${subName}</b>?`,
-        "danger",
+    await confirmDeleteModal(
+        "Confirm Deletion",
+        `Do you wish to permanently delete <b>${sub.name}</b>?`,
        async () => {
            await deleteSubscription(subId);
            await loadSubscriptions(getCurrentlyActiveServer().guild_id);
-    
+
            showToast(
                "danger",
                "Deleted a Subscription",
-                subName,
+                sub.name,
                12000
            );
        },
@ -463,35 +424,31 @@ async function deleteSelectedSubscriptions() {
    const rows = subTable.rows(".selected").data().toArray();
    const names = rows.map(row => row.name);    
    const namesString = arrayToHtmlList(names, true).prop("outerHTML");
-    const isMany = names.length > 1;
+    const multiple = names.length > 1;

-    await confirmationModal(
-        `Delete ${isMany ? "Many Subscriptions" : "a Subscription"}`,
-        `Do you wish to permanently delete ${isMany ? "these" : "this"} <b>${names.length}</b> subscription${isMany ? "s" : ""}?<br><br>${namesString}`,
-        "danger",
+    await confirmDeleteModal(
+        `Confirm ${multiple ? "Multiple Deletions" : "Deletion"}`,
+        `Do you wish to permanently delete ${multiple ? "these" : "this"} <b>${names.length}</b> subscription${multiple ? "s" : ""}?<br><br>${namesString}`,
        async () => {
            rows.forEach(async row => { await deleteSubscription(row.id) });
-    
+
            showToast(
                "danger",
-                `Deleted ${names.length} Subscription${isMany ? "s" : ""}`,
+                `Deleted ${names.length} Subscription${multiple ? "s" : ""}`,
                `${arrayToHtmlList(names, false).prop("outerHTML")}`,
                12000
-            );
-    
-            // Multi-deletion can take time, this timeout ensures the refresh is accurate
-            setTimeout(async () => {
-                await loadSubscriptions(getCurrentlyActiveServer().guild_id);
-            }, 600);
+            )
+
+            await loadSubscriptions(getCurrentlyActiveServer().guild_id);
        },
        null
-        
-    );
+    )
 }

 // #endregion


+
 // #region Load Modal Options

 async function loadChannelOptions(guildId) {
@ -525,7 +482,7 @@ async function loadChannelOptions(guildId) {
            if (getCurrentlyActiveServer().guild_id === guildId)
                $("#serverJoinAlert").show();

-            const guildName = sanitise(getServerFromSnowflake(guildId).name);
+            const guildName = getServerFromSnowflake(guildId).name;

            throw new Error(
                `Unable to retrieve channels from Guild <b>${guildName}</b>.
--- a/apps/templates/home/includes/deletemodal.html
+++ b/apps/templates/home/includes/deletemodal.html
@ -1,15 +1,15 @@
-<div id="confirmationModal" class="modal fade" data-bs-backdrop="static" tabindex="-1">
+<div id="confirmDeleteModal" class="modal fade" data-bs-backdrop="static" tabindex="-1">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content rounded-1">
            <div class="modal-header">
                <h5 class="modal-title mx-2"></h5>
            </div>
-            <div class="modal-body p-4">
-                <p class="mb-0"></p>
+            <div class="modal-body">
+                <p class="mx-2"></p>
            </div>
            <div class="modal-footer px-4">
-                <button type="button" class="btn rounded-1 modal-confirm-btn" tabindex="1">Confirm</button>
-                <button type="button" class="btn btn-secondary rounded-1 ms-3 ms-0 modal-dismiss-btn" tabindex="2">Cancel</button>
+                <button type="button" class="btn btn-danger rounded-1 confirm-delete-btn" tabindex="1">Delete</button>
+                <button type="button" class="btn btn-secondary rounded-1 ms-3 ms-0 dismiss-delete-btn" tabindex="2">Cancel</button>
            </div>
        </div>
    </div>
--- a/apps/templates/home/includes/servermodal.html
+++ b/apps/templates/home/includes/servermodal.html
@ -9,7 +9,7 @@
                    </h5>
                </div>
                <div class="modal-body p-4">
-                    <div class="d-flex flex-nowrap mb-3">
+                    <div class="d-flex flex-nowrap">
                        <div class="flex-fill">
                            <select name="serverOptions" id="serverOptions" class="select-2 rounded-1" data-dropdownparent="#serverFormModal">
                                <option value="">-- Select a Server --</option>
@ -20,8 +20,7 @@
                        </button>
                    </div>
                    <p class="mb-0 form-text">
-                        <b>Not seeing your server?</b>
-                        Ensure that you are authenticated as either the owner or an administrator of the server you wish to add.
+                        You must be an administrator, or own the selected server.
                    </p>
                </div>
                <div class="modal-footer px-4">
--- a/apps/templates/home/includes/submodal.html
+++ b/apps/templates/home/includes/submodal.html
@ -10,19 +10,19 @@
                    </h5>
                </div>
                <div class="modal-body p-4">
-                    <input type="hidden" id="subId" name="subId" data-role="is-id">
+                    <input type="hidden" id="subId" name="subId">
                    <div class="row">
                        <div class="col-lg-6 pe-lg-4">
                            <div class="mb-4">
                                <label for="subName" class="form-label">Name</label>
-                                <input type="text" id="subName" name="subName" class="form-control rounded-1" placeholder="My News Feed" data-field="name" tabindex="1">
+                                <input type="text" id="subName" name="subName" class="form-control rounded-1" placeholder="My News Feed" tabindex="1">
                                <div class="form-text">Use a unique name to refer to this subscription.</div>
                            </div>
                        </div>
                        <div class="col-lg-6 ps-lg-4">
                            <div class="mb-4">
                                <label for="subUrl" class="form-label">URL</label>
-                                <input type="url" id="subUrl" name="subUrl" class="form-control rounded-1" placeholder="http://example.com/rss.xml" data-field="url" tabindex="2">
+                                <input type="url" id="subUrl" name="subUrl" class="form-control rounded-1" placeholder="http://example.com/rss.xml" tabindex="2">
                                <div class="form-text">Must point to a valid <a href="https://en.wikipedia.org/wiki/RSS" class="text-decoration-none" target="_blank">RSS</a> feed.</div>
                            </div>
                        </div>
@ -43,14 +43,14 @@
                        <div class="col-lg-6 pe-lg-4">
                            <div class="mb-4 mb-lg-0">
                                <label for="subExtraNotes" class="form-label">Extra Notes</label>   
-                                <textarea id="subExtraNotes" name="subExtraNotes" class="form-control rounded-1" placeholder="" data-field="extra_notes" tabindex="5" style="resize: none; height: 7rem"></textarea>
+                                <textarea id="subExtraNotes" name="subExtraNotes" class="form-control rounded-1" placeholder="" tabindex="5" style="resize: none; height: 7rem"></textarea>
                            </div>
                        </div>
                        <div class="col-lg-6 ps-lg-4">
                            <div class="form-switch mb-4 ps-0">
                                <label for="subActive" class="form-check-label mb-2">Active</label>
                                <br>
-                                <input type="checkbox" id="subActive" name="subActive" class="form-check-input ms-0 mt-0" data-field="active" tabindex="6">
+                                <input type="checkbox" id="subActive" name="subActive" class="form-check-input ms-0 mt-0" tabindex="6">
                                <br>
                                <div class="form-text">Inactive subscriptions wont be processed.</div>
                            </div>
@ -129,7 +129,7 @@
                        <div class="col-lg-6 ps-lg-4">
                            <div class="mb-4">
                                <label for="subPubThreshold" class="form-label">Publish Datetime Threshold</label>
-                                <input type="datetime-local" name="subPubThreshold" id="subPubThreshold" class="form-control" data-field="published_threshold" tabindex="9">
+                                <input type="datetime-local" name="subPubThreshold" id="subPubThreshold" class="form-control" tabindex="9">
                                <div class="form-text">RSS content older than this datetime will be skipped.</div>
                            </div>
                        </div>
@ -137,7 +137,7 @@
                            <div class="form-switch ps-0">
                                <label for="subArticleFetchImage" class="form-check-label mb-2">Show Images on Embed?</label>
                                <br>
-                                <input type="checkbox" id="subArticleFetchImage" name="subArticleFetchImage" class="form-check-input ms-0 mt-0" data-field="article_fetch_image" tabindex="10">
+                                <input type="checkbox" id="subArticleFetchImage" name="subArticleFetchImage" class="form-check-input ms-0 mt-0" tabindex="10">
                                <br>
                                <div class="form-text">Show images on the discord embed?</div>
                            </div>
--- a/apps/templates/home/index.html
+++ b/apps/templates/home/index.html
@ -6,7 +6,7 @@

 {% block stylesheets %}
 <link type="text/css" rel="stylesheet" href="{% static '/css/home/index.css' %}">
-<link type="text/css" rel="stylesheet" href="{% static '/css/select2.css' %}">
+<link type="text/css" rel="stylesheet" href="{% static '/css/home/select2.css' %}">
 {% endblock stylesheets %}

 {% block content %}
@ -70,7 +70,7 @@
                            <span class="resolve-to-server-name"></span>,
                            features here will not function properly, please add the bot before proceeding.
                        </div>
-                        <a class="ms-auto btn btn-warning rounded-1 text-nowrap resolve-to-invite-link" target="_blank">Add PYRSS</a>
+                        <a class="ms-auto btn btn-warning rounded-1 text-nowrap resolve-to-invite-link">Add PYRSS</a>
                    </div>
                </div>

--- a/apps/templates/includes/footer.html
+++ b/apps/templates/includes/footer.html
@ -9,11 +9,6 @@
                    <i class="bi bi-git fs-5"></i>
                </a>
            </li>
-            <li class="ms-3">
-                <a href="https://gitea.corbz.dev/corbz/PYRSS-Website/wiki" class="text-reset" target="_blank">
-                    <i class="bi bi-question-lg fs-5"></i>
-                </a>
-            </li>
        </ul>
    </footer>
 </div>
--- a/apps/templates/includes/navbar.html
+++ b/apps/templates/includes/navbar.html
@ -16,16 +16,15 @@
                </div>
                <div class="offcanvas-body">
                    <ul class="navbar-nav justify-content-end flex-grow-1 pe-3 align-items-center">
-                        <li class="nav-item w-lg-100 py-lg-0 py-3 px-lg-0 px-1">
-                            <button type="button" id="themeToggle" class="me-0 btn btn-link p-0 text-body text-decoration-none">
+                        <li class="nav-item">
+                            <button type="button" id="themeToggle" class="me-3 btn btn-link p-0 text-body">
                                <i class="bi bi-sun"></i>
-                                <span class="d-lg-none ms-2 text-body-secondary">Change Theme</span>
                            </button>
                        </li>
                        {% if request.user.is_authenticated %}
-                        <li class="nav-item w-lg-100">
+                        <li class="nav-item">
                            <div class="dropdown">
-                                <button type="button" class="nav-link dropdown-toggle ms-lg-3" data-bs-toggle="dropdown">
+                                <button type="button" class="nav-link dropdown-toggle" data-bs-toggle="dropdown">
                                    <img src="{{ request.user.avatar_url }}" alt="User Icon" width="30" class="rounded-circle me-2">
                                    <span>{{ request.user.global_name }}</span>
                                </button>
--- a/apps/templates/rest_framework/_api.html
+++ b/apps/templates/rest_framework/_api.html
@ -0,0 +1,15 @@
+{% extends "rest_framework/base.html" %}
+{% load static %}
+
+{% block bootstrap_theme %}
+<link type="text/css" rel="stylesheet" href="{% static '/css/bootstrap.css' %}" />
+<link type="text/css" rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
+{% endblock bootstrap_theme %}
+
+{% block content %}
+<main>
+    <section title="Page Header">
+        <div class="page-header">{{ name }}</div>
+    </section>
+</main>
+{% endblock content %}
--- a/core/settings.py
+++ b/core/settings.py
@ -9,7 +9,7 @@ from django.utils import timezone

 log = logging.getLogger(__name__)

-VERSION = "0.3.4"
+VERSION = "0.3.3"

 # BASE_DIR is the root of the project, all paths should be constructed from it using pathlib
 BASE_DIR = Path(__file__).parent.parent
@ -137,7 +137,7 @@ AUTHENTICATION_BACKENDS = [
 BOT_TOKEN = env("BOT_TOKEN", default=None)
 DISCORD_KEY = env("DISCORD_KEY", default=None)
 DISCORD_SECRET = env("DISCORD_SECRET", default=None)
-DISCORD_SCOPES = env("DISCORD_SCOPES", default="identity,guilds").split(",") # ["identify", "guilds"]
+DISCORD_SCOPES = ["identify", "guilds"]
 DISCORD_CODE_EXCHANGE_REQUEST = {
    "headers": {"Content-Type": "application/x-www-form-urlencoded"},
    "data": {