Add Cancel to the sign-out page, and icons to both buttons

Sign Out keeps btn-primary and gains a log-out icon; Cancel sits beside it as a
plain button with a back arrow.

Cancel links to "/" rather than the Referer header. "/" already resolves per
tenant -- club home on a club subdomain, control panel on the base domain --
whereas Referer can be absent or point off-site, which is not something to render
as a link unchecked.

It is an anchor, not a submit, so it cannot post the form: a test asserts that
clicking it leaves the session signed in.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
2026-07-13 23:21:56 +02:00
parent 7900233f6d
commit c9935d0a04
2 changed files with 59 additions and 0 deletions

View File

@@ -362,3 +362,29 @@ class ActionBarTests(TestCase):
self.assertContains(response, "btn-error")
self.assertContains(response, 'type="submit"')
class SignOutPageTests(TestCase):
def setUp(self):
self.user = User.objects.create_user(email="mfa@example.com", password="pw-secret-123")
self.client.force_login(self.user)
self.response = self.client.get(reverse("account_logout"))
def test_sign_out_and_cancel_sit_side_by_side_with_icons(self):
html = self.response.content.decode()
cancel = html[html.index('<a class="btn gap-2" href="/">') :]
sign_out = html[html.index('<button class="btn btn-primary gap-2"') :]
self.assertIn("<svg", cancel[: cancel.index("</a>")])
self.assertIn("<svg", sign_out[: sign_out.index("</button>")])
def test_cancel_does_not_sign_you_out(self):
# It is a link, not a submit: only the POST logs you out.
self.client.get("/")
self.assertTrue(self.client.session.get("_auth_user_id"))
def test_signing_out_still_works(self):
self.client.post(reverse("account_logout"))
self.assertIsNone(self.client.session.get("_auth_user_id"))

View File

@@ -0,0 +1,33 @@
{% extends "account/base_manage.html" %}
{% load allauth i18n lucide %}
{% comment %}
Overridden for layout: Cancel sits beside Sign Out, both with icons.
Cancel points at "/" rather than the Referer header — "/" already resolves per tenant
(club home on a club subdomain, control panel on the base domain), whereas Referer can
be missing or off-site, and is not something to turn into a link unchecked.
{% endcomment %}
{% block head_title %}
{% trans "Sign Out" %}
{% endblock head_title %}
{% block content %}
{% element h1 %}
{% trans "Sign Out" %}
{% endelement %}
{% element p %}
{% trans 'Are you sure you want to sign out?' %}
{% endelement %}
<form class="mt-8" method="post" action="{% url 'account_logout' %}">
{% csrf_token %}
{{ redirect_field }}
<div class="flex flex-wrap items-center justify-end gap-2">
<a class="btn gap-2" href="/">{% lucide "arrow-left" size=16 %} {% trans "Cancel" %}</a>
<button class="btn btn-primary gap-2" type="submit">{% lucide "log-out" size=16 %} {% trans "Sign Out" %}</button>
</div>
</form>
{% endblock content %}