zydronium/manage.get.gov
1
0
Fork 0
mirror of https://github.com/cisagov/manage.get.gov.git synced 2025-05-20 03:19:24 +02:00
Code Issues Projects Releases Packages Wiki Activity

Add some modals

Browse source
This commit is contained in:
zandercymatics 2024-02-29 08:58:40 -07:00
parent de17d686e3
commit f693557f93
No known key found for this signature in database
GPG key ID: FF4636ABEC9682B7
3 changed files with 162 additions and 5 deletions
Download patch file Download diff file Expand all files Collapse all files

2
src/registrar/admin.py
View file

@ -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",

87
src/registrar/templates/django/admin/domain_application_change_form.html Normal file
View file

@ -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 %}

78
src/registrar/templates/django/admin/domain_change_form.html
View file

@ -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 %}