I created a login form using Django-widget-tweaks, but I cannot enter any text in the email address field.
What is the solution?
Please help.
html
{% extends 'app/base.html' %}
{% load widget_tweaks %}
{% block content %}
<div class="card card-auto my-5 mx-auto">
<div class="card-body">
<h5 class="card-title tex-center">ログイン</h5>
<form method="post" class="form-auth">
{% csrf_token %}
<div class="form-label-group">
{% render_field form.login class='form-control' placeholder='Email' %}
</div>
<div class="form-label-group">
{% render_field form.password class='form-control' placeholder='Password' %}
</div>
<div class="buttton mx-auto">
<button class="btn btn-lg btn-primary btn-block mx-auto" type="submit">Login</button>
</div>
</form>
</div>
</div>
{% endblock %}
I can't enter my email address.
Related
Hello I use the allauth package to validate forms. The problem I have in this case is that I want to change the default templates of the allauth package and add my own styles and css classes to them. And I have done this, but my problem is that when the user enters incomplete or incorrect login information, no validation message is displayed to the user. I want to change the default allauth templates, such as login.html, signup.html, etc. and also I want to display my own authentication messages. Please guide step by step I because am learning Django, Thanks.
This is login.html
{% extends "base.html" %}
{% load i18n %}
{% load account socialaccount %}
{% block head_title %}{% trans "Sign In" %}{% endblock %}
{% block content %}
<h1 class="head-line">{% trans "Sign In" %}</h1>
{% get_providers as socialaccount_providers %}
{% if socialaccount_providers %}
<div class="container">
<p class="text-center">{% blocktrans with site.name as site_name %}Please sign in with one
of your existing third party accounts. Or, sign up
for a {{ site_name }} account and sign in below:{% endblocktrans %}
</p>
</div>
<div class="socialaccount_ballot container">
<ul class="socialaccount_providers text-center border">
{% include "socialaccount/snippets/provider_list.html" with process="login" %}
</ul>
<div class="login-or text-center mt">{% trans 'or' %}</div>
</div>
{% include "socialaccount/snippets/login_extra.html" %}
{% else %}
<p>{% blocktrans %}If you have not created an account yet, then please
sign up first.{% endblocktrans %}</p>
{% endif %}
<div class="container">
<form class="login" method="POST" action="{% url 'account_login' %}">
{% csrf_token %}
<div class="form-group">
<label for="id_username">Username: </label>
<input type="text" class="form-control" id="id_username" name="login" placeholder="Username">
</div>
<div class="form-group">
<label for="id_password">Password: </label>
<input type="password" class="form-control" id="id_password" name="password" placeholder="Password">
</div>
{{ form.username }}
{% if redirect_field_value %}
<input type="hidden" name="{{ redirect_field_name }}" value="{{ redirect_field_value }}"/>
{% endif %}
<a class="button secondaryAction"
href="{% url 'account_reset_password' %}">{% trans "Forgot Password?" %}</a>
<button class="primaryAction btn btn-block mt mb" type="submit">{% trans "Sign In" %}</button>
</form>
</div>
{% endblock %}
This is signup.html
{% extends "account/base.html" %}
{% load i18n %}
{% block head_title %}{% trans "Signup" %}{% endblock %}
{% block content %}
<h1 class="head-line">{% trans "Sign Up" %}</h1>
<p class="text-center">{% blocktrans %}Already have an account? Then please sign in.{% endblocktrans %}
</p>
<div class="container">
<form class="signup" id="signup_form" method="post" action="{% url 'account_signup' %}">
{% csrf_token %}
<div class="form-group">
<label for="id_username">Username: </label>
<input type="text" class="form-control" id="id_username" name="login" placeholder="Username">
</div>
<div class="form-group">
<label for="id_email">Email: </label>
<input type="text" class="form-control" id="id_username" name="email" placeholder="Emial">
</div>
<div class="form-group">
<label for="id_password1">Password: </label>
<input type="password" class="form-control" id="id_username" name="password1" placeholder="Password">
</div>
<div class="form-group">
<label for="id_password2">Password Again: </label>
<input type="password" class="form-control" id="id_username" name="password2" placeholder="Password Again">
</div>
{% if redirect_field_value %}
<input type="hidden" name="{{ redirect_field_name }}" value="{{ redirect_field_value }}"/>
{% endif %}
<button type="submit" class="btn btn-block mb">{% trans "Sign Up" %} »</button>
</form>
</div>
{% endblock %}
And this is logout.html
{% extends "account/base.html" %}
{% load i18n %}
{% block head_title %}{% trans "Sign Out" %}{% endblock %}
{% block content %}
<h1 class="head-line">{% trans "Sign Out" %}</h1>
<p class="text-center">{% trans 'Are you sure you want to sign out?' %}</p>
<div class="container">
<form method="post" action="{% url 'account_logout' %}">
{% csrf_token %}
{% if redirect_field_value %}
<input type="hidden" name="{{ redirect_field_name }}" value="{{ redirect_field_value }}"/>
{% endif %}
<button type="submit" class="btn btn-block mb">{% trans 'Sign Out' %}</button>
</form>
</div>
{% endblock %}
Need to make the UI more ordered, can i have indexing for the forms in formset or access the form ID?
<div class="card">
<div class="card-body">
<div id="form-container">
{% csrf_token %}
{{ formset1.management_form }}
{% for form in formset1 %}
<div class="test-form">
{% crispy form %}
</div>
{% endfor %}
<button id="add-form" type="button" class="btn btn-primary">Add Another Request
</button>
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</div>
</div>
Yeah, you can use forloop.counter within your forloop like this, can assign the value to name or id
<div class="card">
<div class="card-body">
<div id="form-container">
{% csrf_token %}
{{ formset1.management_form }}
{% for form in formset1 %}
{% crispy form %}
</div>
{% endfor %}
<button id="add-form" type="button" class="btn btn-primary"> Add Another Request </button>
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</div>
</div>
I am creating a login page using django but it does not show any messages when I enter wrong passwords or email addresses. I've also checked other messages but it didn't help.
login.html
<div class="right">
<h2>Login</h2>
{% if messages %}
{% for message in messages %}
<div class="alert alert-{{ message.tags }}">
{{ message }}
</div>
{% endfor %}
{% endif %}
<form method="POST">
{% csrf_token %}
<fieldset class="form-group">
<div class="field">
<div class="label">Email or Username</div>
<input type="text" name="username" id="username" class="form-control">
</div>
<div class="field">
<div class="label">Password</div>
<input type="password" name="password" id="password" class="form-control">
</div>
<button class="login" type="submit">LOGIN</button>
</fieldset>
</form>
<div class="sign_up">
<small>Don’t have an account yet?</small>
<a class="signup" href="{% url 'register' %}">SIGN UP</a>
</div>
</div>
urls.py has this path for the login page(I have imported all the necessary classes):
path('login/', auth_views.LoginView.as_view(template_name='users/login.html') , name='login'),
But the messages are shown when I use this form|crispy in login.html
<div class="content-section">
<form method="POST">
{% csrf_token %}
<fieldset class="form-group">
<legend class="border-bottom mb-4">Login</legend>
{{ form|crispy }}
</fieldset>
<div class="form-group">
<button class="btn btn-outline-info" type="submit">Sign In</button>
</div>
</form>
<div class="border-top pt-3">
<small class="muted-text">
Want a new Account? <a class="ml-1" href="{% url 'register' %}">Sign Up</a>
</small>
</div>
</div>
Here you used LoginView using form it will return it will show you error because of {{ form|crispy }} template tag render form and fields along with field.errors and field.non_field_error.
That's Why you can get an error message if you remove message block in your code it will show you an error there is no connection with form and message in login view
If you want to render you HTML form with CSS you need to explicitly define errors showing block like this
<div class="right">
<h2>Login</h2>
{% if form.errors %}
{% for field in form %}
{% for error in field.errors %}
<div class="alert alert-danger">
<strong>{{ error|escape }}</strong>
</div>
{% endfor %}
{% endfor %}
{% for error in form.non_field_errors %}
<div class="alert alert-danger">
<strong>{{ error|escape }}</strong>
</div>
{% endfor %}
{% endif %}
<form method="POST">
{% csrf_token %}
<fieldset class="form-group">
<div class="field">
<div class="label">Email or Username</div>
<input type="text" name="username" id="username" class="form-control">
</div>
<div class="field">
<div class="label">Password</div>
<input type="password" name="password" id="password" class="form-control">
</div>
<button class="login" type="submit">LOGIN</button>
</fieldset>
</form>
<div class="sign_up">
<small>Don’t have an account yet?</small>
<a class="signup" href="{% url 'register' %}">SIGN UP</a>
</div>
</div>
Here not meaning to use the message framework of Django. Form it self return error in his errors attribute of a form
Hope you satisfied with this answer
I have created a link to the Password Change Form using:
{% trans 'Change password' %}
And included it in urls.py as:
from django.contrib.auth import views as auth_views
url(r'^password_change', auth_views.password_change, {"template_name": "web/password_change_form.html"}, name='web_password_change'),
My Password Change Form is :
{% extends "base_site.html" %}
{% load i18n static bootstrapped_goodies_tags %}
{% load url from future %}
{% block extrastyle %}{{ block.super }}<link rel="stylesheet" type="text/css" href="{% static "admin/css/forms.css" %}" />{% endblock %}
{% block breadcrumbs %}
<ul class="breadcrumb">
<li>{% trans 'Home' %}</li>
<li>{% trans 'Password change' %}</li>
</ul>
{% endblock %}
{% block title %}{% trans 'Password change' %}{% endblock %}
{% block content_title %}<a class="navbar-brand">{% trans 'Password change' %}</a>{% endblock %}
{% block content %}<div id="content-main">
<form class="form-horizontal" action="" method="post">{% csrf_token %}
{% if form.errors %}
<div class="alert alert-danger">
{% if form.errors.items|length == 1 %}{% trans "Please correct the error below." %}{% else %}{% trans "Please correct the errors below." %}{% endif %}
</div>
{% endif %}
<div class="alert alert-info">{% trans "Please enter your old password, for security's sake, and then enter your new password twice so we can verify you typed it in correctly." %}</div>
<fieldset class="_module _aligned wide">
<div class="form-group">
<div class="control-label col-sm-2">
{{ form.old_password.label_tag }}
</div>
<div class="controls col-sm-10">
{% dab_field_rendering form.old_password %}
{% if form.old_password.errors %}<span class="text-danger">{{ form.old_password.errors|striptags }}</span>{% endif %}
</div>
</div>
<div class="form-group">
<div class="control-label col-sm-2">
{{ form.new_password1.label_tag }}
</div>
<div class="controls col-sm-10">
{% dab_field_rendering form.new_password1 %}
{% if form.new_password1.errors %} <span class="text-danger">{{ form.new_password1.errors|striptags }}</span>{% endif %}
{% if form.new_password1.help_text %}<span class="text-info">{{ form.new_password1.help_text }}</span>{% endif %}
</div>
</div>
<div class="form-group">
<div class="control-label col-sm-2">
{{ form.new_password2.label_tag }}
</div>
<div class="controls col-sm-10">
{% dab_field_rendering form.new_password2 %}
{% if form.new_password2.errors %} <span class="text-danger">{{ form.new_password2.errors|striptags }}</span>{% endif %}
{% if form.new_password2.help_text %}<span class="text-info">{{ form.new_password2.help_text }}</span>{% endif %}
</div>
</div>
</fieldset>
<div class="form-actions">
<div class="controls col-sm-offset-2 col-sm-10">
<input type="submit" value="{% trans 'Change my password' %}" class="default btn btn-primary" />
</div>
</div>
<script type="text/javascript">document.getElementById("id_old_password").focus();</script>
</form></div>
{% endblock %}
The problem is :
It works for all web users, but if I login as admin and then change the password, say if the original password is:'admin'...Now I change it to '1234', it works and I can login again.
But when I again go to change_password and try to change from '1234' to something else, it gives 'Incorrect Old Password'.
On debugging, I found that the POST request received has the old_password field value as 'admin' while I have typed '1234'.
When I tried to add another field on the html page and updated the old_password section as below:
<div class="form-group">
<div class="control-label col-sm-2">
{{ form.old_password.label_tag }}
</div>
<div class="controls col-sm-10">
{% dab_field_rendering form.old_password %}
{{ form.old_password }}
{% if form.old_password.errors %}<span class="text-danger">{{ form.old_password.errors|striptags }}</span>{% endif %}
</div>
</div>
It works perfectly fine and receives the correct request, but I can't ask user to enter the old password two times.
I'm new to django. I'm using django-bootstrap-toolkit for my contact page. It works fine when I test it locally. But I'm getting an error on my hosting server, while all other pages work just fine.
Exception Type: TemplateDoesNotExist
Exception Value: bootstrap_toolkit/form.html
Here is contact_us.html page
bootstrap_toolkit/form.html
{% extends 'base.html' %}
{% load bootstrap_toolkit %}
{% block content %}
<div id="wrap">
<div class="container">
<div class="page-header">
<h1 id="contact">Contact</h1>
</div>
<div class="form well" >
<h4 class="">Feedback</h4>
<p class="">Thank you for downloading BookxGeek. I look forward to hearing your feedback!</p>
<form action="." method="post" class="form" >
{% csrf_token %}
{% bootstrap_form form layout="vertical" %}
<br>
<div class="form-actions">
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</form>
</div>
</div>
<hr class="soft">
</div>
{% endblock %}