final versio of demo project

.gitignore

@@ -53,3 +53,4 @@ coverage.xml
 docs/_build/
 
 .DS_Store
+db.sqlite3

demo/demo/urls.py

@@ -4,11 +4,29 @@ from django.views.generic import TemplateView
 
 urlpatterns = patterns('',
     url(r'^$', TemplateView.as_view(template_name="home.html"), name='home'),
-    url(r'^signup/$', TemplateView.as_view(template_name="signup.html"), name='signup'),
-    url(r'^email-verification/$', TemplateView.as_view(template_name="email_verification.html"), name='email-verification'),
-    url(r'^login/$', TemplateView.as_view(template_name="login.html"), name='login'),
-    url(r'^password-reset/$', TemplateView.as_view(template_name="password_reset.html"), name='password-reset'),
+    url(r'^signup/$', TemplateView.as_view(template_name="signup.html"),
+        name='signup'),
+    url(r'^email-verification/$',
+        TemplateView.as_view(template_name="email_verification.html"),
+        name='email-verification'),
+    url(r'^login/$', TemplateView.as_view(template_name="login.html"),
+        name='login'),
+    url(r'^password-reset/$',
+        TemplateView.as_view(template_name="password_reset.html"),
+        name='password-reset'),
+    url(r'^password-reset/confirm/$',
+        TemplateView.as_view(template_name="password_reset_confirm.html"),
+        name='password-reset-confirm'),
 
+    url(r'^user-details/$',
+        TemplateView.as_view(template_name="user_details.html"),
+        name='user-details'),
+    url(r'^password-change/$',
+        TemplateView.as_view(template_name="password_change.html"),
+        name='password-change'),
+
+
+    # this url is used to generate email content
     url(r'^password-reset/confirm/(?P<uidb64>[0-9A-Za-z_\-]+)/(?P<token>[0-9A-Za-z]{1,13}-[0-9A-Za-z]{1,20})/$',
         TemplateView.as_view(template_name="password_reset_confirm.html"),
         name='password_reset_confirm'),

demo/templates/base.html

@@ -31,16 +31,16 @@
             <a href="#" class="dropdown-toggle" data-toggle="dropdown">API endpoints <span class="caret"></span></a>
 
             <ul class="dropdown-menu" role="menu">
-              {% if request.user.is_authenticated %}
-                <li><a href="#">User details</a></li>
-                <li><a href="#">Password change</a></li>
-                <li><a href="#">Logout</a></li>
-              {% else %}
+                <!-- these pages don't require user token -->
                 <li><a href="{% url 'signup' %}">Signup</a></li>
                 <li><a href="{% url 'email-verification' %}">E-mail verification</a></li>
                 <li><a href="{% url 'login' %}">Login</a></li>
                 <li><a href="{% url 'password-reset' %}">Password Reset</a></li>
-              {% endif %}
+                <li><a href="{% url 'password-reset-confirm' %}">Password Reset Confirm</a></li>
+                <li class="divider"></li>
+                <!-- these pages require user token -->
+                <li><a href="{% url 'user-details' %}">User details</a></li>
+                <li><a href="{% url 'password-change' %}">Password change</a></li>
             </ul>
           </li>
         </ul>
@@ -82,9 +82,9 @@
       }
 
       $().ready(function(){
-        $('form button[type=submit]').click(function(){
-          var form = $('form');
-          $.post(form.attr('action'), $('form').serialize())
+        $('form.ajax-post button[type=submit]').click(function(){
+          var form = $('form.ajax-post');
+          $.post(form.attr('action'), form.serialize())
           .fail(function(data){error_response(data);})
           .done(function(data){susccess_response(data);});
           return false;

demo/templates/email_verification.html

@@ -3,7 +3,6 @@
 {% block content %}
   <div class="row">
     <h3>E-mail verification</h3><hr/>
-    <p>Paste here a key which was sent in verification email</p>
     {% include "fragments/email_verification_form.html" %}
   </div>
 {% endblock %}

demo/templates/fragments/email_verification_form.html

@@ -1,9 +1,10 @@
 <!-- Signup form -->
-<form class="form-horizontal" role="form" action="{% url 'verify_email' %}">
+<form class="form-horizontal ajax-post" role="form" action="{% url 'verify_email' %}">
   <div class="form-group">
     <label for="key" class="col-sm-2 control-label">Key</label>
     <div class="col-sm-10">
       <input name="key" type="text" class="form-control" id="key" placeholder="Key">
+      <p class="help-block">Put here a key which was sent in verification email</p>
     </div>
   </div>
 

demo/templates/fragments/login_form.html

@@ -1,5 +1,5 @@
 <!-- Signup form -->
-<form class="form-horizontal" role="form" action="{% url 'rest_login' %}">
+<form class="form-horizontal ajax-post" role="form" action="{% url 'rest_login' %}">
   <div class="form-group">
     <label for="username" class="col-sm-2 control-label">Username</label>
     <div class="col-sm-10">

demo/templates/fragments/password_change_form.html

@@ -0,0 +1,25 @@
+<!-- Signup form -->
+<form class="form-horizontal ajax-post" role="form" action="{% url 'rest_password_change' %}">
+
+  <div class="form-group">
+    <label for="new_password1" class="col-sm-2 control-label">Password</label>
+    <div class="col-sm-10">
+      <input name="new_password1" type="password" class="form-control" id="new_password1" placeholder="Password">
+    </div>
+  </div>
+
+  <div class="form-group">
+    <label for="new_password2" class="col-sm-2 control-label">Repeat password</label>
+    <div class="col-sm-10">
+      <input name="new_password2" type="password" class="form-control" id="new_password2" placeholder="Repeat password">
+    </div>
+  </div>
+
+  <div class="form-group">
+    <div class="col-sm-offset-2 col-sm-10">
+      <button type="submit" class="btn btn-default">Set new password</button>
+    </div>
+  </div>
+
+  <div class="form-group api-response"></div>
+</form>

demo/templates/fragments/password_reset_confirm_form.html

@@ -1,30 +1,32 @@
 <!-- Signup form -->
-<form class="form-horizontal" role="form" action="{% url 'verify_email' %}">
+<form class="form-horizontal ajax-post" role="form" action="{% url 'rest_password_reset_confirm' %}">
   <div class="form-group">
-    <label for="uid" class="col-sm-2 control-label">uid</label>
+    <label for="uid" class="col-sm-2 control-label">Uid</label>
     <div class="col-sm-10">
-      <input name="uid" type="text" class="form-control" id="uid" placeholder="uid">
+      <input name="uid" type="text" class="form-control" id="uid" placeholder="Uid">
+      <p class="help-block">Uid value sent in email</p>
     </div>
   </div>
 
   <div class="form-group">
-    <label for="token" class="col-sm-2 control-label">token</label>
+    <label for="token" class="col-sm-2 control-label">Token</label>
     <div class="col-sm-10">
-      <input name="token" type="text" class="form-control" id="token" placeholder="token">
+      <input name="token" type="text" class="form-control" id="token" placeholder="Token">
+      <p class="help-block">Token value sent in email</p>
     </div>
   </div>
 
   <div class="form-group">
-    <label for="password1" class="col-sm-2 control-label">Password</label>
+    <label for="new_password1" class="col-sm-2 control-label">Password</label>
     <div class="col-sm-10">
-      <input name="password1" type="password" class="form-control" id="password1" placeholder="Password">
+      <input name="new_password1" type="password" class="form-control" id="new_password1" placeholder="Password">
     </div>
   </div>
 
   <div class="form-group">
-    <label for="password2" class="col-sm-2 control-label">Repeat password</label>
+    <label for="new_password2" class="col-sm-2 control-label">Repeat password</label>
     <div class="col-sm-10">
-      <input name="password2" type="password" class="form-control" id="password2" placeholder="Repeat password">
+      <input name="new_password2" type="password" class="form-control" id="new_password2" placeholder="Repeat password">
     </div>
   </div>
 

demo/templates/fragments/password_reset_form.html

@@ -1,5 +1,5 @@
 <!-- Signup form -->
-<form class="form-horizontal" role="form" action="{% url 'rest_password_reset' %}">
+<form class="form-horizontal ajax-post" role="form" action="{% url 'rest_password_reset' %}">
   <div class="form-group">
     <label for="email" class="col-sm-2 control-label">E-mail</label>
     <div class="col-sm-10">

demo/templates/fragments/signup_form.html

@@ -1,5 +1,5 @@
 <!-- Signup form -->
-<form class="form-horizontal" id="signup" role="form" action="{% url 'rest_register' %}">
+<form class="form-horizontal ajax-post" id="signup" role="form" action="{% url 'rest_register' %}">
   <div class="form-group">
     <label for="email" class="col-sm-2 control-label">Email</label>
     <div class="col-sm-10">

demo/templates/fragments/user_details_form.html

@@ -0,0 +1,39 @@
+<!-- Signup form -->
+<form class="form-horizontal" id="signup" role="form" action="{% url 'rest_user_details' %}">
+
+  <div class="form-group">
+    <label for="email" class="col-sm-2 control-label">Email</label>
+    <div class="col-sm-10">
+      <input name="email" type="text" class="form-control" id="email" placeholder="Email">
+    </div>
+  </div>
+
+  <div class="form-group">
+    <label for="username" class="col-sm-2 control-label">Username</label>
+    <div class="col-sm-10">
+      <input name="username" type="text" class="form-control" id="username" placeholder="Username">
+    </div>
+  </div>
+
+  <div class="form-group">
+    <label for="first_name" class="col-sm-2 control-label">First name</label>
+    <div class="col-sm-10">
+      <input name="first_name" type="text" class="form-control" id="first_name" placeholder="First name">
+    </div>
+  </div>
+
+  <div class="form-group">
+    <label for="last_name" class="col-sm-2 control-label">Last name</label>
+    <div class="col-sm-10">
+      <input name="last_name" type="text" class="form-control" id="last_name" placeholder="Last name">
+    </div>
+  </div>
+
+  <div class="form-group">
+    <div class="col-sm-offset-2 col-sm-10">
+      <button type="submit" class="btn btn-default">Save</button>
+    </div>
+  </div>
+
+  <div class="form-group api-response"></div>
+</form>

demo/templates/password_change.html

@@ -0,0 +1,39 @@
+{% extends "base.html" %}
+
+{% block content %}
+
+  <div class="row">
+    <div class="form-group">
+      <label for="token" class="col-sm-2 control-label">User Token</label>
+      <div class="col-sm-4">
+        <input name="token" type="text" class="form-control" id="token" placeholder="Token">
+        <p class="help-block">Token received after login</p>
+      </div>
+    </div>
+  </div>
+
+  <div class="row">
+    <h3>Update User Details</h3><hr/>
+    {% include "fragments/password_change_form.html" %}
+  </div>
+{% endblock %}
+
+{% block script %}
+    <script type="text/javascript">
+      $().ready(function(){
+        $('form button[type=submit]').click(function(){
+          var token = $('input[name=token]').val();
+          var form = $('form');
+          $.ajax({
+            url: form.attr('action'),
+            data: $('form').serialize(),
+            type: "POST",
+            beforeSend: function(xhr){xhr.setRequestHeader('Authorization', 'Token '+token);}
+          }).fail(function(data){error_response(data);})
+          .done(function(data){susccess_response(data);});
+          return false;
+        });
+
+      });
+    </script>
+{% endblock %}

demo/templates/password_reset_confirm.html

@@ -6,3 +6,21 @@
     {% include "fragments/password_reset_confirm_form.html" %}
   </div>
 {% endblock %}
+
+
+
+{% block script %}
+    <script type="text/javascript">
+        var url_elements = window.location.pathname.split('/');
+        if (url_elements.length == 6){
+            var uid = url_elements[url_elements.length - 3];
+            if (uid !== undefined){
+                $('input[name=uid]').val(uid);
+            }
+            var token = url_elements[url_elements.length - 2];
+            if (token !== undefined){
+                $('input[name=token]').val(token);
+            }
+        }
+    </script>
+{% endblock %}

demo/templates/signup.html

@@ -6,18 +6,3 @@
     {% include "fragments/signup_form.html" %}
   </div>
 {% endblock %}
-
-{% comment %}
-{% block script %}
-  <script type="text/javascript">
-    $().ready(function(){
-      $('#signup button[type=submit]').click(function(){
-        $.post( "/rest-auth/registration/", $('#signup').serialize())
-        .fail(function(data){error_response(data);})
-        .done(function(data){susccess_response(data);});
-        return false;
-      });
-    });
-  </script>
-{% endblock %}
-{% endcomment %}

demo/templates/user_details.html

@@ -0,0 +1,58 @@
+{% extends "base.html" %}
+
+{% block content %}
+
+  <div class="row">
+  <h3>Retrieve User Details</h3><hr/>
+    <div class="form-group">
+      <label for="token" class="col-sm-2 control-label">User Token</label>
+      <div class="col-sm-4">
+        <input name="token" type="text" class="form-control" id="token" placeholder="Token">
+        <p class="help-block">Token received after login</p>
+      </div>
+      <button id="get-user-details" class="btn btn-primary">GET user details</button>
+    </div>
+  </div>
+
+  <div class="row">
+    <h3>Update User Details</h3><hr/>
+    {% include "fragments/user_details_form.html" %}
+  </div>
+{% endblock %}
+
+{% block script %}
+    <script type="text/javascript">
+      $().ready(function(){
+        $('#get-user-details').click(function(){
+          var token = $('input[name=token]').val();
+
+          $.ajax({
+            url: "{% url 'rest_user_details' %}",
+            beforeSend: function(xhr){xhr.setRequestHeader('Authorization', 'Token '+token);},
+            type: "GET",
+            success: function(data) {
+              $('input[name=username]').val(data.username);
+              $('input[name=email]').val(data.email);
+              $('input[name=first_name]').val(data.first_name);
+              $('input[name=last_name]').val(data.last_name);
+            }
+          });
+          return false;
+        });
+
+        $('form button[type=submit]').click(function(){
+          var token = $('input[name=token]').val();
+          var form = $('form');
+          $.ajax({
+            url: form.attr('action'),
+            data: $('form').serialize(),
+            type: "PUT",
+            beforeSend: function(xhr){xhr.setRequestHeader('Authorization', 'Token '+token);}
+          }).fail(function(data){error_response(data);})
+          .done(function(data){susccess_response(data);});
+          return false;
+        });
+
+      });
+    </script>
+{% endblock %}