polish JS, alg validation, polish layout

This commit is contained in:
Rachid Mrad 2023-10-03 17:26:16 -04:00
parent 84cc92cb0a
commit 150e37fe42
No known key found for this signature in database
GPG key ID: EF38E4CEC4A8F3CF
10 changed files with 134 additions and 96 deletions

View file

@ -285,53 +285,47 @@ function handleValidationClick(e) {
let newForm = serverForm2[0].cloneNode(true)
let formNumberRegex = RegExp(`form-(\\d){1}-`,'g')
let formLabelRegex = RegExp(`DS Data record (\\d){1}`, 'g')
// let formExampleRegex = RegExp(`ns(\\d){1}`, 'g')
formNum++
newForm.innerHTML = newForm.innerHTML.replace(formNumberRegex, `form-${formNum}-`)
newForm.innerHTML = newForm.innerHTML.replace(formLabelRegex, `DS Data Record ${formNum+1}`)
// newForm.innerHTML = newForm.innerHTML.replace(formExampleRegex, `ns${formNum+1}`)
container.insertBefore(newForm, addButton)
let inputs = newForm.querySelectorAll("input");
// Reset the values of each input to blank
inputs.forEach((input) => {
input.classList.remove("usa-input--error");
if (input.type === "text" || input.type === "number" || input.type === "password") {
input.value = ""; // Set the value to an empty string
} else if (input.type === "checkbox" || input.type === "radio") {
input.checked = false; // Uncheck checkboxes and radios
}
});
// Reset the values of each input to blank
inputs.forEach((input) => {
input.classList.remove("usa-input--error");
if (input.type === "text" || input.type === "number" || input.type === "password") {
input.value = ""; // Set the value to an empty string
} else if (input.type === "checkbox" || input.type === "radio") {
input.checked = false; // Uncheck checkboxes and radios
}
});
let selects = newForm.querySelectorAll("select");
selects.forEach((select) => {
select.classList.remove("usa-input--error");
select.selectedIndex = 0; // Set the value to an empty string
});
let selects = newForm.querySelectorAll("select");
let labels = newForm.querySelectorAll("label");
labels.forEach((label) => {
label.classList.remove("usa-label--error");
});
selects.forEach((select) => {
select.classList.remove("usa-input--error");
select.selectedIndex = 0; // Set the value to an empty string
});
let usaFormGroups = newForm.querySelectorAll(".usa-form-group");
usaFormGroups.forEach((usaFormGroup) => {
usaFormGroup.classList.remove("usa-form-group--error");
});
let labels = newForm.querySelectorAll("label");
labels.forEach((label) => {
label.classList.remove("usa-label--error");
});
let usaFormGroups = newForm.querySelectorAll(".usa-form-group");
usaFormGroups.forEach((usaFormGroup) => {
usaFormGroup.classList.remove("usa-form-group--error");
});
let usaErrorMessages = newForm.querySelectorAll(".usa-error-message");
usaErrorMessages.forEach((usaErrorMessage) => {
let parentDiv = usaErrorMessage.closest('div');
if (parentDiv) {
parentDiv.remove(); // Remove the parent div if it exists
}
});
let usaErrorMessages = newForm.querySelectorAll(".usa-error-message");
usaErrorMessages.forEach((usaErrorMessage) => {
let parentDiv = usaErrorMessage.closest('div');
if (parentDiv) {
parentDiv.remove(); // Remove the parent div if it exists
}
});
totalForms.setAttribute('value', `${formNum+1}`)
}

View file

@ -22,6 +22,27 @@ a.breadcrumb__back {
}
}
a.usa-button {
text-decoration: none;
}
a.usa-button--outline,
a.usa-button--outline:visited {
box-shadow: inset 0 0 0 2px color('primary');
color: color('primary');
}
a.usa-button--outline:hover,
a.usa-button--outline:focus {
box-shadow: inset 0 0 0 2px color('primary-dark');
color: color('primary-dark');
}
a.usa-button--outline:active {
box-shadow: inset 0 0 0 2px color('primary-darker');
color: color('primary-darker');
}
a.withdraw {
background-color: color('error');
}
@ -60,14 +81,14 @@ a.usa-button--unstyled:visited {
color: color('primary');
}
.dotgov-button--green {
background-color: color('success-dark');
&:hover {
background-color: color('success-darker');
}
&:active {
background-color: color('green-80v');
}
}
.dotgov-button--green {
background-color: color('success-dark');
&:hover {
background-color: color('success-darker');
}
&:active {
background-color: color('green-80v');
}
}

View file

@ -5,7 +5,6 @@ fieldset {
padding: units(3);
}
fieldset legend {
font-weight: font-weight('bold');
color: color('primary')
fieldset:not(:first-child) {
margin-top: units(2);
}

View file

@ -12,4 +12,10 @@
@include at-media('tablet') {
height: units('mobile');
}
}
.usa-form-group--unstyled-error {
margin-left: 0;
padding-left: 0;
border-left: none;
}

View file

@ -1,10 +1,19 @@
# common.py
# Q: What are the options?
# reference: https://www.iana.org/assignments/dns-sec-alg-numbers/dns-sec-alg-numbers.xhtml
ALGORITHM_CHOICES = [
(1, "ERSA/MD5 [RSAMD5]"),
(2 , "Diffie-Hellman [DH]"),
(3 ,"DSA/SHA-1 [DSA]"),
(5 ,"RSA/SHA-1 [RSASHA1]"),
(6 ,"DSA-NSEC3-SHA1"),
(7 ,"RSASHA1-NSEC3-SHA1"),
(8 ,"RSA/SHA-256 [RSASHA256]"),
(10 ,"RSA/SHA-512 [RSASHA512]"),
(12 ,"GOST R 34.10-2001 [ECC-GOST]"),
(13 ,"ECDSA Curve P-256 with SHA-256 [ECDSAP256SHA256]"),
(14 ,"ECDSA Curve P-384 with SHA-384 [ECDSAP384SHA384]"),
(15 ,"Ed25519"),
(16 ,"Ed448"),
]
# Q: What are the options?
DIGEST_TYPE_CHOICES = [

View file

@ -179,14 +179,15 @@ class DomainDsdataForm(forms.Form):
# Q: Is ChoiceFiled right? Or do we need to data types other than strings
# (TypedChoiceField)
digest_type = forms.TypedChoiceField(
required=True,
label="Digest Type",
choices=[(None, "--Select--")] + DIGEST_TYPE_CHOICES,
# Q: Is this even needed or is a required=True sufficient?
error_messages={
"required": (
"You must select a Digest Type"
)
},
# error_messages={
# "required": (
# "You must select a Digest Type"
# )
# },
)
digest = forms.CharField(
required=True,
@ -199,10 +200,10 @@ class DomainDsdataForm(forms.Form):
# ],
)
delete = forms.BooleanField(
required=False,
label="Delete",
)
# delete = forms.BooleanField(
# required=False,
# label="Delete",
# )
# TODO: Conditional DS Key Data fields
@ -249,10 +250,10 @@ class DomainKeydataForm(forms.Form):
label="Pub key",
)
delete = forms.BooleanField(
required=False,
label="Delete",
)
# delete = forms.BooleanField(
# required=False,
# label="Delete",
# )
# TODO: Conditional DS Key Data fields

View file

@ -30,7 +30,7 @@
<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"
class="usa-button usa-button--unstyled"
name="cancel"
>Cancel</button>
</p>

View file

@ -27,6 +27,8 @@
>Add DS Data record</button>
</form>
{% else %}
<p>Enter the values given by your DNS provider for DS Data.</p>
{% include "includes/required_fields.html" %}
<form class="usa-form usa-form--extra-large" method="post" novalidate id="form-container">
@ -36,21 +38,23 @@
{% for form in formset %}
<fieldset class="ds-record">
<legend>DS Data record {{forloop.counter}}</legend>
<legend class="sr-only">DS Data record {{forloop.counter}}</legend>
<h2 class="margin-top-0">DS Data record {{forloop.counter}}</h2>
<div class="grid-row grid-gap-2 flex-end">
<div class="tablet:grid-col-4">
{% with attr_required=True %}
{% with attr_required=True add_group_class="usa-form-group--unstyled-error" %}
{% input_with_errors form.key_tag %}
{% endwith %}
</div>
<div class="tablet:grid-col-4">
{% with attr_required=True %}
{% with attr_required=True add_group_class="usa-form-group--unstyled-error" %}
{% input_with_errors form.algorithm %}
{% endwith %}
</div>
<div class="tablet:grid-col-4">
{% with attr_required=True %}
{% with attr_required=True add_group_class="usa-form-group--unstyled-error" %}
{% input_with_errors form.digest_type %}
{% endwith %}
</div>
@ -58,7 +62,7 @@
<div class="grid-row">
<div class="grid-col">
{% with attr_required=True %}
{% with attr_required=True add_group_class="usa-form-group--unstyled-error" %}
{% input_with_errors form.digest %}
{% endwith %}
</div>
@ -66,9 +70,9 @@
<div class="grid-row margin-top-2">
<div class="grid-col">
{% with add_group_class="float-right-tablet" %}
{% comment %} {% with add_group_class="float-right-tablet" %}
{% input_with_errors form.delete %}
{% endwith %}
{% endwith %} {% endcomment %}
</div>
</div>

View file

@ -27,6 +27,8 @@
>Add DS Key record</button>
</form>
{% else %}
<p>Enter the values given by your DNS provider for DS Key Data.</p>
{% include "includes/required_fields.html" %}
<form class="usa-form usa-form--extra-large" method="post" novalidate id="form-container">
@ -34,23 +36,25 @@
{{ formset.management_form }}
{% for form in formset %}
<fieldset class="key-record">
<fieldset class="ds-record">
<legend>Key Data record {{forloop.counter}}</legend>
<legend class="sr-only">Key Data record {{forloop.counter}}</legend>
<h2 class="margin-top-0">DS Data record {{forloop.counter}}</h2>
<div class="grid-row grid-gap-2 flex-end">
<div class="tablet:grid-col-4">
{% with attr_required=True %}
{% with attr_required=True add_group_class="usa-form-group--unstyled-error" %}
{% input_with_errors form.flag %}
{% endwith %}
</div>
<div class="tablet:grid-col-4">
{% with attr_required=True %}
{% with attr_required=True add_group_class="usa-form-group--unstyled-error" %}
{% input_with_errors form.protocol %}
{% endwith %}
</div>
<div class="tablet:grid-col-4">
{% with attr_required=True %}
{% with attr_required=True add_group_class="usa-form-group--unstyled-error" %}
{% input_with_errors form.algorithm %}
{% endwith %}
</div>
@ -59,16 +63,16 @@
<div class="grid-row">
<div class="grid-col">
{% with attr_required=True %}
{% input_with_errors form.pub_key %}
{% input_with_errors form.pub_key add_group_class="usa-form-group--unstyled-error" %}
{% endwith %}
</div>
</div>
<div class="grid-row margin-top-2">
<div class="grid-col">
{% with add_group_class="float-right-tablet" %}
{% comment %} {% with add_group_class="float-right-tablet" %}
{% input_with_errors form.delete %}
{% endwith %}
{% endwith %} {% endcomment %}
</div>
</div>

View file

@ -336,14 +336,14 @@ class DomainDsdataView(DomainPermissionView, FormMixin):
for form in formset:
try:
if 'delete' not in form.cleaned_data or form.cleaned_data['delete'] == False:
dsrecord = {
"keyTag": form.cleaned_data["key_tag"],
"alg": form.cleaned_data["algorithm"],
"digestType": form.cleaned_data["digest_type"],
"digest": form.cleaned_data["digest"],
}
dnssecdata["dsData"].append(common.DSData(**dsrecord))
# if 'delete' not in form.cleaned_data or form.cleaned_data['delete'] == False:
dsrecord = {
"keyTag": form.cleaned_data["key_tag"],
"alg": form.cleaned_data["algorithm"],
"digestType": form.cleaned_data["digest_type"],
"digest": form.cleaned_data["digest"],
}
dnssecdata["dsData"].append(common.DSData(**dsrecord))
except KeyError:
# no server information in this field, skip it
pass
@ -428,14 +428,14 @@ class DomainKeydataView(DomainPermissionView, FormMixin):
for form in formset:
try:
if 'delete' not in form.cleaned_data or form.cleaned_data['delete'] == False:
keyrecord = {
"flags": form.cleaned_data["flag"],
"protocol": form.cleaned_data["protocol"],
"alg": form.cleaned_data["algorithm"],
"pubKey": form.cleaned_data["pub_key"],
}
dnssecdata["keyData"].append(common.DNSSECKeyData(**keyrecord))
# if 'delete' not in form.cleaned_data or form.cleaned_data['delete'] == False:
keyrecord = {
"flags": form.cleaned_data["flag"],
"protocol": form.cleaned_data["protocol"],
"alg": form.cleaned_data["algorithm"],
"pubKey": form.cleaned_data["pub_key"],
}
dnssecdata["keyData"].append(common.DNSSECKeyData(**keyrecord))
except KeyError:
# no server information in this field, skip it
pass