From 7164a2637c007befa332a01997486c8b19fba144 Mon Sep 17 00:00:00 2001
From: Paul Hebble <pjhebble@gmail.com>
Date: Tue, 2 Nov 2021 18:36:41 -0500
Subject: [PATCH] Make user type username to delete as in #316

---
 frontend/coffee/admin-users.coffee | 14 ++++++++++++
 templates/admin-users.html         | 36 ++++++++++++++++++++----------
 2 files changed, 38 insertions(+), 12 deletions(-)
 create mode 100644 frontend/coffee/admin-users.coffee

diff --git a/frontend/coffee/admin-users.coffee b/frontend/coffee/admin-users.coffee
new file mode 100644
index 00000000..854879f8
--- /dev/null
+++ b/frontend/coffee/admin-users.coffee
@@ -0,0 +1,14 @@
+$('.modal-confirm-delete').on 'show.bs.modal', (evt) ->
+    # Disable final Delete button on modal open
+    $(evt.target).find('input[type=submit]').prop('disabled', true)
+    # Clear username confirmation text box on modal open
+    $(evt.target).find('input[type=text]').val('')
+
+$('.modal-confirm-delete').on 'shown.bs.modal', (evt) ->
+    # Focus text box on modal open
+    $(evt.target).find('input[type=text]').focus()
+
+$('.confirm-username').on 'input', (evt) ->
+    # Enable/disable final Delete button on confirmation text box change
+    $("#btn-delete-#{evt.target.dataset.username}").prop('disabled',
+        evt.target.value != evt.target.dataset.username)
diff --git a/templates/admin-users.html b/templates/admin-users.html
index 229b56e8..4f778de2 100644
--- a/templates/admin-users.html
+++ b/templates/admin-users.html
@@ -3,6 +3,10 @@
 {{ super() }}
 <style>table td { overflow: hidden; }</style>
 {% endblock %}
+{% block scripts %}
+{{ super() }}
+<script src="/static/admin-users.js"></script>
+{% endblock %}
 {% block admin_content %}
 <div class="tab-pane active" id="users">
     <div class="container admin-container space-left-right">
@@ -44,7 +48,7 @@
                 <tr>
                     <td>
                         <a href="{{ url_for("profile.view_profile", username=user.username) }}">{{ user.username }}</a>
-                        <button data-toggle="modal" data-target="#confirm-delete-{{user.id}}" class="btn btn-danger btn-sm">Delete</button>
+                        <button data-toggle="modal" data-target="#confirm-delete-{{user.id}}" class="btn btn-danger btn-sm" data-username="{{user.username}}">Delete</button>
                     </td>
                     <td>{{ user.created.strftime("%Y-%m-%d %H:%M") }}</td>
                     <td>{{ user.public }}</td>
@@ -69,25 +73,33 @@
     </div>
 </div>
 {% for user in users %}
-    <div class="modal fade" id="confirm-delete-{{user.id}}" tabindex="-1" role="dialog" aria-labelledby="confirm-delete" aria-hidden="true">
+    <div class="modal fade modal-confirm-delete" id="confirm-delete-{{user.id}}" tabindex="-1" role="dialog" aria-labelledby="confirm-delete" aria-hidden="true">
         <div class="modal-dialog">
             <div class="modal-content">
                 <div class="modal-header">
                     <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
-                    <h4 class="modal-title" id="myModalLabel">Delete User</h4>
+                    <h4 class="modal-title">Delete User</h4>
                 </div>
-                <div class="modal-body">
-                    Are you sure you want to delete {{user.username}}?
-                    This cannot be un-done.
-                </div>
-                <div class="modal-footer">
-                    <form action="/admin/delete_user/{{ user.id }}" method="POST">
+                <form action="/admin/delete_user/{{ user.id }}" method="POST">
+                    <div class="modal-body">
+                        <p>Are you sure you want to delete <b>{{user.username}}</b>?
+                        <br>
+                        This cannot be un-done.</p>
+                        <div class="form-group">
+                            <label for="confirm-username">Username:</label>
+                            <input type="text" name="confirm-username"
+                                class="form-control confirm-username"
+                                placeholder="Enter username to confirm"
+                                data-username="{{user.username}}">
+                        </div>
+                    </div>
+                    <div class="modal-footer">
                         <a href="#" class="btn btn-default" data-dismiss="modal">Cancel</a>
-                        <input type="submit" class="btn btn-danger" value="Delete">
+                        <input type="submit" id="btn-delete-{{user.username}}" class="btn btn-danger" value="Delete" disabled>
                         <input type="hidden" name="page" value="{{page}}">
                         <input type="hidden" name="show_non_public" value="{{show_non_public}}">
-                    </form>
-                </div>
+                    </div>
+                </form>
             </div>
         </div>
     </div>