Add ability to manage SteamIDs on profile page via modals and HTMX

Spybot2/settings.py

@@ -66,6 +66,8 @@
     'django.contrib.sessions',
     'django.contrib.messages',
     'django.contrib.staticfiles',
+    'django.forms',
+    'bootstrap4',
 ]
 
 MIDDLEWARE = [
@@ -217,4 +219,12 @@
 #     'root': {
 #         'handlers': ['console'],
 #     }
-# }
+# }
+
+FORM_RENDERER = 'spybot.forms.CustomFormRenderer'
+
+BOOTSTRAP4 = {
+    'include_jquery': False,
+    'javascript_in_head': False,
+    'label_class': 'form-label',
+}

frontend/main.js

@@ -5,6 +5,7 @@ import * as passkeys from './passkeys';
 
 import "@tabler/core/dist/css/tabler.min.css"
 import "@tabler/core/dist/css/tabler-vendors.min.css"
+import './modal'
 
 
 window.passkeys = passkeys;

frontend/modal.js

@@ -0,0 +1,20 @@
+
+const modal = new bootstrap.Modal(document.querySelector("#modal"), {});
+
+htmx.on("htmx:afterSwap", (e) => {
+    if (e.detail.target.id === "dialog") {
+        modal.show()
+    }
+})
+
+htmx.on("htmx:beforeSwap", (e) => {
+  // Empty response targeting #dialog => hide the modal
+  if (e.detail.target.id === "dialog" && !e.detail.xhr.response) {
+    modal.hide()
+    e.detail.shouldSwap = false
+  }
+})
+
+htmx.on("hidden.bs.modal", () => {
+  document.getElementById("dialog").innerHTML = ""
+})

pyproject.toml

@@ -17,6 +17,7 @@ num2words = "^0.5.12"
 requests = "^2.31.0"
 fido2 = "^1.1.3"
 user-agents = "^2.2.0"
+django-bootstrap4 = "^24.3"
 
 
 [tool.poetry.group.test.dependencies]