Merge pull request 'staging into master' (#69) from staging into master

Reviewed-on: #69

.bumpversion.cfg

@@ -1,5 +1,5 @@
 [bumpversion]
-current_version = 0.3.3
+current_version = 0.3.4
 commit = True
 tag = True
 

CHANGELOG.md

@@ -1,9 +1,24 @@
 
+**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**

apps/api/views.py

@@ -63,6 +63,15 @@ 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)
@@ -94,6 +103,15 @@ 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
@@ -411,7 +429,10 @@ class GuildSettings_ListView(generics.ListCreateAPIView):
         if self.request.user.is_superuser:
             return GuildSettings.objects.all()
 
-        return GuildSettings.objects.filter(added_by=self.request.user)
+        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)
 
     def post(self, request):
         saved_guilds = SavedGuilds.objects.filter(added_by=request.user)
@@ -498,6 +519,15 @@ 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)
@@ -529,6 +559,15 @@ 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):
     """

apps/static/css/base.css

@@ -27,4 +27,51 @@
     --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; }
 }

apps/static/css/select2.css

@@ -1,11 +1,6 @@
 /* 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;
@@ -28,15 +23,6 @@
     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;
@@ -81,14 +67,23 @@
     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;
-    /* box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25); */
+    background-color: var(--bs-body-bg);
+}
 
+.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;
 }

apps/static/js/api.js

@@ -28,7 +28,8 @@ function makeQuerystring(filters, sort) {
     for (key in filters) {
         querystring += `${key}=${filters[key]}&`;
     }
-    return querystring += `ordering=${sort}`;
+
+    return sort ? querystring += `ordering=${sort}` : querystring;
 }
 
 // Saved Guilds
@@ -64,8 +65,7 @@ async function loadChannels(guildId) {
 
 async function getSubscriptions(filters, sort) {
     let querystring = makeQuerystring(filters, sort);
-        url = `/api/subscription/${querystring}`;
-    return await ajaxRequest(url, "GET");
+    return await ajaxRequest(`/api/subscription/${querystring}`, "GET");
 }
 
 async function getSubscription(id) {
@@ -116,8 +116,7 @@ async function deleteSubChannels(subscriptionId) {
 
 async function getFilters(filters, sort) {
     let querystring = makeQuerystring(filters, sort);
-        url = `/api/filter/${querystring}`;
-    return await ajaxRequest(url, "GET");
+    return await ajaxRequest(`/api/filter/${querystring}`, "GET");
 }
 
 async function getFilter(id) {

apps/static/js/base.js

@@ -19,6 +19,24 @@ 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 = {
+        '&': '&',
+        '<': '&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();

apps/static/js/home/content.js

@@ -46,7 +46,9 @@ async function initContentTable() {
                 data: "title",
                 className: "text-truncate",
                 render: function(data, type, row) {
-                    return `<a href="${row.url}" class="btn btn-link text-start text-decoration-none" target="_blank">${data}</a>`
+                    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>`
                 }
             },
             {
@@ -54,7 +56,8 @@ async function initContentTable() {
                 data: "subscription.name",
                 className: "text-nowrap",
                 render: function(data, type, row) {
-                    return `<button type="button" onclick="goToSubscription(${row.subscription.id})" class="btn btn-link text-start text-decoration-none">${data}</button>`
+                    const subName = sanitise(data);
+                    return `<button type="button" onclick="goToSubscription(${row.subscription.id})" class="btn btn-link text-start text-decoration-none">${subName}</button>`
                 }
             },
             {
@@ -70,7 +73,9 @@ async function initContentTable() {
                 data: "channel_id",
                 className: "text-start",
                 render: function(data, type, row) {
-                    return `<div class="resolve-channel-name text-center" data-channel-id="${data}" data-msg-id="${row.message_id}">
+                    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}">
                                 <div class="spinner-border spinner-border-sm" role="status">
                                     <span class="visually-hidden">Loading...</span>
                                 </div>
@@ -98,7 +103,8 @@ async function initContentTable() {
                 orderable: false,
                 className: "p-0",
                 render: function(data, type, row) {
-                    return `<div class="h-100" style="background-color: #${row.subscription.embed_colour}; width: .25rem;">&nbsp;</div>`
+                    const embedColour = sanitise(row.subscription.embed_colour);
+                    return `<div class="h-100" style="background-color: #${embedColour}; width: .25rem;">&nbsp;</div>`
                 }
             }
         ]
@@ -128,8 +134,9 @@ function startResolveChannelNamesTask() {
 }
 
 function resolveChannelNames(guildId) {
-    if (!discordChannels.length)
+    if (!discordChannels.length) {
         return false
+    }
 
     $(".resolve-channel-name").each(function() {
         const channelId = $(this).data("channel-id");
@@ -165,20 +172,26 @@ 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 multiple = names.length > 1;
+    const isMany = names.length > 1;
 
-    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}`,
+    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",
         async () => {
             rows.forEach(async row => { await deleteTrackedContent(row.id) });
 
             showToast(
                 "danger",
-                `Deleted ${names.length} Content${multiple ? "s" : ""}`,
+                `Deleted ${names.length} Content${isMany ? "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
     );

apps/static/js/home/filters.js

@@ -40,7 +40,8 @@ async function initFiltersTable() {
                 title: "Name",
                 data: "name",
                 render: function(data, type, row) {
-                    return `<button type="button" onclick="showEditFilterModal(${row.id})" class="btn btn-link text-start text-decoration-none">${data}</button>`
+                    const name = sanitise(data);
+                    return `<button type="button" onclick="showEditFilterModal(${row.id})" class="btn btn-link text-start text-decoration-none">${name}</button>`
                 }
             },
             {
@@ -55,7 +56,7 @@ async function initFiltersTable() {
                         case 5: return "Fuzzy Match";
                         default:
                             console.error(`unknown matching algorithm '${data}'`);
-                            return data;
+                            return sanitise(data);
                     }
                 }
             },
@@ -252,12 +253,14 @@ $(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 confirmDeleteModal(
-        "Confirm Deletion",
-        `Do you wish to permanently delete <b>${filter.name}</b>?`,
+    await confirmationModal(
+        "Delete a Filter",
+        `Do you wish to permanently delete <b>${filterName}</b>?`,
+        "danger",
         async () => {
             await deleteFilter(filterId);
             await loadFilters(getCurrentlyActiveServer().guild_id);
@@ -265,7 +268,7 @@ $("#deleteEditFilter").on("click", async function() {
             showToast(
                 "danger",
                 "Deleted a Filter",
-                filter.name,
+                filterName,
                 12000
             );
         },
@@ -279,24 +282,29 @@ 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 multiple = names.length > 1;
+    const isMany = names.length > 1;
 
-    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}`,
+    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",
         async () => {
             rows.forEach(async row => { await deleteFilter(row.id) });
-
+    
             showToast(
                 "danger",
-                `Delete ${names.length} Subscription${multiple ? "s" : ""}`,
+                `Delete ${names.length} Subscription${isMany ? "s" : ""}`,
                 `${arrayToHtmlList(names, false).prop("outerHTML")}`,
                 12000
             );
-
-            await loadFilters(getCurrentlyActiveServer().guild_id);
+    
+            // Multi-deletion can take time, this timeout ensures the refresh is accurate
+            setTimeout(async () => {
+                await loadFilters(getCurrentlyActiveServer().guild_id);
+            }, 600);
         },
         null
+
     );
 }
 

apps/static/js/home/index.js

@@ -155,23 +155,33 @@ $(document).ready(function() {
     });
 });
 
-async function confirmDeleteModal(title, description, acceptFunc, declineFunc) {
-    let $modal = $("#confirmDeleteModal");
+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}`);
+
     $modal.find(".modal-title").text(title);
-    $modal.find(".modal-body > p").html(description);
-    $modal.find(".confirm-delete-btn").off("click").on("click", async function(e) {
+    $modal.find(".modal-body > p").html(bodyText);
+
+    $modal.find(".modal-confirm-btn").off("click").on("click", async function(e) {
         await acceptFunc()
         $modal.modal("hide");
     });
-    $modal.find(".dismiss-delete-btn").off("click").on("click", async function(e) {
+
+    $modal.find(".modal-dismiss-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>");
+    $ul = $("<ul>").addClass("mb-0");
 
     array.forEach(item => {
         let $li = $("<li>");

apps/static/js/home/servers.js

@@ -35,7 +35,7 @@ function addToLoadedServers(server, selectNew=true) {
     loadedServers[id] = server;
 
     // Display the loaded server
-    addServerTemplate(id, server.guild_id, server.name, server.icon, server.permissions, server.owner);
+    addServerTemplate(id, sanitise(server.guild_id), sanitise(server.name), sanitise(server.icon), sanitise(server.permissions), sanitise(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: server.name,
-                "data-icon": server.icon,
-                "data-permissions": server.permissions,
-                "data-isowner": server.owner
+                text: sanitise(server.name),
+                "data-icon": sanitise(server.icon),
+                "data-permissions": sanitise(server.permissions),
+                "data-isowner": sanitise(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 ${serverName} because it already exists.`, 10000);
+            showToast("warning", "Server Conflict", `Can't add ${sanitise(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(server.name);
-    $("#selectedServerContainer .selected-server-id").text(server.guild_id);
+    $("#selectedServerContainer .selected-server-name").text(sanitise(server.name));
+    $("#selectedServerContainer .selected-server-id").text(sanitise(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,9 +253,10 @@ $("#deleteSelectedServerBtn").on("click", async function() {
     ];
     const notesString = arrayToHtmlList(notes).prop("outerHTML");
 
-    await confirmDeleteModal(
+    await confirmationModal(
         "Close this server?",
         `This is a safe, non-permanent action:<br><br>${notesString}`,
+        "warning",
         deleteSelectedServer,
         null
     );
@@ -294,23 +295,19 @@ function resolveServerStrings() {
     const server = getCurrentlyActiveServer();
 
     // Server names
-    $(".resolve-to-server-name").text(server.name);
+    $(".resolve-to-server-name").text(sanitise(server.name));
 
     // Server Guild Ids
-    $(".resolve-to-server-id").text(server.guild_id)
+    $(".resolve-to-server-id").text(sanitise(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=${server.guild_id}
+&guild_id=${sanitise(server.guild_id)}
 &disable_guild_select=true`);
 
 }
 
-$("#backToSelectServer").on("click", function() {
-
-});
-
 // #endregion

apps/static/js/home/subscriptions.js

@@ -43,7 +43,8 @@ async function initSubscriptionTable() {
                 data: "name",
                 className: "text-truncate",
                 render: function(data, type, row) {
-                    return `<button type="button" onclick="showEditSubModal(${row.id})" class="btn btn-link text-start text-decoration-none">${data}</button>`;
+                    const name = sanitise(data);
+                    return `<button type="button" onclick="showEditSubModal(${row.id})" class="btn btn-link text-start text-decoration-none">${name}</button>`;
                 }
             },
             {
@@ -51,7 +52,8 @@ async function initSubscriptionTable() {
                 data: "url",
                 className: "text-truncate",
                 render: function(data, type) {
-                    return `<a href="${data}" class="btn btn-link text-start text-decoration-none" target="_blank">${data}</a>`;
+                    const url = sanitise(data);
+                    return `<a href="${url}" class="btn btn-link text-start text-decoration-none" target="_blank">${url}</a>`;
                 }
             },
             { 
@@ -59,7 +61,8 @@ async function initSubscriptionTable() {
                 data: "channels_count",
                 className: "text-center",
                 render: function(data) {
-                    return `<span class="badge text-bg-secondary">${data}</span>`;
+                    const channelsCount = sanitise(data);
+                    return `<span class="badge text-bg-secondary">${channelsCount}</span>`;
                 }
             },
             {
@@ -84,13 +87,14 @@ async function initSubscriptionTable() {
                 orderable: false,
                 className: "text-center",
                 render: function(data, type) {
-                    if (!data) return "";
+                    if (!data) { return "" }
+                    const extraNotes = sanitise(data);
                     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="${data}">
+                            data-bs-content="${extraNotes}">
                         </i>
                     `).popover()[0];
                 }
@@ -108,7 +112,8 @@ async function initSubscriptionTable() {
                 orderable: false,
                 className: "p-0",
                 render: function(data, type, row) {
-                    return `<div class="h-100" style="background-color: #${row.embed_colour}; width: .25rem;">&nbsp;</div>`
+                    const embedColour = sanitise(row.embed_colour);
+                    return `<div class="h-100" style="background-color: #${embedColour}; width: .25rem;">&nbsp;</div>`
                 }
             }
         ]
@@ -117,6 +122,31 @@ 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 () {
 
     /*
@@ -135,30 +165,16 @@ $("#subscriptionsTabPane").on("change", ".sub-toggle-active", async function ()
         subTable.data(sub).draw();
 
         // Update the database
-        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)
+        const subId = await updateSubFromObject(sub, handleErrorMsg=false);
+
+        if (!subId) {
             throw Error("This subscription no longer exists.");
+        }
 
         showToast(
             active ? "success" : "danger",
             "Subscription " + (active ? "Activated" : "Deactivated"),
-            "Subscription ID: " + subPrimaryKey
+            "Subscription ID: " + subId
         );
     }
     catch (error) {
@@ -171,7 +187,10 @@ $("#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
+        );
     }    
 });
 
@@ -233,70 +252,93 @@ 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();
 
-    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");
+    let subId = $("#subId").val();
+    let guildId = getCurrentlyActiveServer().guild_id;
 
-    var subPrimaryKey = await saveSubscription(id, name, url, guildId, extraNotes, subFilters, subMutators, subEmbedColour, articleFetchImage, publishedThreshold, active);
+    // TODO: move this into a function, so I can fix the active toggle switches which are broken due to this change
 
-    if (!subPrimaryKey) {
-        alert("prevented /subscriptions/false/subchannels");
-        return
+    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;
     }
 
-    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 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 loadSubscriptions(guildId);
     $("#subFormModal").modal("hide");
 });
 
-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;
+async function saveSubscription(id, formData, handleErrorMsg=true) {
+    let response
 
     try {
-        if (id === "-1") response = await newSubscription(formData);
-        else response = await editSubscription(id, formData); 
+        response = id === "-1" ? await newSubscription(formData) : 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;
     }
@@ -304,12 +346,7 @@ async function saveSubscription(id, name, url, guildId, extraNotes, filters, mut
     return response.id;
 }
 
-async function saveSubChannel(channelId, channelName, subscriptionId) {
-    var formData = new FormData();
-    formData.append("channel_id", channelId);
-    formData.append("channel_name", channelName);
-    formData.append("subscription", subscriptionId);
-
+async function saveSubChannel(formData) {
     var response
 
     try {
@@ -397,20 +434,22 @@ 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 confirmDeleteModal(
-        "Confirm Deletion",
-        `Do you wish to permanently delete <b>${sub.name}</b>?`,
+    await confirmationModal(
+        "Delete a Subscription",
+        `Do you wish to permanently delete <b>${subName}</b>?`,
+        "danger",
         async () => {
             await deleteSubscription(subId);
             await loadSubscriptions(getCurrentlyActiveServer().guild_id);
-
+    
             showToast(
                 "danger",
                 "Deleted a Subscription",
-                sub.name,
+                subName,
                 12000
             );
         },
@@ -424,31 +463,35 @@ 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 multiple = names.length > 1;
+    const isMany = names.length > 1;
 
-    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}`,
+    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",
         async () => {
             rows.forEach(async row => { await deleteSubscription(row.id) });
-
+    
             showToast(
                 "danger",
-                `Deleted ${names.length} Subscription${multiple ? "s" : ""}`,
+                `Deleted ${names.length} Subscription${isMany ? "s" : ""}`,
                 `${arrayToHtmlList(names, false).prop("outerHTML")}`,
                 12000
-            )
-
-            await loadSubscriptions(getCurrentlyActiveServer().guild_id);
+            );
+    
+            // Multi-deletion can take time, this timeout ensures the refresh is accurate
+            setTimeout(async () => {
+                await loadSubscriptions(getCurrentlyActiveServer().guild_id);
+            }, 600);
         },
         null
-    )
+        
+    );
 }
 
 // #endregion
 
 
-
 // #region Load Modal Options
 
 async function loadChannelOptions(guildId) {
@@ -482,7 +525,7 @@ async function loadChannelOptions(guildId) {
             if (getCurrentlyActiveServer().guild_id === guildId)
                 $("#serverJoinAlert").show();
 
-            const guildName = getServerFromSnowflake(guildId).name;
+            const guildName = sanitise(getServerFromSnowflake(guildId).name);
 
             throw new Error(
                 `Unable to retrieve channels from Guild <b>${guildName}</b>.

apps/templates/home/includes/deletemodal.html

@@ -1,15 +1,15 @@
-<div id="confirmDeleteModal" class="modal fade" data-bs-backdrop="static" tabindex="-1">
+<div id="confirmationModal" 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 class="mx-2"></p>
+            <div class="modal-body p-4">
+                <p class="mb-0"></p>
             </div>
             <div class="modal-footer px-4">
-                <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>
+                <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>
             </div>
         </div>
     </div>

apps/templates/home/includes/servermodal.html

@@ -9,7 +9,7 @@
                     </h5>
                 </div>
                 <div class="modal-body p-4">
-                    <div class="d-flex flex-nowrap">
+                    <div class="d-flex flex-nowrap mb-3">
                         <div class="flex-fill">
                             <select name="serverOptions" id="serverOptions" class="select-2 rounded-1" data-dropdownparent="#serverFormModal">
                                 <option value="">-- Select a Server --</option>
@@ -20,7 +20,8 @@
                         </button>
                     </div>
                     <p class="mb-0 form-text">
-                        You must be an administrator, or own the selected server.
+                        <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.
                     </p>
                 </div>
                 <div class="modal-footer px-4">

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">
+                    <input type="hidden" id="subId" name="subId" data-role="is-id">
                     <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" tabindex="1">
+                                <input type="text" id="subName" name="subName" class="form-control rounded-1" placeholder="My News Feed" data-field="name" 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" tabindex="2">
+                                <input type="url" id="subUrl" name="subUrl" class="form-control rounded-1" placeholder="http://example.com/rss.xml" data-field="url" 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="" tabindex="5" style="resize: none; height: 7rem"></textarea>
+                                <textarea id="subExtraNotes" name="subExtraNotes" class="form-control rounded-1" placeholder="" data-field="extra_notes" 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" tabindex="6">
+                                <input type="checkbox" id="subActive" name="subActive" class="form-check-input ms-0 mt-0" data-field="active" 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" tabindex="9">
+                                <input type="datetime-local" name="subPubThreshold" id="subPubThreshold" class="form-control" data-field="published_threshold" 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" tabindex="10">
+                                <input type="checkbox" id="subArticleFetchImage" name="subArticleFetchImage" class="form-check-input ms-0 mt-0" data-field="article_fetch_image" tabindex="10">
                                 <br>
                                 <div class="form-text">Show images on the discord embed?</div>
                             </div>

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/home/select2.css' %}">
+<link type="text/css" rel="stylesheet" href="{% static '/css/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">Add PYRSS</a>
+                        <a class="ms-auto btn btn-warning rounded-1 text-nowrap resolve-to-invite-link" target="_blank">Add PYRSS</a>
                     </div>
                 </div>
 

apps/templates/includes/footer.html

@@ -9,6 +9,11 @@
                     <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>

apps/templates/includes/navbar.html

@@ -16,15 +16,16 @@
                 </div>
                 <div class="offcanvas-body">
                     <ul class="navbar-nav justify-content-end flex-grow-1 pe-3 align-items-center">
-                        <li class="nav-item">
-                            <button type="button" id="themeToggle" class="me-3 btn btn-link p-0 text-body">
+                        <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">
                                 <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">
+                        <li class="nav-item w-lg-100">
                             <div class="dropdown">
-                                <button type="button" class="nav-link dropdown-toggle" data-bs-toggle="dropdown">
+                                <button type="button" class="nav-link dropdown-toggle ms-lg-3" 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>

core/settings.py

@@ -9,7 +9,7 @@ from django.utils import timezone
 
 log = logging.getLogger(__name__)
 
-VERSION = "0.3.3"
+VERSION = "0.3.4"
 
 # 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 = ["identify", "guilds"]
+DISCORD_SCOPES = env("DISCORD_SCOPES", default="identity,guilds").split(",") # ["identify", "guilds"]
 DISCORD_CODE_EXCHANGE_REQUEST = {
     "headers": {"Content-Type": "application/x-www-form-urlencoded"},
     "data": {