From 823dedde417794893d9b5141ff4e8a3e8a5ff296 Mon Sep 17 00:00:00 2001
From: Steve Cassidy <steve.cassidy@mq.edu.au>
Date: Tue, 17 Oct 2023 22:20:40 +1100
Subject: [PATCH] Polish up notebook delete button

Signed-off-by: Steve Cassidy <steve.cassidy@mq.edu.au>
---
 src/routes.ts              |  1 +
 views/notebooks.handlebars | 59 +++++++++++++++++++++++++++++++++-----
 2 files changed, 53 insertions(+), 7 deletions(-)

diff --git a/src/routes.ts b/src/routes.ts
index 4b9fd1d7..a34f4aba 100644
--- a/src/routes.ts
+++ b/src/routes.ts
@@ -117,6 +117,7 @@ app.get('/notebooks/', requireAuthentication, async (req, res) => {
     res.render('notebooks', {
       user: user,
       notebooks: notebooks,
+      cluster_admin: userIsClusterAdmin(user),
       developer: DEVELOPER_MODE,
     });
   } else {
diff --git a/views/notebooks.handlebars b/views/notebooks.handlebars
index 3cec79fd..062c13a1 100644
--- a/views/notebooks.handlebars
+++ b/views/notebooks.handlebars
@@ -14,9 +14,47 @@
             <td>
               <a href="/notebooks/{{this.non_unique_project_id}}">{{this.name}}</a>
             </td>
-            {{#if ../developer}}
+            {{#if ../cluster_admin}}
             <td>
-              <button class="btn btn-danger btn-sm" onclick="deleteNotebook('{{this.non_unique_project_id}}')">Delete</button>
+              <button type="button" class="btn btn-danger" 
+                      data-bs-toggle="modal" data-bs-target="#deleteNotebookModal{{this.non_unique_project_id}}">
+                Delete Notebook
+              </button>
+
+              <div class="modal fade" id="deleteNotebookModal{{this.non_unique_project_id}}" tabindex="-1" aria-labelledby="deleteNotebookModalLabel" aria-hidden="true">
+                <div class="modal-dialog">
+                  <div class="modal-content">
+                    <div class="modal-header">
+                      <h5 class="modal-title" id="deleteNotebookModalLabel{{this.non_unique_project_id}}">Delete Notebook "{{this.name}}"?</h5>
+                      <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+                    </div>
+                    <div class="modal-body">
+                        <div class="mb-3">
+                          <p>Deleting this notebook will remove all records from 
+                            the database and cannot be recovered.
+                          </p>
+                          <label for="confirmationText{{this.non_unique_project_id}}" class="form-label">
+                            Type <span class="text-danger">delete {{this.name}} and all records</span> to confirm deletion
+                          </label>
+                          <input class="form-control" 
+                                 onkeyup="updateDeleteButton('{{this.non_unique_project_id}}', '{{this.name}}')"
+                                 id="confirmationText{{this.non_unique_project_id}}">
+                        </div>
+                    </div>
+                    <div class="modal-footer">
+                      <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
+                      <button type="button"
+                              id="deleteButton{{this.non_unique_project_id}}"
+                              disabled
+                              class="btn btn-danger" 
+                              onclick="deleteNotebook('{{this.non_unique_project_id}}', '{{this.name}}')">
+                              Confirm Delete
+                      </button>
+                    </div>
+                  </div>
+                </div>
+              </div>
+
             </td>
             {{/if}}
           </tr>
@@ -58,7 +96,17 @@
 
 
 <script>
-  const deleteNotebook = (project_id) => {
+  const updateDeleteButton = (project_id, name) => {
+    const confirmationText = document.getElementById(`confirmationText${project_id}`).value;
+    if (confirmationText === `delete ${name} and all records`) {
+      document.getElementById(`deleteButton${project_id}`).disabled = false;
+    } else {
+      document.getElementById(`deleteButton${project_id}`).disabled = true;
+    }
+  }
+
+  const deleteNotebook = (project_id, name) => {
+
     fetch(`/api/notebooks/${project_id}/delete`, {
       method: 'POST',
     })
@@ -67,8 +115,7 @@
     });
   }
 
-
-  function uploadNotebookHandler(event) {
+  const uploadNotebookHandler = (event) => {
     event.preventDefault();
     const url = '/api/notebooks/';
     const form = event.target;
@@ -116,8 +163,6 @@
           return;
         }
       }
-      
-
 
     }
   }