Use POST for logout requests

Using the GET method for logging out was deprecated in Django 4.1 and removed in 5.1. To retain styling, some modifications to the scss were needed, and a new CSRF middleware added to avoid an "Invalid" error on clicking the new buttons. Fixes #2463
TabbycatDebate · Sep 23, 2024 · d6b79df · d6b79df
1 parent 50ba239
commit d6b79df
Show file tree

Hide file tree

Showing 6 changed files with 65 additions and 35 deletions.
diff --git a/tabbycat/settings/core.py b/tabbycat/settings/core.py
@@ -96,6 +96,7 @@
 MIDDLEWARE = [
     'django.middleware.gzip.GZipMiddleware',
     'django.middleware.security.SecurityMiddleware',
+    'django.middleware.csrf.CsrfViewMiddleware',
     'whitenoise.middleware.WhiteNoiseMiddleware',
     'django.contrib.sessions.middleware.SessionMiddleware',
     # User language preferences; must be after Session

diff --git a/tabbycat/templates/nav/admin_nav.html b/tabbycat/templates/nav/admin_nav.html
@@ -272,11 +272,13 @@
   {% endfor %}
 
   <div class="list-group-item d-inline-block">
-    <a href="{% url 'logout' %}" data-parent="#sidebar"
-     class="collapsed">
-      <i data-feather="log-out"></i>
-      <span class="d-none d-md-inline">{% trans "Log Out" %}</span>
-    </a>
+    <form id="logout-form" action="{% url 'logout' %}" data-parent="#sidebar" method="post" class="collapsed">
+      {% csrf_token %}
+      <button type="submit" class="btn btn-link">
+        <i data-feather="log-out"></i>
+        <span class="d-none d-md-inline">{% trans "Log Out" %}</span>
+      </button>
+    </form>
   </div>
 
 </div>
diff --git a/tabbycat/templates/nav/top_nav_base.html b/tabbycat/templates/nav/top_nav_base.html
@@ -104,9 +104,12 @@
     <ul class="navbar-nav navbar-my-lg-0">
       <li class="nav-item">
         {% if user.is_authenticated %}
-          <a class="nav-link" href="{% url 'logout' %}">
-            {% trans "Log Out" %} ({{ user }})
-          </a>
+          <form id="logout-form" action="{% url 'logout' %}" method="post">
+            {% csrf_token %}
+            <button type="submit" class="btn btn-link nav-link">
+              {% trans "Log Out" %} ({{ user }})
+            </button>
+          </form>
         {% else %}
           <a class="nav-link" href="{% url 'login' %}">
             {% trans "Login" %}

diff --git a/tabbycat/templates/scss/modules/forms.scss b/tabbycat/templates/scss/modules/forms.scss
@@ -13,7 +13,7 @@
 }
 
 // Fix bad inheritance
-.list-group-item .btn .feather {
+.list-group-item .btn:not(.btn-link) .feather {
   margin-right: 0;
 }
 

diff --git a/tabbycat/templates/scss/modules/nav.scss b/tabbycat/templates/scss/modules/nav.scss
@@ -78,7 +78,8 @@
   border-right: 0;
   padding: 0;
 
-  a {
+  a,
+  form > button {
     color: $sidebar-muted-text;
     display: block;
 
@@ -223,16 +224,20 @@
 // Applies just to tablets
 @include media-breakpoint-up(md) {
 
-  .admin-sidebar .list-group-item a {
-    font-size: 12px;
-    padding: 0.5rem 0.5rem;
+  .admin-sidebar .list-group-item {
 
-    .feather {
-      width: 12px;
-      height: 12px;
-      padding-right: 2px;
-      margin-right: 0;
-      padding-bottom: 2px;
+    a,
+    form > button {
+      font-size: 12px;
+      padding: 0.5rem 0.5rem;
+
+      .feather {
+        width: 12px;
+        height: 12px;
+        padding-right: 2px;
+        margin-right: 0;
+        padding-bottom: 2px;
+      }
     }
   }
 
@@ -258,20 +263,24 @@
 // Applies just to screens
 @include media-breakpoint-up(lg) {
 
-  .admin-sidebar .list-group-item a {
-    font-size: $font-size-base;
-    padding: 0.5rem 1rem;
-
-    .feather {
-      width: 20px;
-      height: 16px;
-      padding-right: 4px;
-    }
+  .admin-sidebar .list-group-item {
 
-    .feather-chevron-down,
-    .feather-chevron-up {
-      margin-top: 2px;
-      margin-right: 0;
+    a,
+    form > button {
+      font-size: $font-size-base;
+      padding: 0.5rem 1rem;
+
+      .feather {
+        width: 20px;
+        height: 16px;
+        padding-right: 4px;
+      }
+
+      .feather-chevron-down,
+      .feather-chevron-up {
+        margin-top: 2px;
+        margin-right: 0;
+      }
     }
   }
 

diff --git a/tabbycat/tournaments/templates/site_index.html b/tabbycat/tournaments/templates/site_index.html
@@ -76,9 +76,24 @@
     {% url 'password_change' as url %}
     {% include "components/item-action.html" with icon="rotate-cw" %}
 
-    {% blocktrans asvar text %}Log Out ({{ user }}){% endblocktrans %}
-    {% url 'logout' as url %}
-    {% include "components/item-action.html" with icon="log-out" %}
+    <form id="logout-link-form" method="post" action="{% url 'logout' %}" class="list-group-item list-group-item-action text-primary">
+      {% csrf_token %}
+      <button type="submit" class="btn btn-link p-0 list-group-item-action text-primary">
+        <div class="row align-items-center">
+          <div class="col-auto pr-1">
+            <i data-feather="log-out"></i>
+          </div>
+
+          <div class="col pl-0 pr-0">
+            {% blocktrans %}Log Out ({{ user }}){% endblocktrans %}
+          </div>
+
+          <div class="col-auto pr-1">
+            <i data-feather="chevron-right"></i>
+          </div>
+        </div>
+      </button>
+    </form>
 
   {% else %}