From 32c138032bf20cad5f51bf458d07bbd743394ae2 Mon Sep 17 00:00:00 2001
From: zandercymatics <141044360+zandercymatics@users.noreply.github.com>
Date: Wed, 3 Jan 2024 15:11:42 -0700
Subject: [PATCH] Rough mock

---
 src/registrar/assets/sass/_theme/_tables.scss |  4 ++++
 src/registrar/templates/domain_users.html     | 23 +++++++++++++++++++
 src/registrar/views/domain.py                 | 15 ++++++++++++
 3 files changed, 42 insertions(+)

diff --git a/src/registrar/assets/sass/_theme/_tables.scss b/src/registrar/assets/sass/_theme/_tables.scss
index 6dcc6f3bc..892427f82 100644
--- a/src/registrar/assets/sass/_theme/_tables.scss
+++ b/src/registrar/assets/sass/_theme/_tables.scss
@@ -25,6 +25,10 @@
     color: color('primary-darker');
     padding-bottom: units(2px);
   }
+  td.shift-action-button {
+    padding-right: 0;
+    transform: translateX(10px);
+  }
 }
 
 .dotgov-table {
diff --git a/src/registrar/templates/domain_users.html b/src/registrar/templates/domain_users.html
index 0eecd35b3..147c0bb8e 100644
--- a/src/registrar/templates/domain_users.html
+++ b/src/registrar/templates/domain_users.html
@@ -31,6 +31,7 @@
       <tr>
         <th data-sortable scope="col" role="columnheader">Email</th>
         <th data-sortable scope="col" role="columnheader">Role</th>
+        <th scope="col" role="columnheader"><span class="sr-only">Action</span></th>
       </tr>
     </thead>
     <tbody>
@@ -40,6 +41,28 @@
           {{ permission.user.email }}
         </th>
         <td data-label="Role">{{ permission.role|title }}</td>
+        <td class="shift-action-button">
+          <a
+          id="button-toggle-user-alert-{{ forloop.counter }}"
+          href="#toggle-user-alert-{{ forloop.counter }}"
+          class="usa-button--unstyled"
+          aria-controls="toggle-user-alert-{{ forloop.counter }}"
+          data-open-modal
+          >Remove</a
+        >
+        {# Use data-force-action to take esc out of the equation and pass cancel_button_resets_ds_form to effectuate a reset in the view #}
+        <div
+          class="usa-modal"
+          id="toggle-user-alert-{{ forloop.counter }}"
+          aria-labelledby="Are you sure you want to continue?"
+          aria-describedby="Your DNSSEC records will be deleted from the registry."
+          data-force-action
+        >
+          <form method="POST" action="{% url "invitation-delete" pk=permission.user.id %}">
+            {% include 'includes/modal.html' with modal_heading="Warning: You are about to remove all DS records on your domain" modal_description="To fully disable DNSSEC: In addition to removing your DS records here you’ll also need to delete the DS records at your DNS host. To avoid causing your domain to appear offline you should wait to delete your DS records at your DNS host until the Time to Live (TTL) expires. This is often less than 24 hours, but confirm with your provider." modal_button=modal_button|safe %}
+          </form>
+        </div>
+        </td>
       </tr>
       {% endfor %}
     </tbody>
diff --git a/src/registrar/views/domain.py b/src/registrar/views/domain.py
index 59b206993..aaad016a7 100644
--- a/src/registrar/views/domain.py
+++ b/src/registrar/views/domain.py
@@ -625,6 +625,21 @@ class DomainUsersView(DomainBaseView):
 
     template_name = "domain_users.html"
 
+    def get_context_data(self, **kwargs):
+        """The initial value for the form (which is a formset here)."""
+        context = super().get_context_data(**kwargs)
+
+        # Create HTML for the modal button
+        modal_button = (
+            '<button type="submit" '
+            'class="usa-button usa-button--secondary" '
+            'name="disable_dnssec">Confirm</button>'
+        )
+
+        context["modal_button"] = modal_button
+
+        return context
+
 
 class DomainAddUserView(DomainFormBaseView):
     """Inside of a domain's user management, a form for adding users.