Skip to content

Commit e86f27f

Browse files
Tejaswini VTejaswini V
Tejaswini V
authored and
Tejaswini V
committed
Add form field macro #6393 
1 parent bf2597a commit e86f27f

File tree

8 files changed

+492
-668
lines changed

8 files changed

+492
-668
lines changed

‎warehouse/locale/messages.pot

Lines changed: 316 additions & 389 deletions
Large diffs are not rendered by default.

‎warehouse/templates/accounts/login.html

Lines changed: 20 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -28,51 +28,28 @@ <h1 class="page-title">{% trans title=title %}Log in to {{ title }}{% endtrans %
2828
</ul>
2929
{% endif %}
3030
<div class="form-group">
31-
<label for="username" class="form-group__label">
32-
{% trans %}Username{% endtrans %}
33-
{% if form.username.flags.required %}
34-
<span class="form-group__required">{% trans %}(required){% endtrans %}</span>
35-
{% endif %}
36-
</label>
37-
{{ form.username(placeholder=gettext("Your username") ,
38-
autocapitalize="off",
39-
autocomplete="username",
40-
spellcheck="false",
41-
required="required",
42-
class_="form-group__field",
43-
aria_describedby="username-errors",
44-
) }}
45-
<div id="username-errors">
46-
{% if form.username.errors %}
47-
<ul class="form-errors" role="alert">
48-
{% for error in form.username.errors %}<li>{{ error }}</li>{% endfor %}
49-
</ul>
50-
{% endif %}
51-
</div>
31+
{{ input_field(
32+
instance="username",
33+
user_friendly_name="Username",
34+
form_instance=form.username,
35+
placeholder="Your username",
36+
autocomplete="username",
37+
required="required",
38+
autocapitalize="off",
39+
spellcheck="false"
40+
)}}
5241
</div>
5342
<div data-controller="password" class="form-group">
54-
<div>
55-
<label for="password" class="form-group__label">
56-
{% trans %}Password{% endtrans %}
57-
{% if form.password.flags.required %}
58-
<span class="form-group__required">{% trans %}(required){% endtrans %}</span>
59-
{% endif %}
60-
</label>
61-
</div>
62-
{{ form.password(placeholder=gettext("Your password") ,
63-
required="required",
64-
class_="form-group__field",
65-
autocomplete="current-password",
66-
spellcheck="false", data_password_target="password",
67-
aria_describedby="password-errors",
68-
) }}
69-
<div id="password-errors">
70-
{% if form.password.errors %}
71-
<ul class="form-errors" role="alert">
72-
{% for error in form.password.errors %}<li>{{ error }}</li>{% endfor %}
73-
</ul>
74-
{% endif %}
75-
</div>
43+
{{ input_field(
44+
instance="password",
45+
user_friendly_name="Password",
46+
form_instance=form.password,
47+
placeholder="Your password",
48+
autocomplete="current-password",
49+
data_password_target="password",
50+
required="required",
51+
spellcheck="false"
52+
)}}
7653
<div class="form-group">
7754
<div class="split-layout margin-top--large margin-bottom--large">
7855
<div>

‎warehouse/templates/accounts/register.html

Lines changed: 48 additions & 98 deletions
Original file line numberDiff line numberDiff line change
@@ -63,48 +63,26 @@ <h1 class="page-title">{% trans title=title %}Create an account on {{ title }}{%
6363
</ul>
6464
{% endif %}
6565
<div class="form-group">
66-
<label for="full_name" class="form-group__label">
67-
{% trans %}Name{% endtrans %}
68-
{% if form.full_name.flags.required %}
69-
<span class="form-group__required">{% trans %}(required){% endtrans %}</span>
70-
{% endif %}
71-
</label>
72-
{{ form.full_name(placeholder=gettext("Your name") ,
73-
autocomplete="name",
74-
autocapitalize="off",
75-
spellcheck="false",
76-
class_="form-group__field",
77-
aria_describedby="name-errors",
78-
) }}
79-
<div id="name-errors">
80-
{% if form.full_name.errors %}
81-
<ul class="form-errors" role="alert">
82-
{% for error in form.full_name.errors %}<li>{{ error }}</li>{% endfor %}
83-
</ul>
84-
{% endif %}
85-
</div>
66+
{{ input_field(
67+
instance="name",
68+
user_friendly_name="Name",
69+
form_instance=form.full_name,
70+
placeholder="Your name",
71+
autocomplete="name",
72+
autocapitalize="off",
73+
spellcheck="false"
74+
)}}
8675
</div>
8776
<div class="form-group">
88-
<label for="email" class="form-group__label">
89-
{% trans %}Email address{% endtrans %}
90-
{% if form.email.flags.required %}
91-
<span class="form-group__required">{% trans %}(required){% endtrans %}</span>
92-
{% endif %}
93-
</label>
94-
{{ form.email(placeholder=gettext("Your email address") ,
95-
autocomplete="email",
96-
spellcheck="false",
97-
required="required",
98-
class_="form-group__field",
99-
aria_describedby="email-errors",
100-
) }}
101-
<div id="email-errors">
102-
{% if form.email.errors %}
103-
<ul class="form-errors" role="alert">
104-
{% for error in form.email.errors %}<li>{{ error }}</li>{% endfor %}
105-
</ul>
106-
{% endif %}
107-
</div>
77+
{{ input_field(
78+
instance="email",
79+
user_friendly_name="Email address",
80+
form_instance=form.email,
81+
placeholder="Your email address",
82+
autocomplete="email",
83+
spellcheck="false",
84+
required="required"
85+
)}}
10886
</div>
10987
{# The following is a honeypot field and is hidden from the user #}
11088
<div class="form-group confirm-form">
@@ -113,37 +91,23 @@ <h1 class="page-title">{% trans title=title %}Create an account on {{ title }}{%
11391
aria_hidden='true',) }}
11492
</div>
11593
<div class="form-group">
116-
<label for="username" class="form-group__label">
117-
{% trans %}Username{% endtrans %}
118-
{% if form.username.flags.required %}
119-
<span class="form-group__required">{% trans %}(required){% endtrans %}</span>
120-
{% endif %}
121-
</label>
122-
{{ form.username(placeholder=gettext("Select a username") ,
123-
autocapitalize="off",
124-
autocomplete="username",
125-
spellcheck="false",
126-
required="required",
127-
class_="form-group__field",
128-
aria_describedby="username-errors",
129-
) }}
130-
<div id="username-errors">
131-
{% if form.username.errors %}
132-
<ul class="form-errors" role="alert">
133-
{% for error in form.username.errors %}<li>{{ error }}</li>{% endfor %}
134-
</ul>
135-
{% endif %}
136-
</div>
94+
{{ input_field(
95+
instance="username",
96+
user_friendly_name="Username",
97+
form_instance=form.username,
98+
placeholder="Select a username",
99+
autocomplete="username",
100+
autocapitalize="off",
101+
required="required"
102+
)}}
137103
</div>
138104
<div>
139105
<div class="form-group">
140106
<div class="split-layout">
141-
<label for="new_password" class="form-group__label">
142-
{% trans %}Password{% endtrans %}
143-
{% if form.new_password.flags.required %}
144-
<span class="form-group__required">{% trans %}(required){% endtrans %}</span>
145-
{% endif %}
146-
</label>
107+
{{ input_field_label(
108+
user_friendly_name="Password",
109+
form_instance=form.new_password
110+
)}}
147111
<label for="show-password">
148112
<input data-action="change->password#togglePasswords"
149113
data-password-target="showPassword"
@@ -164,40 +128,26 @@ <h1 class="page-title">{% trans title=title %}Create an account on {{ title }}{%
164128
data_action="input->password-match#checkPasswordsMatch input->password-strength-gauge#checkPasswordStrength input->password-breach#check",
165129
aria_describedby="password-errors password-strength"
166130
) }}
167-
<div id="password-errors">
168-
{% if form.new_password.errors %}
169-
<ul class="form-errors" role="alert">
170-
{% for error in form.new_password.errors %}<li>{{ error }}</li>{% endfor %}
171-
</ul>
172-
{% endif %}
173-
</div>
131+
{{ input_field_errors(
132+
instance="password",
133+
form_instance=form.new_password
134+
)}}
174135
{{ password_strength_gauge(data_password_strength_gauge_target="strengthGauge") }}
175136
</div>
176-
<div class="form-group">
177-
<label for="password_confirm" class="form-group__label">
178-
{% trans %}Confirm password{% endtrans %}
179-
{% if form.password_confirm.flags.required %}
180-
<span class="form-group__required">{% trans %}(required){% endtrans %}</span>
181-
{% endif %}
182-
</label>
183-
{{ form.password_confirm(placeholder=gettext("Confirm password") ,
184-
required="required",
185-
class_="form-group__field",
186-
autocomplete="new-password",
187-
spellcheck="false",
188-
data_password_target="password",
189-
data_password_match_target="passwordMatch",
190-
data_action="input->password-match#checkPasswordsMatch",
191-
aria_describedby="password-confirm-errors",
192-
) }}
193-
<div id="password-confirm-errors">
194-
{% if form.password_confirm.errors %}
195-
<ul class="form-errors" role="alert">
196-
{% for error in form.password_confirm.errors %}<li>{{ error }}</li>{% endfor %}
197-
</ul>
198-
{% endif %}
137+
<div class="form-group">
138+
{{ input_field(
139+
instance="password-confirm",
140+
user_friendly_name="Confirm password",
141+
form_instance=form.password_confirm,
142+
placeholder="Confirm password",
143+
autocomplete="new-password",
144+
required="required",
145+
spellcheck="false",
146+
data_password_target="password",
147+
data_password_match_target="passwordMatch",
148+
data_action="input->password-match#checkPasswordsMatch",
149+
)}}
199150
</div>
200-
</div>
201151
</div>
202152
<div class="form-group">
203153
<ul class="form-errors">

‎warehouse/templates/accounts/reset-password.html

Lines changed: 17 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -24,12 +24,10 @@ <h1 class="page-title">{% trans %}Reset your password{% endtrans %}</h1>
2424
{% endif %}
2525
<div class="form-group">
2626
<div class="split-layout">
27-
<label for="password" class="form-group__label">
28-
{% trans %}Password{% endtrans %}
29-
{% if form.new_password.flags.required %}
30-
<span class="form-group__required">{% trans %}(required){% endtrans %}</span>
31-
{% endif %}
32-
</label>
27+
{{ input_field_label(
28+
user_friendly_name="Password",
29+
form_instance=form.new_password
30+
)}}
3331
<label for="show-password">
3432
<input data-action="change->password#togglePasswords"
3533
data-password-target="showPassword"
@@ -50,35 +48,22 @@ <h1 class="page-title">{% trans %}Reset your password{% endtrans %}</h1>
5048
data_action="input->password-match#checkPasswordsMatch input->password-strength-gauge#checkPasswordStrength",
5149
aria_describedby="password-errors password-strength",
5250
) }}
53-
{% if form.new_password.errors %}
54-
<ul id="password-errors" class="form-errors" role="alert">
55-
{% for error in form.new_password.errors %}<li>{{ error }}</li>{% endfor %}
56-
</ul>
57-
{% endif %}
51+
{{ field_errors(form_instance=form.new_password) }}
5852
{{ password_strength_gauge(data_password_strength_gauge_target="strengthGauge") }}
5953
</div>
6054
<div class="form-group">
61-
<label for="password_confirm" class="form-group__label">
62-
{% trans %}Confirm password{% endtrans %}
63-
{% if form.password_confirm.flags.required %}
64-
<span class="form-group__required">{% trans %}(required){% endtrans %}</span>
65-
{% endif %}
66-
</label>
67-
{{ form.password_confirm(placeholder=gettext("Confirm password") ,
68-
required="required",
69-
autocomplete="new-password",
70-
spellcheck="false",
71-
class_="form-group__field",
72-
data_password_target="password",
73-
data_password_match_target="passwordMatch",
74-
data_action="input->password-match#checkPasswordsMatch",
75-
aria_describedby="confirm-password-errors",
76-
) }}
77-
{% if form.password_confirm.errors %}
78-
<ul id="confirm-password-errors" class="form-errors" role="alert">
79-
{% for error in form.password_confirm.errors %}<li>{{ error }}</li>{% endfor %}
80-
</ul>
81-
{% endif %}
55+
{{ input_field(
56+
instance="confirm-password",
57+
user_friendly_name="Confirm password",
58+
form_instance=form.password_confirm,
59+
placeholder="Confirm password",
60+
autocomplete="new-password",
61+
spellcheck="false",
62+
required="required",
63+
data_password_target="password",
64+
data_password_match_target="passwordMatch",
65+
data_action="input->password-match#checkPasswordsMatch",
66+
)}}
8267
</div>
8368
<div class="form-group">
8469
<ul class="form-errors" role="alert">

‎warehouse/templates/base.html

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,36 @@
77
{{ timestamp|format_date() }}
88
</time>
99
{%- endmacro %}
10+
{% macro input_field_label(user_friendly_name="", form_instance="") -%}
11+
<label for="{{form_instance.name}}" class="form-group__label">
12+
{% trans form_name=user_friendly_name %}{{ form_name }}{% endtrans %}
13+
{% if form_instance.flags.required %}
14+
<span class="form-group__required">{% trans %}(required){% endtrans %}</span>
15+
{% endif %}
16+
</label>
17+
{% endmacro %}
18+
{% macro input_field_errors(instance, form_instance) -%}
19+
<div id="{{instance}}-errors">
20+
{% if form_instance.errors %}
21+
<ul class="form-errors" role="alert">
22+
{% for error in form_instance.errors %}
23+
<li>{{ error }}</li>
24+
{% endfor %}
25+
</ul>
26+
{% endif %}
27+
</div>
28+
{% endmacro %}
29+
{% macro input_field(instance, user_friendly_name, form_instance, placeholder="") -%}
30+
{{ input_field_label(user_friendly_name, form_instance) }}
31+
{% set form_field_attrs = {
32+
"placeholder": gettext(placeholder),
33+
"class": "form-group__field",
34+
"aria-describedby": instance ~ "-errors"
35+
} %}
36+
{% set _ = form_field_attrs.update(kwargs) %}
37+
{{ form_instance(**form_field_attrs) }}
38+
{{ input_field_errors(instance, form_instance) }}
39+
{%- endmacro %}
1040
{% macro password_strength_gauge(data_password_strength_gauge_target=None) -%}
1141
<div id="password-strength">
1242
<p class="form-group__help-text">

0 commit comments

Comments
 (0)