Skip to content

Commit f214940

Browse files
Mr-SunglassesMariatta
Mr-Sunglasses
and
Mariatta
authored
feat: Add validations for social media links in volunteer creation form (#77)
-Add validations for social media links in volunteer creation form - Improve test coverage - Updated form with bootstrap Input group --------- Co-authored-by: Mariatta <[email protected]>
1 parent da1a4d2 commit f214940

File tree

7 files changed

+1202
-51
lines changed

7 files changed

+1202
-51
lines changed

‎templates/volunteer/volunteerprofile_form.html

Lines changed: 108 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,15 @@
11
{% extends "portal/base.html" %}
22
{% load allauth i18n %}
33
{% load django_bootstrap5 %}
4-
{% block body %}
5-
{% endblock body %}
64
{% block content %}
75
<main>
86
<h1 class="display-5">{% if object.pk %}Edit{% else %}Create{% endif %} your Volunteer Profile</h1>
97
<p class="lead">
10-
{% if object.pk %}Update your information below.{% else %}Fill in the profile below.{% endif %}
8+
{% if object.pk %}
9+
Update your information below.
10+
{% else %}
11+
Fill in the profile below.
12+
{% endif %}
1113
</p>
1214
<div class="row g-5">
1315
{% bootstrap_form_errors form %}
@@ -17,6 +19,7 @@ <h1 class="display-5">{% if object.pk %}Edit{% else %}Create{% endif %} your Vol
1719
<h5 class="card-title mb-0">Basic Information</h5>
1820
</div>
1921
<div class="card-body">
22+
<!-- Custom languages spoken checkboxes from original -->
2023
<div class="mb-3">
2124
<label class="form-label">Languages Spoken*</label>
2225
<div class="form-text mb-2">Select all languages you're comfortable communicating in</div>
@@ -39,28 +42,122 @@ <h5 class="card-title mb-0">Basic Information</h5>
3942
</div>
4043
</div>
4144

45+
<!-- Enhanced social media section from modified version -->
4246
<div class="card mb-4">
4347
<div class="card-header">
4448
<h5 class="card-title mb-0">Social Media Profiles</h5>
45-
<p class="text-muted small mt-2 mb-0">Please enter your usernames without the '@' symbol unless specified otherwise.</p>
49+
<p class="text-muted small mt-2 mb-0">Please enter usernames without @ symbols or protocol prefixes</p>
4650
</div>
4751
<div class="card-body">
4852
<div class="row">
4953
<div class="col-md-6">
50-
{% bootstrap_field form.github_username %}
51-
{% bootstrap_field form.discord_username %}
52-
{% bootstrap_field form.instagram_username %}
53-
{% bootstrap_field form.bluesky_username %}
54+
<!-- GitHub -->
55+
<div class="mb-3">
56+
<label class="form-label" for="{{ form.github_username.id_for_label }}">
57+
{{ form.github_username.label }}
58+
</label>
59+
<div class="input-group">
60+
<span class="input-group-text">@</span>
61+
<input type="text"
62+
class="form-control {% if form.github_username.errors %}is-invalid{% endif %}"
63+
name="{{ form.github_username.name }}"
64+
id="{{ form.github_username.id_for_label }}"
65+
value="{{ form.github_username.value|default:'' }}">
66+
</div>
67+
<div class="form-text">{{ form.github_username.help_text }}</div>
68+
{% for error in form.github_username.errors %}
69+
<div class="invalid-feedback d-block">{{ error }}</div>
70+
{% endfor %}
71+
</div>
72+
73+
<!-- Discord -->
74+
<div class="mb-3">
75+
<label class="form-label" for="{{ form.discord_username.id_for_label }}">
76+
{{ form.discord_username.label }}
77+
</label>
78+
<div class="input-group">
79+
<span class="input-group-text">@</span>
80+
<input type="text"
81+
class="form-control {% if form.discord_username.errors %}is-invalid{% endif %}"
82+
name="{{ form.discord_username.name }}"
83+
id="{{ form.discord_username.id_for_label }}"
84+
value="{{ form.discord_username.value|default:'' }}">
85+
</div>
86+
<div class="form-text">{{ form.discord_username.help_text }}</div>
87+
{% for error in form.discord_username.errors %}
88+
<div class="invalid-feedback d-block">{{ error }}</div>
89+
{% endfor %}
90+
</div>
91+
92+
<!-- Instagram -->
93+
<div class="mb-3">
94+
<label class="form-label" for="{{ form.instagram_username.id_for_label }}">
95+
{{ form.instagram_username.label }}
96+
</label>
97+
<div class="input-group">
98+
<span class="input-group-text">@</span>
99+
<input type="text"
100+
class="form-control {% if form.instagram_username.errors %}is-invalid{% endif %}"
101+
name="{{ form.instagram_username.name }}"
102+
id="{{ form.instagram_username.id_for_label }}"
103+
value="{{ form.instagram_username.value|default:'' }}">
104+
</div>
105+
<div class="form-text">{{ form.instagram_username.help_text }}</div>
106+
{% for error in form.instagram_username.errors %}
107+
<div class="invalid-feedback d-block">{{ error }}</div>
108+
{% endfor %}
109+
</div>
110+
111+
<!-- Bluesky -->
112+
<div class="mb-3">
113+
<label class="form-label" for="{{ form.bluesky_username.id_for_label }}">
114+
{{ form.bluesky_username.label }}
115+
</label>
116+
<div class="input-group">
117+
<span class="input-group-text">@</span>
118+
<input type="text"
119+
class="form-control {% if form.bluesky_username.errors %}is-invalid{% endif %}"
120+
name="{{ form.bluesky_username.name }}"
121+
id="{{ form.bluesky_username.id_for_label }}"
122+
value="{{ form.bluesky_username.value|default:'' }}">
123+
</div>
124+
<div class="form-text">{{ form.bluesky_username.help_text }}</div>
125+
{% for error in form.bluesky_username.errors %}
126+
<div class="invalid-feedback d-block">{{ error }}</div>
127+
{% endfor %}
128+
</div>
54129
</div>
130+
55131
<div class="col-md-6">
132+
<!-- Mastodon -->
56133
{% bootstrap_field form.mastodon_url %}
57-
{% bootstrap_field form.x_username %}
134+
135+
<!-- X (Twitter) -->
136+
<div class="mb-3">
137+
<label class="form-label" for="{{ form.x_username.id_for_label }}">
138+
{{ form.x_username.label }}
139+
</label>
140+
<div class="input-group">
141+
<span class="input-group-text">https://x.com/</span>
142+
<input type="text"
143+
class="form-control {% if form.x_username.errors %}is-invalid{% endif %}"
144+
name="{{ form.x_username.name }}"
145+
id="{{ form.x_username.id_for_label }}"
146+
value="{{ form.x_username.value|default:'' }}">
147+
</div>
148+
<div class="form-text">{{ form.x_username.help_text }}</div>
149+
{% for error in form.x_username.errors %}
150+
<div class="invalid-feedback d-block">{{ error }}</div>
151+
{% endfor %}
152+
</div>
153+
154+
<!-- LinkedIn -->
58155
{% bootstrap_field form.linkedin_url %}
59156
</div>
60157
</div>
61158
</div>
62159
</div>
63-
160+
64161
<div class="mt-4">
65162
<button type="submit" class="btn btn-primary">{% if object.pk %}Update Profile{% else %}Create Profile{% endif %}</button>
66163
{% if object.pk %}
@@ -72,4 +169,4 @@ <h5 class="card-title mb-0">Social Media Profiles</h5>
72169
</form>
73170
</div>
74171
</main>
75-
{% endblock content %}
172+
{% endblock content %}

0 commit comments

Comments
 (0)