feat: enhance forms with crispy-forms and Bootstrap5

Improved the user interface of various forms by integrating django-crispy-forms and crispy-bootstrap5. Updated form templates to use crispy forms for better styling and layout consistency. Removed the standalone login template in favor of using email-based login flow.

Benefits include:
- Enhanced form layout and styling using Bootstrap 5.
- Improved user experience with clearer instructions and polished designs.

Additionally, updated settings to include crispy forms and Bootstrap 5 template pack.
This commit is contained in:
Kumi 2024-06-23 09:36:28 +02:00
parent f291deece2
commit f4575ec759
Signed by: kumi
GPG key ID: ECBCC9082395383F
6 changed files with 24 additions and 20 deletions

View file

@ -1,10 +0,0 @@
{% extends "base_generic.html" %} {% block title %}Login{% endblock %}
{% block content %}
<div class="container">
<h2>Login</h2>
<form method="post">
{% csrf_token %} {{ form.as_p }}
<button type="submit" class="btn btn-primary">Login</button>
</form>
</div>
{% endblock %}

View file

@ -1,9 +1,13 @@
{% extends "base_generic.html" %} {% block title %}Email Login{% endblock %}
{% block content %}
{% block content %}{% load crispy_forms_tags %}
<div class="container">
<h2>Email Login</h2>
<h2>Login</h2>
<p class="text-muted">Please login to access FreeDOI. If you don't have an
account yet, one will be created for you.</p>
<form method="post">
{% csrf_token %} {{ form.as_p }}
{% csrf_token %} {{ form | crispy }}
<p class="text-muted">We will send you an email with a link to login.
By submitting this form, you agree to our Privacy Policy.</p>
<button type="submit" class="btn btn-primary">Send Login Link</button>
</form>
</div>

View file

@ -1,10 +1,10 @@
{% extends "base_generic.html" %} {% block title %}
{% if form.instance.pk %}Edit{% else %}Create{% endif %} Identifier
{% endblock %} {% block content %}
{% endblock %} {% load crispy_forms_tags %} {% block content %}
<div class="container mt-5">
<h1>{% if form.instance.pk %}Edit{% else %}Create{% endif %} Identifier</h1>
<form method="post">
{% csrf_token %} {{ form.as_p }}
{% csrf_token %} {{ form | crispy }}
<button type="submit" class="btn btn-primary">Save</button>
</form>
<a

View file

@ -1,9 +1,9 @@
{% extends "base_generic.html" %} {% block title %}
{% if form.instance.pk %}Edit{% else %}Create{% endif %} Prefix{% endblock %}
{% block content %}
{% load crispy_forms_tags %} {% block content %}
<h1>{% if form.instance.pk %}Edit{% else %}Create{% endif %} Prefix</h1>
<form method="post">
{% csrf_token %} {{ form.as_p }}
{% csrf_token %} {{ form | crispy }}
<input class="btn btn-primary" type="submit" value="Save" />
</form>
<a class="btn btn-link" href="{% url 'prefix_list' %}">Back to list</a>

View file

@ -1,10 +1,14 @@
{% extends "base_generic.html" %} {% block title %}
{% if form.instance.pk %}Edit{% else %}Create{% endif %} Suffix{% endblock %}
{% block content %}
{% if form.instance.pk %}Edit{% else %}Request{% endif %} Suffix{% endblock %}
{% load crispy_forms_tags %}{% block content %}
<div class="container mt-5">
<h1>{% if form.instance.pk %}Edit{% else %}Create{% endif %} Suffix</h1>
<form method="post">
{% csrf_token %} {{ form.as_p }}
{% csrf_token %} {{ form | crispy }}
<p class="text-muted">Please make sure to include a full description of
your intended use of the suffix in the "Description" field. Your request
may be rejected if this information is not provided, or if the selected
prefix is not appropriate for your intended use.</p>
<button type="submit" class="btn btn-primary">Save</button>
</form>
<a class="btn btn-link mt-3" href="{% url 'suffix_list' %}">Back to list</a>

View file

@ -32,6 +32,8 @@ INSTALLED_APPS = [
"django_otp",
"django_otp.plugins.otp_totp",
"two_factor",
"crispy_forms",
"crispy_bootstrap5",
]
MIDDLEWARE = [
@ -144,3 +146,7 @@ STATIC_URL = "static/"
# https://docs.djangoproject.com/en/5.0/ref/settings/#default-auto-field
DEFAULT_AUTO_FIELD = "django.db.models.BigAutoField"
# Crispy Forms
CRISPY_TEMPLATE_PACK = "bootstrap5"