[A11y] Improve customer account forms (#5034)

This commit is contained in:
Richard Schreiber
2025-05-09 08:36:09 +02:00
committed by GitHub
parent 3e335bcbfe
commit 2b735bec0b
10 changed files with 210 additions and 118 deletions

View File

@@ -48,15 +48,6 @@
</p>
{% if request.organizer.settings.customer_accounts_native %}
{% bootstrap_form login_form layout="checkout" %}
<div class="row">
<div class="col-md-offset-3 col-md-9">
<a
href="{% abseventurl request.organizer "presale:organizer.customer.resetpw" %}"
target="_blank">
{% trans "Reset password" %}
</a>
</div>
</div>
{% endif %}
<div class="row">
<div class="col-md-6 col-md-offset-3">

View File

@@ -6,19 +6,26 @@
{% block title %}{% trans "Account information" %}{% endblock %}
{% block content %}
<div class="row">
<div class="col-md-6 col-md-offset-3">
<h2>
{% blocktrans trimmed %}
Update your account information
{% endblocktrans %}
</h2>
<form action="" method="post">
<div class="col-xs-12">
<form action="" method="post" class="form-horizontal">
{% csrf_token %}
{% bootstrap_form form %}
<div class="form-group buttons">
<button type="submit" class="btn btn-primary btn-lg btn-block">
{% trans "Save" %}
</button>
<div class="panel panel-default">
<div class="panel-heading">
<h2 class="panel-title">
{% trans "Update your account information" %}
</h2>
</div>
<div class="panel-body">
{% bootstrap_form form layout="checkout" %}
</div>
</div>
<div class="row checkout-button-row">
<div class="col-md-4 col-md-offset-8">
<button class="btn btn-block btn-primary btn-lg" type="submit">
{% trans "Save" %}
</button>
</div>
<div class="clearfix"></div>
</div>
</form>
</div>

View File

@@ -7,48 +7,70 @@
{% block content %}
<div class="row">
<div class="col-md-6 col-md-offset-3">
<h2>
{% if request.organizer.settings.customer_accounts_native %}
<form action="" method="post" class="form-horizontal blank-after">
{% csrf_token %}
<div class="panel panel-primary">
<div class="panel-heading">
<h2 class="panel-title">
{% blocktrans trimmed with org=request.organizer.name %}
Sign in to your account at {{ org }}
{% endblocktrans %}
</h2>
</div>
<div class="panel-body">
{% bootstrap_form form layout="checkout" %}
<div class="row">
<div class="col-md-8 col-sm-6 hidden-xs">
<a class="btn btn-link btn-lg"
href="{% eventurl request.organizer "presale:organizer.customer.register" %}">
<small>
{% icon "address-book-o" %}
{% trans "Create account" %}
</small>
</a>
</div>
<div class="col-md-4 col-sm-6">
<button class="btn btn-block btn-primary btn-lg" type="submit">
{% icon "sign-in" %}
{% trans "Log in" %}
</button>
</div>
<div class="clearfix"></div>
</div>
<div class="row visible-xs">
<div class="col-xs-12 text-center"><br>
<a
href="{% eventurl request.organizer "presale:organizer.customer.register" %}">
{% icon "address-book-o" %}
{% trans "Create account" %}
</a>
</div>
</div>
</div>
</div>
</form>
{% else %}
<h2 class="blank-after">
{% blocktrans trimmed with org=request.organizer.name %}
Sign in to your account at {{ org }}
{% endblocktrans %}
</h2>
<form action="" method="post">
{% csrf_token %}
{% if request.organizer.settings.customer_accounts_native %}
{% 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>
{% endif %}
</h2>
{% endif %}
{% if providers %}
<ul class="list-inline text-center blank-after">
{% for provider in providers %}
{% if provider.is_active %}
<li>
<a href="{% eventurl request.organizer "presale:organizer.customer.login" provider=provider.pk %}?{{ request.META.QUERY_STRING }}"
class="btn btn-primary btn-lg btn-block">
{{ provider.button_label }}
class="btn {% if request.organizer.settings.customer_accounts_native %}btn-default{% else %}btn-primary btn-lg btn-block{% endif %}">
{% icon "sign-in" %} {{ provider.button_label }}
</a>
{% endif %}
</li>
{% endfor %}
{% if request.organizer.settings.customer_accounts_native %}
<div class="row">
<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>
<div class="col-md-6">
<a class="btn btn-link btn-block"
href="{% eventurl request.organizer "presale:organizer.customer.resetpw" %}">
{% trans "Reset password" %}
</a>
</div>
</div>
{% endif %}
</form>
</ul>
{% endif %}
</div>
</div>
<p>&nbsp;</p>

View File

@@ -7,18 +7,25 @@
{% block content %}
<div class="row">
<div class="col-md-6 col-md-offset-3">
<h2>
{% blocktrans trimmed %}
Set a new password for your account
{% endblocktrans %}
</h2>
<form action="" method="post">
<form action="" method="post" class="form-horizontal">
{% csrf_token %}
{% bootstrap_form form %}
<div class="form-group buttons">
<button type="submit" class="btn btn-primary btn-lg btn-block">
{% trans "Save" %}
</button>
<div class="panel panel-default">
<div class="panel-heading">
<h2 class="panel-title">
{% trans "Set a new password for your account" %}
</h2>
</div>
<div class="panel-body">
{% bootstrap_form form layout="checkout" %}
</div>
</div>
<div class="row checkout-button-row">
<div class="col-md-4 col-md-offset-8">
<button class="btn btn-block btn-primary btn-lg" type="submit">
{% trans "Save" %}
</button>
</div>
<div class="clearfix"></div>
</div>
</form>
</div>

View File

@@ -1,28 +1,54 @@
{% extends "pretixpresale/organizers/base.html" %}
{% load i18n %}
{% load icon %}
{% load eventurl %}
{% load urlreplace %}
{% load bootstrap3 %}
{% block title %}{% trans "Registration" %}{% endblock %}
{% block content %}
<div class="row">
<div class="col-md-6 col-md-offset-3">
<h2>
{% blocktrans trimmed with org=request.organizer.name %}
Create a new account at {{ org }}
{% endblocktrans %}
</h2>
<form action="" method="post">
<div class="col-xs-12">
<form action="" method="post" class="form-horizontal">
{% csrf_token %}
{% bootstrap_form form %}
<div class="form-group buttons">
<button type="submit" class="btn btn-primary btn-lg btn-block">
{% trans "Create account" %}
</button>
<div class="panel panel-default">
<div class="panel-heading">
<h2 class="panel-title">
{% blocktrans trimmed with org=request.organizer.name %}
Create a new account at {{ org }}
{% endblocktrans %}
</h2>
</div>
<div class="panel-body">
{% bootstrap_form form layout="checkout" %}
</div>
</div>
<div class="row checkout-button-row blank-after">
<div class="col-md-8 col-sm-6 hidden-xs">
<a class="btn btn-link btn-lg"
href="{% eventurl request.organizer "presale:organizer.customer.login" %}">
<small>
{% icon "sign-in" %}
{% trans "Log in to an existing account" %}
</small>
</a>
</div>
<div class="col-md-4 col-sm-6">
<button class="btn btn-block btn-primary btn-lg" type="submit">
{% icon "address-book-o" %}
{% trans "Create account" %}
</button>
</div>
<div class="clearfix"></div>
</div>
<div class="row visible-xs">
<div class="col-xs-12 text-center">
<a
href="{% eventurl request.organizer "presale:organizer.customer.login" %}">
{% icon "sign-in" %}
{% trans "Log in to an existing account" %}
</a>
</div>
</div>
<a class="btn btn-link btn-block" href="{% eventurl request.organizer "presale:organizer.customer.login" %}">
{% trans "Log in to an existing account" %}
</a>
</form>
</div>
</div>

View File

@@ -1,5 +1,6 @@
{% extends "pretixpresale/organizers/base.html" %}
{% load i18n %}
{% load icon %}
{% load eventurl %}
{% load urlreplace %}
{% load bootstrap3 %}
@@ -7,18 +8,44 @@
{% block content %}
<div class="row">
<div class="col-md-6 col-md-offset-3">
<h2>
{% blocktrans trimmed %}
Password reset
{% endblocktrans %}
</h2>
<form action="" method="post">
<form action="" method="post" class="form-horizontal">
{% csrf_token %}
{% bootstrap_form form %}
<div class="form-group buttons">
<button type="submit" class="btn btn-primary btn-lg btn-block">
{% trans "Request a new password" %}
</button>
<div class="panel panel-primary">
<div class="panel-heading">
<h2 class="panel-title">
{% trans "Request a new password" %}
</h2>
</div>
<div class="panel-body">
{% bootstrap_form form layout="checkout" %}
<div class="row">
<div class="col-sm-4 hidden-xs">
<a class="btn btn-link btn-lg"
href="{% eventurl request.organizer "presale:organizer.customer.login" %}">
<small>
{% icon "sign-in" %}
{% trans "Log in" %}
</small>
</a>
</div>
<div class="col-sm-8">
<button class="btn btn-block btn-primary btn-lg" type="submit">
{% trans "Request a new password" %}
</button>
</div>
<div class="clearfix"></div>
</div>
<div class="row visible-xs">
<div class="col-xs-12 text-center">
<a
href="{% eventurl request.organizer "presale:organizer.customer.register" %}">
{% icon "sign-in" %}
{% trans "Log in" %}
</a>
</div>
</div>
</div>
</div>
</form>
</div>

View File

@@ -7,18 +7,25 @@
{% block content %}
<div class="row">
<div class="col-md-6 col-md-offset-3">
<h2>
{% blocktrans trimmed %}
Set a new password for your account
{% endblocktrans %}
</h2>
<form action="" method="post">
<form action="" method="post" class="form-horizontal">
{% csrf_token %}
{% bootstrap_form form %}
<div class="form-group buttons">
<button type="submit" class="btn btn-primary btn-lg btn-block">
{% trans "Save" %}
</button>
<div class="panel panel-default">
<div class="panel-heading">
<h2 class="panel-title">
{% trans "Set a new password for your account" %}
</h2>
</div>
<div class="panel-body">
{% bootstrap_form form layout="checkout" %}
</div>
</div>
<div class="row checkout-button-row blank-after">
<div class="col-md-4 col-md-offset-8">
<button class="btn btn-block btn-primary btn-lg" type="submit">
{% trans "Save" %}
</button>
</div>
<div class="clearfix"></div>
</div>
</form>
</div>