I would like to customize the Django login authentication form. The original form looks like this and it works perfectly:
{% extends "blog/base.html" %}
{% load crispy_forms_tags %}
{% block content %}
<div class="content-section">
<form method="POST">
{% csrf_token %}
<fieldset class="form-group">
<legend class="border-bottom mb-4 ">Log In</legend>
{{ form|crispy }}
</fieldset>
<div class="form-group">
<button class="btn btn-outline-info" type="submit">Login</button>
</div>
</form>
<div class="border-top pt-3">
<small class="text-muted">
Need An Account? <a class="ml-2" href="{% url 'register' %}">Sign Up Now</a>
</small>
</div>
</div>
{% endblock content %}
My goal is to modify the form style so that I can place the objects wherever I want. I was able to achieve this for the username and password fields, however I cannot display the error message just like in the original format.
This is what I tried:
{% extends "blog/base.html" %}
{% load crispy_forms_tags %}
{% block content %}
<div class="content-section">
<form method="POST">
{% csrf_token %}
<fieldset class="form-group">
<legend class="border-bottom mb-4 ">Log In</legend>
{% if formset.non_form_errors %}
<div class="alert alert-block alert-danger">
{% if formset_error_title %}<h4 class="alert-heading">{{ formset_error_title }}</h4>{% endif %}
<ul class="m-0">
{{ formset.non_form_errors|unordered_list }}
</ul>
</div>
{% endif %}
<div class="row">
<div class="col-md-4 col-sm-12 register-field">
{{ form.username|as_crispy_field }}
</div>
<div class="col-sm-12 register-field">
{{ form.password|as_crispy_field }}
</div>
</div>
</fieldset>
<div class="form-group">
<button class="btn btn-outline-info" type="submit">Login</button>
</div>
</form>
<div class="border-top pt-3">
<small class="text-muted">
Need An Account? <a class="ml-2" href="{% url 'register' %}">Sign Up Now</a>
</small>
</div>
</div>
{% endblock content %}
Basically I saw that crispy uses a object called formset.non_form_errorshowever it looks like it is not working when I insert an invalid username/password.
Would you be able to suggest a smart and elegant way to achieve my goal please? This is what it should look like:
I was able to achieve my goal with this trick:
{% extends "blog/base.html" %}
{% load crispy_forms_tags %}
{% block content %}
<div class="content-section">
<form method="POST">
{% csrf_token %}
<fieldset class="form-group">
<legend class="border-bottom mb-4 ">Log In</legend>
<div class="row">
<!-- Added this new rows -->
{% if form.errors %}
<div class="col-12 register-field">
<div class="alert alert-block alert-danger">
<ul>
<li>Please enter a correct username and password. Note that both fields may be
case-sensitive.
</li>
</ul>
</div>
</div>
{% endif %}
<!-- ------------------- -->
<div class="col-md-4 col-sm-12 register-field">
{{ form.username|as_crispy_field }}
</div>
<div class="col-sm-12 register-field">
{{ form.password|as_crispy_field }}
</div>
</div>
</fieldset>
<div class="form-group">
<button class="btn btn-outline-info" type="submit">Login</button>
</div>
</form>
<div class="border-top pt-3">
<small class="text-muted">
Need An Account? <a class="ml-2" href="{% url 'register' %}">Sign Up Now</a>
</small>
</div>
</div>
{% endblock content %}
Basically I check if there are any errors and then I create a div with the custom error message.
Related
I have a template page where it's suppose to load a form from the formset if a database query returns FALSE.
<form method="post" class="form">
{% csrf_token %}
{% for form in formset %}
{% if comparelist.item2 %}
<div class="col-3">{{comparelist.item2.name}}</div>
<div class="col-3">{{comparelist.item2.price}}</div>
<div class="col-3">{{comparelist.item2.store}}</div>
{% else %}
<div>
{{form.form-0}}
</div>
{% endif %}
{% if comparelist.item3 %}
<div class="row">
<div class="col-3">{{comparelist.item3.name}}</div>
<div class="col-3">{{comparelist.item3.price}}</div>
<div class="col-3">{{comparelist.item3.store}}</div>
</div>
{% else %}
<div>
{{form.form-1}}
</div>
{% endif %}
{% if comparelist.item4 %}
<div class="row">
<div class="col-3">{{comparelist.item4.name}}</div>
<div class="col-3">{{comparelist.item4.price}}</div>
<div class="col-3">{{comparelist.item4.store}}</div>
</div>
{% else %}
<div>
{{form.form-2}}
</div>
{%endfor%}
<button type="submit" class="btn btn-primary">Submit</button>
</form>
But obviously {{form.form-x}} doesn't work.
So how do I insert these forms in manually?
I'm still not entirely sure what the {{form.form-2}} syntax is supposed to do. But I think what you want is to simply refer to the forms directly via their position, just like you do with the comparelist items. So remove the for loop and do that:
<form method="post" class="form">
{% csrf_token %}
{{ formset.management_form }}
{% if comparelist.item2 %}
<div class="col-3">{{comparelist.item2.name}}</div>
<div class="col-3">{{comparelist.item2.price}}</div>
<div class="col-3">{{comparelist.item2.store}}</div>
{% else %}
<div>
{{formset.forms.0}}
</div>
{% endif %}
{% if comparelist.item3 %}
<div class="row">
<div class="col-3">{{comparelist.item3.name}}</div>
<div class="col-3">{{comparelist.item3.price}}</div>
<div class="col-3">{{comparelist.item3.store}}</div>
</div>
{% else %}
<div>
{{formset.forms.1}}
</div>
{% endif %}
{% if comparelist.item4 %}
<div class="row">
<div class="col-3">{{comparelist.item4.name}}</div>
<div class="col-3">{{comparelist.item4.price}}</div>
<div class="col-3">{{comparelist.item4.store}}</div>
</div>
{% else %}
<div>
{{formset.forms.2}}
</div>
{% endfor %}
<button type="submit" class="btn btn-primary">Submit</button>
</form>
I'm using Django 2.x
I'm using Formset to be able to add multiple records at one.
the form is rendered in template file as
{{ chapter_questions.as_table }}
Which renders template like below which looks ugly.
I'm using Bootstrap template to design my template to look like
To render template like second image, I'm writing the fields manually as
<div class="form-group">
<div class="col-sm-12 col-xs-12">
<label for="question">Word</label>
<input name="chapterquestion_set-0-word" type="text" class="form-control border-color-2" placeholder="Word" id="question">
{% if chapterquestion_set.word.errors %}
<div class="row">
<div class="col-sm-12">
<div class="alert alert-danger">
<ul>
{% for error in chapter_questions.word.errors %}
<li>{{ error }}</li>
{% endfor %}
</ul>
</div>
</div>
</div>
{% endif %}
</div>
<div class="col-sm-12 col-xs-12">
<label for="definition">Definition</label>
<input name="chapterquestion_set-0-definition" type="text" class="form-control border-color-3" placeholder="Definition" id="definition">
{% if chapter_questions.definition.errors %}
<div class="row">
<div class="col-sm-12">
<div class="alert alert-danger">
<ul>
{% for error in chapter_questions.definition.errors %}
<li>{{ error }}</li>
{% endfor %}
</ul>
</div>
</div>
</div>
{% endif %}
</div>
<div class="col-sm-12 col-xs-12">
<label for="audio"></label>
<input name="chapterquestion_set-0-audio" type="text" class="form-control border-color-4" placeholder="Audio" id="audio">
{% if chapter_questions.audio.errors %}
<div class="row">
<div class="col-sm-12">
<div class="alert alert-danger">
<ul>
{% for error in chapter_questions.audio.errors %}
<li>{{ error }}</li>
{% endfor %}
</ul>
</div>
</div>
</div>
{% endif %}
</div>
</div>
This way I have to write the code multiple times for multiple objects. Also for adding a new object fields, I need to replicate whole code using JavaScript by replacing index number (0 in this case) by updating by 1.
How can I style the form widget so that I could take benefit of Django automatic field insertions and error display and only need {{ chapter_questions.as_bootstrap_div }} to render bootstrap form.
templates/fields/text-field.html
<div class="col-sm-12 col-xs-12">
{{field.label_tag}}
<input name="{{field.name}}" type="text" class="form-control border-color-2" placeholder="{{field.label}}" id="{{field.name}}">
{% if field.errors %}
<div class="row">
<div class="col-sm-12">
<div class="alert alert-danger">
<ul>
{% for error in field.errors %}
<li>{{ error }}</li>
{% endfor %}
</ul>
</div>
</div>
</div>
{% endif %}
</div>
on your form
{% with chapterquestion_set.word as field %}
{% include 'fields/text-field.html' %}
{% endwith %}
I am facing a problem building a django project:
the pull-right class in bootstrap 3 didn't work in django template pull-right
here is my code
{% block content %}
<div class="row">
<div class="col-sm-4 pull-right">
<h1>{{ title }}</h1>
<form method="POST" action="">
{% csrf_token %}
{{ form|crispy }}
<input class="btn btn-primary" type="submit" value="Sign Up!">
</form>
</div>
</div>
{% endblock content %}
Put a div inside your column and apply the pull-right class on that one.
<div class="col-sm-4">
<div class="pull-right">
<!-- content here -->
</div>
</div>
Why are you using columns if you want to pull it right?
I have the following django form using crispy-forms:
<div class="panel panel-default">
<div class="panel-heading">
<h2 class="panel-title">TEAM SELECTION</h2>
</div>
<div class="panel-body">
<form action="" method="post">
{% csrf_token %}
<div>{{ form.non_field_errors }}</div>
<div class="col-xs-12 col-sm-5 col-md-5 col-lg-5">{{ form.team1|as_crispy_field }}</div>
<div class="col-xs-12 col-sm-5 col-md-5 col-lg-5">{{ form.team2|as_crispy_field }}</div>
<div class="col-xs-12 col-sm-2 col-md-2 col-lg-2"><button type="submit" class="btn btn-primary btn-block"; margin-bottom: 2cm;>Submit</button></div>
</form>
</div>
</div>
Everything looks amazing except the {{ form.non_field_errors }} part. It just looks like a bullet list as follows:
You picked the same team!
Does anyone know how I can have make the {{ form.non_field_errors }} look as exciting as the rest of the form?
Try the as_crispy_errors filter:
{% load crispy_forms_tags %}
{{ form|as_crispy_errors }}
{% extends "account/base.html" %}
{% load url from future %}
{% load i18n %}
{% block head_title %}{% trans "Signup" %}{% endblock %}
{% block content %}
</style>
<h1><b>Free Membership</b>Sign up Today</h1>
<h1>{% trans "Sign Up" %}</h1>
<p>{% blocktrans %}Already have an account? Then please sign in.{% endblocktrans %}</p>
<form class="signup" id="signup_form" method="post" action="{% url 'account_signup' %}">
{% csrf_token %}
{{ form.as_p }}
{% if redirect_field_value %}
<input type="hidden" name="{{ redirect_field_name }}" value="{{ redirect_field_value }}" />
{% endif %}
<button type="submit">{% trans "Sign Up" %} ยป</button>
</form>
<h1><b>Free Membership</b>Sign up Today</h1>
{% endblock %}
{% block content2 %}
{% endblock %}
This is the original Code from Django All Auth.
What I want to do is bring it more to life like add some better HTML5 or CSS to it when I do it does not change?
Here's my login.html template (I'm using Bootstrap, Jquery and Font-Awesome for the icons).
{% extends "account/base.html" %} {% load i18n custom_tags account %} {% block head_title %}{% trans "Sign In" %}{% endblock %} {% block common_scripts %}
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type="text/javascript">
// Load jquery straight from the cdn for this page.
$(function() {
// We need some mappings for Providers names from AllAuth to the icon class names.
$('.btn-google').addClass('btn-google-plus');
$('.btn-linkedin_oauth2').addClass('btn-linkedin');
$('.fa-linkedin_oauth2').addClass('fa-linkedin');
$('#id_login').addClass('form-control').removeAttr('autofocus').blur();
$('#id_password').addClass('form-control');
});
</script>
{% endblock %} {% block content %}
<div class="container col-md-12">
<div class="well login-well">
<div class="socialaccount_ballot">
<ul class="socialaccount_providers">
{% load socialaccount %} {% for provider in socialaccount.providers %} {% if provider.id == "openid" %} {% for brand in provider.get_brands %}
<li>
<a title="{{ brand.name }}" class="btn btn-block btn-social btn-md btn-{{ provider.id }} socialaccount_provider {{ brand.id }}" href="{% provider_login_url provider.id openid=brand.openid_url process=" login " %}">
<i class="fa fa-{{ provider.id }}"></i>Log in with {{ brand.name }}
</a>
</li>
{% endfor %} {% endif %}
<li>
<a title="{{ provider.name }}" class="btn btn-block btn-social btn-md socialaccount_provider btn-{{ provider.id }}" href="{% provider_login_url provider.id process=" login " %}">
<i class="fa fa-{{ provider.id }}"></i>Log in with {{ provider.name }}
</a>
</li>
{% endfor %}
</ul>
<hr>
<form class="django-login" method="POST" action="{% url 'login' %}">
{% csrf_token %} {% if form.non_field_errors %}
<div class="alert alert-warning">
<ul class="alert-message">
{% for error in form.non_field_errors %}
<li>{{ error }}</li>
{% endfor %}
</ul>
</div>
{% endif %}
<div class="input-group {% if form.login.errors %}has-error{% endif %}">
<span class="input-group-addon glyphicon glyphicon-envelope"></span>
{{ form.login }}
</div>
<div class="input-group {% if form.password.errors %}has-error{% endif %}">
<span class="input-group-addon glyphicon glyphicon-lock"></span>
{{ form.password }}
</div>
<div class="fieldWrapper form-inline remember text-center">
{{ form.remember }}
<label for="id_remember" class="text-muted">Remember me</label>
</div>
{% if redirect_field_value %}
<input type="hidden" name="{{ redirect_field_name }}" value="{{ redirect_field_value }}" />{% endif %}
<div class="btn-div pull-center">
<button class="btn btn-primary btn-block" type="submit">{% trans "Sign In" %}</button>
</div>
</form>
</div>
<hr>
<div>
<small><a class="text-muted" href="{% url 'account_reset_password' %}">{% trans "Forgot Password?" %}</a></small>
<br>
<small><a class="text-muted" href="{% url 'signup' %}">Sign up</a></small>
</div>
</div>
</div>
{% endblock %}
And how it looks:
You can put custom templates for allauth in your template directory under account folder. Django allauth would take the custom template from it and renders it.
Following is sample signup page I have created some days ago:
{% extends "base.html" %}
{% load staticfiles %}
{% load socialaccount %}
{% block extra_body %}account-bg{% endblock %}
{% block partial %}
<div class="container">
<div class="row">
<div class="account-form-container">
<div class="row">
<div class="col-md-12">
<h3>Create New Account</h3>
</div>
</div>
<div class="row">
<form class="form-horizontal signup-form" id="userSignupForm" action="{% url "account_signup" %}" method="post" role="form">
{% csrf_token %}
{% if request.GET.next %}
<input type="hidden" name="next" value="{{request.GET.next}}">
{% endif %}
{% if form.non_field_errors %}
<div class="fieldWrapper alert alert-danger">
<ul>
{% for error in form.non_field_errors %}
<li>{{ error | lower}}</li>
{% endfor %}
</ul>
</div>
{% endif %}
<div class="col-lg-12">
<div class="form-group inner-addon left-addon {% if form.email.errors %}has-error{% endif %}">
<i class="icon-user"></i>
<input class="form-control login-field" type="text" id="id_email" name="email" placeholder="Email">
<span class="help-block">{{ form.email.errors }}</span>
</div>
<div class="form-group inner-addon left-addon {% if form.password1.errors %}has-error{% endif %}">
<i class="icon-lock"></i>
<input class="form-control login-field" type="password" id="id_password1" name="password1" placeholder="Password">
<span class="help-block">{{ form.password1.errors }}</span>
</div>
<div class="form-group inner-addon left-addon {% if form.password1.errors %}has-error{% endif %}">
<i class="icon-lock"></i>
<input class="form-control login-field" type="password" id="id_password2" name="password2" placeholder="Confirm Password">
<span class="help-block">{{ form.password1.errors }}</span>
</div>
<div class="form-group">
<div class="col-md-5">
<button type="submit" class="btn btn-complete btn-bold pull-right">Sign Up</button>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
{% endblock %}
I hope this would help you.