Merge branch 'master' into #222-offensive-msg-autodeletion

2 files changed, 31 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 8cdac0de..2ba5bdd4 100644
--- a/pydis_site/templates/base/navbar.html
+++ b/pydis_site/templates/base/navbar.html
@@ -102,7 +102,15 @@
           {% else %}
             <form method="post" action="{% url 'logout' %}">
               {% csrf_token %}
-              <button type="submit" class="navbar-item button is-white is-inline is-fullwidth has-text-left is-size-navbar-menu has-text-grey-dark">Logout</button>
+
+              <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 modal-button" data-target="account-modal">
+                  <span class="is-icon">
+                    <i class="fas fa-cog"></i>
+                  </span>
+                </a>
+              </div>
             </form>
           {% endif %}
 
@@ -116,3 +124,24 @@
     </a>
   </div>
 </nav>
+
+{% if user.is_authenticated %}
+  <script defer type="text/javascript">
+    // Script which loads and sets up the account settings modal.
+    // This script must be placed in a template, or rewritten to take the fetch
+    // URL as a function argument, in order to be used.
+
+    "use strict";
+
+    // Create and prepend a new div for this modal
+    let element = document.createElement("div");
+    document.body.prepend(element);
+
+    fetch("{% url "account_settings" %}")   // Fetch the URL
+      .then((response) => response.text())  // Read in the data stream as text
+      .then((text) => {
+        element.outerHTML = text;  // Replace the div's HTML with the loaded modal HTML
+        setupModal(document.getElementById("account-modal"));  // Set up the modal
+      });
+  </script>
+{% endif %}