fix display of attendee_name in list of memberships

src/pretix/base/models/memberships.py

@@ -159,10 +159,24 @@ class Membership(models.Model):
         de = date_format(self.date_end, 'SHORT_DATE_FORMAT')
         return f'{self.membership_type.name}: {self.attendee_name} ({ds} – {de})'
 
+    @property
+    def percentage_used(self):
+        if self.membership_type.max_usages and self.usages:
+            return int(self.usages / self.membership_type.max_usages * 100)
+        return 0
+
     @property
     def attendee_name(self):
         return build_name(self.attendee_name_parts, fallback_scheme=lambda: self.customer.organizer.settings.name_scheme)
 
+    @property
+    def expired(self):
+        return time_machine_now() > self.date_end
+
+    @property
+    def not_yet_valid(self):
+        return time_machine_now() < self.date_start
+
     def is_valid(self, ev=None, ticket_valid_from=None, valid_from_not_chosen=False):
         if valid_from_not_chosen:
             return not self.canceled and self.date_end >= time_machine_now()

src/pretix/base/templatetags/icon.py

@@ -0,0 +1,34 @@
+#
+# This file is part of pretix (Community Edition).
+#
+# Copyright (C) 2014-2020 Raphael Michel and contributors
+# Copyright (C) 2020-2021 rami.io GmbH and contributors
+#
+# This program is free software: you can redistribute it and/or modify it under the terms of the GNU Affero General
+# Public License as published by the Free Software Foundation in version 3 of the License.
+#
+# ADDITIONAL TERMS APPLY: Pursuant to Section 7 of the GNU Affero General Public License, additional terms are
+# applicable granting you additional permissions and placing additional restrictions on your usage of this software.
+# Please refer to the pretix LICENSE file to obtain the full terms applicable to this work. If you did not receive
+# this file, see <https://pretix.eu/about/en/license>.
+#
+# This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied
+# warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU Affero General Public License for more
+# details.
+#
+# You should have received a copy of the GNU Affero General Public License along with this program.  If not, see
+# <https://www.gnu.org/licenses/>.
+#
+from django import template
+from django.utils.html import format_html
+
+register = template.Library()
+
+
+@register.simple_tag
+def icon(key, *args, **kwargs):
+    return format_html(
+        '<span class="fa fa-{} {}" aria-hidden="true"></span>',
+        key,
+        kwargs["class"] if "class" in kwargs else "",
+    )

src/pretix/base/templatetags/textbubble.py

@@ -0,0 +1,42 @@
+#
+# This file is part of pretix (Community Edition).
+#
+# Copyright (C) 2014-2020 Raphael Michel and contributors
+# Copyright (C) 2020-2021 rami.io GmbH and contributors
+#
+# This program is free software: you can redistribute it and/or modify it under the terms of the GNU Affero General
+# Public License as published by the Free Software Foundation in version 3 of the License.
+#
+# ADDITIONAL TERMS APPLY: Pursuant to Section 7 of the GNU Affero General Public License, additional terms are
+# applicable granting you additional permissions and placing additional restrictions on your usage of this software.
+# Please refer to the pretix LICENSE file to obtain the full terms applicable to this work. If you did not receive
+# this file, see <https://pretix.eu/about/en/license>.
+#
+# This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied
+# warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU Affero General Public License for more
+# details.
+#
+# You should have received a copy of the GNU Affero General Public License along with this program.  If not, see
+# <https://www.gnu.org/licenses/>.
+#
+from django import template
+from django.utils.html import format_html, mark_safe
+
+register = template.Library()
+
+
+@register.simple_tag
+def textbubble(type, *args, **kwargs):
+    return format_html(
+        '<span class="textbubble-{}">{}',
+        type or "info",
+        "" if "icon" not in kwargs else format_html(
+            '<i class="fa fa-{}" aria-hidden="true"></i> ',
+            kwargs["icon"]
+        )
+    )
+
+
+@register.simple_tag
+def endtextbubble():
+    return mark_safe('</span>')

src/pretix/presale/templates/pretixpresale/event/fragment_order_status.html

@@ -1,31 +1,29 @@
 {% load i18n %}
 {% load bootstrap3 %}
+{% load textbubble %}
 {# Changes should be replicated in pretixcontrol/orders/fragment_order_status.html and in pretix/base/models/orders.py #}
 {% if order.status == "n" %}
     {% if order.require_approval %}
-        {% trans "Approval pending" %}
+        {% textbubble "warning" icon="exclamation-triangle" %}{% trans "Approval pending" %}{% endtextbubble %}
     {% elif order.total == 0 %}
-        {% trans "Confirmation pending" context "order state" %}
+        {% textbubble "warning" icon="exclamation-triangle" %}{% trans "Confirmation pending" context "order state" %}{% endtextbubble %}
     {% elif event.settings.payment_pending_hidden %}
         {# intentionally left blank #}
     {% elif order.valid_if_pending %}
-        {% trans "Confirmed" context "order state" %}
+        {% textbubble "info" icon="info-circle" %}{% trans "Confirmed" context "order state" %}{% endtextbubble %}
     {% else %}
-        {% trans "Payment pending" %}
-    {% endif %}
-    {% if not event.settings.payment_pending_hidden %}
-        <i class="status-dot fa fa-circle {% if order.valid_if_pending %}text-info{% else %}text-warning{% endif %}" aria-hidden="true"></i>
+        {% textbubble "warning" icon="exclamation-triangle" %}{% trans "Payment pending" %}{% endtextbubble %}
     {% endif %}
 {% elif order.status == "p" %}
     {% if order.count_positions == 0 %}
-        {% trans "Canceled (paid fee)" %} <i class="status-dot fa fa-info-circle text-info" aria-hidden="true"></i>
+        {% textbubble "info" icon="info-circle" %}{% trans "Canceled (paid fee)" %}{% endtextbubble %}
     {% elif order.total == 0 %}
-        {% trans "Confirmed" context "order state" %} <i class="status-dot fa fa-check-circle text-success" aria-hidden="true"></i>
+        {% textbubble "success" icon="check" %}{% trans "Confirmed" context "order state" %}{% endtextbubble %}
     {% else %}
-        {% trans "Paid" %} <i class="status-dot fa fa-check-circle text-success" aria-hidden="true"></i>
+        {% textbubble "success" icon="check" %}{% trans "Paid" %}{% endtextbubble %}
     {% endif %}
 {% elif order.status == "e" %}
-    {% trans "Expired" %}  <i class="status-dot fa fa-minus-circle text-danger" aria-hidden="true"></i>
+    {% textbubble "danger" icon="minus" %}{% trans "Expired" %}{% endtextbubble %}
 {% elif order.status == "c" %}
-    {% trans "Canceled" %} <i class="status-dot fa fa-times-circle text-danger" aria-hidden="true"></i>
+    {% textbubble "danger" icon="times" %}{% trans "Canceled" %}{% endtextbubble %}
 {% endif %}

src/pretix/presale/templates/pretixpresale/fragment_login_status.html

@@ -4,9 +4,9 @@
 {% if request.organizer.settings.customer_accounts %}
     <nav class="loginstatus" aria-label="{% trans "customer account" %}">
         {% if request.customer %}
-            <a href="{% abseventurl request.organizer "presale:organizer.customer.profile" %}"
+            <a href="{% abseventurl request.organizer "presale:organizer.customer.index" %}"
                aria-label="{% trans "View customer account" %}" data-placement="bottom"
-               title="{% trans "View user profile" %}" data-toggle="tooltip">
+               title="{% trans "View customer account" %}" data-toggle="tooltip">
                 <span class="fa fa-user" aria-hidden="true"></span>
                 {{ request.customer.name|default:request.customer.email }}</a>
             <a href="{% if request.event_domain %}{% abseventurl request.event "presale:organizer.customer.logout" %}{% else %}{% abseventurl request.organizer "presale:organizer.customer.logout" %}{% endif %}?next={{ request.path|urlencode }}%3F{{ request.META.QUERY_STRING|urlencode }}"

src/pretix/presale/templates/pretixpresale/organizers/customer_address_delete.html

@@ -1,33 +1,39 @@
-{% extends "pretixpresale/organizers/base.html" %}
+{% extends "pretixpresale/organizers/customer_base.html" %}
 {% load i18n %}
+{% load icon %}
 {% load eventurl %}
 {% block title %}{% trans "Delete address" %}{% endblock %}
-{% block content %}
-    <h2>
-        {% trans "Delete address" %}
-    </h2>
+{% block inner %}
+    <div class="panel panel-default">
+        <div class="panel-heading">
+            <h3 class="panel-title">
+                {% icon "address-card-o" %} <b>{% trans "Delete address" %}</b>
+            </h3>
+        </div>
+        <div class="panel-body account-addresses">
+            <p>
+                {% trans "Do you really want to delete the following address from your account?" %}
+            </p>
+            <address>
+                {{ address.describe|linebreaksbr }}
+            </address>
+        </div>
+    </div>
     <form method="post">
         {% csrf_token %}
-        <p>
-            {% trans "Do you really want to delete the following address from your account?" %}
-        </p>
-        <address>
-            {{ address.describe|linebreaksbr }}
-        </address>
         <div class="row">
             <div class="col-md-4 col-sm-6">
                 <a class="btn btn-block btn-default btn-lg"
-                   href="{% abseventurl request.organizer "presale:organizer.customer.profile" %}">
+                   href="{% abseventurl request.organizer "presale:organizer.customer.addresses" %}">
                     {% trans "Go back" %}
                 </a>
             </div>
             <div class="col-md-4 col-md-offset-4 col-sm-6">
                 <button class="btn btn-block btn-danger btn-lg" type="submit">
+                    {% icon "trash" %}
                     {% trans "Delete" %}
                 </button>
             </div>
-            <div class="clearfix"></div>
         </div>
-
     </form>
 {% endblock %}

src/pretix/presale/templates/pretixpresale/organizers/customer_addresses.html

@@ -0,0 +1,42 @@
+{% extends "pretixpresale/organizers/customer_base.html" %}
+{% load i18n %}
+{% load icon %}
+{% load eventurl %}
+{% block title %}{% trans "Addresses" %}{% endblock %}
+{% block inner %}
+    <div class="panel panel-default">
+        <div class="panel-heading">
+            <h3 class="panel-title">
+                {% icon "address-card-o" %}
+                <b>{% trans "Addresses" %}</b> ({{ page_obj.paginator.count }})
+            </h3>
+        </div>
+        <div class="panel-body">
+            {% if invoice_addresses %}
+                <ul class="full-width-list alternating-rows account-addresses">
+                    <li class="row">
+                    {% for ia in invoice_addresses %}
+                        {% if forloop.counter0 and forloop.counter0|divisibleby:4 %}
+                            </li>
+                            <li class="row">
+                        {% endif %}
+                        <div class="col-md-3 col-xs-12">
+                            <address>{{ ia.describe|linebreaksbr }}</address>
+                            <p class="blank-after">
+                                <a href="{% abseventurl request.organizer "presale:organizer.customer.address.delete" id=ia.id %}"
+                                   class="btn btn-danger btn-sm">
+                                    {% icon "trash" %}
+                                    {% trans "Delete" %}
+                                </a>
+                            </p>
+                        </div>
+                    {% endfor %}
+                    </li>
+                </ul>
+            {% else %}
+                <p class="text-center">{% trans "You don’t have any addresses in your account yet." %}</p>
+            {% endif %}
+        </div>
+    </div>
+    {% include "pretixcontrol/pagination.html" %}
+{% endblock %}

src/pretix/presale/templates/pretixpresale/organizers/customer_base.html

@@ -0,0 +1,55 @@
+{% extends "pretixpresale/organizers/base.html" %}
+{% load i18n %}
+{% load icon %}
+{% load eventurl %}
+{% block content %}
+    <h2>
+        {% trans "Your account" %}
+    </h2>
+    <div class="blank-after">
+        <dl class="row">
+            <div class="col-sm-6">
+                <dt>{{ customer.name }}</dt>
+                <dd>{{ customer.email }}</dd>
+                {% if customer.phone %}
+                    <dd>{% icon "phone" %} {{ customer.phone }}</dd>
+                {% endif %}
+                <dd>
+                    <ul class="list-inline">
+                        <li>
+                            <a href="{% eventurl request.organizer "presale:organizer.customer.change" %}">
+                                {% icon "edit" %}
+                                {% trans "Change account information" %}
+                            </a>
+                        </li>
+                        <li>
+                            <a href="{% eventurl request.organizer "presale:organizer.customer.password" %}">
+                                {% icon "key" %}
+                                {% trans "Change password" %}
+                            </a>
+                        </li>
+                    </ul>
+                </dd>
+                <dd>
+                </dd>
+            </div>
+            <div class="col-sm-6 text-right">
+                <dt>{% trans "Customer ID" %}</dt>
+                <dd>#{{ customer.identifier }}</dd>
+            </div>
+        </dl>
+        <nav class="subnav row" aria-label="{% trans "customer account information" %}">
+            <ul class="list-inline blank-after col-xs-12">
+            {% for nav in sub_nav %}
+                <li>
+                    <a href="{{ nav.url }}"{% if nav.active %} class="active"{% endif %}>
+                        {% icon nav.icon %}{{ nav.label }}
+                    </a>
+                </li>
+            {% endfor %}
+            </ul>
+        </nav>
+    </div>
+    {% block inner %}
+    {% endblock %}
+{% endblock %}

src/pretix/presale/templates/pretixpresale/organizers/customer_login.html

@@ -1,7 +1,7 @@
 {% extends "pretixpresale/organizers/base.html" %}
 {% load i18n %}
+{% load icon %}
 {% load eventurl %}
-{% load urlreplace %}
 {% load bootstrap3 %}
 {% block title %}{% trans "Log in" %}{% endblock %}
 {% block content %}
@@ -18,6 +18,7 @@
                     {% bootstrap_form form %}
                     <div class="form-group buttons">
                         <button type="submit" class="btn btn-primary btn-lg btn-block">
+                            {% icon "sign-in" %}
                             {% trans "Log in" %}
                         </button>
                     </div>
@@ -35,6 +36,7 @@
                         <div class="col-md-6">
                             <a class="btn btn-link btn-block"
                                href="{% eventurl request.organizer "presale:organizer.customer.register" %}">
+                               {% icon "address-book-o" %}
                                 {% trans "Create account" %}
                             </a>
                         </div>

src/pretix/presale/templates/pretixpresale/organizers/customer_membership.html

@@ -1,96 +1,127 @@
-{% extends "pretixpresale/organizers/base.html" %}
+{% extends "pretixpresale/organizers/customer_base.html" %}
 {% load i18n %}
+{% load icon %}
 {% load eventurl %}
-{% load urlreplace %}
-{% load money %}
-{% load bootstrap3 %}
+{% load textbubble %}
 {% block title %}{% trans "Your membership" %}{% endblock %}
-{% block content %}
-    <h2>
-        {% trans "Your membership" %}
-    </h2>
-    <div class="panel panel-primary items">
+{% block inner %}
+    <div class="panel panel-default">
         <div class="panel-heading">
             <h3 class="panel-title">
-                {% trans "Details" %}
+                {% if membership.membership_type.transferable %}
+                    {% icon "users" %}
+                {% else %}
+                    {% icon "id-badge" %}
+                {% endif %}
+                <b>{% trans "Your membership" %}</b>
+                {% if membership.testmode %}
+                    <span class="h6">
+                    {% textbubble "warning" %}
+                        {% trans "TEST MODE" %}
+                    {% endtextbubble %}
+                    </span>
+                {% endif %}
             </h3>
         </div>
         <div class="panel-body">
             <dl class="dl-horizontal">
                 <dt>{% trans "Membership type" %}</dt>
-                <dd>{{ membership.membership_type.name }}</dd>
+                <dd>{% if membership.canceled %}<del>{% endif %}
+                    {{ membership.membership_type.name }}
+                    {% if membership.canceled %}</del>
+                        <small>
+                            {% textbubble "danger" icon="times" %}
+                                {% trans "Canceled" %}
+                            {% endtextbubble %}
+                        </small>
+                    {% endif %}
+                    <br><small class="text-muted">
+                        {% if membership.membership_type.transferable %}
+                            ({% trans "transferable" %})
+                        {% else %}
+                            ({% trans "not transferable" %})
+                        {% endif %}
+                    </small>
+                </dd>
                 <dt>{% trans "Valid from" %}</dt>
                 <dd>{{ membership.date_start|date:"SHORT_DATETIME_FORMAT" }}
                 <dt>{% trans "Valid until" %}</dt>
                 <dd>{{ membership.date_end|date:"SHORT_DATETIME_FORMAT" }}
                 <dt>{% trans "Attendee name" %}</dt>
-                <dd>{{ membership.attendee_name }}
+                <dd>{{ membership.attendee_name|default_if_none:"–" }}
                 <dt>{% trans "Maximum usages" %}</dt>
                 <dd>{{ membership.membership_type.max_usages|default_if_none:"–" }}</dd>
             </dl>
         </div>
     </div>
-    <div class="panel panel-default items">
+    <div class="panel panel-default">
         <div class="panel-heading">
             <h3 class="panel-title">
                 {% trans "Usages" %}
             </h3>
         </div>
-        <table class="panel-body table table-hover">
-            <caption class="sr-only">{% trans "Usages" %}</caption>
-            <thead>
-            <tr>
-                <th>{% trans "Order code" %}</th>
-                <th>{% trans "Event" %}</th>
-                <th>{% trans "Product" %}</th>
-                <th>{% trans "Order date" %}</th>
-                <th class="text-right">{% trans "Status" %}</th>
-                <th class="text-right"></th>
-            </tr>
-            </thead>
-            <tbody>
+        <div class="panel-body">
+        {% if usages %}
+            <ul class="full-width-list alternating-rows">
             {% for op in usages %}
-                <tr>
-                    <td>
-                        <strong>
-                            {{ op.order.code }}-{{ op.positionid }}
-                        </strong>
-                        {% if op.order.testmode %}
-                            <span class="label label-warning">{% trans "TEST MODE" %}</span>
-                        {% endif %}
-                    </td>
-                    <td>
-                        {{ op.order.event }}
-                        {% if op.subevent %}
-                            <br>
-                            {{ op.subevent|default:"" }}
-                        {% endif %}
-                    </td>
-                    <td>
-                        {{ op.item.name }}
-                        {% if op.variation %}– {{ op.variation }}{% endif %}
-                    </td>
-                    <td>
-                        {{ op.order.datetime|date:"SHORT_DATETIME_FORMAT" }}
-                    </td>
-                    <td class="text-right flip">
-                        {% if op.canceled %}
-                            {% trans "Canceled" %} <i class="{{ class }} fa fa-times-circle text-danger" aria-hidden="true"></i>
-                        {% else %}
-                            {% include "pretixcontrol/orders/fragment_order_status.html" with order=op.order %}
-                        {% endif %}
-                    </td>
-                    <td class="text-right flip">
-                        <a href="{% abseventurl op.order.event "presale:event.order" order=op.order.code secret=op.order.secret %}"
-                                target="_blank"
-                                class="btn btn-default">
-                            {% trans "Details" %}
-                        </a>
-                    </td>
-                </tr>
-            {% endfor %}
-            </tbody>
-        </table>
-        {% include "pretixcontrol/pagination.html" %}
+                <li class="row">
+                    <dl>
+                        <div class="col-md-4 col-sm-5 col-xs-12">
+                            <dt class="sr-only">{% trans "Order" %}</dt>
+                            <dd><strong>
+                                    <a href="{% abseventurl op.order.event "presale:event.order" order=op.order.code secret=op.order.secret %}" target="_blank">
+                                        {% icon "shopping-cart" %}
+                                        {{ op.order.code }}-{{ op.positionid }}
+                                    </a>
+                                </strong>
+                                <small>{% include "pretixpresale/event/fragment_order_status.html" with order=op.order event=op.order.event %}</small>
+                            </dd>
+                            <dd><time datetime="{{ op.order.datetime|date:"Y-m-d H:i" }}" class="text-muted small">{{ op.order.datetime|date:"SHORT_DATETIME_FORMAT" }}</time></dd>
+                            {% if op.order.testmode %}
+                                <dd>
+                                    <small>
+                                    {% textbubble "warning" %}
+                                        {% trans "TEST MODE" %}
+                                    {% endtextbubble %}
+                                    </small>
+                                </dd>
+                            {% endif %}
+                        </div>
+                        <div class="col-md-6 col-sm-5 col-xs-8">
+                            <dt class="sr-only">{% trans "Product" %}</dt>
+                            <dd>{{ op.item.name }}
+                                {% if op.variation %} - {{ op.variation }}{% endif %}
+                            </dd>
+                            <dt class="sr-only">{% trans "Event" %}</dt>
+                            <dd>
+                                <small class="text-muted">
+                                {{ op.order.event }}
+                                {% if op.subevent %}
+                                    <br>{{ op.subevent }}
+                                {% endif %}
+                                {% if not op.order.event.has_subevents and op.order.event.settings.show_dates_on_frontpage %}
+                                    <br>{{ op.order.event.get_date_range_display }}
+                                {% endif %}
+                                </small>
+                            </dd>
+                        </div>
+                        <div class="col-sm-2 col-xs-4">
+                            <dt class="sr-only">{% trans "Actions" %}</dt>
+                            <dd class="text-right">
+                                <a href="{% abseventurl op.order.event "presale:event.order" order=op.order.code secret=op.order.secret %}"
+                               target="_blank">
+                                {% icon "list-ul" %}
+                                {% trans "Details" %}
+                            </a></dd>
+                        </div>
+                    </dl>
+                </li>
+                {% endfor %}
+            </ul>
+        {% else %}
+            <p class="text-center">{% trans "You haven’t used this membership yet." %}</p>
+        {% endif %}
+        </div>
     </div>
+    {% include "pretixcontrol/pagination.html" %}
 {% endblock %}

src/pretix/presale/templates/pretixpresale/organizers/customer_memberships.html

@@ -0,0 +1,111 @@
+{% extends "pretixpresale/organizers/customer_base.html" %}
+{% load i18n %}
+{% load icon %}
+{% load eventurl %}
+{% load textbubble %}
+{% block title %}{% trans "Memberships" %}{% endblock %}
+{% block inner %}
+    <div class="panel panel-default">
+        <div class="panel-heading">
+            <h3 class="panel-title">
+                {% icon "id-badge" %}
+                <b>{% trans "Memberships" %}</b> ({{ page_obj.paginator.count }})
+            </h3>
+        </div>
+        <div class="panel-body">
+            {% if memberships %}
+                <ul class="full-width-list alternating-rows">
+                    {% for m in memberships %}
+                    <li class="row">
+                        <dl>
+                            <div class="col-xs-5">
+                                <dt>
+                                    {% if m.canceled %}<del>{% endif %}
+                                    <a href="{% abseventurl request.organizer "presale:organizer.customer.membership" id=m.id %}">
+                                        {{ m.membership_type.name }}
+                                    </a>
+                                    {% if m.canceled %}</del>{% endif %}
+                                    {% if m.membership_type.transferable %}
+                                        <span class="text-muted" data-toggle="tooltip" title="{% trans "Membership is transferable" %}">
+                                            {% icon "users" %}
+                                        </span>
+                                    {% endif %}
+                                </dt>
+                                {% if m.attendee_name %}
+                                <dd class="text-muted">
+                                    {% icon "id-badge" %}
+                                    <span class="sr-only">{% trans "Attendee name" %}:</span>
+                                    {{ m.attendee_name }}
+                                </dd>
+                                {% endif %}
+                                <dd class="text-muted">
+                                    <small>
+                                    {% if m.canceled %}
+                                        {% textbubble "danger" icon="times" %}
+                                            {% trans "Canceled" %}
+                                        {% endtextbubble %}
+                                    {% elif m.expired %}
+                                        {% icon "minus-square-o" %}
+                                        {% trans "Expired since" %}
+                                        <time datetime="{{ m.date_end|date:"Y-m-d H:i" }}">
+                                            {{ m.date_end|date:"SHORT_DATETIME_FORMAT" }}
+                                        </time>
+                                    {% elif m.not_yet_valid %}
+                                        {% icon "clock-o" %}
+                                        {% trans "Valid from" %}
+                                        <time datetime="{{ m.date_start|date:"Y-m-d H:i" }}">
+                                            {{ m.date_start|date:"SHORT_DATETIME_FORMAT" }}
+                                        </time>
+                                    {% else %}
+                                        {% icon "check" %}
+                                        {% trans "Valid until" %}
+                                        <time datetime="{{ m.date_end|date:"Y-m-d H:i" }}">
+                                            {{ m.date_end|date:"SHORT_DATETIME_FORMAT" }}
+                                        </time>
+                                    {% endif %}
+                                    </small>
+                                </dd>
+                                {% if m.testmode %}
+                                <dd>
+                                    <small>
+                                    {% textbubble "warning" %}
+                                        {% trans "TEST MODE" %}
+                                    {% endtextbubble %}
+                                    </small>
+                                </dd>
+                                {% endif %}
+                            </div>
+                            <div class="col-xs-5">
+                                <dd>
+                                    <div class="quotabox full-width">
+                                        <div class="progress">
+                                            <div class="progress-bar progress-bar-success progress-bar-{{ m.percentage_used }}">
+                                            </div>
+                                        </div>
+                                        <div class="numbers">
+                                            {{ m.usages }} /
+                                            {{ m.membership_type.max_usages|default_if_none:"∞" }}
+                                        </div>
+                                    </div>
+                                </dd>
+                            </div>
+                            <div class="col-xs-2">
+                                <dt class="sr-only">{% trans "Actions" %}</dt>
+                                <dd class="text-right">
+                                    <a href="{% abseventurl request.organizer "presale:organizer.customer.membership" id=m.id %}">
+                                        {% icon "list-ul" %}
+                                        {% trans "Details" %}
+                                    </a>
+                                </dd>
+                            </div>
+                        </dl>
+                    </li>
+                    {% endfor %}
+                </ul>
+            {% else %}
+                <p class="text-center">{% trans "You don’t have any memberships in your account yet." %}</p>
+            {% endif %}
+        </div>
+    </div>
+    {% include "pretixcontrol/pagination.html" %}
+{% endblock %}

src/pretix/presale/templates/pretixpresale/organizers/customer_orders.html

@@ -0,0 +1,83 @@
+{% extends "pretixpresale/organizers/customer_base.html" %}
+{% load i18n %}
+{% load icon %}
+{% load eventurl %}
+{% load money %}
+{% load textbubble %}
+{% block title %}{% trans "Your account" %}{% endblock %}
+{% block inner %}
+    <div class="panel panel-default">
+        <div class="panel-heading">
+            <h3 class="panel-title">
+                {% icon "shopping-cart" %}
+                <b>{% trans "Orders" %}</b> ({{ page_obj.paginator.count }})
+            </h3>
+        </div>
+        <div class="panel-body">
+            {% if orders %}
+                <ul class="full-width-list alternating-rows">
+                    {% for o in orders %}
+                    <li class="row">
+                        <dl>
+                            <div class="col-md-4 col-sm-5 col-xs-8">
+                                <dt class="sr-only">{% trans "Order" %}</dt>
+                                <dd><strong>
+                                        <a href="{% abseventurl o.event "presale:event.order" order=o.code secret=o.secret %}" target="_blank">
+                                            {% icon "shopping-cart" %}
+                                            {{ o.code }}</a>
+                                    </strong>
+                                    {% if o.customer_id != customer.pk %}
+                                        <span class="text-muted" data-toggle="tooltip"
+                                              title="{% trans "Matched to the account based on the email address." %}">
+                                            {% icon "compress" %}
+                                        </span>
+                                    {% endif %}
+                                    <small>{% include "pretixpresale/event/fragment_order_status.html" with order=o event=o.event %}</small>
+                                </dd>
+                                <dd><time datetime="{{ o.datetime|date:"Y-m-d H:i" }}" class="text-muted small">{{ o.datetime|date:"SHORT_DATETIME_FORMAT" }}</time></dd>
+                                {% if o.testmode %}
+                                    <dd>
+                                        <small>
+                                        {% textbubble "warning" %}
+                                            {% trans "TEST MODE" %}
+                                        {% endtextbubble %}
+                                        </small>
+                                    </dd>
+                                {% endif %}
+                            </div>
+                            <div class="col-md-2 col-sm-2 col-xs-4 text-right">
+                                <dt class="sr-only">{% trans "Order total" %}</dt>
+                                <dd>{{ o.total|money:o.event.currency }}</dd>
+                                <dt class="sr-only">{% trans "Positions" %}</dt>
+                                <dd class="text-muted"><small>{% blocktranslate count counter=o.count_positions|default_if_none:0 %}{{ counter }} item{% plural %}{{ counter }} items{% endblocktranslate %}</small>
+                                </dd>
+                            </div>
+                            <div class="col-md-4 col-sm-3 col-xs-8">
+                                <dt class="sr-only">{% trans "Event" %}</dt>
+                                <dd>
+                                    {{ o.event }}
+                                    {% if not o.event.has_subevents and o.event.settings.show_dates_on_frontpage %}
+                                        <br><small class="text-muted">{{ o.event.get_date_range_display }}</small>
+                                    {% endif %}
+                                </dd>
+                            </div>
+                            <div class="col-sm-2 col-xs-4">
+                                <dt class="sr-only">{% trans "Actions" %}</dt>
+                                <dd class="text-right">
+                                    <a href="{% abseventurl o.event "presale:event.order" order=o.code secret=o.secret %}"
+                                   target="_blank">
+                                    {% icon "list-ul" %}
+                                    {% trans "Details" %}
+                                </a></dd>
+                            </div>
+                        </dl>
+                    </li>
+                    {% endfor %}
+                </ul>
+            {% else %}
+                <p class="text-center">{% trans "You don’t have any orders in your account yet." %}</p>
+            {% endif %}
+        </div>
+    </div>
+    {% include "pretixcontrol/pagination.html" %}
+{% endblock %}

src/pretix/presale/templates/pretixpresale/organizers/customer_profile.html

@@ -1,253 +0,0 @@
-{% extends "pretixpresale/organizers/base.html" %}
-{% load i18n %}
-{% load eventurl %}
-{% load urlreplace %}
-{% load money %}
-{% load bootstrap3 %}
-{% block title %}{% trans "Your account" %}{% endblock %}
-{% block content %}
-    <h2>
-        {% trans "Your account" %}
-    </h2>
-    <div class="panel panel-primary items">
-        <div class="panel-heading">
-            <h3 class="panel-title">
-                {% trans "Account information" %}
-            </h3>
-        </div>
-        <div class="panel-body">
-            <dl class="dl-horizontal">
-                <dt>{% trans "Customer ID" %}</dt>
-                <dd>#{{ customer.identifier }}</dd>
-                {% if customer.provider %}
-                    <dt>{% trans "Login method" %}</dt>
-                    <dd>{{ customer.provider.name }}</dd>
-                {% endif %}
-                <dt>{% trans "Email" %}</dt>
-                <dd>{{ customer.email }}
-                </dd>
-                <dt>{% trans "Name" %}</dt>
-                <dd>{{ customer.name }}</dd>
-                {% if customer.phone %}
-                    <dt>{% trans "Phone" %}</dt>
-                    <dd>{{ customer.phone }}</dd>
-                {% endif %}
-            </dl>
-            <div class="text-right">
-                <a href="{% eventurl request.organizer "presale:organizer.customer.change" %}"
-                        class="btn btn-default">
-                    {% trans "Change account information" %}
-                </a>
-                {% if not customer.provider %}
-                    <a href="{% eventurl request.organizer "presale:organizer.customer.password" %}"
-                            class="btn btn-default">
-                        {% trans "Change password" %}
-                    </a>
-                {% endif %}
-            </div>
-        </div>
-    </div>
-    <div>
-        <ul class="nav nav-tabs" role="tablist">
-            <li role="presentation" class="active">
-                <a href="#orders" aria-controls="orders" role="tab" data-toggle="tab">{% trans "Orders" %}</a>
-            </li>
-            <li role="presentation">
-                <a href="#memberships" aria-controls="memberships" role="tab" data-toggle="tab">{% trans "Memberships" %}</a>
-            </li>
-            <li role="presentation">
-                <a href="#addresses" aria-controls="addresses" role="tab" data-toggle="tab">{% trans "Addresses" %}</a>
-            </li>
-            <li role="presentation">
-                <a href="#profiles" aria-controls="profiles" role="tab" data-toggle="tab">{% trans "Attendee profiles" %}</a>
-            </li>
-        </ul>
-        <div class="tab-content">
-            <div role="tabpanel" class="tab-pane active" id="orders">
-                <table class="panel-body table table-hover">
-                    <thead>
-                    <tr>
-                        <th>{% trans "Order code" %}</th>
-                        <th>{% trans "Event" %}</th>
-                        <th>{% trans "Order date" %}</th>
-                        <th class="text-right">{% trans "Order total" %}</th>
-                        <th class="text-right">{% trans "Positions" %}</th>
-                        <th class="text-right">{% trans "Status" %}</th>
-                        <th></th>
-                    </tr>
-                    </thead>
-                    <tbody>
-                    {% for o in orders %}
-                        <tr>
-                            <td>
-                                <strong>
-                                    <a href="{% abseventurl o.event "presale:event.order" order=o.code secret=o.secret %}" target="_blank">
-                                        {{ o.code }}
-                                    </a>
-                                </strong>
-                                {% if o.testmode %}
-                                    <span class="label label-warning">{% trans "TEST MODE" %}</span>
-                                {% endif %}
-                            </td>
-                            <td>
-                                {{ o.event }}
-                                {% if not o.event.has_subevents and o.event.settings.show_dates_on_frontpage %}
-                                    <br><small class="text-muted">{{ o.event.get_date_range_display }}</small>
-                                {% endif %}
-                            </td>
-                            <td>
-                                {{ o.datetime|date:"SHORT_DATETIME_FORMAT" }}
-                                {% if o.customer_id != customer.pk %}
-                                    <span class="fa fa-link text-muted"
-                                          data-toggle="tooltip"
-                                          title="{% trans "Matched to the account based on the email address." %}"
-                                    ></span>
-                                {% endif %}
-                            </td>
-                            <td class="text-right flip">
-                                {{ o.total|money:o.event.currency }}
-                            </td>
-                            <td class="text-right flip">{{ o.count_positions|default_if_none:"0" }}</td>
-                            <td class="text-right flip">{% include "pretixpresale/event/fragment_order_status.html" with order=o event=o.event %}</td>
-                            <td class="text-right flip">
-                                <a href="{% abseventurl o.event "presale:event.order" order=o.code secret=o.secret %}"
-                                   target="_blank"
-                                   class="btn btn-default">
-                                    {% trans "Details" %}
-                                </a>
-                            </td>
-                        </tr>
-                    {% endfor %}
-                    </tbody>
-                </table>
-                {% include "pretixcontrol/pagination.html" %}
-            </div>
-            <div role="tabpanel" class="tab-pane" id="memberships">
-                <table class="panel-body table table-hover">
-                    <caption class="sr-only">{% trans "Memberships" %}</caption>
-                    <thead>
-                    <tr>
-                        <th>{% trans "Membership type" %}</th>
-                        <th>{% trans "Valid from" %}</th>
-                        <th>{% trans "Valid until" %}</th>
-                        <th>{% trans "Attendee name" %}</th>
-                        <th>{% trans "Usages" %}</th>
-                        <th></th>
-                    </tr>
-                    </thead>
-                    <tbody>
-                    {% for m in memberships %}
-                        <tr>
-                            <td>
-                                {% if m.canceled %}<del>{% endif %}
-                                {{ m.membership_type.name }}
-                                {% if m.canceled %}</del>{% endif %}
-                                {% if m.testmode %}<span class="label label-warning">{% trans "TEST MODE" %}</span>{% endif %}
-                            </td>
-                            <td>
-                                {{ m.date_start|date:"SHORT_DATETIME_FORMAT" }}
-                            </td>
-                            <td>
-                                {{ m.date_end|date:"SHORT_DATETIME_FORMAT" }}
-                            </td>
-                            <td>
-                                {{ m.attendee_name }}
-                            </td>
-                            <td>
-                                <div class="quotabox">
-                                    <div class="progress">
-                                        <div class="progress-bar progress-bar-success progress-bar-{{ m.percent }}">
-                                        </div>
-                                    </div>
-                                    <div class="numbers">
-                                        {{ m.usages }} /
-                                        {{ m.membership_type.max_usages|default_if_none:"∞" }}
-                                    </div>
-                                </div>
-                            </td>
-                            <td class="text-right flip">
-                                <a href="{% abseventurl request.organizer "presale:organizer.customer.membership" id=m.id %}"
-                                   data-toggle="tooltip"
-                                   title="{% trans "Details" %}"
-                                   class="btn btn-default">
-                                    <i class="fa fa-list"></i>
-                                </a>
-                            </td>
-                        </tr>
-                    {% empty %}
-                        <tr>
-                            <td colspan="6" class="text-center">{% trans "No memberships are stored in your account." %}</td>
-                        </tr>
-                    {% endfor %}
-                    </tbody>
-                </table>
-            </div>
-            <div role="tabpanel" class="tab-pane" id="addresses">
-                <table class="panel-body table table-hover">
-                    <thead>
-                    <tr>
-                        <th>{% trans "Address" %}</th>
-                        <th></th>
-                    </tr>
-                    </thead>
-                    <tbody>
-                    {% for ia in invoice_addresses %}
-                        <tr>
-                            <td>
-                                {{ ia.describe|linebreaksbr }}
-                            </td>
-                            <td class="text-right flip">
-                                <a href="{% abseventurl request.organizer "presale:organizer.customer.address.delete" id=ia.id %}"
-                                   data-toggle="tooltip"
-                                   title="{% trans "Delete" %}"
-                                   class="btn btn-danger">
-                                    <i class="fa fa-trash"></i>
-                                </a>
-                            </td>
-                        </tr>
-                        {% empty %}
-                        <tr>
-                            <td colspan="2" class="text-center">
-                                {% trans "No addresses are stored in your account." %}
-                            </td>
-                        </tr>
-                    {% endfor %}
-                    </tbody>
-                </table>
-            </div>
-            <div role="tabpanel" class="tab-pane" id="profiles">
-                <table class="panel-body table table-hover">
-                    <thead>
-                    <tr>
-                        <th>{% trans "Profile" %}</th>
-                        <th></th>
-                    </tr>
-                    </thead>
-                    <tbody>
-                    {% for ap in customer.attendee_profiles.all %}
-                        <tr>
-                            <td>
-                                {{ ap.describe|linebreaksbr }}
-                            </td>
-                            <td class="text-right flip">
-                                <a href="{% abseventurl request.organizer "presale:organizer.customer.profile.delete" id=ap.id %}"
-                                   data-toggle="tooltip"
-                                   title="{% trans "Delete" %}"
-                                   class="btn btn-danger">
-                                    <i class="fa fa-trash"></i>
-                                </a>
-                            </td>
-                        </tr>
-                    {% empty %}
-                        <tr>
-                            <td colspan="2" class="text-center">
-                                {% trans "No attendee profiles are stored in your account." %}
-                            </td>
-                        </tr>
-                    {% endfor %}
-                    </tbody>
-                </table>
-            </div>
-        </div>
-    </div>
-{% endblock %}

src/pretix/presale/templates/pretixpresale/organizers/customer_profile_delete.html

@@ -1,33 +1,39 @@
-{% extends "pretixpresale/organizers/base.html" %}
+{% extends "pretixpresale/organizers/customer_base.html" %}
 {% load i18n %}
+{% load icon %}
 {% load eventurl %}
 {% block title %}{% trans "Delete profile" %}{% endblock %}
-{% block content %}
-    <h2>
-        {% trans "Delete profile" %}
-    </h2>
+{% block inner %}
+    <div class="panel panel-default">
+        <div class="panel-heading">
+            <h3 class="panel-title">
+                {% icon "user" %} <b>{% trans "Delete profile" %}</b>
+            </h3>
+        </div>
+        <div class="panel-body">
+            <p>
+                {% trans "Do you really want to delete the following profile from your account?" %}
+            </p>
+            <p>
+                {{ profile.describe|linebreaksbr }}
+            </p>
+        </div>
+    </div>
     <form method="post">
         {% csrf_token %}
-        <p>
-            {% trans "Do you really want to delete the following profile from your account?" %}
-        </p>
-        <address>
-            {{ profile.describe|linebreaksbr }}
-        </address>
         <div class="row">
             <div class="col-md-4 col-sm-6">
                 <a class="btn btn-block btn-default btn-lg"
-                   href="{% abseventurl request.organizer "presale:organizer.customer.profile" %}">
+                   href="{% abseventurl request.organizer "presale:organizer.customer.profiles" %}">
                     {% trans "Go back" %}
                 </a>
             </div>
             <div class="col-md-4 col-md-offset-4 col-sm-6">
                 <button class="btn btn-block btn-danger btn-lg" type="submit">
+                    {% icon "trash" %}
                     {% trans "Delete" %}
                 </button>
             </div>
-            <div class="clearfix"></div>
         </div>
-
     </form>
 {% endblock %}

src/pretix/presale/templates/pretixpresale/organizers/customer_profiles.html

@@ -0,0 +1,42 @@
+{% extends "pretixpresale/organizers/customer_base.html" %}
+{% load i18n %}
+{% load icon %}
+{% load eventurl %}
+{% block title %}{% trans "Attendee profiles" %}{% endblock %}
+{% block inner %}
+    <div class="panel panel-default">
+        <div class="panel-heading">
+            <h3 class="panel-title">
+                {% icon "users" %}
+                <b>{% trans "Attendee profiles" %}</b> ({{ page_obj.paginator.count }})
+            </h3>
+        </div>
+        <div class="panel-body">
+            {% if attendee_profiles %}
+                <ol class="full-width-list alternating-rows">
+                    <li class="row">
+                    {% for ap in attendee_profiles %}
+                        {% if forloop.counter0 and forloop.counter0|divisibleby:4 %}
+                            </li>
+                            <li class="row">
+                        {% endif %}
+                        <div class="col-md-3 col-xs-12">
+                            <p>{{ ap.describe|linebreaksbr }}</p>
+                            <p class="blank-after">
+                                <a href="{% abseventurl request.organizer "presale:organizer.customer.profile.delete" id=ap.id %}"
+                                   class="btn btn-danger btn-sm">
+                                    {% icon "trash" %}
+                                    {% trans "Delete" %}
+                                </a>
+                            </p>
+                        </div>
+                    {% endfor %}
+                    </li>
+                </ol>
+            {% else %}
+                <p class="text-center">{% trans "You don’t have any attendee profiles in your account yet." %}</p>
+            {% endif %}
+        </div>
+    </div>
+    {% include "pretixcontrol/pagination.html" %}
+{% endblock %}

src/pretix/presale/urls.py

@@ -210,10 +210,13 @@ organizer_patterns = [
     re_path(r'^account/password$', pretix.presale.views.customer.ChangePasswordView.as_view(), name='organizer.customer.password'),
     re_path(r'^account/change$', pretix.presale.views.customer.ChangeInformationView.as_view(), name='organizer.customer.change'),
     re_path(r'^account/confirmchange$', pretix.presale.views.customer.ConfirmChangeView.as_view(), name='organizer.customer.change.confirm'),
-    re_path(r'^account/membership/(?P<id>\d+)/$', pretix.presale.views.customer.MembershipUsageView.as_view(), name='organizer.customer.membership'),
+    re_path(r'^account/memberships$', pretix.presale.views.customer.MembershipView.as_view(), name='organizer.customer.memberships'),
+    re_path(r'^account/memberships/(?P<id>\d+)/$', pretix.presale.views.customer.MembershipUsageView.as_view(), name='organizer.customer.membership'),
+    re_path(r'^account/addresses$', pretix.presale.views.customer.AddressView.as_view(), name='organizer.customer.addresses'),
     re_path(r'^account/addresses/(?P<id>\d+)/delete$', pretix.presale.views.customer.AddressDeleteView.as_view(), name='organizer.customer.address.delete'),
+    re_path(r'^account/profiles$', pretix.presale.views.customer.ProfileView.as_view(), name='organizer.customer.profiles'),
     re_path(r'^account/profiles/(?P<id>\d+)/delete$', pretix.presale.views.customer.ProfileDeleteView.as_view(), name='organizer.customer.profile.delete'),
-    re_path(r'^account/$', pretix.presale.views.customer.ProfileView.as_view(), name='organizer.customer.profile'),
+    re_path(r'^account/$', pretix.presale.views.customer.OrderView.as_view(), name='organizer.customer.index'),
 
     re_path(r'^oauth2/v1/authorize$', pretix.presale.views.oidc_op.AuthorizeView.as_view(),
             name='organizer.oauth2.v1.authorize'),

src/pretix/presale/views/customer.py

@@ -134,7 +134,7 @@ class LoginView(RedirectBackMixin, FormView):
         url = self.get_redirect_url()
 
         if not url:
-            return eventreverse(self.request.organizer, 'presale:organizer.customer.profile', kwargs={})
+            return eventreverse(self.request.organizer, 'presale:organizer.customer.index', kwargs={})
 
         if self.request.GET.get("request_cross_domain_customer_auth") == "true":
             otpstore = SessionStore()
@@ -350,8 +350,42 @@ class CustomerRequiredMixin:
         return super().dispatch(request, *args, **kwargs)
 
 
-class ProfileView(CustomerRequiredMixin, ListView):
-    template_name = 'pretixpresale/organizers/customer_profile.html'
+class CustomerAccountBaseMixin(CustomerRequiredMixin):
+    def get_context_data(self, **kwargs):
+        ctx = super().get_context_data(**kwargs)
+        ctx['customer'] = self.request.customer
+        url_name = self.request.resolver_match.url_name
+        ctx['sub_nav'] = [
+            {
+                'label': _('Orders'),
+                'url': eventreverse(self.request.organizer, 'presale:organizer.customer.index', kwargs={}),
+                'active': url_name == 'organizer.customer.index',
+                'icon': 'shopping-cart',
+            },
+            {
+                'label': _('Memberships'),
+                'url': eventreverse(self.request.organizer, 'presale:organizer.customer.memberships', kwargs={}),
+                'active': url_name.startswith('organizer.customer.membership'),
+                'icon': 'id-badge',
+            },
+            {
+                'label': _('Addresses'),
+                'url': eventreverse(self.request.organizer, 'presale:organizer.customer.addresses', kwargs={}),
+                'active': url_name.startswith('organizer.customer.address'),
+                'icon': 'address-card-o',
+            },
+            {
+                'label': _('Attendee profiles'),
+                'url': eventreverse(self.request.organizer, 'presale:organizer.customer.profiles', kwargs={}),
+                'active': url_name.startswith('organizer.customer.profile'),
+                'icon': 'user',
+            },
+        ]
+        return ctx
+
+
+class OrderView(CustomerAccountBaseMixin, ListView):
+    template_name = 'pretixpresale/organizers/customer_orders.html'
     context_object_name = 'orders'
     paginate_by = 20
 
@@ -369,18 +403,6 @@ class ProfileView(CustomerRequiredMixin, ListView):
 
     def get_context_data(self, **kwargs):
         ctx = super().get_context_data(**kwargs)
-        ctx['customer'] = self.request.customer
-        ctx['memberships'] = self.request.customer.memberships.with_usages().select_related(
-            'membership_type', 'granted_in', 'granted_in__order', 'granted_in__order__event'
-        )
-        ctx['invoice_addresses'] = InvoiceAddress.profiles.filter(customer=self.request.customer)
-        ctx['is_paginated'] = True
-
-        for m in ctx['memberships']:
-            if m.membership_type.max_usages:
-                m.percent = int(m.usages / m.membership_type.max_usages * 100)
-            else:
-                m.percent = 0
 
         s = OrderPosition.objects.filter(
             order=OuterRef('pk')
@@ -404,7 +426,18 @@ class ProfileView(CustomerRequiredMixin, ListView):
         return ctx
 
 
-class MembershipUsageView(CustomerRequiredMixin, ListView):
+class MembershipView(CustomerAccountBaseMixin, ListView):
+    template_name = 'pretixpresale/organizers/customer_memberships.html'
+    context_object_name = 'memberships'
+    paginate_by = 20
+
+    def get_queryset(self):
+        return self.request.customer.memberships.with_usages().select_related(
+            'membership_type', 'granted_in', 'granted_in__order', 'granted_in__order__event'
+        )
+
+
+class MembershipUsageView(CustomerAccountBaseMixin, ListView):
     template_name = 'pretixpresale/organizers/customer_membership.html'
     context_object_name = 'usages'
     paginate_by = 20
@@ -428,7 +461,16 @@ class MembershipUsageView(CustomerRequiredMixin, ListView):
         return ctx
 
 
-class AddressDeleteView(CustomerRequiredMixin, CompatDeleteView):
+class AddressView(CustomerAccountBaseMixin, ListView):
+    template_name = 'pretixpresale/organizers/customer_addresses.html'
+    context_object_name = 'invoice_addresses'
+    paginate_by = 20
+
+    def get_queryset(self):
+        return InvoiceAddress.profiles.filter(customer=self.request.customer)
+
+
+class AddressDeleteView(CustomerAccountBaseMixin, CompatDeleteView):
     template_name = 'pretixpresale/organizers/customer_address_delete.html'
     context_object_name = 'address'
 
@@ -436,10 +478,19 @@ class AddressDeleteView(CustomerRequiredMixin, CompatDeleteView):
         return get_object_or_404(InvoiceAddress.profiles, customer=self.request.customer, pk=self.kwargs.get('id'))
 
     def get_success_url(self):
-        return eventreverse(self.request.organizer, 'presale:organizer.customer.profile', kwargs={})
+        return eventreverse(self.request.organizer, 'presale:organizer.customer.addresses', kwargs={})
 
 
-class ProfileDeleteView(CustomerRequiredMixin, CompatDeleteView):
+class ProfileView(CustomerAccountBaseMixin, ListView):
+    template_name = 'pretixpresale/organizers/customer_profiles.html'
+    context_object_name = 'attendee_profiles'
+    paginate_by = 20
+
+    def get_queryset(self):
+        return self.request.customer.attendee_profiles.all()
+
+
+class ProfileDeleteView(CustomerAccountBaseMixin, CompatDeleteView):
     template_name = 'pretixpresale/organizers/customer_profile_delete.html'
     context_object_name = 'profile'
 
@@ -447,10 +498,10 @@ class ProfileDeleteView(CustomerRequiredMixin, CompatDeleteView):
         return get_object_or_404(self.request.customer.attendee_profiles, pk=self.kwargs.get('id'))
 
     def get_success_url(self):
-        return eventreverse(self.request.organizer, 'presale:organizer.customer.profile', kwargs={})
+        return eventreverse(self.request.organizer, 'presale:organizer.customer.profiles', kwargs={})
 
 
-class ChangePasswordView(CustomerRequiredMixin, FormView):
+class ChangePasswordView(CustomerAccountBaseMixin, FormView):
     template_name = 'pretixpresale/organizers/customer_password.html'
     form_class = ChangePasswordForm
 
@@ -465,7 +516,7 @@ class ChangePasswordView(CustomerRequiredMixin, FormView):
         return super().dispatch(request, *args, **kwargs)
 
     def get_success_url(self):
-        return eventreverse(self.request.organizer, 'presale:organizer.customer.profile', kwargs={})
+        return eventreverse(self.request.organizer, 'presale:organizer.customer.index', kwargs={})
 
     @transaction.atomic()
     def form_valid(self, form):
@@ -483,7 +534,7 @@ class ChangePasswordView(CustomerRequiredMixin, FormView):
         return kwargs
 
 
-class ChangeInformationView(CustomerRequiredMixin, FormView):
+class ChangeInformationView(CustomerAccountBaseMixin, FormView):
     template_name = 'pretixpresale/organizers/customer_info.html'
     form_class = ChangeInfoForm
 
@@ -498,7 +549,7 @@ class ChangeInformationView(CustomerRequiredMixin, FormView):
         return super().dispatch(request, *args, **kwargs)
 
     def get_success_url(self):
-        return eventreverse(self.request.organizer, 'presale:organizer.customer.profile', kwargs={})
+        return eventreverse(self.request.organizer, 'presale:organizer.customer.index', kwargs={})
 
     def form_valid(self, form):
         if form.cleaned_data['email'] != self.initial_email and not self.request.customer.provider:
@@ -581,7 +632,7 @@ class ConfirmChangeView(View):
         return HttpResponseRedirect(self.get_success_url())
 
     def get_success_url(self):
-        return eventreverse(self.request.organizer, 'presale:organizer.customer.profile', kwargs={})
+        return eventreverse(self.request.organizer, 'presale:organizer.customer.index', kwargs={})
 
 
 class SSOLoginView(RedirectBackMixin, View):
@@ -641,7 +692,7 @@ class SSOLoginView(RedirectBackMixin, View):
         url = self.get_redirect_url()
 
         if not url:
-            return eventreverse(self.request.organizer, 'presale:organizer.customer.profile', kwargs={})
+            return eventreverse(self.request.organizer, 'presale:organizer.customer.index', kwargs={})
         return url
 
 
@@ -864,7 +915,7 @@ class SSOLoginReturnView(RedirectBackMixin, View):
         url = self.get_redirect_url(redirect_to)
 
         if not url:
-            return eventreverse(self.request.organizer, 'presale:organizer.customer.profile', kwargs={})
+            return eventreverse(self.request.organizer, 'presale:organizer.customer.index', kwargs={})
         else:
             if self.request.session.get(f'pretix_customerauth_{self.provider.pk}_cross_domain_requested'):
                 otpstore = SessionStore()

src/pretix/static/pretixbase/scss/_bootstrap_vars.scss

@@ -8,7 +8,7 @@ $gray-lightest: lighten(#000, 97.25%);
 
 $font-family-sans-serif: var(--pretix-font-family-sans-serif);
 $text-color: #222222 !default;
-$text-muted: #767676 !default;
+$text-muted: #737373 !default;
 $input-color-placeholder: lighten(#000, 70%) !default;
 
 $border-radius-base: var(--pretix-border-radius-base);

src/pretix/static/pretixpresale/scss/main.scss

@@ -30,9 +30,6 @@ $body-bg: #f5f5f5 !default;
     float: left;
     margin-right: .25em;
 }
-.status-dot {
-    font-size: 1.2em;
-}
 .text-warning { color: $brand-warning; }
 .text-info { color: $brand-info; }
 .text-success { color: $brand-success; }
@@ -98,6 +95,9 @@ footer nav .btn-link {
         vertical-align: baseline;
     }
 }
+.subnav a.active {
+    font-weight: bold;
+}
 .locales ul {
     display: inline;
     list-style: none;
@@ -499,6 +499,9 @@ h2 .label {
     &.availability .progress-bar-success {
         background: var(--pretix-brand-success-lighten-20);
     }
+    &.full-width {
+        width: 100%;
+    }
 }
 
 .nav-tabs {
@@ -527,6 +530,76 @@ h2 .label {
     font-size: 30px;
 }
 
+
+.textbubble-success, .textbubble-info, .textbubble-warning, .textbubble-danger {
+  padding: 0 .4em;
+  border-radius: $border-radius-base;
+  font-weight: bold;
+  white-space: nowrap;
+
+  &:has(>.fa:first-child) {
+    padding-left: .25em;
+  }
+}
+.textbubble-success {
+  color: var(--pretix-brand-success-shade-42);
+  background: var(--pretix-brand-success-tint-85);
+  .fa {
+    color: var(--pretix-brand-success);
+  }
+}
+.textbubble-info {
+  color: var(--pretix-brand-info-shade-42);
+  background: var(--pretix-brand-info-tint-85);
+  .fa {
+    color: var(--pretix-brand-info);
+  }
+}
+.textbubble-warning {
+  color: var(--pretix-brand-warning-shade-42);
+  background: var(--pretix-brand-warning-tint-85);
+  .fa {
+    color: var(--pretix-brand-warning);
+  }
+}
+.textbubble-danger {
+  color: var(--pretix-brand-danger-shade-42);
+  background: var(--pretix-brand-danger-tint-85);
+  .fa {
+    color: var(--pretix-brand-danger);
+  }
+}
+
+
+.full-width-list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+
+  li {
+    padding: 15px 0;
+  }
+  li+li {
+    border-top: 1px solid $table-border-color;
+  }
+}
+.panel-body:has(>.full-width-list:first-child) {
+    padding-top: 0;
+}
+.panel-body:has(>.full-width-list:last-child) {
+    padding-bottom: 0;
+}
+
+.alternating-rows .row:nth-child(even) {
+  background-color: $table-bg-accent;
+}
+
+
+.account-addresses address::first-line {
+    font-weight: bold;
+}
+
+
 @import "_iframe.scss";
 @import "_a11y.scss";
 @import "_print.scss";

src/tests/presale/test_customer.py

@@ -433,7 +433,7 @@ def test_org_sso_login_new_customer_email_conflict(env, client, provider):
 @pytest.mark.django_db
 @pytest.mark.parametrize("url", [
     "account/change",
-    "account/membership/1/",
+    "account/memberships/1/",
     "account/",
 ])
 def test_login_required(client, env, url):