Skip to content

Add reusable form field macro and replace duplicated field blocks #20004

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
dekaa101 wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Add reusable form field macro and replace duplicated field blocks #20004

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
34 changes: 11 additions & 23 deletions warehouse/templates/accounts/login.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,29 +27,17 @@ <h1 class="page-title">{% trans title=title %}Log in to {{ title }}{% endtrans %
{% for error in form.form_errors %}<li>{{ error }}</li>{% endfor %}
</ul>
{% endif %}
<div class="form-group">
<label for="username" class="form-group__label">
{% trans %}Username{% endtrans %}
{% if form.username.flags.required %}
<span class="form-group__required">{% trans %}(required){% endtrans %}</span>
{% endif %}
</label>
{{ form.username(placeholder=gettext("Your username") ,
autocapitalize="off",
autocomplete="username",
spellcheck="false",
required="required",
class_="form-group__field",
aria_describedby="username-errors",
tabindex="1",
) }}
<div id="username-errors">
{% if form.username.errors %}
<ul class="form-errors" role="alert">
{% for error in form.username.errors %}<li>{{ error }}</li>{% endfor %}
</ul>
{% endif %}
</div>
{{ render_form_field(
form.username,
label=gettext("Username"),
placeholder=gettext("Your username"),
class_="form-group__field",
autocapitalize="off",
autocomplete="username",
spellcheck="false",
required="required",
tabindex="1"
) }}
</div>
<div data-controller="password" class="form-group">
<div class="split-layout">
Expand Down
95 changes: 28 additions & 67 deletions warehouse/templates/accounts/register.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -62,79 +62,40 @@ <h1 class="page-title">{% trans title=title %}Create an account on {{ title }}{%
{% for error in form.form_errors %}<li>{{ error }}</li>{% endfor %}
</ul>
{% endif %}
<div class="form-group">
<label for="full_name" class="form-group__label">
{% trans %}Name{% endtrans %}
{% if form.full_name.flags.required %}
<span class="form-group__required">{% trans %}(required){% endtrans %}</span>
{% endif %}
</label>
{{ form.full_name(placeholder=gettext("Your name") ,
autocomplete="name",
autocapitalize="off",
spellcheck="false",
class_="form-group__field",
aria_describedby="name-errors",
) }}
<div id="name-errors">
{% if form.full_name.errors %}
<ul class="form-errors" role="alert">
{% for error in form.full_name.errors %}<li>{{ error }}</li>{% endfor %}
</ul>
{% endif %}
</div>
</div>
<div class="form-group">
<label for="email" class="form-group__label">
{% trans %}Email address{% endtrans %}
{% if form.email.flags.required %}
<span class="form-group__required">{% trans %}(required){% endtrans %}</span>
{% endif %}
</label>
{{ form.email(placeholder=gettext("Your email address") ,
autocomplete="email",
spellcheck="false",
required="required",
class_="form-group__field",
aria_describedby="email-errors",
) }}
<div id="email-errors">
{% if form.email.errors %}
<ul class="form-errors" role="alert">
{% for error in form.email.errors %}<li>{{ error }}</li>{% endfor %}
</ul>
{% endif %}
</div>
</div>
{{ render_form_field(
form.full_name,
label=gettext("Name"),
placeholder=gettext("Your name"),
class_="form-group__field",
autocomplete="name",
autocapitalize="off",
spellcheck="false"
) }}
{{ render_form_field(
form.email,
label=gettext("Email address"),
placeholder=gettext("Your email address"),
class_="form-group__field",
autocomplete="email",
spellcheck="false",
required="required"
) }}
{# The following is a honeypot field and is hidden from the user #}
<div class="form-group confirm-form">
<label for="confirm_form" class="form-group__label">{% trans %}Confirm form{% endtrans %}</label>
{{ form.confirm_form(class="form-group__field",
aria_hidden='true',) }}
</div>
<div class="form-group">
<label for="username" class="form-group__label">
{% trans %}Username{% endtrans %}
{% if form.username.flags.required %}
<span class="form-group__required">{% trans %}(required){% endtrans %}</span>
{% endif %}
</label>
{{ form.username(placeholder=gettext("Select a username") ,
autocapitalize="off",
autocomplete="username",
spellcheck="false",
required="required",
class_="form-group__field",
aria_describedby="username-errors",
) }}
<div id="username-errors">
{% if form.username.errors %}
<ul class="form-errors" role="alert">
{% for error in form.username.errors %}<li>{{ error }}</li>{% endfor %}
</ul>
{% endif %}
</div>
</div>
{{ render_form_field(
form.username,
label=gettext("Username"),
placeholder=gettext("Select a username"),
class_="form-group__field",
autocapitalize="off",
autocomplete="username",
spellcheck="false",
required="required"
) }}
<div>
<div class="form-group">
<div class="split-layout">
Expand Down
4 changes: 3 additions & 1 deletion warehouse/templates/base.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,6 @@
{# SPDX-License-Identifier: Apache-2.0 -#}
{% from "macros/forms.html" import render_form_field with context %}

{% macro humanize(timestamp, relative="true", time="false") -%}
<time datetime="{{ timestamp|format_datetime('yyyy-MM-ddTHH:mm:ssZ') }}"
data-controller="localized-time"
Expand Down Expand Up @@ -512,4 +514,4 @@ <h2>{% trans %}Using PyPI{% endtrans %}</h2>
{% include "warehouse:templates/includes/sponsors-footer.html" %}
{% endblock body %}
</body>
</html>
</html>
18 changes: 18 additions & 0 deletions warehouse/templates/macros/forms.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
{% macro render_form_field(field, label=None, placeholder=None, class_="form-group__input", show_required=True) %}
<div class="form-group">
<label for="{{ field.id }}" class="form-group__label">
{{ label or field.label.text }}
{% if show_required and field.flags.required %}
<span class="form-group__required">(required)</span>
{% endif %}
</label>
{{ field(placeholder=placeholder or label or field.label.text, class_=class_, **{"aria-describedby": field.id + "-errors"}) }}
{% if field.errors %}
<ul id="{{ field.id }}-errors" class="form-errors" role="alert">
{% for error in field.errors %}
<li>{{ error }}</li>
{% endfor %}
</ul>
{% endif %}
</div>
{% endmacro %}
74 changes: 24 additions & 50 deletions warehouse/templates/manage/organizations.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -201,34 +201,21 @@ <h2 class="sub-title">{% trans %}Request a new organization{% endtrans %}</h2>
type="hidden"
value="{{ request.session.get_csrf_token() }}">
{{ form_errors(create_organization_application_form) }}
<div class="form-group">
<label for="name" class="form-group__label">
{% trans %}Organization Account Name{% endtrans %}
{% if create_organization_application_form.name.flags.required %}
<span class="form-group__required">{% trans %}(required){% endtrans %}</span>
{% endif %}
</label>
{{ create_organization_application_form.name(placeholder=gettext("Select an organization account name") ,
autocapitalize="off",
autocomplete="off",
spellcheck="false",
required="required",
class_="form-group__field",
aria_describedby="name-errors"
) }}
<div id="name-errors">
{% if create_organization_application_form.name.errors %}
<ul class="form-errors" role="alert">
{% for error in create_organization_application_form.name.errors %}<li>{{ error }}</li>{% endfor %}
</ul>
{% endif %}
</div>
<p class="form-group__help-text">
{% trans %}This account name is used in URLs on PyPI.{% endtrans %}
<br>
{% trans %}For example{% endtrans %}: psf
</p>
</div>
{{ render_form_field(
create_organization_application_form.name,
label=gettext("Organization Account Name"),
placeholder=gettext("Select an organization account name"),
class_="form-group__field",
autocapitalize="off",
autocomplete="off",
spellcheck="false",
required="required"
) }}
<p class="form-group__help-text">
{% trans %}This account name is used in URLs on PyPI.{% endtrans %}
<br>
{% trans %}For example{% endtrans %}: psf
</p>
<div class="form-group">
<label for="display_name" class="form-group__label">
{% trans %}Organization Display Name{% endtrans %}
Expand Down Expand Up @@ -271,28 +258,15 @@ <h2 class="sub-title">{% trans %}Request a new organization{% endtrans %}</h2>
<div id="link-url-errors">{{ field_errors(create_organization_application_form.link_url) }}</div>
<p class="form-group__help-text">{% trans %}For example{% endtrans %}: https://www.python.org/psf/</p>
</div>
<div class="form-group">
<label for="description" class="form-group__label">
{% trans %}Organization Description{% endtrans %}
{% if create_organization_application_form.description.flags.required %}
<span class="form-group__required">{% trans %}(required){% endtrans %}</span>
{% endif %}
</label>
{{ create_organization_application_form.description(placeholder=gettext("Description of your business, product, or project") ,
autocomplete="off",
autocapitalize="off",
spellcheck="true",
class_="form-group__field",
aria_describedby="description-errors",
) }}
<div id="description-errors">
{% if create_organization_application_form.description.errors %}
<ul class="form-errors" role="alert">
{% for error in create_organization_application_form.description.errors %}<li>{{ error }}</li>{% endfor %}
</ul>
{% endif %}
</div>
</div>
{{ render_form_field(
create_organization_application_form.description,
label=gettext("Organization Description"),
placeholder=gettext("Description of your business, product, or project"),
class_="form-group__field",
autocomplete="off",
autocapitalize="off",
spellcheck="true"
) }}
<div class="form-group">
<label class="form-group__label" for="orgtype">
{% trans %}️Organization Membership Size{% endtrans %}
Expand Down