Unable to add Forgot Password link in Django Admin suit? - django

In my admin site, I have installed a Django suit and here I am trying to add forgot password link but can't add it Before installing the Django suit I added forgot password link and it was working perfectly but after installing suit it's not working. do you have any idea ??
login.html:
{% extends "admin/base_site.html" %}
{% load i18n static %}
{% block content %}
<form action="{{ app_path }}" method="post" id="login-form">{% csrf_token %}
<div class="form-row">
{{ form.username.errors }}
{{ form.username.label_tag }} {{ form.username }}
</div>
<div class="form-row">
{{ form.password.errors }}
{{ form.password.label_tag }} {{ form.password }}
<input type="hidden" name="next" value="{{ next }}">
</div>
{% url 'admin_password_reset' as password_reset_url %}
{% if password_reset_url %}
<div class="password-reset-link">
{% trans 'Forgotten your password or username?' %}
</div>
{% endif %}
Forgot password?
<div class="submit-row">
<label> </label><input type="submit" value="{% trans 'Log in' %}">
</div>
</form>
</div>
{% endblock %}

Related

Django templates Could not parse the remainder

I have this template, I am looping through all choices in a question, and I want to default check the question user previously selected. selected_choice variable is coming from my view and I got have it ok in my template.
{% extends 'base.html' %}
{% block content %}
<div id="detail" class="">
<form hx-post="{% url 'main:vote' question.id %}" hx-trigger="submit" hx-target="#detail" hx-swap="outerHTML">
{% csrf_token %}
<fieldset>
<legend><h1>{{ question.question_text }}</h1></legend>
{% if error_message %}<p>
<strong>{{ error_message }}</strong>
</p>
{% endif %}
{% for choice in question.choices.all %}
<input type="radio" name="choice" id="choice{{ forloop.counter }}" value="{{ choice.id }}" {% if selected_choice and choice.id==selected_choice %}checked{% endif %}>
<label for="choice{{ forloop.counter }}">{{ choice.choice_text }}</label><br>
{% endfor %}
</fieldset>
<button type="submit">Submit</button>
</form>
</div>
{% endblock content %}
I get this error
Could not parse the remainder: '==selected_choice' from 'choice.id==selected_choice'

Change signup field error message and field color

we are currently implementing a membership page. I hope the color of the field will be red if there is an error, but I don't know what to do. What should I add to my code so that it's possible?
<form method="post" class="post-form">
{% csrf_token %}
{% for field in form %}
<div class="form-group">
<input name="{{field.html_name }}" id="{{ field.id_for_lable }}" class="form-control" type="{{ field.field.widget.input_type }}" value="{{ field.value|default_if_none:'' }}"
placeholder="{{field.label}}">
{% for error in field.errors %}
<label class="control-label" for="{{ field.id_for_lable }}" style="color: #c13b2a;"><b>{{ error }}</b></label>
{% endfor %}
</div>
{% endfor %}
</div>
<div class="bbb" style="text-align: center">
<button type="submit">가입하기</button><br>
</div>
You can add stye if condition
<input ... {% if field.errors %} style={"color":"red"} {% endif %}>
or add a class if condition
<input ... class =".. {% if field.errors %} text-red {% endif %}">

Django Allauth Customized Login Template Not Working

I have customized the login template of allauth with bootstrap styles and widget_tweaks. When I try logging in with that template, It doesn't redirect me to the home page but remains in the same login.html template. However, when I log in with the original template from allauth in /account/login.html/ everything works well and it redirects me to my homepage. There is something that I'm not customizing right in my custom login.html template.
Below is django-allauth login.html and my custom login.html
django-allauth login.html
{% extends "account/base.html" %}
{% load i18n %}
{% load account socialaccount %}
{% block head_title %}{% trans "Sign In" %}{% endblock %}
{% block content %}
<h1>{% trans "Sign In" %}</h1>
{% get_providers as socialaccount_providers %}
{% if socialaccount_providers %}
<p>{% 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 class="socialaccount_ballot">
<ul class="socialaccount_providers">
{% include "socialaccount/snippets/provider_list.html" with process="login" %}
</ul>
<div class="login-or">{% 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 %}
<form class="login" method="POST" action="{% url 'account_login' %}">
{% csrf_token %}
{{ form.as_p }}
{% 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" type="submit">{% trans "Sign In" %}</button>
</form>
{% endblock %}
my custom login.html
{% comment %}
{% extends "layouts/base-fullscreen.html" %}
{% load i18n %}
{% block title %} Login {% endblock %}
{% load widget_tweaks %}
{% block content %}
<div class="auth-wrapper">
<div class="auth-content">
<div class="auth-bg">
<span class="r"></span>
<span class="r s"></span>
<span class="r s"></span>
<span class="r"></span>
</div>
<div class="card">
<div class="card-body text-center">
<div class="mb-4">
<i class="feather icon-unlock auth-icon"></i>
</div>
<h3 class="mb-4">Login</h3>
<span class="mb-0 text-muted">
{% if msg %}
{{ msg | safe }}
{% else %}
Add your credentials
{% endif %}
</span>
<br />
<br />
<form method="post" action="{% url 'account_login' %}">
{% csrf_token %}
<div class="md-form mb-2">
{% render_field form.login class="form-control" placeholder=form.login.label %}
</div>
<span class="text-error">{{ form.login.errors }}</span>
<div class="md-form mb-2">
{% render_field form.password class="form-control" placeholder=form.password.label %}
</div>
<span class="text-error">{{ form.password.errors }}</span>
<p class="mb-0 text-muted"><a class="button secondaryAction" href="{% url 'account_reset_password' %}">Forgot password?</a>
</p>
<div class="form-group text-left">
<div class="checkbox checkbox-fill d-inline">
<!-- <input type="checkbox" name="checkbox-fill-1" id="checkbox-fill-a1" checked=""> -->
{% render_field form.remember class="form-control" placeholder=form.remember.label type="checkbox"%}
<label for="id_remember" class="cr"> Remember me</label>
</div>
</div>
{% if redirect_field_value %}
<input type="hidden" name="{{ redirect_field_name }}" value="{{ redirect_field_value }}" />
{% endif %}
<button type="submit" name="login" class="btn btn-primary shadow-2 mb-4">Login</button>
</form>
<p class="mb-0 text-muted">Don’t have an account? <a href="{% url 'account_signup' %}" >Signup</a></p>
<br />
</div>
</div>
</div>
</div>
{% endblock content %}
allauth settings in settings.py
LOGIN_REDIRECT_URL = '/'
EMAIL_BACKEND = 'django.core.mail.backends.console.EmailBackend'
SITE_ID = 1
ACCOUNT_LOGOUT_REDIRECT_URL = '/' #couterpart to Django's LOGIN_REDIRECT_URL
ACCOUNT_LOGOUT_REDIRECT = '/'
ACCOUNT_USERNAME_REQUIRED = False
ACCOUNT_AUTHENTICATION_METHOD = 'email'
ACCOUNT_EMAIL_REQUIRED = True
ACCOUNT_UNIQUE_EMAIL = True
ACCOUNT_EMAIL_VERIFICATION = 'optional'
The other change I've made is to customize the allauth signup form to take extra two fields (first_name and last_name). That one works fine and redirects to the login url
you might be getting an error from the form validator. keep the original form on the page to check if its giving any errors. copy the {{ form.as_p }} from the original page 'accounts/login.html' and paste it in your custom template. if there are any errors, it'll display it.
this right here is your problem
{% extends "account/base.html" %}
If you have all the boostrap, jquery and widget_tweaks in your local base.html, then thats what you need to extend. The default accounts/base.html provided by django-allauth, does not come customized with bootstrap.
Use:
{% extends "base.html" %} instead

django: extending allauth.account

allauth.account comes with a signup.html
{% extends "account/base.html" %}
{% load i18n %}
{% block head_title %}{% trans "Signup" %}{% endblock %}
{% block content %}
<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>
{% endblock %}
i would like to override it instead of using the form
what do i need to post to the url account_signup?
thank you
The 'account_signup' url is aimed to receive the POST request passing
at least the form fields marked as required in order to create an account.
But keep in mind that the name of the fields may vary based on the allauth settings.
I ended up doing the same thing, ealeon. Here is what I went with and it works well. Pardon the bootstrap classes, but you get the gist.
<form class="login" method="POST" action="{% url 'account_login' %}">
{% csrf_token %}
{{ form.non_field_errors }}
<div class="fieldWrapper">
{{ form.login.errors }}
{{ form.login }}
</div>
<div class="fieldWrapper">
{{ form.password.errors }}
{{ form.password }}
</div>
<div class="login-options pull-left">
{{ form.remember.errors }}
<label for="{{ form.remember.id_for_label }}">Stay signed in?</label>
{{ form.remember }}
</div>
<div class="login-options pull-right">
<a class="button secondaryAction"
href="{% url 'account_reset_password' %}">
{% trans "Forgot Password?" %}
</a>
</div>
<button class="btn btn-block btn-primary" type="submit">{% trans "Sign In" %}</button>
{% if redirect_field_value %}
<input type="hidden" name="{{ redirect_field_name }}" value="{{ redirect_field_value }}" />
{% endif %}
</form>

Django AllAuth How do you Customize your own HTML or CSS

{% 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.