django user authenication form in modal form twitter bootstrap

[sarfaraz ahmed]

Hello 

I am new to django I am trying to use modal (bootstrap) for embed by login form. I am using the following error. I have mentioned my code below and tried lot of googling... still no use.

Help

Reason given for failure:

    CSRF token missing or incorrect.
  

Here is code in view.py 

from django.shortcuts import render_to_response

from django.http import HttpResponseRedirect

from django.contrib import auth

from django.core.context_processors import csrf

from django.template import RequestContext

from django.views.decorators.csrf import csrf_protect

from django.shortcuts import render

@csrf_protect

def login(request):

    c={}

    c.update(csrf(request))

    return render_to_response('login.html',c,context_instance=RequestContext(request))

I call the login.html via link in nav bar using 

 <li><a href="/accounts/login/" data-toggle="modal" data-target="#myModal">Login</a></li>

That is code for login.html which is modal included in my base.html 

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">

    <div class="modal-dialog">

        <div class="modal-content">

            <div class="modal-header">

                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>

                <h4 class="modal-title" id="myModalLabel">Modal title</h4>

            </div>

            <div class="modal-body">

                <form action='/accounts/auth/' method='post'>{% csrf_token %}

                    <label for="username">User Name:</label>

                    <input type="text" name="username" value="" id="username">

                    <label for="password">Password:</label>

                    <input type="password" name="password" value="" id="password">

                    <input type="Submit" value="login" class="btn btn-primary">

                </form>

            </div>

            <div class="modal-footer">

                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>

                <button type="button" class="btn btn-primary">Save changes</button>

            </div>

        </div>

    </div>

</div>

[Roman Klesel]

I think the view function is wrong.

This should do:

from django.views.decorators.csrf import csrf_protect
from django.shortcuts impor render

@csrf_protect
def login(request):
return render(request, 'login.html')

> --
> You received this message because you are subscribed to the Google Groups
> "Django users" group.
> To unsubscribe from this group and stop receiving emails from it, send an
> email to django-users...@googlegroups.com.
> To post to this group, send email to django...@googlegroups.com.
> Visit this group at http://groups.google.com/group/django-users.
> To view this discussion on the web visit
> https://groups.google.com/d/msgid/django-users/943e0bf4-ce4d-4ef5-ae45-57e86c36f367%40googlegroups.com.
> For more options, visit https://groups.google.com/d/optout.

[sarfaraz ahmed]

Hello Roman,

Thanks for response. Tried what you suggested me. The modal does not even pop up if I used the code mentioned in your reply. 

Regards,

Sarfaraz Ahmed

To view this discussion on the web visit https://groups.google.com/d/msgid/django-users/CAL2Rd%3DKwRHU-G_jF4winxka2nnLRB%3D-qbejfDdnQ0GE0zNNMeQ%40mail.gmail.com.

For more options, visit https://groups.google.com/d/optout.

--
Thanks with regards,
Sarfaraz Ahmed

[sarfaraz ahmed]

Hello,

You were absolutely right.. the function was wrong. Please help me sort out that.. as this your suggestion took me one step close to fix this issue. 

Now the scenario is like this 

views.py has this function to render my login.html

------------------------------------------

@csrf_protect

def login(request):

    #c={}

    #c.update(csrf(request))

    print 'step2'

    return render_to_response('login.html',{},RequestContext(request))

---------------------------------------------------------------------------------

base.html has include statement to include login.html and login.html has following code 

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">

        <div class="modal-dialog">

            <div class="modal-content">

                <div class="modal-header">

                    <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>

                    <h4 class="modal-title" id="myModalLabel">Modal title</h4>

                </div>

                <div class="modal-body">

                    <form action='/accounts/auth/' method='post'>{%csrf_token%}

                        <label for="username">User Name:</label>

                        <input type="text" name="username" value="" id="username">

                        <label for="password">Password:</label>

                        <input type="password" name="password" value="" id="password">

                        <input type="Submit" value="login" class="btn btn-primary">

                    </form>

                </div>

                <div class="modal-footer">

                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>

                    <button type="button" class="btn btn-primary">Save changes</button>

                </div>

        </div>

    </div>

</div>

When I click on link which has following code

 <li><a href="/accounts/login/" data-toggle="modal" data-target="#myModal" >Login</a></li>

Nothing happens...the modal does not open...

When I manually go to link : accounts/login i can see the form with any formatting and also can see csrf token.

Desperately looking for help

Regards,

Sarfaraz Ahmed

[Mario Gudelj]

Sounds like you have a js issue now. Have a look inside chrome console for any errors and fix them. Modal not coming up wouldn't be a django issue.

To view this discussion on the web visit https://groups.google.com/d/msgid/django-users/CAEPJdiytV_ijs%3D8drXtJnaMBX82h%2BLxXddYFxQCki12-%3DgYFuw%40mail.gmail.com.

[sarfaraz ahmed]

i am using attribute to call modal popup. Should I use JS and try. I would give a try and let you know. 

Thanks in advance,

Sarfaraz Ahmed

To view this discussion on the web visit https://groups.google.com/d/msgid/django-users/CAHqTbjniZLq_YKSfBX6Zha4fHDyq6excFSuNNaVbWZ6vAi%2BbgQ%40mail.gmail.com.

For more options, visit https://groups.google.com/d/optout.

[sarfaraz ahmed]

The issue is almost resolved. The only problem now I am facing is when I include login function which provides form with csrf token. The bootstrap modal forms dissappear immediately after is comes on screen. If I do not include this url using data-remote option the modal comes. But without csrf it do not let me login. 

Here is code 

********************************************************************************************************************

@csrf_protect

def login(request):

    return render_to_response('login.html',{},RequestContext(request))

********************************************************************************************************************

<div class="modal" id="myModal" data-remote="/accounts/login/" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">

Now the code in red is issue. when I include the the modal does not stay. 

Regards,

Sarfaraz Ahmed