feat: add delete functionality for users

Implement delete functionality with confirmation modals for users. Ensure
proper authorization checks are in place before deletion. Add corresponding
JavaScript files to handle modal interactions and form submissions.

Based on #84

Signed-off-by: Animesh Agrawal <animesh@flick2know.com>

static/js/entity_edit.js

@@ -0,0 +1,27 @@
+"use strict";
+
+/**
+ * Initializes delete functionality for entity edit pages
+ */
+function initializeDeleteModal() {
+    const modal = document.getElementById('deleteModal');
+    const deleteBtn = document.getElementById('deleteButton');
+    const cancelBtn = document.getElementById('cancelDelete');
+
+    if (!modal || !deleteBtn || !cancelBtn) {
+        console.error('One or more required elements not found');
+        return;
+    }
+
+    deleteBtn.addEventListener('click', () => {
+        modal.classList.remove('hidden');
+    });
+
+    cancelBtn.addEventListener('click', () => {
+        modal.classList.add('hidden');
+    });
+}
+
+document.addEventListener('DOMContentLoaded', function() {
+    initializeDeleteModal();
+});

static/js/user_list.js

@@ -0,0 +1,32 @@
+"use strict";
+
+/**
+ * Initializes delete functionality for user list page
+ */
+function initializeDeleteModal() {
+    const modal = document.getElementById('deleteModal');
+    const deleteButtons = document.querySelectorAll('.delete-button');
+    const cancelBtn = document.getElementById('cancelDelete');
+    const deleteActionInput = document.getElementById('deleteAction');
+
+    if (!modal || deleteButtons.length === 0 || !cancelBtn || !deleteActionInput) {
+        console.error('One or more required elements not found');
+        return;
+    }
+
+    deleteButtons.forEach(button => {
+        button.addEventListener('click', () => {
+            const userId = button.getAttribute('data-user-id');
+            deleteActionInput.value = 'delete:' + userId;
+            modal.classList.remove('hidden');
+        });
+    });
+
+    cancelBtn.addEventListener('click', () => {
+        modal.classList.add('hidden');
+    });
+}
+
+document.addEventListener('DOMContentLoaded', function() {
+    initializeDeleteModal();
+});

users/templates/users/user_list.html

@@ -5,6 +5,28 @@
 
 {% block content %}
 
+<!-- Delete Confirmation Modal -->
+<div id="deleteModal" class="hidden fixed inset-0 bg-slate-600 bg-opacity-50 overflow-y-auto h-full w-full z-50 flex items-center justify-center">
+    <div class="relative p-6 border border-slate-300 w-96 shadow-lg rounded-md bg-white">
+        <div class="text-center m-4">
+            <h3 class="text-2xl font-semibold text-slate-800 mt-3 mb-4">Delete User</h3>
+            <div class="mt-4 mb-6">
+                <p class="text-slate-700">
+                    Are you sure you want to delete this user? This action cannot be undone.
+                </p>
+            </div>
+            <div class="flex items-center justify-center space-x-4 mb-4">
+                <button id="cancelDelete" class="text-cyan-500 font-bold">Cancel</button>
+                <form method="post" action="." id="deleteForm">
+                    {% csrf_token %}
+                    <input type="hidden" name="action" id="deleteAction" value="">
+                    <button type="submit" class="font-bold py-2 px-4 rounded bg-red-500 text-white border-2 border-red-600 hover:bg-red-600 active:ring">Confirm</button>
+                </form>
+            </div>
+        </div>
+    </div>
+</div>
+
 <div class="flex items-center justify-center">
 
     <div class="m-4 max-w-4xl flex-auto">
@@ -25,7 +47,7 @@
             Our current invite-system is tied to either a team or a project; no "global" invites (yet).
             <div class="ml-auto mt-6">
                 <a class="font-bold text-slate-800 border-slate-500 pl-4 pr-4 pb-2 pt-2 ml-1 border-2 bg-cyan-200 hover:bg-cyan-400 active:ring rounded-md" href="{% url "team_members_invite" team_pk=team.pk %}">Invite Member</a>
-            </div> 
+            </div>
             {% endcomment %}
         </div>
 
@@ -59,9 +81,10 @@
                                 <button name="action" value="deactivate:{{ user.id }}" class="font-bold text-slate-500 border-slate-300 pl-4 pr-4 pb-2 pt-2 ml-2 border-2 hover:bg-slate-200 active:ring rounded-md">Deactivate</button>
                             {% else %}
                                 <button name="action" value="activate:{{ user.id }}" class="font-bold text-slate-500 border-slate-300 pl-4 pr-4 pb-2 pt-2 ml-2 border-2 hover:bg-slate-200 active:ring rounded-md">Activate</button>
+                                <button type="button" class="delete-button font-bold py-2 px-4 rounded bg-red-500 text-white border-2 border-red-600 hover:bg-red-600 active:ring ml-4" data-user-id="{{ user.id }}">Delete</button>
                             {% endif %}
                         {% endif %}
-                    </div> 
+                    </div>
                 </td>
 
                 </tr>
@@ -84,3 +107,10 @@
 </div>
 
 {% endblock %}
+
+{% block extra_js %}
+<script>
+    var csrftoken = '{{ csrf_token }}';
+</script>
+<script src="{% static 'js/user_list.js' %}"></script>
+{% endblock %}

users/views.py

@@ -44,6 +44,16 @@ def user_list(request):
             messages.success(request, 'User %s activated' % user.username)
             return redirect('user_list')
 
+        if action == "delete":
+            user = User.objects.get(pk=user_pk)
+            if user.is_active:
+                messages.error(request, 'Cannot delete active user %s' % user.username)
+            else:
+                username = user.username
+                user.delete()
+                messages.success(request, 'User %s deleted' % username)
+            return redirect('user_list')
+
     return render(request, 'users/user_list.html', {
         'users': users,
     })