From f693557f93eeb0d057d46a23ed80f79c4a3ea7b0 Mon Sep 17 00:00:00 2001
From: zandercymatics <141044360+zandercymatics@users.noreply.github.com>
Date: Thu, 29 Feb 2024 08:58:40 -0700
Subject: [PATCH] Add some modals

---
 src/registrar/admin.py                        |  2 +
 .../admin/domain_application_change_form.html | 87 +++++++++++++++++++
 .../django/admin/domain_change_form.html      | 78 +++++++++++++++--
 3 files changed, 162 insertions(+), 5 deletions(-)
 create mode 100644 src/registrar/templates/django/admin/domain_application_change_form.html

diff --git a/src/registrar/admin.py b/src/registrar/admin.py
index 92e477667..942ae6162 100644
--- a/src/registrar/admin.py
+++ b/src/registrar/admin.py
@@ -931,6 +931,8 @@ class DomainApplicationAdmin(ListHeaderAdmin):
             if self.value() == "0":
                 return queryset.filter(Q(is_election_board=False) | Q(is_election_board=None))
 
+    change_form_template = "django/admin/domain_application_change_form.html"
+
     # Columns
     list_display = [
         "requested_domain",
diff --git a/src/registrar/templates/django/admin/domain_application_change_form.html b/src/registrar/templates/django/admin/domain_application_change_form.html
new file mode 100644
index 000000000..26abbec18
--- /dev/null
+++ b/src/registrar/templates/django/admin/domain_application_change_form.html
@@ -0,0 +1,87 @@
+{% extends 'admin/change_form.html' %}
+{% load i18n static %}
+
+{% block submit_buttons_bottom %}
+    {% comment %}
+    Modals behave very weirdly in django admin.
+    They tend to "strip out" any injected form elements, leaving only the main form.
+    In addition, USWDS handles modals by first destroying the element, then repopulating it toward the end of the page.
+    In effect, this means that the modal is not, and cannot, be surrounded by any form element at compile time.
+
+    The current workaround for this is to use javascript to inject a hidden input, and bind submit of that
+    element to the click of the confirmation button within this modal.
+
+    This is controlled by the class `dja-form-placeholder` on the button.
+
+    In addition, the modal element MUST be placed low in the DOM. The script loads slower on DJA than on other portions
+    of the application, so this means that it will briefly "populate", causing unintended visual effects.
+    {% endcomment %}
+{# Create a modal for when a domain is marked as ineligible #}
+<div
+class="usa-modal"
+id="toggle-remove-from-registry"
+aria-labelledby="Are you sure you want to select ineligible status?"
+aria-describedby="This domain will be removed."
+>
+    <div class="usa-modal__content">
+        <div class="usa-modal__main">
+            <h2 class="usa-modal__heading" id="modal-1-heading">
+                Are you sure you want to select ineligible status?
+            </h2>
+            <div class="usa-prose">
+                <p>
+                    When a domain request is in ineligible status, the registrant's permissions within the registrar are restricted as follows: 
+                </p>
+                <ul>
+                    <li>They cannot edit the ineligible request or any other pending requests.</li>
+                    <li>They cannot manage any of their approved domains.</li>
+                    <li>They cannot initiate a new domain request.</li>
+                </ul>
+                <p>
+                    This action can be reversed, if needed.
+                </p>
+                <p>
+                    {# Acts as a <br> #}
+                    <div class="display-inline"></div>
+                    Domain: <b>{{ original.name }}</b>
+                    New status: <b>{{ original.State }}</b>
+                </p>
+            </div>
+
+            <div class="usa-modal__footer">
+                <ul class="usa-button-group">
+                    <li class="usa-button-group__item">
+                        <button
+                        type="submit" 
+                        class="usa-button dja-form-placeholder" 
+                        name="_delete_domain"
+                        >
+                            Yes, remove from registry
+                        </button>
+                    </li>
+                    <li class="usa-button-group__item">
+                        <button
+                        type="button"
+                        class="usa-button usa-button--unstyled padding-105 text-center"
+                        data-close-modal
+                        >
+                            Cancel
+                        </button>
+                    </li>
+                </ul>
+            </div>
+        </div>
+        <button
+        type="button"
+        class="usa-button usa-modal__close"
+        aria-label="Close this window"
+        data-close-modal
+        >
+            <svg class="usa-icon" aria-hidden="true" focusable="false" role="img">
+                <use xlink:href="{%static 'img/sprite.svg'%}#close"></use>
+            </svg>
+        </button>
+    </div>
+</div>
+{{ block.super }}
+{% endblock %}
\ No newline at end of file
diff --git a/src/registrar/templates/django/admin/domain_change_form.html b/src/registrar/templates/django/admin/domain_change_form.html
index e38583eb8..9d7b1d5de 100644
--- a/src/registrar/templates/django/admin/domain_change_form.html
+++ b/src/registrar/templates/django/admin/domain_change_form.html
@@ -27,7 +27,9 @@
             <span class="margin-left-05 margin-right-05 text-middle"> | </span>
             {% endif %}
             {% if original.state != original.State.DELETED %}
-            <input type="submit" value="Remove from registry" name="_delete_domain" class="custom-link-button">
+            <a class="text-middle" href="#toggle-remove-from-registry" aria-controls="toggle-remove-from-registry" data-open-modal>
+                Remove from registry
+            </a>
         {% endif %}
         </div>
     </div>
@@ -118,8 +120,8 @@
     <div
     class="usa-modal"
     id="toggle-place-on-hold"
-    aria-labelledby="Are you sure you want to extend the expiration date?"
-    aria-describedby="This expiration date will be extended."
+    aria-labelledby="Are you sure you want to place this domain on hold?"
+    aria-describedby="This domain will be put on hold"
     >
         <div class="usa-modal__content">
             <div class="usa-modal__main">
@@ -131,7 +133,7 @@
                         When a domain is on hold:
                     </p>
                     <ul>
-                        <li>The domain (and any subdomains) won’t resolve in DNS. Any infrastructure (like websites) will go offline.</li>
+                        <li>The domain and its subdomains won’t resolve in DNS. Any infrastructure (like websites) will go offline.</li>
                         <li>The domain will still appear in the registrar / admin.</li>
                         <li>Domain managers won’t be able to edit the domain.</li>
                     </ul>
@@ -181,6 +183,72 @@
             </button>
         </div>
     </div>
-    {# Create a modal for when a domain is marked as ineligible #}
+    {# Create a modal for the _remove_domain button #}
+    <div
+    class="usa-modal"
+    id="toggle-remove-from-registry"
+    aria-labelledby="Are you sure you want to remove this domain from the registry?"
+    aria-describedby="This domain will be removed."
+    >
+        <div class="usa-modal__content">
+            <div class="usa-modal__main">
+                <h2 class="usa-modal__heading" id="modal-1-heading">
+                    Are you sure you want to remove this domain from the registry?
+                </h2>
+                <div class="usa-prose">
+                    <p>
+                        When a domain is removed from the registry:
+                    </p>
+                    <ul>
+                        <li>The domain and its subdomains won’t resolve in DNS. Any infrastructure (like websites) will go offline.</li>
+                        <li>The domain will still appear in the registrar / admin.</li>
+                        <li>Domain managers won’t be able to edit the domain.</li>
+                    </ul>
+                    <p>
+                        This action cannot be undone.
+                    </p>
+                    <p>
+                        {# Acts as a <br> #}
+                        <div class="display-inline"></div>
+                        Domain: <b>{{ original.name }}</b>
+                        New status: <b>{{ original.State.DELETED }}</b>
+                    </p>
+                </div>
+
+                <div class="usa-modal__footer">
+                    <ul class="usa-button-group">
+                        <li class="usa-button-group__item">
+                            <button
+                            type="submit" 
+                            class="usa-button dja-form-placeholder" 
+                            name="_delete_domain"
+                            >
+                                Yes, remove from registry
+                            </button>
+                        </li>
+                        <li class="usa-button-group__item">
+                            <button
+                            type="button"
+                            class="usa-button usa-button--unstyled padding-105 text-center"
+                            data-close-modal
+                            >
+                                Cancel
+                            </button>
+                        </li>
+                    </ul>
+                </div>
+            </div>
+            <button
+            type="button"
+            class="usa-button usa-modal__close"
+            aria-label="Close this window"
+            data-close-modal
+            >
+                <svg class="usa-icon" aria-hidden="true" focusable="false" role="img">
+                    <use xlink:href="{%static 'img/sprite.svg'%}#close"></use>
+                </svg>
+            </button>
+        </div>
+    </div>
 {{ block.super }}
 {% endblock %}
\ No newline at end of file