Skip to content

Commit d00d6bd

Browse files
Antoliny0919Antoliny0919
committed
refactor: Reuse repeated form design via custom FORM_RENDERER
1 parent d239081 commit d00d6bd

File tree

8 files changed

+40
-109
lines changed

8 files changed

+40
-109
lines changed

‎djangosnippets/settings/base.py‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@
33

44
import dj_database_url
55
from django.contrib import messages
6+
from django.forms.renderers import TemplatesSetting
67
from django.urls import reverse
78
from dotenv import load_dotenv
89

@@ -58,6 +59,7 @@ def user_url(user):
5859
"django.contrib.sessions",
5960
"django.contrib.staticfiles",
6061
"django.contrib.sites",
62+
"django.forms",
6163
"allauth",
6264
"allauth.account",
6365
"allauth.socialaccount",
@@ -219,3 +221,10 @@ def user_url(user):
219221
}
220222

221223
DEFAULT_AUTO_FIELD = "django.db.models.AutoField"
224+
225+
226+
class CustomFormRenderer(TemplatesSetting):
227+
form_template_name = "forms/form.html"
228+
229+
230+
FORM_RENDERER = "djangosnippets.settings.base.CustomFormRenderer"

‎djangosnippets/templates/account/login.html‎

Lines changed: 3 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{% extends "base.html" %}
22

3-
{% load static account socialaccount widget_tweaks %}
3+
{% load static %}
44

55
{% block header%}{% endblock %}
66

@@ -11,26 +11,7 @@ <h3>Sign In</h3>
1111
{% include "socialaccount/snippets/login_extra.html" %}
1212
<form class="login flex flex-col items-center w-[80%]" method="POST" action="{% url 'account_login' %}">
1313
{% csrf_token %}
14-
{% if form.non_field_errors %}
15-
<ul class="m-0 border-2 rounded-md p-2 border-red-400 text-red-600 font-bold">
16-
{% for error in form.non_field_errors %}<li>{{ error }}</li>{% endfor %}
17-
</ul>
18-
{% endif %}
19-
{% for field in form %}
20-
<div class="w-full my-1">
21-
<div class="flex w-full my-2">
22-
<label class="text-base text-left">{{ field.label }}</label>
23-
<span aria-hidden="true" class="text-4xl text-red-400 h-2 ml-1">*</span>
24-
</div>
25-
{% if field.errors %}
26-
{{ field|add_class:"h-12 text-lg rounded-lg border-red-600 border-2 my-2" }}
27-
{% else %}
28-
{{ field|add_class:"h-12 text-lg rounded-lg border-base-green-400 border-2 my-2" }}
29-
{% endif %}
30-
{% if field.help_text %}<div class="w-full text-left ml-4 font-text">{{ field.help_text|safe }}</div>{% endif %}
31-
{% if field.errors %}<ul class="m-0 w-full ml-4 text-left text-red-600 font-text">{% for error in field.errors %}<li>{{ error }}</li>{% endfor %}</ul>{% endif %}
32-
</div>
33-
{% endfor %}
14+
{{ form }}
3415
<button type="submit" class="w-full my-4 h-12 text-lg bg-base-green-600 border-2 rounded-lg border-base-green-800 font-common hover:bg-base-white-400 hover:text-base-green-600">Sign In</button>
3516
</form>
3617
<a href="{% url 'account_reset_password' %}" class="block w-[80%] underline text-right text-base-green-600 hover:text-base-orange-400">Forgotten your password?</a>
@@ -44,4 +25,4 @@ <h3>Sign In</h3>
4425
</ul>
4526
</div>
4627
{% endblock %}
47-
{% block footer %}{% endblock %}
28+
{% block footer %}{% endblock %}

‎djangosnippets/templates/account/password_reset.html‎

Lines changed: 1 addition & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,5 @@
11
{% extends "account/base.html" %}
22

3-
{% load widget_tweaks %}
4-
53
{% block head_title %}Reset password{% endblock %}
64

75
{% block header %}{% endblock %}
@@ -16,26 +14,7 @@ <h3>Forgotten your password?</h3>
1614
<p class="text-center font-xl my-4">Enter your e-mail address below, and we'll send you an e-mail allowing you to reset it.</p>
1715
<form class="flex flex-col items-center w-[80%]" method="POST" action="{% url 'account_reset_password' %}">
1816
{% csrf_token %}
19-
{% if form.non_field_errors %}
20-
<ul class="m-0 border-2 rounded-md p-2 border-red-400 text-red-600 font-bold">
21-
{% for error in form.non_field_errors %}<li>{{ error }}</li>{% endfor %}
22-
</ul>
23-
{% endif %}
24-
{% for field in form %}
25-
<div class="w-full my-1">
26-
<div class="flex w-full my-2">
27-
<label class="text-base text-left">{{ field.label }}</label>
28-
<span aria-hidden="true" class="text-4xl text-red-400 h-2 ml-1">*</span>
29-
</div>
30-
{% if field.errors %}
31-
{{ field|add_class:"h-12 text-lg rounded-lg border-red-600 border-2 my-2" }}
32-
{% else %}
33-
{{ field|add_class:"h-12 text-lg rounded-lg border-base-green-400 border-2 my-2" }}
34-
{% endif %}
35-
{% if field.help_text %}<div class="w-full text-left ml-4 font-text">{{ field.help_text|safe }}</div>{% endif %}
36-
{% if field.errors %}<ul class="m-0 w-full ml-4 text-left text-red-600 font-text">{% for error in field.errors %}<li>{{ error }}</li>{% endfor %}</ul>{% endif %}
37-
</div>
38-
{% endfor %}
17+
{{ form }}
3918
<button type="submit" class="w-full my-4 h-12 text-lg bg-base-green-600 border-2 rounded-lg border-base-green-800 font-common hover:bg-base-white-400 hover:text-base-green-600">Reset My Password</button>
4019
</form>
4120
</div>

‎djangosnippets/templates/account/password_reset_from_key.html‎

Lines changed: 2 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{% extends "account/base.html" %}
22

3-
{% load static widget_tweaks %}
3+
{% load static %}
44

55
{% block head_title %}{% if token_fail %}Bad Token{% else %}Change Password{% endif %}{% endblock %}
66

@@ -17,26 +17,7 @@ <h3>{% if token_fail %}Bad Token{% else %}Change Password{% endif %}</h3>
1717
<p class="my-4 text-center">Enter your new password.</p>
1818
<form class="flex flex-col items-center w-[80%]" method="POST" action="{{ action_url }}">
1919
{% csrf_token %}
20-
{% if form.non_field_errors %}
21-
<ul class="m-0 border-2 rounded-md p-2 border-red-400 text-red-600 font-bold">
22-
{% for error in form.non_field_errors %}<li>{{ error }}</li>{% endfor %}
23-
</ul>
24-
{% endif %}
25-
{% for field in form %}
26-
<div class="w-full my-1">
27-
<div class="flex w-full my-2">
28-
<label class="text-base text-left">{{ field.label }}</label>
29-
<span aria-hidden="true" class="text-4xl text-red-400 h-2 ml-1">*</span>
30-
</div>
31-
{% if field.errors %}
32-
{{ field|add_class:"h-12 text-lg rounded-lg border-red-600 border-2 my-2" }}
33-
{% else %}
34-
{{ field|add_class:"h-12 text-lg rounded-lg border-base-green-400 border-2 my-2" }}
35-
{% endif %}
36-
{% if field.help_text %}<div class="w-full text-left ml-4 font-text">{{ field.help_text|safe }}</div>{% endif %}
37-
{% if field.errors %}<ul class="m-0 w-full ml-4 text-left text-red-600 font-text">{% for error in field.errors %}<li>{{ error }}</li>{% endfor %}</ul>{% endif %}
38-
</div>
39-
{% endfor %}
20+
{{ form }}
4021
<button type="submit" class="w-full my-4 h-12 text-lg bg-base-green-600 border-2 rounded-lg border-base-green-800 font-common hover:bg-base-white-400 hover:text-base-green-600">Change Password</button>
4122
</form>
4223
{% endif %}

‎djangosnippets/templates/account/password_reset_from_key_done.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,4 +13,4 @@ <h3>Your password is now changed</h3>
1313
<a class="button" href="{% url 'account_login' %}">Continue Login</a>
1414
</div>
1515
{% endblock %}
16-
{% block footer %}{% endblock %}
16+
{% block footer %}{% endblock %}

‎djangosnippets/templates/account/signup.html‎

Lines changed: 1 addition & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,5 @@
11
{% extends "account/base.html" %}
22

3-
{% load widget_tweaks %}
4-
53
{% block head_title %}Signup{% endblock %}
64

75
{% block header%}{% endblock %}
@@ -13,26 +11,7 @@ <h3>Sign Up</h3>
1311
{% include "socialaccount/snippets/login_extra.html" %}
1412
<form class="flex flex-col items-center w-[80%]" method="POST" action="{% url 'account_signup' %}">
1513
{% csrf_token %}
16-
{% if form.non_field_errors %}
17-
<ul class="m-0 border-2 rounded-md p-2 border-red-400 text-red-600 font-bold">
18-
{% for error in form.non_field_errors %}<li>{{ error }}</li>{% endfor %}
19-
</ul>
20-
{% endif %}
21-
{% for field in form %}
22-
<div class="w-full my-1">
23-
<div class="flex w-full my-2">
24-
<label class="text-base text-left">{{ field.label }}</label>
25-
<span aria-hidden="true" class="text-4xl text-red-400 h-2 ml-1">*</span>
26-
</div>
27-
{% if field.errors %}
28-
{{ field|add_class:"h-12 text-lg rounded-lg border-red-600 border-2 my-2" }}
29-
{% else %}
30-
{{ field|add_class:"h-12 text-lg rounded-lg border-base-green-400 border-2 my-2" }}
31-
{% endif %}
32-
{% if field.help_text %}<div class="w-full text-left ml-4 font-text">{{ field.help_text|safe }}</div>{% endif %}
33-
{% if field.errors %}<ul class="m-0 w-full ml-4 text-left text-red-600 font-text">{% for error in field.errors %}<li>{{ error }}</li>{% endfor %}</ul>{% endif %}
34-
</div>
35-
{% endfor %}
14+
{{ form }}
3615
<button type="submit" class="w-full my-4 h-12 text-lg bg-base-green-600 border-2 rounded-lg border-base-green-800 font-common hover:bg-base-white-400 hover:text-base-green-600">Sign Up</button>
3716
</form>
3817
<div class="flex items-center my-4 w-[80%]">

‎djangosnippets/templates/forms/form.html‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
{% load widget_tweaks %}
2+
3+
{% if form.non_field_errors %}
4+
<ul class="m-0 border-2 rounded-md p-2 border-red-400 text-red-600 font-bold">
5+
{% for error in form.non_field_errors %}<li>{{ error }}</li>{% endfor %}
6+
</ul>
7+
{% endif %}
8+
{% for field in form %}
9+
<div class="w-full my-1">
10+
<div class="flex w-full my-2">
11+
<label class="text-base text-left">{{ field.label }}</label>
12+
<span aria-hidden="true" class="text-4xl text-red-400 h-2 ml-1">*</span>
13+
</div>
14+
{% if field.errors %}
15+
{{ field|add_class:"h-12 text-lg rounded-lg border-red-600 border-2 my-2" }}
16+
{% else %}
17+
{{ field|add_class:"h-12 text-lg rounded-lg border-base-green-400 border-2 my-2" }}
18+
{% endif %}
19+
{% if field.help_text %}<div class="w-full text-left ml-4 font-text">{{ field.help_text|safe }}</div>{% endif %}
20+
{% if field.errors %}<ul class="m-0 w-full ml-4 text-left text-red-600 font-text">{% for error in field.errors %}<li>{{ error }}</li>{% endfor %}</ul>{% endif %}
21+
</div>
22+
{% endfor %}

‎djangosnippets/templates/socialaccount/signup.html‎

Lines changed: 1 addition & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
{% extends "socialaccount/base.html" %}
2-
{% load widget_tweaks %}
32

43
{% block head_title %}Signup{% endblock %}
54

@@ -12,26 +11,7 @@ <h3>Signup</h3>
1211

1312
<form class="login flex flex-col items-center w-[80%]" method="POST" action="{% url 'socialaccount_signup' %}">
1413
{% csrf_token %}
15-
{% if form.non_field_errors %}
16-
<ul class="m-0 border-2 rounded-md p-2 border-red-400 text-red-600 font-bold">
17-
{% for error in form.non_field_errors %}<li>{{ error }}</li>{% endfor %}
18-
</ul>
19-
{% endif %}
20-
{% for field in form %}
21-
<div class="w-full my-1">
22-
<div class="flex w-full my-2">
23-
<label class="text-base text-left">{{ field.label }}</label>
24-
<span aria-hidden="true" class="text-4xl text-red-400 h-2 ml-1">*</span>
25-
</div>
26-
{% if field.errors %}
27-
{{ field|add_class:"h-12 text-lg rounded-lg border-red-600 border-2 my-2" }}
28-
{% else %}
29-
{{ field|add_class:"h-12 text-lg rounded-lg border-base-green-400 border-2 my-2" }}
30-
{% endif %}
31-
{% if field.help_text %}<div class="w-full text-left ml-4 font-text">{{ field.help_text|safe }}</div>{% endif %}
32-
{% if field.errors %}<ul class="m-0 w-full ml-4 text-left text-red-600 font-text">{% for error in field.errors %}<li>{{ error }}</li>{% endfor %}</ul>{% endif %}
33-
</div>
34-
{% endfor %}
14+
{{ form }}
3515
<button type="submit" class="w-full my-4 h-12 text-lg bg-base-green-600 border-2 rounded-lg border-base-green-800 font-common hover:bg-base-white-400 hover:text-base-green-600">SignUp</button>
3616
</form>
3717
</div>

0 commit comments

Comments
 (0)