modal and js toggler wip

This commit is contained in:
Rachid Mrad 2023-10-05 16:29:19 -04:00
parent a9488cff4f
commit 170708ecf3
No known key found for this signature in database
GPG key ID: EF38E4CEC4A8F3CF
4 changed files with 202 additions and 41 deletions

View file

@ -469,4 +469,25 @@ function prepareDeleteButtons() {
// }
// });
// }
// })();
// })();
/**
*
*
*/
(function toggleDNSSECWarning() {
document.getElementById("toggler1").addEventListener("click", function () {
var element = document.getElementById("step-1");
var element2 = document.getElementById("step-2");
element.classList.toggle("display-none");
element2.classList.toggle("display-none");
});
document.getElementById("toggler2").addEventListener("click", function () {
var element = document.getElementById("step-1");
var element2 = document.getElementById("step-2");
element.classList.toggle("display-none");
element2.classList.toggle("display-none");
});
})();

View file

@ -11,40 +11,121 @@
<form class="usa-form usa-form--large" method="post">
{% csrf_token %}
{% if not domain.dnssec_enabled %}
<div class="usa-alert usa-alert--info usa-alert--slim margin-bottom-3">
<div class="usa-alert__body">
It is strongly recommended that you do not enable this unless you fully understand DNSSEC and know how to set it up properly. If you make a mistake, it could cause your domain name to stop working.
</div>
</div>
<button
type="submit"
class="usa-button"
name="enable_dnssec"
>Enable DNSSEC</button>
{% elif domain.dnssecdata is None %}
<h2> Add DS Records </h2>
<p>In order to enable DNSSEC and add Delegation Signer (DS) records, you must first configure it with your DNS hosting service. Your configuration will determine whether you need to add DS Data or Key Data. Contact your DNS hosting provider if you are unsure which record type to add.</p>
<p>
<a href="{% url 'domain-dns-dnssec-dsdata' pk=domain.id %}" class="usa-button usa-button--outline">Add DS Data</a>
<a href="{% url 'domain-dns-dnssec-keydata' pk=domain.id %}" class="usa-button usa-button--outline">Add Key Data</a>
<button
type="submit"
class="usa-button usa-button--unstyled"
name="cancel"
>Cancel</button>
</p>
{% else %}
{% if domain.has_dnssec_records %}
<div class="usa-alert usa-alert--info usa-alert--slim margin-bottom-3">
<div class="usa-alert__body">
In order to fully disable DNSSEC on your domain, you will need to work with your DNS provider to remove your DNSSEC-related records from your zone.
</div>
</div>
<button
type="submit"
class="usa-button"
name="disable_dnssec"
>Disable DNSSEC</button>
<a
href="#example-modal-1"
class="usa-button"
aria-controls="example-modal-1"
data-open-modal
>Disable DNSSEC</a
>
{% else %}
<div id="step-1">
<div class="usa-alert usa-alert--info usa-alert--slim margin-bottom-3">
<div class="usa-alert__body">
It is strongly recommended that you do not enable this unless you fully understand DNSSEC and know how to set it up properly. If you make a mistake, it could cause your domain name to stop working.
</div>
</div>
<button
type="button"
class="usa-button"
name="enable_dnssec"
id="toggler1"
>Enable DNSSEC</button>
</div>
<div id="step-2" class="display-none">
<h2> Add DS Records </h2>
<p>In order to enable DNSSEC and add Delegation Signer (DS) records, you must first configure it with your DNS hosting service. Your configuration will determine whether you need to add DS Data or Key Data. Contact your DNS hosting provider if you are unsure which record type to add.</p>
<p>
<a href="{% url 'domain-dns-dnssec-dsdata' pk=domain.id %}" class="usa-button usa-button--outline">Add DS Data</a>
<a href="{% url 'domain-dns-dnssec-keydata' pk=domain.id %}" class="usa-button usa-button--outline">Add Key Data</a>
<button
type="button"
class="usa-button usa-button--unstyled"
name="cancel"
id="toggler2"
>Cancel</button>
</p>
</div>
{% endif %}
</form>
<div
class="usa-modal"
id="example-modal-1"
aria-labelledby="modal-1-heading"
aria-describedby="modal-1-description"
>
{% include 'includes/modal.html' with modal_heading="Are you sure you want to continue?" modal_description="Your DNSSEC records will be deleted from the registry." modal_button=modal_button|safe %}
</div>
{% comment %} <div
class="usa-modal"
id="example-modal-1"
aria-labelledby="modal-1-heading"
aria-describedby="modal-1-description"
>
<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 continue?
</h2>
<div class="usa-prose">
<p id="modal-1-description">
Your DNSSEC records will be deleted from the registry.
</p>
</div>
<div class="usa-modal__footer">
<ul class="usa-button-group">
<li class="usa-button-group__item">
<form method="post">
{% csrf_token %}
<button
type="submit"
class="usa-button"
name="disable_dnssec"
>Disable DNSSEC</button>
</form>
</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="/assets/img/sprite.svg#close"></use>
</svg>
</button>
</div>
</div> {% endcomment %}
{% endblock %} {# domain_content #}

View file

@ -0,0 +1,42 @@
<div class="usa-modal__content">
<div class="usa-modal__main">
<h2 class="usa-modal__heading" id="modal-1-heading">
{{ modal_heading }}
</h2>
<div class="usa-prose">
<p id="modal-1-description">
{{ modal_description }}
</p>
</div>
<div class="usa-modal__footer">
<ul class="usa-button-group">
<li class="usa-button-group__item">
<form method="post">
{% csrf_token %}
{{ modal_button }}
</form>
</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="/assets/img/sprite.svg#close"></use>
</svg>
</button>
</div>

View file

@ -233,6 +233,32 @@ class DomainDNSSECView(DomainPermissionView, FormMixin):
template_name = "domain_dnssec.html"
form_class = DomainDnssecForm
clicked_enable_dns = False
def get_context_data(self, **kwargs):
context = super().get_context_data(**kwargs)
"""The initial value for the form (which is a formset here)."""
self.domain = self.get_object()
has_dnssec_records = self.domain.dnssecdata is not None
logger.debug(f"clicked_enable_dns {self.clicked_enable_dns}")
# if does_not_have_dnssec_records and self.clicked_enable_dns == False:
# logger.debug(f"clicked_enable_dns {self.clicked_enable_dns}")
# self.domain.dnssec_enabled = False
# self.domain.dnssec_ds_confirmed = False
# self.domain.dnssec_key_confirmed = False
# self.domain.save()
# Create HTML for the buttons
modal_button = '<button type="submit" class="usa-button" name="disable_dnssec">Disable DNSSEC</button>'
context['modal_button'] = modal_button
context['has_dnssec_records'] = has_dnssec_records
context['domain'] = self.domain
return context
def get_success_url(self):
"""Redirect to the DNSSEC page for the domain."""
@ -243,16 +269,8 @@ class DomainDNSSECView(DomainPermissionView, FormMixin):
"""
self.domain = self.get_object()
form = self.get_form()
if form.is_valid():
if 'enable_dnssec' in request.POST:
self.domain.dnssec_enabled = True
self.domain.save()
elif 'cancel' in request.POST:
self.domain.dnssec_enabled = False
self.domain.dnssec_ds_confirmed = False
self.domain.dnssec_key_confirmed = False
self.domain.save()
elif 'disable_dnssec' in request.POST:
if form.is_valid():
if 'disable_dnssec' in request.POST:
try:
self.domain.dnssecdata = {}
except RegistryError as err:
@ -261,7 +279,6 @@ class DomainDNSSECView(DomainPermissionView, FormMixin):
messages.error(
self.request, errmsg
)
self.domain.dnssec_enabled = False
self.domain.dnssec_ds_confirmed = False
self.domain.dnssec_key_confirmed = False
self.domain.save()