Skip to content

Refactor Create Group form with field-by-field rendering and error handling #964

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
Dhairya1890 wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Refactor Create Group form with field-by-field rendering and error handling #964

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
168 changes: 149 additions & 19 deletions web/templates/web/study/create_group.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,32 +6,162 @@
Create Study Group
{% endblock title %}
{% block content %}
<div class="container mx-auto px-4 py-8">
<div class="max-w-md mx-auto bg-white dark:bg-gray-800 p-8 rounded-lg shadow border border-gray-300 dark:border-gray-700">
<div class="text-center mb-6">
<div class="container mx-auto px-4 sm:px-6 lg:px-8 py-10 sm:py-16">
<div class="max-w-lg mx-auto bg-white dark:bg-gray-800 p-6 sm:p-8 rounded-xl shadow-lg border border-gray-200 dark:border-gray-700">
<div class="text-center mb-8">
<div class="inline-flex items-center justify-center w-14 h-14 rounded-full bg-green-100 dark:bg-green-900 mb-4">
<i class="fas fa-users text-2xl text-green-600 dark:text-green-400"></i>
</div>
<h2 class="text-3xl font-bold text-gray-900 dark:text-gray-100">Create a Study Group</h2>
<p class="mt-2 text-sm text-gray-600 dark:text-gray-300">Fill in the details below to get started.</p>
<p class="mt-2 text-sm text-gray-500 dark:text-gray-400">Fill in the details below to get started.</p>
</div>
<!-- Inline styles to add borders to form inputs -->
<style>
form input,
form textarea,
form select {
border: 1px solid #ccc;
padding: 0.5rem;
border-radius: 0.375rem;
}
</style>
<form method="post" class="space-y-6">
{% if form.errors %}
<div class="mb-6 p-4 bg-red-50 dark:bg-red-900/30 border border-red-200 dark:border-red-800 text-red-700 dark:text-red-300 rounded-lg flex items-start gap-3"
role="alert">
<i class="fas fa-exclamation-circle mt-0.5 flex-shrink-0"></i>
<div>
<p class="font-semibold">Please correct the errors below.</p>
{% if form.non_field_errors %}
<ul class="mt-1 list-disc list-inside text-sm">
{% for error in form.non_field_errors %}<li>{{ error }}</li>{% endfor %}
</ul>
{% endif %}
</div>
</div>
{% endif %}
<form method="post" novalidate class="space-y-5">
{% csrf_token %}
<div class="space-y-4">{{ form.as_p }}</div>
<div>
{% for field in form %}
<div>
{% if field.field.widget.input_type == "checkbox" %}
<label class="inline-flex items-center gap-3 cursor-pointer select-none">
{{ field }}
<span class="text-sm font-medium text-gray-700 dark:text-gray-300">{{ field.label }}</span>
</label>
{% else %}
<label for="{{ field.id_for_label }}"
class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1.5">
{{ field.label }}
</label>
{{ field }}
{% endif %}
{% if field.help_text %}<p class="mt-1 text-xs text-gray-500 dark:text-gray-400">{{ field.help_text }}</p>{% endif %}
{% if field.errors %}
{% for error in field.errors %}
<p class="mt-1 text-sm text-red-600 dark:text-red-400">
<i class="fas fa-exclamation-triangle mr-1 text-xs"></i>{{ error }}
</p>
{% endfor %}
{% endif %}
</div>
{% endfor %}
<div class="pt-2">
<button type="submit"
class="w-full py-3 px-4 bg-green-600 hover:bg-green-700 text-white rounded-md font-semibold focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-offset-2">
Create Group
class="w-full py-3 px-4 bg-green-600 hover:bg-green-700 active:bg-green-800 text-white rounded-lg font-semibold transition duration-200 focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-offset-2 dark:focus:ring-offset-gray-800">
<i class="fas fa-plus-circle mr-2"></i>Create Group
</button>
</div>
</form>
</div>
</div>
<style>
/* Style Django-rendered form widgets with Tailwind-compatible properties */
.space-y-5 input[type="text"],
.space-y-5 input[type="number"],
.space-y-5 input[type="email"],
.space-y-5 input[type="url"],
.space-y-5 textarea,
.space-y-5 select {
display: block;
width: 100%;
padding: 0.625rem 0.875rem;
border: 1px solid #d1d5db;
border-radius: 0.5rem;
font-size: 0.875rem;
line-height: 1.25rem;
color: #111827;
background-color: #fff;
transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.space-y-5 input[type="text"]:focus,
.space-y-5 input[type="number"]:focus,
.space-y-5 input[type="email"]:focus,
.space-y-5 input[type="url"]:focus,
.space-y-5 textarea:focus,
.space-y-5 select:focus {
outline: none;
border-color: #22c55e;
box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.15);
}

.space-y-5 textarea {
min-height: 6rem;
resize: vertical;
}

.space-y-5 input[type="checkbox"] {
width: 1.125rem;
height: 1.125rem;
accent-color: #3b82f6;
border-radius: 0.25rem;
cursor: pointer;
}

/* Dark mode overrides */
.dark .space-y-5 input[type="text"],
.dark .space-y-5 input[type="number"],
.dark .space-y-5 input[type="email"],
.dark .space-y-5 input[type="url"],
.dark .space-y-5 textarea,
.dark .space-y-5 select {
background-color: #374151;
border-color: #4b5563;
color: #f3f4f6;
}

.dark .space-y-5 input[type="text"]:focus,
.dark .space-y-5 input[type="number"]:focus,
.dark .space-y-5 input[type="email"]:focus,
.dark .space-y-5 input[type="url"]:focus,
.dark .space-y-5 textarea:focus,
.dark .space-y-5 select:focus {
border-color: #22c55e;
box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.25);
}

.dark .space-y-5 select option {
background-color: #374151;
color: #f3f4f6;
}

/* Fix browser autofill/autocomplete background in light mode */
.space-y-5 input:-webkit-autofill,
.space-y-5 input:-webkit-autofill:hover,
.space-y-5 input:-webkit-autofill:focus,
.space-y-5 textarea:-webkit-autofill,
.space-y-5 select:-webkit-autofill {
-webkit-box-shadow: 0 0 0 1000px #fff inset;
-webkit-text-fill-color: #111827;
transition: background-color 5000s ease-in-out 0s;
}

/* Fix browser autofill/autocomplete background in dark mode */
.dark .space-y-5 input:-webkit-autofill,
.dark .space-y-5 input:-webkit-autofill:hover,
.dark .space-y-5 input:-webkit-autofill:focus,
.dark .space-y-5 textarea:-webkit-autofill,
.dark .space-y-5 select:-webkit-autofill {
-webkit-box-shadow: 0 0 0 1000px #374151 inset;
-webkit-text-fill-color: #f3f4f6;
transition: background-color 5000s ease-in-out 0s;
}

/* Ensure autocomplete dropdown uses dark theme in dark mode */
.dark .space-y-5 input,
.dark .space-y-5 textarea,
.dark .space-y-5 select {
color-scheme: dark;
}
</style>
{% endblock content %}
Loading