I have been trying to implement this logic:
Whenever a user signs up, confirms his email, his account is active. However, in order to let the user gain full access to the website, he must enter some data first about his own self. I call it complete-profile.
I figured making a middleware is a good way to implement the logic. So I wrote the following:
class CompleteProfileMiddleware:
def __init__(self, get_response):
self.get_response = get_response
# One-time configuration and initialization.
def __call__(self, request):
# Code to be executed for each request before
# the view (and later middleware) are called.
response = self.get_response(request)
if request.path == "/account/" + request.user.username + '/complete-registration/':
pass
elif request.user.is_anonymous:
pass
elif request.user.is_superuser:
pass
elif request.user.student.complete_profile:
pass
elif not request.user.student.complete_profile:
return redirect('/account/' + request.user.username + '/complete-registration/')
# Code to be executed for each request/response after
# the view is called.
return response
However, now, for accessing the complete profile page, people need to log in first. And during the log in process, it gives issues with the csrf token as: Forbidden. CSRF verification failed. Request aborted.
If I remove the middleware everything starts working again, so the issue has to be here.
Here's the login template:
<div class="main">
<section class="signup">
<div class="container">
<div class="row">
<div class="signup-content col-sm-12">
<form id="signup-form" class="signup-form" method="post" action="{% url 'login' %}">
{% csrf_token %}
<h2 class="form-title">Log In</h2>
{{ form | crispy}}
<input type="submit" style="margin-top: 10px" value="Login" class="button" id="" />
<input type="hidden" name="next" value="{{ next }}" />
</form>
<div class="col-sm-12" style="text-align: right; margin-top: 5px">
Forgot Password?
</div>
<p class="loginhere">
New Here ? Create an account here
</p>
</div>
</div>
</div>
</section>
</div>
Without middleware everything works fine ?
You should send csrftoken during POST request, it's possible using django template language. You can use {% csrf_token %} template tag.
Related
My application currently flows through 3 pages:
User selects question in index page
User submits answer in answer page
User is presented with result in results page.
I want to compress that down to a single page where the user submits an answer to the question and result is shown on the same page.
The following django-template code separates questions with Bootstrap accordion. How do I post the form without refreshing the whole page? I want to be able to display the result on the page, update CSS styling with Javascript etc.
<h2>{{ category.title }}</h2>
<div class="accordion" id="accordion{{category.title}}">
{% for challenge in category.challenge_set.all %}
<div class="card">
<div class="card-header" id="heading{{challenge.id}}">
<h2 class="mb-0">
<button class="btn btn-link btn-block text-left" type="button" data-toggle="collapse" data-target="#collapse{{challenge.id}}" aria-expanded="true" aria-controls="collapse{{challenge.id}}">
{{ challenge.question_text }} - {{ challenge.point_value }} points
</button>
</h2>
</div>
<div id="collapse{{challenge.id}}" class="collapse in" aria-labelledby="heading{{challenge.id}}" data-parent="#accordion{{category.title}}">
<div class="card-body">
<p>{{ challenge.description }}</p>
<form action="{% url 'challenges:answer' challenge.id %}" method="post">
{% if challenge|is_answered:request %}
<label for="answered">Answer</label>
<input type="text" name="answered" id="answered" value="{{ challenge.answer_text }}" readonly>
{% else %}
{% csrf_token %}
<label for="answer">Answer</label>
<input type="text" name="answer" id="answer">
<input type="submit" value="Submit">
{% endif %}
</form>
</div>
</div>
{% endfor %}
</div>
Here is the view:
def index(request):
context = {'challenges_by_category_list': Category.objects.all()}
return render(request, 'challenges/index.html', context)
def detail(request, challenge_id):
challenge = get_object_or_404(Challenge, pk=challenge_id)
return render(request, 'challenges/detail.html', {'challenge': challenge})
def results(request, challenge_id, result):
challenge = get_object_or_404(Challenge, pk=challenge_id)
return render(request, 'challenges/results.html', {'challenge':challenge, 'result':result})
def answer(request, challenge_id):
challenge = get_object_or_404(Challenge, pk=challenge_id)
result = "Incorrect, try again!"
if challenge.answer_text.lower() == request.POST['answer'].lower():
current_user = request.user
session = User_Challenge(user=current_user, challenge=challenge, answered=True)
session.save()
points = Profile(user=current_user, points=challenge.point_value)
points.save()
result = "Correct!"
return HttpResponseRedirect(reverse('challenges:results', args=(challenge.id, result)))
You can try this:
Add the below script in your template:
<script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
write a script and a function inside it to submit the form data.
<script type="text/javascript">
function submitData( challenge_id ){
// Get answer from the input element
var answer = document.getElementById("answer").value;
// add the url over here where you want to submit form & challenge_id is also taken as a parameter.
var url = "<your_url>";
$.ajax({
url: url,
data: {
'answer': answer,
},
dataType: 'JSON',
success: function(data){
// show an alert message when form is submitted and it gets a response from the view where result is provided and if url is provided then redirect the user to that url.
alert(data.result);
if (data.url){
window.open(data.url, '_self');
}
}
});
}
</script>
Change type of the submit button and add an onclick event to call the submitData() function and pass the challenge id to it. And remove the action attr from the form.
see below:
<form method="post">
{% csrf_token %}
{% if challenge|is_answered:request %}
<label for="answered">Answer</label>
<input type="text" name="answered" id="answered" value="{{ challenge.answer_text }}" readonly>
{% else %}
<label for="answer">Answer</label>
<input type="text" name="answer" id="answer">
// over here
<button type="button" onclick="submitData({{ challenge.id }})">
Submit
</button>
{% endif %}
</form>
Return a JsonReponse to the ajax call from the views.
views.py
def answer(request, challenge_id):
answer = request.GET.get('answer', False)
url = False
if challenge.objects.filter(id=challenge_id).exists() and answer:
challenge = Challenge.objects.get(id=challenge_id)
if challenge.answer_text.lower() == answer.lower():
current_user = request.user
session = User_Challenge(user=current_user, challenge=challenge, answered=True)
session.save()
points = Profile(user=current_user, points=challenge.point_value)
points.save()
result = "Correct!"
# specify the url where you want to redirect the user after correct answer
url = ""
else:
result = "Incorrect, try again!"
data = {
'result': result,
'url': url
}
return JsonResponse(data)
How can I add comments in my Django website without refreshing the page?
Here are my codes:
VIEW.PY
#login_required
def comments(request, post_id):
"""Comment on post."""
post = get_object_or_404(Post, id=post_id)
user = request.user
comments = Comment.objects.filter(post=post).order_by('-date')#comment
if request.method == 'POST':#Comments Form
form = CommentForm(request.POST)
if form.is_valid():
comment = form.save(commit=False)
comment.post = post
comment.user = user
comment.save()
messages.success(request, 'Comment has been added successfully.')
return HttpResponseRedirect(reverse('core:comments',args=[post_id]))
else:
form = CommentForm()
template = loader.get_template('post/comments.html')
context = {'post':post,'form':form,'comments':comments,}
return HttpResponse(template.render(context, request))
COMMENTS.HTMl
Form section:
<div class='commentsection' >
<strong>
<form action="{% url 'core:comments' post.id %}" method='post' id=comment-form >
{% csrf_token %}
{% bootstrap_form form %}
</form>
<br/>
<br/>
</strong>
</div>
Comments section:
{% for comment in comments %}
<div class="card mb-3" style="width: 30rem;">
<div class="row no-gutters">
<small> <a style="color: black;" href="{% url 'core:user_profile' comment.user %}"><img src="{{comment.user.profile.profile_pic.url}}" width=50 height=50 class="profile-image img-circle " style="object-fit: cover; float: auto; "><strong style="font-size: 18px;" > #{{comment.user}} </strong></a> </small> <small><span class="glyphicon glyphicon-time"></span> {{ comment.get_date }}</small>
</div>
<div class="card-body" style="width:100%; padding-left:20%; margin-top:-8%; word-break: break-all; color:black; " >
<h5 class="card-text">
{{ comment.comment }}</h5>
<small > Replies [{{comment.total_replies}}] </small
</div>
</div>
</div>
<br/><br/>
{% empty %}
<center>
No commnets
</center>
{% endfor %}
My problems:
Add comments without refreshing the page.
Auto-add newly added comments in the comment section without refreshing the page.
Thanks in advance!
You've correctly surmised that this an AJAX problem, though you could nowadays use a websocket as well. Traditional django solution would be with an AJAX callback.Short of writing it for you, I can offer a pro-forma solution (outline):
Add a view to your site which returns in JSON (or XML or any other serialisable format) a list of new comments from a given datetime (which you pass to the view as a GET param, or POST param if you prefer).
Add Javascript to you page which periodically polls the server with new comment requests. if it gets any returned then it has to dynamically add those comments to the DOM for you.
Your second request, auto-adding new comments, is contingent on whether you want to use a websocket or not. If you use a websocket then yes, the server can inform your page through that socket when new comments arrive. But if you want to stick with AJAX, then it is contingent on the polling interval (which is one big reason websockets were developed and are useful).
There are endless tutorials and how-tos online about writing the Javascript to fetch data and dynamically update the DOM, as there on how to use websockets.
I tried to make some pages only visible when logged in.
I tried it with:
def backend(request):
if request.user.is_authenticated:
return render(request, 'web/backend-index.html')
else:
return redirect(reverse('web:login'))
and also with:
#login_required
def backend(request):
return render(request, 'web/backend-index.html')
The first code does not let me log in.
The second code does not let me log in but the url changes too:
http://127.0.0.1:8000/login/?next=/backend/
If I just render the view without checking if logged in, the login is working fine and I´ll be passed to the backend page.
The whole code is on github: https://github.com/psmaster1/BrainSystems/tree/master/smarthome/web
I don't get any error messages. It's just redirecting to the login page...
Your login form is incorrect - that's why you never actually authenticate. It was sending POST request to incorrect endpoint and it was not rendering actual form. This is how you can render fields manually
Change it to this:
<section class="login-form">
<div class="login-fields">
<h3>Login</h3>
<form method="POST">
{% csrf_token %}
<div class="form-group">
{{ login_form.username }}
<label for="{{ login_form.username.id_for_label }}" class="control-label">Username</label><i class="bar"></i>
{{ login_form.username.errors }}
</div>
<div class="form-group">
{{ login_form.password }}
<label for="{{ login_form.password.id_for_label }}" class="control-label">Passwort</label><i class="bar"></i>
{{ login_form.password.errors }}
</div>
<div class="button-container">
<input type="submit" class="button" value="Login" />
</div>
</form>
<p>Noch nicht Registriert?</p>
Registrieren
</div>
</section>
Already fixed it! The Problem was the action attribute in the form tag. It causes the troubles. Just removed it from the form tag and make a redirect in the login() method. Thanks guys! :)
in my flask app I am using mongoDB and on the home page I have a form that is returning all the known collections in that particular database. I am asking the user to pick a collection they want to use as I will use that collection set to return all the documents in other routes or views.
Im struggling how to make this global "selected_collection" a global variable that all the routes and views can use.
for example on the index page I am able select a collection then on the submit it would redirect me to view db_selected there I was trying to make the selected_collection a global variable but if i got to the about view it get an error related to
I imagine I should use flask.g but im not sure how to get it to work. I have read some of the documents but they are a little vague to me.
AttributeError: '_AppCtxGlobals' object has no attribute 'selected_collection'
how can i make this work?
app.py file:
# INDEX
#app.route('/', methods=['GET', 'POST'])
def index():
coll_name = get_db_collection()
return render_template('index.html', coll_name=coll_name)
# LOGIN
#app.route('/db_selected', methods=['GET', 'POST'])
def db_selected():
if request.method == 'POST':
selected_collection = request.form['Item_4']
selected_collection = g.selected_collection
return render_template('db_selected.html',
selected_collection=selected_collection)
#app.route('/about')
def about():
app.logger.info('selected_collection is {}'.format(g.selected_collection))
return render_template('about.html')
index.html file:
{%extends 'layout.html'%}
{%block body%}
<div class="jumbotron text-center">
<h1>Welcome to the index.html file !</h1>
</div>
<div class="container">
{% include 'db_query_bar.html' %}
</div>
{%endblock%}
db_query_bar.html
<form class="form-horizontal" action="{{ url_for('db_selected') }}" name="Item_1" method="POST">
<fieldset>
<legend>Select DB</legend>
<div class="form-group">
<label for="select" class="col-lg-2 control-label">Database Collection:</label>
<select id="DB" class="form-control" name="Item_4" style="width: 70%" >
<!-- <option value="">All</option> -->
{% for item in coll_name %}
<option value="{{item}}">{{item}}</option>
{% endfor %}
</select>
<br>
</div>
<div class="form-group">
<div class="col-lg-10 col-lg-offset-2">
<button type="submit" class="btn btn-success">Submit</button>
</div>
</div>
</fieldset>
</form>
Just to answer this for the global variable I ended up placing
app.selected_collection = "Some Value"
in the top of my flask code this will create a global variable I can use in all the views.
app = Flask(__name__)
# CONFIG MONGO CONNECTION DETAILS
app.config['MONGO_HOST'] = 'DB-Host'
app.config['MONGO_DBNAME'] = 'DB-Collection'
app.selected_collection = "Some Value"
# INIT MONGODB
mongo = PyMongo(app)
I want to put a login form everywhere on my website, after following a few SO answers I decide to write my own middleware like this:
class LoginFormMiddleware(object):
'''
Put a login form in everypage of the website
'''
def process_request(self, request):
# if the top login form has been posted
if request.method == 'POST':
if 'logout_submit' in request.POST:
# log the user out
from django.contrib.auth import logout
logout(request)
form = LoginForm()
elif 'login_submit' in request.POST:
# validate the form
form = LoginForm(data=request.POST)
if form.is_valid():
# log the user in
from django.contrib.auth import login
login(request, form.get_user())
else:
form = LoginForm(request)
else:
form = LoginForm(request)
# attach the form to the request so it can be accessed
# within the templates
request.login_form = form
in my settings.py, I have:
import django.conf.global_settings as DEFAULT_SETTINGS
...
MIDDLEWARE_CLASSES = DEFAULT_SETTINGS.MIDDLEWARE_CLASSES + (
'base.mymiddleware.LoginFormMiddleware',
)
TEMPLATE_CONTEXT_PROCESSORS = DEFAULT_SETTINGS.TEMPLATE_CONTEXT_PROCESSORS + (
'django.core.context_processors.request',
)
The form, in base.html to be accesed from everywhere, looks like this:
{% if user.is_authenticated %}
<div class="login_box">
<form action="/myapp/logout/" method="post">{% csrf_token %}
<div class="col2"><a>{{ user.username }}</a></div>
<div class="col3"><input type="submit" value="Logout" name="logout_submit"/></div>
</form>
</div>
{% else %}
<form action="." method="post">
{% csrf_token %}
<div class="login_box">
<div class="error_box">
{% if request.login_form.errors %}
Incorrect User/Password
{% endif %}
</div>
<div class="col00"> <h4>{{ request.login_form.username.label_tag }}</h3></div>
<div class="col11">{{ request.login_form.username }}</div>
<div class="col22"><h4>{{ request.login_form.password.label_tag }}</h3></div>
<div class="col33">{{ request.login_form.password }}</div>
<div class="col44"><input type="submit" value="Login" name="login_submit"/></div>
<input type="hidden" name="next" value="{{ request.get_full_path }}" />
</div>
</form>
{% endif %}
Login works normally but, after doing it, each time I make a GET request user.is_authenticated seems to return false cause what I see is an empty LoginForm instead of the logout form.
I dont know if the problem is in my middleware (when request.method != 'POST' it returns form = LoginForm(request)) or it is something I am missing in my settings, or maybe using middleware for this was not a great idea...
I can't believe you have seen any SO answers that advocate putting this sort of logic in the middleware. (If you have, post the link so that I can downvote them.)
This really, really, really isn't the place to do this sort of thing. Write a specific view and set the action parameter of the login form to that view.
However, I suspect your underlying issue is that you're not using RequestContext to render the other views, so the user object is not passed to the template.
Your implementation doesn't make much sense. A login form with action attribute is "." is wrong and will lead to conflicts.
You should have a login view, not a login middleware. The action attribute of the login form should be the reversed url of your login view.
In your login form, you should specify a next hidden input for example:
<input name="next" type="hidden" value="{{ request.POST.next|default:request.path }}" />
Following that, it can be in your base template or anywhere in the website.
This is also valid for logout.