Skip to content

Commit

Permalink
Made ui changes to forms
Browse files Browse the repository at this point in the history
  • Loading branch information
@anirudhprabhakaran3
anirudhprabhakaran3 committed Nov 21, 2023
1 parent 29d219c commit a8d0a71
Show file tree
Hide file tree
Showing 4 changed files with 176 additions and 34 deletions.
3 changes: 2 additions & 1 deletion corpus/accounts/forms.py
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,8 +8,9 @@


class CorpusCreationForm(UserCreationForm):
phone_no = forms.CharField(required=True)
phone_no = forms.CharField(required=True, max_length=10)
gender = forms.ChoiceField(choices=GENDERS, required=True)
first_name = forms.CharField(max_length=30, required=True, help_text="Required.")

error_css_class = "text-sm text-error"

Expand Down
57 changes: 41 additions & 16 deletions corpus/templates/accounts/login.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,32 +5,57 @@
{% endblock %}

{% block content %}
<div class="card w-1/2 mx-auto my-10 bg-base-100 glass shadow-xl prose">
<div class="card w-3/4 md:w-2/5 mx-auto my-10 bg-neutral shadow-xl">
<div class="card-body">
<h2 class="card-title">Login</h2>
<h1 class="card-title text-2xl">Login</h1>

<form method="post">
<form method="post" action="{% url 'accounts_signin' %}" class="py-5">
{% csrf_token %}

{% if form.non_field_errors %}
{{ form.non_field_errors }}
{% for error in form.non_field_errors %}
<div role="alert" class="alert alert-error mt-1">
<span>{{ error }}</span>
</div>
{% endfor %}
{% endif %}

<div class="grid grid-cols-1 gap-6">
{% for field in form %}
<label class="block">
<span class="text-base-700">{{ field.label_tag }}</span>
{{ field }}
<p class="text-sm text-error">{{ form.errors.field.errors }}</p>
</label>
{% endfor %}
<div class="w-full my-2">
<label for="{{ form.email.id_for_label }}">Email</label>
{{ form.username }}
{% if form.username.errors %}
<div class="my-1">
<div role="alert" class="alert alert-error">
{{ form.username.errors }}
</div>
</div>
{% endif %}
</div>

<div class="w-full my-2">
<label for="{{ form.password.id_for_label }}">Password</label>
{{ form.password }}
{% if form.password.errors %}
<div class="my-1">
<div role="alert" class="alert alert-error">
{{ form.password.errors }}
</div>
</div>
{% endif %}
</div>

<div class="card-actions justify-end mt-5">
<button class="btn btn-primary">Login</button>
</div>
<button class="btn btn-primary">Login</button>
</div>
</form>
<p class="text-center">If you don't have an account, <a href="{% url 'accounts_signup' %}">register here</a>.</p>

<div class="flex flex-col w-full">
<div class="divider divider-primary">OR</div>
</div>

<div class="flex flex-col w-full">
<p>If you don't have an account, <a href="{% url 'accounts_signup' %}" class="underline underline-offset-2">create one here</a>.</p>
</div>
</div>
</div>
</div>
{% endblock %}
114 changes: 100 additions & 14 deletions corpus/templates/accounts/signup.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,28 +5,114 @@
{% endblock %}

{% block content %}
<div class="card w-1/2 mx-auto my-10 bg-base-100 glass shadow-xl prose">
<div class="card w-3/4 md:w-1/2 mx-auto my-10 bg-neutral shadow-xl">
<div class="card-body">
<h2 class="card-title">Sign up</h2>
<h1 class="card-title text-2xl">Sign Up</h1>

<form method="post">
<form method="post" action="{% url 'accounts_signup' %}" class="py-5">
{% csrf_token %}

<div class="grid grid-cols-1 gap-6">
{% for field in form %}
<label class="block">
<span class="text-base-700">{{ field.label_tag }}</span>
{{ field }}
<p class="text-sm text-error">{{ field.errors.as_text }}</p>
</label>
{% if form.non_field_errors %}
{% for error in form.non_field_errors %}
<div role="alert" class="alert alert-error mt-1">
<span>{{ error }}</span>
</div>
{% endfor %}
{% endif %}

<div class="flex flex-col md:flex-row">
<div class="w-full my-2 md:w-1/2 md:mr-2">
<label for="{{ form.first_name.id_for_label }}">First Name</label>
{{ form.first_name }}
{% if form.first_name.errors %}
<div class="my-1">
<div role="alert" class="alert alert-error">
{{ form.first_name.errors }}
</div>
</div>
{% endif %}
</div>

<div class="w-full my-2 md:w-1/2 md:ml-2">
<label for="{{ form.last_name.id_for_label }}">Last Name</label>
{{ form.last_name }}
{% if form.last_name.errors %}
<div class="my-1">
<div role="alert" class="alert alert-error">
{{ form.last_name.errors }}
</div>
</div>
{% endif %}
</div>
</div>

<div class="flex flex-col md:flex-row">
<div class="w-full my-2 md:w-1/2 md:mr-2">
<label for="{{ form.phone_no.id_for_label }}">Phone Number</label>
{{ form.phone_no }}
{% if form.phone_no.errors %}
<div class="my-1">
<div role="alert" class="alert alert-error">
{{ form.phone_no.errors }}
</div>
</div>
{% endif %}
</div>

<div class="w-full my-2 md:w-1/2 md:ml-2">
<label for="{{ form.gender.id_for_label }}">Gender</label>
{{ form.gender }}
{% if form.gender.errors %}
<div class="my-1">
<div role="alert" class="alert alert-error">
{{ form.gender.errors }}
</div>
</div>
{% endif %}
</div>
</div>

<div class="w-full my-2">
<label for="{{ form.email.id_for_label }}">Email</label>
{{ form.email }}
{% if form.email.errors %}
<div class="my-1">
<div role="alert" class="alert alert-error">
{{ form.email.errors }}
</div>
</div>
{% endif %}
</div>

<div class="flex flex-col md:flex-row">
<div class="w-full my-2 md:w-1/2 md:mr-2">
<label for="{{ form.password1.id_for_label }}">Password</label>
{{ form.password1 }}
{% if form.password1.errors %}
<div class="my-1">
<div role="alert" class="alert alert-error">
{{ form.password1.errors }}
</div>
</div>
{% endif %}
</div>

<div class="w-full my-2 md:w-1/2 md:ml-2">
<label for="{{ form.password2.id_for_label }}">Password Confirmation</label>
{{ form.password2 }}
{% if form.password2.errors %}
<div class="my-1">
<div role="alert" class="alert alert-error">
{{ form.password2.errors }}
</div>
</div>
{% endif %}
</div>
</div>
<div class="card-actions justify-end mt-5">
<button class="btn btn-primary">Sign up</button>
</div>
<button class="btn btn-primary">Sign up</button>
</div>
</form>
<p class="text-center">If you already have an account, <a href="{% url 'accounts_signin' %}">login</a> instead.</p>
</div>
</div>
</div>
{% endblock %}
36 changes: 33 additions & 3 deletions corpus/templates/base.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -60,9 +60,12 @@

{% if messages %}
{% for message in messages %}
<div class="alert alert-{{ message.tags }} w-3/4 mx-auto my-5">
{{ message }}
</div>
<div class="toast toast-start message-fade-away">
<div class="alert alert-{{ message.tags }}">
<span>{{ message }}</span>
<span>{{ message.id }}</span>
</div>
</div>
{% endfor %}
{% endif %}

Expand All @@ -85,6 +88,33 @@

{% block script %}
{% endblock %}

<script>
document.addEventListener("DOMContentLoaded", function () {
const fadeDivs = document.querySelectorAll(".message-fade-away");
fadeDivs.forEach(function (fadeDiv) {
setTimeout(function () {
fadeOut(fadeDiv);
}, 5000);
});
});

function fadeOut(element) {
let opacity = 1;
const intervalDuration = 50;
const intervalStep = 0.05;

let fadeInterval = setInterval(function () {
if (opacity > 0) {
opacity -= intervalStep;
element.style.opacity = opacity;
} else {
clearInterval(fadeInterval);
element.parentNode.removeChild(element);
}
}, intervalDuration);
}
</script>
</body>

</html>

0 comments on commit a8d0a71

Please sign in to comment.