zydronium/manage.get.gov
1
0
Fork 0
mirror of https://github.com/cisagov/manage.get.gov.git synced 2025-07-23 11:16:07 +02:00
Code Issues Projects Releases Packages Wiki Activity

add nameserver button

Browse source
This commit is contained in:
Rachid Mrad 2025-02-20 20:44:04 -05:00
parent 5136687180
commit 6862081165
No known key found for this signature in database
4 changed files with 198 additions and 207 deletions
Download patch file Download diff file Expand all files Collapse all files

39
src/registrar/assets/src/js/getgov/domain-nameservers.js
View file

@ -1,39 +0,0 @@
function addForm(e, nameServerRows){
let formspace = document.getElementsByClassName("nameservers-form");
function formTemplate(num) {
return (
`<fieldset class="usa-fieldset">
<label class="usa-label" for="given-name">Name server ${num} </label>
<div class="usa-hint" id="gnHint">Example: ns${num}.example.com</div>
<input
class="usa-input usa-input--xl"
id="given-name"
name="first-name"
aria-describedby="gnHint"
/>
</form>`
)
}
if(nameServerRows.length > 0){
for(let i = 0; i < 1; i++){
formspace.add(formTemplate(i + 1))
}
}
else{
formspace.add(formTemplate(nameServerRows.length + 1))
}
}
export function domainNameServers() {
let addButton = document.querySelector("#nameserver-add-form");
let nameServerRows = document.querySelectorAll("nameserver-row");
addButton.addEventListener('click', addForm(nameServerRows));
}
// need a listener for save and cancel to hide the form when clicked
// add function to add rows to the table after submiting form

22
src/registrar/assets/src/js/getgov/form-nameservers.js Normal file
View file

@ -0,0 +1,22 @@
import { showElement, hideElement } from './helpers';
function handleAddForm(e) {
let nameserversForm = document.querySelector('.nameservers-form');
if (!nameserversForm) {
console.warn('Expected DOM element but did not find it');
return;
}
showElement(nameserversForm);
if (e?.target) {
hideElement(e.target);
}
}
export function initFormNameservers() {
const addButton = document.getElementById('nameserver-add-form');
if (!addButton) return;
addButton.addEventListener('click', handleAddForm);
}

7
src/registrar/assets/src/js/getgov/main.js
View file

@ -1,6 +1,7 @@
import { hookupYesNoListener, hookupRadioTogglerListener } from './radios.js';
import { hookupYesNoListener } from './radios.js';
import { initDomainValidators } from './domain-validators.js';
import { initFormsetsForms, triggerModalOnDsDataForm, nameserversFormListener } from './formset-forms.js';
import { initFormsetsForms, triggerModalOnDsDataForm } from './formset-forms.js';
import { initFormNameservers } from './form-nameservers'
import { initializeUrbanizationToggle } from './urbanization.js';
import { userProfileListener, finishUserSetupListener } from './user-profile.js';
import { handleRequestingEntityFieldset } from './requesting-entity.js';
@ -20,7 +21,7 @@ initDomainValidators();
initFormsetsForms();
triggerModalOnDsDataForm();
//nameserversFormListener();
initFormNameservers();
hookupYesNoListener("other_contacts-has_other_contacts",'other-employees', 'no-other-employees');
hookupYesNoListener("additional_details-has_anything_else_text",'anything-else', null);

337
src/registrar/templates/domain_nameservers.html
View file

@ -47,35 +47,183 @@
<!-- if initial_data is none -->
{% if formset.initial and formset.forms.0.initial %}
<form class="usa-form usa-form--extra-large nameservers-form" method="post" novalidate id="form-container">
{% csrf_token %}
{{ formset.management_form }}
<form class="usa-form usa-form--extra-large" method="post" novalidate>
{% csrf_token %}
{{ formset.management_form }}
<div class="display-none">
{% for form in formset %}
{% if forloop.last %}
<h2>Add a name server</h2>
<div class="display-none nameservers-form">
{% for form in formset %}
{% if forloop.last %}
<h2>Add a name server</h2>
{% with sublabel_text="Example: ns"|concat:forloop.counter|concat:".example.com" %}
{% if forloop.counter <= 2 %}
{# span_for_text will wrap the copy in s <span>, which we'll use in the JS for this component #}
{% with attr_required=True add_group_class="usa-form-group--unstyled-error" span_for_text=True %}
{% input_with_errors form.server %}
{% endwith %}
{% else %}
{% with span_for_text=True %}
{% input_with_errors form.server %}
{% with sublabel_text="Example: ns"|concat:forloop.counter|concat:".example.com" %}
{% if forloop.counter <= 2 %}
{# span_for_text will wrap the copy in s <span>, which we'll use in the JS for this component #}
{% with attr_required=True add_group_class="usa-form-group--unstyled-error" span_for_text=True %}
{% input_with_errors form.server %}
{% endwith %}
{% endif %}
{% endwith %}
{% else %}
{% with span_for_text=True %}
{% input_with_errors form.server %}
{% endwith %}
{% endif %}
{% endwith %}
{% with label_text=form.ip.label sublabel_text="Example: 86.124.49.54 or 2001:db8::1234:5678" add_group_class="usa-form-group--unstyled-error" add_aria_label="Name server "|concat:forloop.counter|concat:" "|concat:form.ip.label %}
{% input_with_errors form.ip %}
{% endwith %}
{% with label_text=form.ip.label sublabel_text="Example: 86.124.49.54 or 2001:db8::1234:5678" add_group_class="usa-form-group--unstyled-error" add_aria_label="Name server "|concat:forloop.counter|concat:" "|concat:form.ip.label %}
{% input_with_errors form.ip %}
{% endwith %}
{% endif %}
{% endif %}
{% endfor %}
{% comment %} Work around USWDS' button margins to add some spacing between the submit and the 'add more'
This solution still works when we remove the 'add more' at 13 forms {% endcomment %}
<div class="margin-top-2">
<button
type="submit"
class="usa-button"
>Save
</button>
<button
type="submit"
class="usa-button usa-button--outline"
name="btn-cancel-click"
aria-label="Reset the data in the name server form to the registry state (undo changes)"
>Cancel
</button>
</div>
</div>
<table class="usa-table usa-table--borderless usa-table--stacked dotgov-table dotgov-table--stacked">
<caption class="sr-only">Your registered domains</caption>
<thead>
<tr>
<th scope="col" role="columnheader">Name Servers</th>
<th scope="col" role="columnheader">IP address</th>
<th scope="col" role="columnheader">Action</th>
</tr>
</thead>
<tbody>
{% for form in formset %}
{% if not forloop.last %}
<!-- Readonly row -->
<tr>
<td>{{ form.server.value }}</td>
<td>{{ form.ip.value }}</td>
<td>
<div class="tablet:display-flex tablet:flex-row">
<button class='usa-button usa-button--unstyled margin-right-2'>
<svg class="usa-icon" aria-hidden="true" focusable="false" role="img" width="24">
<use xlink:href="/public/img/sprite.svg#edit"></use>
</svg>
Edit <span class="usa-sr-only">{{ form.server }}</span>
</button>
<button
role="button"
id="button-trigger-delete-{{ form.server.value }}"
class="usa-button usa-button--unstyled text-no-underline late-loading-modal-trigger margin-top-2 line-height-sans-5 text-secondary visible-mobile-flex"
>
<svg class="usa-icon" aria-hidden="true" focusable="false" role="img" width="24">
<use xlink:href="/public/img/sprite.svg#delete"></use>
</svg>
Delete
</button>
<div class="usa-accordion usa-accordion--more-actions margin-right-2 hidden-mobile-flex">
<div class="usa-accordion__heading">
<button
type="button"
class="usa-button usa-button--unstyled usa-button--with-icon usa-accordion__button usa-button--more-actions"
aria-expanded="false"
aria-controls="more-actions-{{ form.server.value }}"
aria-label=""
>
<svg class="usa-icon top-2px" aria-hidden="true" focusable="false" role="img" width="24">
<use xlink:href="/public/img/sprite.svg#more_vert"></use>
</svg>
</button>
</div>
<div id="more-actions-{{ form.server.value }}" class="usa-accordion__content usa-prose shadow-1 left-auto right-neg-1" hidden>
<h2>More options</h2>
<button
role="button"
id="button-trigger-delete-{{ form.server.value }}"
class="usa-button usa-button--unstyled text-no-underline late-loading-modal-trigger margin-top-2 line-height-sans-5 text-secondary"
>
Delete
</button>
</div>
</div>
</div>
</td>
</tr>
<!-- Edit row -->
<tr class="display-none">
<td>{{ form.server }}</td>
<td>{{ form.ip }}</td>
<td>
<button class="usa-button usa-button--unstyled display-block">Save</button>
<button class="usa-button usa-button--unstyled display-block">Cancel</button>
<button class="usa-button usa-button--unstyled text-secondary display-block">Delete</button>
</div>
</td>
</tr>
{% endif %}
{% endfor %}
</tbody>
</table>
</form>
{% else %}
{% comment %}
No Nameservers.
We use the double-decker form
{% endcomment %}
<form class="usa-form usa-form--extra-large nameservers-form display-none" method="post" novalidate>
<h2>Add name servers</h2>
{% csrf_token %}
{{ formset.management_form }}
{% for form in formset %}
<div class="repeatable-form">
<div class="grid-row grid-gap-2 flex-end">
<div class="tablet:grid-col-5">
{% with sublabel_text="Example: ns"|concat:forloop.counter|concat:".example.com" %}
{% if forloop.counter <= 2 %}
{# span_for_text will wrap the copy in s <span>, which we'll use in the JS for this component #}
{% with attr_required=True add_group_class="usa-form-group--unstyled-error" span_for_text=True %}
{% input_with_errors form.server %}
{% endwith %}
{% else %}
{% with span_for_text=True %}
{% input_with_errors form.server %}
{% endwith %}
{% endif %}
{% endwith %}
</div>
<div class="tablet:grid-col-5">
{% with label_text=form.ip.label sublabel_text="Example: 86.124.49.54 or 2001:db8::1234:5678" add_group_class="usa-form-group--unstyled-error" add_aria_label="Name server "|concat:forloop.counter|concat:" "|concat:form.ip.label %}
{% input_with_errors form.ip %}
{% endwith %}
</div>
<div class="tablet:grid-col-2">
<button type="button" class="usa-button usa-button--unstyled usa-button--with-icon delete-record margin-bottom-075 text-secondary line-height-sans-5">
<svg class="usa-icon" aria-hidden="true" focusable="false" role="img" width="24" height="24">
<use xlink:href="{%static 'img/sprite.svg'%}#delete"></use>
</svg>Delete
<span class="sr-only">Name server {{forloop.counter}}</span>
</button>
</div>
</div>
</div>
{% endfor %}
{% comment %} Work around USWDS' button margins to add some spacing between the submit and the 'add more'
This solution still works when we remove the 'add more' at 13 forms {% endcomment %}
<div class="margin-top-2">
@ -93,148 +241,7 @@
>Cancel
</button>
</div>
</div>
</form>
<table class="usa-table usa-table--borderless usa-table--stacked dotgov-table dotgov-table--stacked">
<caption class="sr-only">Your registered domains</caption>
<thead>
<tr>
<th scope="col" role="columnheader">Name Servers</th>
<th scope="col" role="columnheader">IP address</th>
<th scope="col" role="columnheader">Action</th>
</tr>
</thead>
<tbody>
{% for form in formset %}
{% if not forloop.last %}
<!-- Readonly row -->
<tr>
<td>{{ form.server.value }}</td>
<td>{{ form.ip.value }}</td>
<td>
<div class="tablet:display-flex tablet:flex-row">
<button class='usa-button usa-button--unstyled margin-right-2'>
<svg class="usa-icon" aria-hidden="true" focusable="false" role="img" width="24">
<use xlink:href="/public/img/sprite.svg#edit"></use>
</svg>
Edit <span class="usa-sr-only">{{ form.server }}</span>
</button>
<button
role="button"
id="button-trigger-delete-{{ form.server.value }}"
class="usa-button usa-button--unstyled text-no-underline late-loading-modal-trigger margin-top-2 line-height-sans-5 text-secondary visible-mobile-flex"
>
<svg class="usa-icon" aria-hidden="true" focusable="false" role="img" width="24">
<use xlink:href="/public/img/sprite.svg#delete"></use>
</svg>
Delete
</button>
<div class="usa-accordion usa-accordion--more-actions margin-right-2 hidden-mobile-flex">
<div class="usa-accordion__heading">
<button
type="button"
class="usa-button usa-button--unstyled usa-button--with-icon usa-accordion__button usa-button--more-actions"
aria-expanded="false"
aria-controls="more-actions-{{ form.server.value }}"
aria-label=""
>
<svg class="usa-icon top-2px" aria-hidden="true" focusable="false" role="img" width="24">
<use xlink:href="/public/img/sprite.svg#more_vert"></use>
</svg>
</button>
</div>
<div id="more-actions-{{ form.server.value }}" class="usa-accordion__content usa-prose shadow-1 left-auto right-neg-1" hidden>
<h2>More options</h2>
<button
role="button"
id="button-trigger-delete-{{ form.server.value }}"
class="usa-button usa-button--unstyled text-no-underline late-loading-modal-trigger margin-top-2 line-height-sans-5 text-secondary"
>
Delete
</button>
</div>
</div>
</div>
</td>
</tr>
<!-- Edit row -->
<tr class="display-none">
<td>{{ form.server }}</td>
<td>{{ form.ip }}</td>
<td>
<button class="usa-button usa-button--unstyled display-block">Save</button>
<button class="usa-button usa-button--unstyled display-block">Cancel</button>
<button class="usa-button usa-button--unstyled text-secondary display-block">Delete</button>
</div>
</td>
</tr>
{% endif %}
{% endfor %}
</tbody>
</table>
</form>
{% else %}
<h2>Add name servers</h2>
<form class="usa-form usa-form--extra-large nameservers-form" method="post" novalidate id="form-container">
{% csrf_token %}
{{ formset.management_form }}
{% for form in formset %}
<div class="repeatable-form">
<div class="grid-row grid-gap-2 flex-end">
<div class="tablet:grid-col-5">
{% with sublabel_text="Example: ns"|concat:forloop.counter|concat:".example.com" %}
{% if forloop.counter <= 2 %}
{# span_for_text will wrap the copy in s <span>, which we'll use in the JS for this component #}
{% with attr_required=True add_group_class="usa-form-group--unstyled-error" span_for_text=True %}
{% input_with_errors form.server %}
{% endwith %}
{% else %}
{% with span_for_text=True %}
{% input_with_errors form.server %}
{% endwith %}
{% endif %}
{% endwith %}
</div>
<div class="tablet:grid-col-5">
{% with label_text=form.ip.label sublabel_text="Example: 86.124.49.54 or 2001:db8::1234:5678" add_group_class="usa-form-group--unstyled-error" add_aria_label="Name server "|concat:forloop.counter|concat:" "|concat:form.ip.label %}
{% input_with_errors form.ip %}
{% endwith %}
</div>
<div class="tablet:grid-col-2">
<button type="button" class="usa-button usa-button--unstyled usa-button--with-icon delete-record margin-bottom-075 text-secondary line-height-sans-5">
<svg class="usa-icon" aria-hidden="true" focusable="false" role="img" width="24" height="24">
<use xlink:href="{%static 'img/sprite.svg'%}#delete"></use>
</svg>Delete
<span class="sr-only">Name server {{forloop.counter}}</span>
</button>
</div>
</div>
</div>
{% endfor %}
{% comment %} Work around USWDS' button margins to add some spacing between the submit and the 'add more'
This solution still works when we remove the 'add more' at 13 forms {% endcomment %}
<div class="margin-top-2">
<button
type="submit"
class="usa-button"
>Save
</button>
<button
type="submit"
class="usa-button usa-button--outline"
name="btn-cancel-click"
aria-label="Reset the data in the name server form to the registry state (undo changes)"
>Cancel
</button>
</div>
</form>
{% endif %}
{% endblock %} {# domain_content #}