3

I am writing a django web app and using jquery-ui for the user interface. I am using django-registration to take care of user registration.

Basically, what I'm trying to do, is instead of having a separate Login page, I wan the login page to be a modal dialog, so that you click on a link, and if you need to login, a popup shows up and you can login from there. For this part, I'm using jquery-ui modal form, and am basically just displaying a login form that is normally hidden.

However, I can only get it to work if the url for the page looks like this: 

url(r'^$',
        auth_views.login,
        {'template_name': 'index.html'}),

Since I want the login modal window to pop up whenever the user wants to do something that requires login, I will need it on multiple pages. But I don't want to make all the urls look like the above.

I saw another question on the site that addresses the issue: Django authentication and Ajax - URLs that require login but I don't fully understand the answer. I'm still fairly new to Django and javascript, so was wondering if someone could provide a little more guidance?

Here is the part in "index.html" for the form: 

<div id="dialog-form" title="LOGIN">    
        <form method="post" action="?next={{ next|default:"/" }}">
        {% csrf_token %}
        <dl>
        <dt><label for="id_username">Username:</label>{% if form.username.errors %} <span class="error">{{ form.username.errors|join:", " }}</span>{% endif %}</dt>
        <dd>{{ form.username }}</dd>
        <dt><label for="id_password">Password:</label>{% if form.password.errors %} <span class="error">{{ form.password.errors|join:", " }}</span>{% endif %}</dt>
        <dd>{{ form.password }}</dd>
        <dt><input type="submit" value="Log in" /></dt>
        </dl>
        </form> 
    </div>
    <button id="login">LOGIN</button>

And here's the javascript:

<script>
$(function() {

    $( "#dialog-form" ).dialog({
        autoOpen: false,
        height: 500,
        width: 550,
        modal: true,
        buttons: {
            Close: function() {
                $( this ).dialog( "close" );
            }
        },
        close: function() {
            allFields.val( "" ).removeClass( "ui-state-error" );
        }
    });

    $( "#login" ).click(function() {
            $( "#dialog-form" ).dialog( "open" );
        });
});
</script>

Thank you in advance for your help.

Community
  • 1
  • 1
WarAndPiece
  • 1,007
  • 1
  • 10
  • 10

2 Answers2

1

Its possible to use jqueryui for login modal box; I have used it already. check this http://jsfiddle.net/paragr/LNBEY/
But why don't you try this one https://github.com/kylefox/jquery-modal or http://www.bitrepository.com/ajax-login-modal-box.html

Parag
  • 4,754
  • 9
  • 33
  • 50
0

it's not a full answer as i have never did it before, but: u want the form to send the post request data to auth_views.login - so u should set the forms action to this address + some next data which will redirect u after successful login. I guess looking in django auth soruce could help. On djangosites.org u can find projects with sourcecode, for example https://github.com/znc-sistemas/python-people - there is an example of login form on every page-it is not hidden but it doesn't matter too much. The author is using a context processor to put the login form into every request context data. I belive reading the code could help u.

agend
  • 648
  • 1
  • 8
  • 18