mirror of
https://github.com/cisagov/manage.get.gov.git
synced 2025-07-23 19:20:47 +02:00
add nameserver button
This commit is contained in:
Rachid Mrad
parent
5136687180
commit
6862081165
4 changed files with 198 additions and 207 deletions
|
|
@ -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
22
src/registrar/assets/src/js/getgov/form-nameservers.js
Normal 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);
|
||||||
|
}
|
||||||
|
|
@ -1,6 +1,7 @@
|
||||||
import { hookupYesNoListener, hookupRadioTogglerListener } from './radios.js';
|
import { hookupYesNoListener } from './radios.js';
|
||||||
import { initDomainValidators } from './domain-validators.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 { initializeUrbanizationToggle } from './urbanization.js';
|
||||||
import { userProfileListener, finishUserSetupListener } from './user-profile.js';
|
import { userProfileListener, finishUserSetupListener } from './user-profile.js';
|
||||||
import { handleRequestingEntityFieldset } from './requesting-entity.js';
|
import { handleRequestingEntityFieldset } from './requesting-entity.js';
|
||||||
|
|
@ -20,7 +21,7 @@ initDomainValidators();
|
||||||
|
|
||||||
initFormsetsForms();
|
initFormsetsForms();
|
||||||
triggerModalOnDsDataForm();
|
triggerModalOnDsDataForm();
|
||||||
//nameserversFormListener();
|
initFormNameservers();
|
||||||
|
|
||||||
hookupYesNoListener("other_contacts-has_other_contacts",'other-employees', 'no-other-employees');
|
hookupYesNoListener("other_contacts-has_other_contacts",'other-employees', 'no-other-employees');
|
||||||
hookupYesNoListener("additional_details-has_anything_else_text",'anything-else', null);
|
hookupYesNoListener("additional_details-has_anything_else_text",'anything-else', null);
|
||||||
|
|
|
||||||
|
|
@ -47,35 +47,183 @@
|
||||||
<!-- if initial_data is none -->
|
<!-- if initial_data is none -->
|
||||||
|
|
||||||
{% if formset.initial and formset.forms.0.initial %}
|
{% if formset.initial and formset.forms.0.initial %}
|
||||||
<form class="usa-form usa-form--extra-large nameservers-form" method="post" novalidate id="form-container">
|
<form class="usa-form usa-form--extra-large" method="post" novalidate>
|
||||||
{% csrf_token %}
|
{% csrf_token %}
|
||||||
{{ formset.management_form }}
|
{{ formset.management_form }}
|
||||||
|
|
||||||
<div class="display-none">
|
<div class="display-none nameservers-form">
|
||||||
{% for form in formset %}
|
{% for form in formset %}
|
||||||
{% if forloop.last %}
|
{% if forloop.last %}
|
||||||
<h2>Add a name server</h2>
|
<h2>Add a name server</h2>
|
||||||
|
|
||||||
{% with sublabel_text="Example: ns"|concat:forloop.counter|concat:".example.com" %}
|
{% with sublabel_text="Example: ns"|concat:forloop.counter|concat:".example.com" %}
|
||||||
{% if forloop.counter <= 2 %}
|
{% if forloop.counter <= 2 %}
|
||||||
{# span_for_text will wrap the copy in s <span>, which we'll use in the JS for this component #}
|
{# 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 %}
|
{% with attr_required=True add_group_class="usa-form-group--unstyled-error" span_for_text=True %}
|
||||||
{% input_with_errors form.server %}
|
{% input_with_errors form.server %}
|
||||||
{% endwith %}
|
|
||||||
{% else %}
|
|
||||||
{% with span_for_text=True %}
|
|
||||||
{% input_with_errors form.server %}
|
|
||||||
{% endwith %}
|
{% endwith %}
|
||||||
{% endif %}
|
{% else %}
|
||||||
{% endwith %}
|
{% 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 %}
|
{% 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 %}
|
{% input_with_errors form.ip %}
|
||||||
{% endwith %}
|
{% 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 %}
|
{% endfor %}
|
||||||
|
|
||||||
{% comment %} Work around USWDS' button margins to add some spacing between the submit and the 'add more'
|
{% 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 %}
|
This solution still works when we remove the 'add more' at 13 forms {% endcomment %}
|
||||||
<div class="margin-top-2">
|
<div class="margin-top-2">
|
||||||
|
|
@ -93,148 +241,7 @@
|
||||||
>Cancel
|
>Cancel
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</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 %}
|
{% endif %}
|
||||||
{% endblock %} {# domain_content #}
|
{% endblock %} {# domain_content #}
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue