template tag security, errors, and tests

Author: smattymatty

BaseApp/__pycache__/constants.cpython-310.pyc

@@ -1,4 +1,4 @@
-LOG_FORMAT = "{time} -- {level} -- {function} -- line {line}\n\t {message}"
+LOG_FORMAT = "{time}{level}\n{function}{line}{message}"
 # colors! upon changing these, run manage.py tailwind_dummy
 COLORS = [
     "red",

BaseApp/__pycache__/exceptions.cpython-310.pyc

@@ -0,0 +1,18 @@
+from django.template.exceptions import TemplateSyntaxError
+
+
+class TemplateTagInitError(TemplateSyntaxError):
+    """
+    Custom exception for init errors in template tags.
+
+    This exception automatically appends a message about not including a specific suffix
+
+    example usage:
+    raise TemplateTagInitError(f"Invalid group ID '{group_id}'.", "-toggled-button-group")
+    """
+
+    def __init__(self, msg: str, reserved_suffix: str = ""):
+        if reserved_suffix:
+            super().__init__(
+                f"{msg}\n\nDo not include the '{reserved_suffix}' suffix in this tag's argument.\nIf your group's ID is 'example-abc{reserved_suffix}', use 'example-abc' as the argument."
+            )

BaseApp/__pycache__/tests.cpython-310.pyc

@@ -6,7 +6,7 @@ const DEBUG = false;
  * and optionally trigger HTMX requests.
  *
  * Usage:
- *   1. Create a button group container element in your HTML with an ID ending in "-button-group".
+ *   1. Create a button group container element in your HTML with an ID ending in "-toggled-button-group".
  *   2. Add "button" elements inside the container.
  *   3. (Optional) Set `data-active-class` on the container to customize the active class (default is "active").
  *   4. (Optional) Set `data-initial-active` on the container to define the initially active button (options: "first", "last", "none", "random" or a number for the button index).
@@ -16,7 +16,9 @@ const DEBUG = false;
 export class ToggledButtonGroup {
   constructor(config) {
     this.groupId = config.groupId;
-    this.container = document.getElementById(`${this.groupId}-button-group`);
+    this.container = document.getElementById(
+      `${this.groupId}-toggled-button-group`
+    );
     this.buttons = this.container
       ? this.container.querySelectorAll("button")
       : [];
@@ -26,7 +28,7 @@ export class ToggledButtonGroup {
     // ERROR CHECKING
     if (!this.container) {
       console.error(
-        `[ToggledButtonGroup Error] Button group container with ID "${this.groupId}-button-group" not found. Please ensure the container element exists and has the correct ID.`
+        `[ToggledButtonGroup Error] Button group container with ID "${this.groupId}-toggled-button-group" not found. Please ensure the container element exists and has the correct ID.`
       );
       return;
     }
@@ -157,16 +159,18 @@ export class ToggledButtonGroup {
 }
 ToggledButtonGroup.initAll = function (groupFilter = "") {
   // Use this to Initialize all button groups
-  // with an empty string, it will check for all elements with the ID ending in "-button-group"
-  // given a string as argument, it will only check for elements with the ID starting with the string and ending in "-button-group"
+  // with an empty string, it will check for all elements with the ID ending in "-toggled-button-group"
+  // given a string as argument, it will only check for elements with the ID starting with the string and ending in "-toggled-button-group"
   // if the string includes spaces, it will split the string and call itself recursively
   const initializedGroups = new Set();
   const initializeGroup = (groupId) => {
     if (initializedGroups.has(groupId)) return; // Skip if already initialized
-    const groupElement = document.getElementById(`${groupId}-button-group`);
+    const groupElement = document.getElementById(
+      `${groupId}-toggled-button-group`
+    );
     if (!groupElement) {
       console.error(
-        `[ToggledButtonGroup Error] Button group container with ID "${groupId}-button-group" not found.`
+        `[ToggledButtonGroup Error] Button group container with ID "${groupId}-toggled-button-group" not found.`
       );
       return;
     }
@@ -189,9 +193,9 @@ ToggledButtonGroup.initAll = function (groupFilter = "") {
   } else {
     // Initialize all groups if no filter is provided
     document
-      .querySelectorAll('[id$="-button-group"]')
+      .querySelectorAll('[id$="-toggled-button-group"]')
       .forEach((groupElement) => {
-        initializeGroup(groupElement.id.replace("-button-group", ""));
+        initializeGroup(groupElement.id.replace("-toggled-button-group", ""));
       });
   }
 };

BaseApp/__pycache__/urls.cpython-310.pyc

@@ -1,7 +1,7 @@
 {% load static %}
 <div class="bg-black/10 text-center bg-gradient-to-b from-black/20 from-0% via-blue-300/5 via-5% to-black/20 to-50%">
     <span class="text-sm text-white/30">Click to learn more about technologies used on this website</span>
-    <div id="tech-info-button-group"
+    <div id="tech-info-toggled-button-group"
          data-active-class="bg-black/50 hover:bg-black/50 font-bold text-white border-b-4 border-white/20"
          data-initial-active="random"
          class="flex gap-4 p-2 px-6 w-full justify-evenly">

BaseApp/__pycache__/views.cpython-310.pyc

@@ -1,10 +1,11 @@
+{% load button_group_tags %}
 <div class="flex flex-col space-y-2 border border-y-4 border-white/10 rounded-lg p-4 bg-slate-900/50">
     <h4 class="text-lg font-bold text-center">
         Responsive Row/Column of Buttons, toggled active, uniform size, initial first, dark theme
     </h4>
-    <form id="example-button-group"
+    <form id="example-toggled-button-group"
           data-active-class="bg-black/50 hover:bg-black/50 font-bold text-white border-b-4 border-white/20"
-          data-initial-active="2"
+          data-initial-active="first"
           class="flex flex-col md:flex-row gap-2 justify-center">
         {% csrf_token %}
         <button hx-post="{% url 'BaseApp:display_number' %}"
@@ -55,3 +56,4 @@ <h4 class="text-lg font-bold text-center">
     </form>
     <div id="result-container"></div>
 </div>
+{% init_toggled_button_groups "example-toggled-button-group" %}

BaseApp/constants.py

@@ -1,8 +1,9 @@
+{% load button_group_tags %}
 <div class="flex flex-col space-y-2 border border-y-4 border-black/10 rounded-lg p-4 bg-slate-200/100">
     <h4 class="text-lg font-bold text-center text-black/70">
         Responsive Buttons, toggled active, various sizes, initial random, light theme
     </h4>
-    <form id="example2-button-group"
+    <form id="example2-toggled-button-group"
           data-active-class="bg-white hover:bg-white font-bold text-black border-b-4 border-black/60"
           data-initial-active="random"
           class="flex flex-wrap gap-2 justify-center transition-all duration-300 ease-linear">
@@ -55,3 +56,4 @@ <h4 class="text-lg font-bold text-center text-black/70">
     </form>
     <div id="result-container2" class="text-black/80"></div>
 </div>
+{% init_toggled_button_groups "example2" %}

BaseApp/exceptions.py

@@ -0,0 +1,15 @@
+{% load button_group_tags %}
+<div class="flex flex-col space-y-2 border border-y-4 border-white/10 rounded-lg p-4">
+    <h4 class="text-lg font-bold text-center">Toggled Button Group with minimal styling</h4>
+    <div id="minimal-toggled-button-group"
+         data-active-class="p-4 bg-white text-black/50 font-bold border-b-4 border-black/60"
+         data-initial-active="2"
+         class="flex gap-2 justify-center">
+        <button class="bg-black text-white p-2">Button 1</button>
+        <button class="bg-black text-white p-2">Button 2</button>
+        <button class="bg-black text-white p-2">Button 3</button>
+        <button class="bg-black text-white p-2">Button 4</button>
+        <button class="bg-black text-white p-2">Button 5</button>
+    </div>
+</div>
+{% init_toggled_button_groups 'minimal' %}

BaseApp/logs/views.log

@@ -1,8 +1,6 @@
-{% load button_group_tags %}
-<div class="flex flex-col space-y-4">
+<div class="flex flex-col space-y-8">
     <h3 class="text-2xl font-bold text-center mt-2">Buttons</h3>
-    {% include 'BaseApp/ui_elements/partials/button_example_1.html' %}
-    {% include 'BaseApp/ui_elements/partials/button_example_2.html' %}
+    {% include 'BaseApp/ui_elements/partials/buttons/button_example_minimal.html' %}
+    {% include 'BaseApp/ui_elements/partials/buttons/button_example_1.html' %}
+    {% include 'BaseApp/ui_elements/partials/buttons/button_example_2.html' %}
 </div>
-// TODO: add MultiButtonGroup example with multiple buttons active at once
-{% init_button_groups "example" "example2" %}

BaseApp/static/BaseApp/modules/ToggledButtonGroup.mjs

@@ -4,9 +4,9 @@
     <h2 class="base-font text-2xl w-full text-center font-bold py-2 -mt-2 rounded-t-lg bg-gradient-to-r from-black/20 from-10% via-blue-300/10 via-50% to-black/20 to-90% border-b-4 border-white/10">
         User Interface Elements
     </h2>
-    <div id="ui-elements-button-group"
+    <div id="ui-elements-toggled-button-group"
          data-active-class="bg-blue-800 hover:bg-blue-800 font-bold text-white border-b-4 flex-grow text-white/80 bg-blue-700 border-x border-white/20"
-         data-initial-active="random"
+         data-initial-active="first"
          class="flex gap-4 p-2 w-full justify-evenly border-b-4 border-white/10 rounded-b-lg">
         <button hx-get="{% url 'BaseApp:buttons-examples' %}"
                 hx-target="#ui-elements-content-target"

BaseApp/templates/BaseApp/home/sections/tech_info.html

@@ -1,32 +1,51 @@
+import re
+
 from django import template
 from django.templatetags.static import static
+from django.utils.html import escapejs
 from django.utils.safestring import mark_safe
 
+from BaseApp.exceptions import TemplateTagInitError
+from BaseApp.utils import get_module_logger
+
+module_logger = get_module_logger("templatetags", __file__)
+
 register = template.Library()
 
+VALID_GROUP_ID_PATTERN = re.compile(r'^[a-zA-Z0-9_\-]+$')
+
 
 @register.simple_tag
-def init_button_groups(*group_ids):
+def init_toggled_button_groups(*group_ids: str):
     """
     Generates the JavaScript code to initialize ToggledButtonGroup instances.
-
     Args:
         *group_ids: Variable number of button group IDs.
-
     Returns:
         Safe JavaScript code string.
     """
-
+    group_ids = [group_id.strip() for group_id in group_ids]
+    reserved_suffix = "-toggled-button-group"
     if not group_ids:
-        return ""
-
+        raise TemplateTagInitError(
+            "init_toggled_button_groups tag requires at least one button group ID.", reserved_suffix
+        )
+    for group_id in group_ids:
+        if reserved_suffix in group_id:
+            raise TemplateTagInitError(
+                f"Invalid group ID '{group_id}'.", reserved_suffix
+            )
+        if not VALID_GROUP_ID_PATTERN.match(group_id):
+            raise TemplateTagInitError(
+                f"Group ID '{group_id}' contains invalid characters. Only alphanumeric characters, hyphens, and underscores are allowed.", reserved_suffix
+            )
+    # Escape group_ids to ensure no XSS injection can happen
+    escaped_group_ids = [escapejs(group_id) for group_id in group_ids]
     module_path = static("BaseApp/modules/ToggledButtonGroup.mjs")
-
     js_code = f"""
         <script type="module">
             import {{ ToggledButtonGroup }} from "{module_path}";
             ToggledButtonGroup.initAll('{ " ".join(group_ids) }');
         </script>
     """
-
     return mark_safe(js_code)