Add user settings modal, with connections management and account deletion

2 files changed, 18 insertions, 1 deletions

diff --git a/pydis_site/templates/base/base.html b/pydis_site/templates/base/base.html
index a9b31c0f..4c70d778 100644
--- a/pydis_site/templates/base/base.html
+++ b/pydis_site/templates/base/base.html
@@ -28,6 +28,7 @@
 
   {# Font-awesome here is defined explicitly so that we can have Pro #}
   <script src="https://kit.fontawesome.com/ae6a3152d8.js"></script>
+  <script src="{% static "js/base/modal.js" %}"></script>
 
   <link rel="stylesheet" href="{% static "css/base/base.css" %}">
   <link rel="stylesheet" href="{% static "css/base/notification.css" %}">
diff --git a/pydis_site/templates/base/navbar.html b/pydis_site/templates/base/navbar.html
index bd0bab40..6943c2b6 100644
--- a/pydis_site/templates/base/navbar.html
+++ b/pydis_site/templates/base/navbar.html
@@ -105,7 +105,7 @@
 
               <div class="field navbar-item is-paddingless is-fullwidth is-grouped">
                 <button type="submit" class="button is-white is-inline is-fullwidth has-text-left is-size-navbar-menu has-text-grey-dark">Logout</button>
-                <a title="Settings" class="button is-white is-inline has-text-right is-size-navbar-menu has-text-grey-dark" href="{% url "account_settings" %}">
+                <a title="Settings" class="button is-white is-inline has-text-right is-size-navbar-menu has-text-grey-dark modal-button" data-target="account-modal">
                   <span class="is-icon">
                     <i class="fas fa-cog"></i>
                   </span>
@@ -124,3 +124,19 @@
     </a>
   </div>
 </nav>
+
+{% if user.is_authenticated %}
+  <script defer type="text/javascript">
+    "use strict";
+
+    let element = document.createElement("div");
+    document.body.prepend(element);
+
+    fetch("{% url "account_settings" %}")
+      .then((response) => response.text())
+      .then((text) => {
+        element.outerHTML = text;
+        setupModal(document.getElementById("account-modal"));
+      });
+  </script>
+{% endif %}