confirmation using modal & csrf protected form

issue/static/js/confirm.js

@@ -0,0 +1,9 @@
+$('#confirm-delete').on('show.bs.modal', function(e) {
+    var item = $(e.relatedTarget).data('item');
+    if (!item) {
+        item = 'item';
+    }
+    $('#confirm-delete-form').attr('action', $(e.relatedTarget).data('action'));
+    $('#confirm-delete-title').html('Delete ' + item);
+    $('#confirm-delete-message').html('Are you sure to delete this ' + item + '?');
+});

issue/templates/base.html

@@ -100,11 +100,30 @@
 
         {% block content %}{% endblock %}
 
+        <div class="modal" id="confirm-delete" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
+          <div class="modal-dialog modal-sm">
+            <div class="panel panel-danger">
+              <div class="panel-heading" id="confirm-delete-title">
+                Delete
+              </div>
+              <div class="panel-body">
+                <form action="#" method="post" role="form" id="confirm-delete-form" class="text-center">
+                  {% csrf_token %}
+                  <p id="confirm-delete-message">Are you sure?</p>
+                  <button type="submit" class="btn btn-danger">{% block confirm-ok %}Confirm{% endblock %}</button>
+                  <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
+                </form>
+              </div>
+            </div>
+          </div>
+        </div>
+
       </div>
 
     </div> <!-- /container -->
 
     <script src="{% static 'js/bootstrap.min.js' %}"></script>
+    <script src="{% static 'js/confirm.js' %}"></script>
     {% block js_end %}{% endblock %}
   </body>
 </html>

issue/templates/issue/global_permission_list.html

@@ -75,7 +75,7 @@
       <td class="text-center"><a href="{% url 'toggle-global-permission' perm.id 'delete-tags' %}">{{ perm.delete_tags|boolean }}</a></td>
       <td class="text-center">
         <a href="{% url 'edit-global-permission' perm.id %}" class="btn btn-primary btn-xs"><span class="glyphicon glyphicon-edit"></span> Edit</a>
-        <a href="{% url 'delete-global-permission' perm.id %}" class="btn btn-danger btn-xs"><span class="glyphicon glyphicon-remove"></span> Delete</a>
+        <a href=#" data-item="permission" data-action="{% url 'delete-global-permission' perm.id %}" data-toggle="modal" data-target="#confirm-delete" class="btn btn-danger btn-xs"><span class="glyphicon glyphicon-remove"></span> Delete</a>
       </td>
     </tr>
     {% endfor %}

issue/templates/issue/issue.html

@@ -36,7 +36,7 @@
         {% if event.code == event.DESCRIBE %}
         <div class="pull-right">
           {% if perm.delete_issue %}
-          <a href="{% url 'delete-issue' project.name issue.id %}" class="btn btn-danger btn-xs"><span class="glyphicon glyphicon-trash"></span></a>
+          <a href="#" data-item="issue" data-action="{% url 'delete-issue' project.name issue.id %}" data-toggle="modal" data-target="#confirm-delete" class="btn btn-danger btn-xs"><span class="glyphicon glyphicon-trash"></span></a>
           {% endif %}
           {% if perm.modify_issue %}
           <a href="{% url 'edit-issue' project.name issue.id %}" class="btn btn-primary btn-xs"><span class="glyphicon glyphicon-edit"></span> Edit</a>
@@ -45,7 +45,7 @@
         {% elif event.code == event.COMMENT %}
         <div class="pull-right">
           {% if perm.delete_comment %}
-          <a href="{% url 'delete-comment' project.name issue.id event.id %}" class="btn btn-danger btn-xs"><span class="glyphicon glyphicon-trash"></span></a>
+          <a href="#" data-item="comment" data-action="{% url 'delete-comment' project.name issue.id event.id %}" data-toggle="modal" data-target="#confirm-delete" class="btn btn-danger btn-xs"><span class="glyphicon glyphicon-trash"></span></a>
           {% endif %}
           {% if perm.modify_comment %}
           <a href="{% url 'edit-comment' project.name issue.id event.id %}" class="btn btn-primary btn-xs"><span class="glyphicon glyphicon-edit"></span> Edit</a>
@@ -86,7 +86,7 @@
       </div>
 
       <div class="col-md-3">
-        <a href="{% url 'delete-issue' project.name issue.id %}" class="btn btn-danger btn-block"><span class="glyphicon glyphicon-trash"></span> Delete this issue</a>
+        <a href="#" data-item="issue" data-action="{% url 'delete-issue' project.name issue.id %}" data-toggle="modal" data-target="#confirm-delete" class="btn btn-danger btn-block"><span class="glyphicon glyphicon-trash"></span> Delete this issue</a>
       </div>
 
     </div>

issue/templates/issue/label_list.html

@@ -31,7 +31,7 @@
           <a href="{% url 'edit-label' project.name label.id %}" class="btn btn-primary"><span class="glyphicon glyphicon-edit"></span> Edit</a>
           {% endif %}
           {% if perm.delete_tags %}
-          <a href="{% url 'delete-label' project.name label.id %}" class="btn btn-danger"><span class="glyphicon glyphicon-remove"></span> Delete</a>
+          <a href="#" data-item="label" data-action="{% url 'delete-label' project.name label.id %}" data-toggle="modal" data-target="#confirm-delete" class="btn btn-danger"><span class="glyphicon glyphicon-remove"></span> Delete</a>
           {% endif %}
         </div>
         {% endif %}

issue/templates/issue/milestone_list.html

@@ -36,7 +36,7 @@
           <a href="{% url 'edit-milestone' project.name milestone.name %}"><button class="btn btn-primary"><span class="glyphicon glyphicon-edit"></span> Edit</button></a>
           {% endif %}
           {% if perm.delete_tags %}
-          <a href="{% url 'delete-milestone' project.name milestone.name %}"><button class="btn btn-danger"><span class="glyphicon glyphicon-remove"></span> Delete</button></a>
+          <a href="#" data-item="milestone" data-action="{% url 'delete-milestone' project.name milestone.name %}" data-toggle="modal" data-target="#confirm-delete" class="btn btn-danger"><span class="glyphicon glyphicon-remove"></span> Delete</a>
           {% endif %}
         </div>
         <b style="font-size: 200%;">

issue/templates/issue/project.html

@@ -13,7 +13,7 @@
 <li role="presentation"><a role="menuitem" tabindex="-1" href="{% url 'edit-project' project.name %}">Modify this project</a></li>
 {% endif %}
 {% if perm.delete_project %}
-<li role="presentation"><a role="menuitem" tabindex="-1" href="{% url 'delete-project' project.name %}">Delete this project</a></li>
+<li role="presentation"><a role="menuitem" tabindex="-1" href="#" data-item="project" data-action="{% url 'delete-project' project.name %}" data-toggle="modal" data-target="#confirm-delete">Delete this project</a></li>
 {% endif %}
 {% if perm.create_project %}
 <li role="presentation"><a role="menuitem" tabindex="-1" href="{% url 'add-project' %}">New project…</a></li>

issue/templates/issue/project_permission_list.html

@@ -58,7 +58,7 @@
       <td class="text-center"><a href="{% url 'toggle-project-permission' project.name perm.id 'manage-project-permission' %}">{{ perm.manage_project_permission|boolean }}</a></td>
       <td class="text-center">
         <a href="{% url 'edit-project-permission' project.name perm.id %}" class="btn btn-primary btn-xs"><span class="glyphicon glyphicon-edit"></span> Edit</a>
-        <a href="{% url 'delete-project-permission' project.name perm.id %}" class="btn btn-danger btn-xs"><span class="glyphicon glyphicon-remove"></span> Delete</a>
+        <a href="#" data-item="permission" data-action="{% url 'delete-project-permission' project.name perm.id %}" data-toggle="modal" data-target="#confirm-delete" class="btn btn-danger btn-xs"><span class="glyphicon glyphicon-remove"></span> Delete</a>
       </td>
     </tr>
     {% endfor %}

issue/templates/issue/team.html

@@ -40,7 +40,7 @@
     <div class="row text-center">
       <a href="{% url 'list-team' %}" class="btn btn-default"><span class="glyphicon glyphicon-chevron-left"></span> Go back to list</a>
       <a href="{% url 'edit-team' team.pk %}" class="btn btn-primary"><span class="glyphicon glyphicon-edit"></span> Modify team</a>
-      <a href="{% url 'delete-team' team.pk %}" class="btn btn-danger"><span class="glyphicon glyphicon-trash"></span> Delete team</a>
+      <a href="#" data-item="team" data-action="{% url 'delete-team' team.pk %}" data-toggle="modal" data-target="#confirm-delete" class="btn btn-danger"><span class="glyphicon glyphicon-trash"></span> Delete team</a>
     </div>
   </div>
 

issue/templates/issue/team_list.html

@@ -33,7 +33,7 @@
       <td>{{ team.groups|first_few:'group' }}</td>
       <td class="text-center">
         <a href="{% url 'edit-team' team.pk %}" class="btn btn-primary btn-xs">Edit</a>
-        <a href="{% url 'delete-team' team.pk %}" class="btn btn-danger btn-xs">Delete</a>
+        <a href="#" data-item="team" data-action="{% url 'delete-team' team.pk %}" data-toggle="modal" data-target="#confirm-delete" class="btn btn-danger btn-xs">Delete</a>
       </td>
     </tr>
     {% endfor %}

issue/views.py

@@ -3,6 +3,7 @@ from django.contrib import messages
 from django.core.exceptions import ObjectDoesNotExist
 from django.contrib.auth.decorators import login_required
 from django.http import Http404, HttpResponseForbidden
+from django.views.decorators.http import require_http_methods
 
 from issue.models import *
 from issue.forms import *
@@ -85,6 +86,7 @@ def global_permission_toggle(request, id, perm):
     return redirect('list-global-permission')
 
 
+@require_http_methods(["POST"])
 @project_perm_required('manage_global_permission')
 def global_permission_delete(request, id):
 
@@ -160,6 +162,7 @@ def project_permission_toggle(request, project, id, perm):
     return redirect('list-project-permission', project.name)
 
 
+@require_http_methods(["POST"])
 @project_perm_required('manage_project_permission')
 def project_permission_delete(request, project, id):
 
@@ -232,6 +235,7 @@ def project_edit(request, project):
     return render(request, 'issue/project_edit.html', c)
 
 
+@require_http_methods(["POST"])
 @project_perm_required('delete_project')
 def project_delete(request, project):
 
@@ -486,6 +490,7 @@ def issue_edit_comment(request, project, issue, comment=None):
     return render(request, 'issue/issue_comment.html', c)
 
 
+@require_http_methods(["POST"])
 @project_perm_required('delete_comment')
 def issue_delete_comment(request, project, issue, comment):
 
@@ -528,6 +533,7 @@ def issue_reopen(request, project, issue):
     return redirect('show-issue', project.name, issue.id)
 
 
+@require_http_methods(["POST"])
 @project_perm_required('delete_issue')
 def issue_delete(request, project, issue):
 
@@ -649,6 +655,7 @@ def label_edit(request, project, id=None):
     return render(request, 'issue/label_edit.html', c)
 
 
+@require_http_methods(["POST"])
 @project_perm_required('delete_tags')
 def label_delete(request, project, id):
 
@@ -769,6 +776,7 @@ def milestone_reopen(request, project, name):
     return redirect('list-milestone', project.name)
 
 
+@require_http_methods(["POST"])
 @project_perm_required('delete_tags')
 def milestone_delete(request, project, name):
 
@@ -896,6 +904,7 @@ def team_remove_group(request, team, group):
     return redirect('show-team', team.pk)
 
 
+@require_http_methods(["POST"])
 @project_perm_required('manage_team')
 def team_delete(request, team):