diff --git a/src/registrar/assets/js/get-gov.js b/src/registrar/assets/js/get-gov.js index 57dc6d2e3..1ffdeb1c6 100644 --- a/src/registrar/assets/js/get-gov.js +++ b/src/registrar/assets/js/get-gov.js @@ -236,14 +236,15 @@ function handleValidationClick(e) { * Only does something on a single page, but it should be fast enough to run * it everywhere. */ -(function prepareForms() { +(function prepareNameserverForms() { let serverForm = document.querySelectorAll(".server-form") let container = document.querySelector("#form-container") let addButton = document.querySelector("#add-form") let totalForms = document.querySelector("#id_form-TOTAL_FORMS") let formNum = serverForm.length-1 - addButton.addEventListener('click', addForm) + if (addButton) + addButton.addEventListener('click', addForm) function addForm(e){ let newForm = serverForm[2].cloneNode(true) @@ -261,3 +262,38 @@ function handleValidationClick(e) { totalForms.setAttribute('value', `${formNum+1}`) } })(); + + +/** + * An IIFE that attaches a click handler for our dynamic DNSSEC forms + * + */ +(function prepareDNSSECForms() { + let serverForm2 = document.querySelectorAll(".ds-record") + let container = document.querySelector("#form-container") + let addButton = document.querySelector("#add-form2") + let totalForms = document.querySelector("#id_form-TOTAL_FORMS") + + let formNum = serverForm2.length-1 + if (addButton) { + console.log('add button exists') + addButton.addEventListener('click', addForm) + } + + function addForm(e){ + console.log('add button clicked' + serverForm2) + 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) + newForm.querySelector("input").value = "" + + totalForms.setAttribute('value', `${formNum+1}`) + } +})(); diff --git a/src/registrar/assets/sass/_theme/_alerts.scss b/src/registrar/assets/sass/_theme/_alerts.scss new file mode 100644 index 000000000..077708990 --- /dev/null +++ b/src/registrar/assets/sass/_theme/_alerts.scss @@ -0,0 +1,17 @@ +// Fixes some font size disparities with the Figma +// for usa-alert alert elements +.usa-alert { + .usa-alert__heading.larger-font-sizing { + font-size: units(3); + } +} + +// The icon was off center for some reason +// Fixes that issue +@media (min-width: 64em){ + .usa-alert--warning{ + .usa-alert__body::before { + left: 1rem !important; + } + } +} \ No newline at end of file diff --git a/src/registrar/assets/sass/_theme/_base.scss b/src/registrar/assets/sass/_theme/_base.scss new file mode 100644 index 000000000..fb3b051f6 --- /dev/null +++ b/src/registrar/assets/sass/_theme/_base.scss @@ -0,0 +1,105 @@ +@use "uswds-core" as *; + +/* Styles for making visible to screen reader / AT users only. */ +.sr-only { + @include sr-only; +} + +* { + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +body { + display: flex; + flex-direction: column; + min-height: 100vh; +} + +#wrapper { + flex-grow: 1; + padding-top: units(3); + padding-bottom: units(6) * 2 ; //Workaround because USWDS units jump from 10 to 15 +} + +#wrapper.dashboard { + background-color: color('primary-lightest'); + padding-top: units(5); +} + +.usa-logo { + @include at-media(desktop) { + margin-top: units(2); + } +} + +.usa-logo__text { + @include typeset('sans', 'xl', 2); + color: color('primary-darker'); +} + +.usa-nav__primary { + margin-top: units(1); +} + +.section--outlined { + background-color: color('white'); + border: 1px solid color('base-lighter'); + border-radius: 4px; + padding: 0 units(2) units(3); + margin-top: units(3); + + h2 { + color: color('primary-dark'); + margin-top: units(2); + margin-bottom: units(2); + } + + p { + margin-bottom: 0; + } + + @include at-media(mobile-lg) { + margin-top: units(5); + + h2 { + margin-bottom: 0; + } + } +} + +.break-word { + word-break: break-word; +} + +.dotgov-status-box { + background-color: color('primary-lightest'); + border-color: color('accent-cool-lighter'); +} + +.dotgov-status-box--action-need { + background-color: color('warning-lighter'); + border-color: color('warning'); +} + +footer { + border-top: 1px solid color('primary-darker'); +} + +.usa-footer__secondary-section { + background-color: color('primary-lightest'); +} + +.usa-footer__secondary-section a { + color: color('primary'); +} + +.usa-identifier__logo { + height: units(7); +} + +abbr[title] { + // workaround for underlining abbr element + border-bottom: none; + text-decoration: none; +} \ No newline at end of file diff --git a/src/registrar/assets/sass/_theme/_buttons.scss b/src/registrar/assets/sass/_theme/_buttons.scss new file mode 100644 index 000000000..2996aa023 --- /dev/null +++ b/src/registrar/assets/sass/_theme/_buttons.scss @@ -0,0 +1,73 @@ +@use "uswds-core" as *; + +/* Make "placeholder" links visually obvious */ +a[href$="todo"]::after { + background-color: yellow; + color: color(blue-80v); + content: " [link TBD]"; + font-style: italic; +} + +a.breadcrumb__back { + display:flex; + align-items: center; + margin-bottom: units(2.5); + &:visited { + color: color('primary'); + } + + @include at-media('tablet') { + //align to top of sidebar + margin-top: units(-0.5); + } +} + +a.withdraw { + background-color: color('error'); +} + +a.withdraw_outline, +a.withdraw_outline:visited { + box-shadow: inset 0 0 0 2px color('error'); + color: color('error'); +} + +a.withdraw_outline:hover, +a.withdraw_outline:focus { + box-shadow: inset 0 0 0 2px color('error-dark'); + color: color('error-dark'); +} + +a.withdraw_outline:active { + box-shadow: inset 0 0 0 2px color('error-darker'); + color: color('error-darker'); +} + +a.withdraw:hover, +a.withdraw:focus { + background-color: color('error-dark'); +} + +a.withdraw:active { + background-color: color('error-darker'); +} + +.usa-button--unstyled .usa-icon { + vertical-align: bottom; +} + +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'); + } +} \ No newline at end of file diff --git a/src/registrar/assets/sass/_theme/_fieldsets.scss b/src/registrar/assets/sass/_theme/_fieldsets.scss new file mode 100644 index 000000000..9aab8010c --- /dev/null +++ b/src/registrar/assets/sass/_theme/_fieldsets.scss @@ -0,0 +1,11 @@ +@use "uswds-core" as *; + +fieldset { + border: solid 1px color('base-lighter'); + padding: units(3); +} + +fieldset legend { + font-weight: font-weight('bold'); + color: color('primary') +} \ No newline at end of file diff --git a/src/registrar/assets/sass/_theme/_forms.scss b/src/registrar/assets/sass/_theme/_forms.scss new file mode 100644 index 000000000..0929a5091 --- /dev/null +++ b/src/registrar/assets/sass/_theme/_forms.scss @@ -0,0 +1,15 @@ +@use "uswds-core" as *; + +.usa-form .usa-button { + margin-top: units(3); +} + +.usa-form--extra-large { + max-width: none; +} + +.usa-textarea { + @include at-media('tablet') { + height: units('mobile'); + } +} \ No newline at end of file diff --git a/src/registrar/assets/sass/_theme/_register-form.scss b/src/registrar/assets/sass/_theme/_register-form.scss new file mode 100644 index 000000000..7bf4eebf3 --- /dev/null +++ b/src/registrar/assets/sass/_theme/_register-form.scss @@ -0,0 +1,80 @@ +@use "uswds-core" as *; +@use "typography" as *; + +.register-form-step > h1 { + //align to top of sidebar on first page of the form + margin-top: units(-1); +} + + //Tighter spacing when H2 is immediatly after H1 +.register-form-step .usa-fieldset:first-of-type h2:first-of-type, +.register-form-step h1 + h2 { + margin-top: units(1); +} + +.register-form-step h3 { + color: color('primary-dark'); + letter-spacing: $letter-space--xs; + margin-top: units(3); + margin-bottom: 0; + + + p { + margin-top: units(0.5); + } +} + +.register-form-step h4 { + margin-bottom: 0; + + + p { + margin-top: units(0.5); + } +} + +.register-form-step a { + color: color('primary'); + + &:visited { + color: color('violet-70v'); //USWDS default + } +} +.register-form-step .usa-form-group:first-of-type, +.register-form-step .usa-label:first-of-type { + margin-top: units(1); +} + +.ao_example p { + margin-top: units(1); +} + +.domain_example { + p { + margin-bottom: 0; + } + + .usa-list { + margin-top: units(0.5); + } +} + +.review__step { + margin-top: units(3); +} + + .summary-item hr, +.review__step hr { + border: none; //reset + border-top: 1px solid color('primary-dark'); + margin-top: 0; + margin-bottom: units(0.5); +} + +.review__step__title a:visited { + color: color('primary'); +} + +.review__step__name { + color: color('primary-dark'); + font-weight: font-weight('semibold'); + margin-bottom: units(0.5); +} \ No newline at end of file diff --git a/src/registrar/assets/sass/_theme/_sidenav.scss b/src/registrar/assets/sass/_theme/_sidenav.scss new file mode 100644 index 000000000..c1be03a00 --- /dev/null +++ b/src/registrar/assets/sass/_theme/_sidenav.scss @@ -0,0 +1,30 @@ +@use "uswds-core" as *; + +.usa-sidenav { + .usa-sidenav__item { + span { + a.link_usa-checked { + padding: 0; + } + } + } +} + +.sidenav__step--locked { + color: color('base-darker'); + span { + display: flex; + align-items: flex-start; + padding: units(1); + + .usa-icon { + flex-shrink: 0; + //align lock body to x-height + margin: units('2px') units(1) 0 0; + } + } +} + +.stepnav { + margin-top: units(2); +} \ No newline at end of file diff --git a/src/registrar/assets/sass/_theme/_tables.scss b/src/registrar/assets/sass/_theme/_tables.scss new file mode 100644 index 000000000..947c75005 --- /dev/null +++ b/src/registrar/assets/sass/_theme/_tables.scss @@ -0,0 +1,93 @@ +@use "uswds-core" as *; + +.dotgov-table--stacked { + td, th { + padding: units(1) units(2) units(2px) 0; + border: none; + } + + tr:first-child th:first-child { + border-top: none; + } + + tr { + border-bottom: none; + border-top: 2px solid color('base-light'); + margin-top: units(2); + + &:first-child { + margin-top: 0; + } + } + + td[data-label]:before, + th[data-label]:before { + color: color('primary-darker'); + padding-bottom: units(2px); + } +} + +.dotgov-table { + width: 100%; + + a { + display: flex; + align-items: flex-start; + color: color('primary'); + + &:visited { + color: color('primary'); + } + + .usa-icon { + // align icon with x height + margin-top: units(0.5); + margin-right: units(0.5); + } + } + + th[data-sortable]:not([aria-sort]) .usa-table__header__button { + right: auto; + } + + tbody th { + word-break: break-word; + } + + @include at-media(mobile-lg) { + + margin-top: units(1); + + tr { + border: none; + } + + td, th { + border-bottom: 1px solid color('base-light'); + } + + thead th { + color: color('primary-darker'); + border-bottom: 2px solid color('base-light'); + } + + tbody tr:last-of-type { + td, th { + border-bottom: 0; + } + } + + td, th, + .usa-tabel th{ + padding: units(2) units(2) units(2) 0; + } + + th:first-of-type { + padding-left: 0; + } + + thead tr:first-child th:first-child { + border-top: none; + } + } +} \ No newline at end of file diff --git a/src/registrar/assets/sass/_theme/_typography.scss b/src/registrar/assets/sass/_theme/_typography.scss new file mode 100644 index 000000000..e13e9ee3b --- /dev/null +++ b/src/registrar/assets/sass/_theme/_typography.scss @@ -0,0 +1,24 @@ +@use "uswds-core" as *; + +// Finer grained letterspacing adjustments +$letter-space--xs: .0125em; + +p, +address, +.usa-list li { + @include typeset('sans', 'sm', 5); + max-width: measure(5); +} + +h1 { + @include typeset('sans', '2xl', 2); + margin: 0 0 units(2); + color: color('primary-darker'); +} + +h2 { + font-weight: font-weight('semibold'); + line-height: line-height('heading', 3); + margin: units(4) 0 units(1); + color: color('primary-darker'); +} \ No newline at end of file diff --git a/src/registrar/assets/sass/_theme/_uswds-theme-custom-styles.scss b/src/registrar/assets/sass/_theme/_uswds-theme-custom-styles.scss deleted file mode 100644 index e69b36bb8..000000000 --- a/src/registrar/assets/sass/_theme/_uswds-theme-custom-styles.scss +++ /dev/null @@ -1,457 +0,0 @@ -/* -* * * * * ============================== -* * * * * ============================== -* * * * * ============================== -* * * * * ============================== -======================================== -======================================== -======================================== ----------------------------------------- -USWDS THEME CUSTOM STYLES ----------------------------------------- -!! Copy this file to your project's - sass root. Don't edit the version - in node_modules. ----------------------------------------- -Custom project SASS goes here. - -i.e. -@include u-padding-right('05'); ----------------------------------------- -*/ - -// Finer grained letterspacing adjustments -$letter-space--xs: .0125em; - -@use "uswds-core" as *; - -/* Styles for making visible to screen reader / AT users only. */ -.sr-only { - @include sr-only; - } - - * { - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; -} - -body { - display: flex; - flex-direction: column; - min-height: 100vh; -} - -#wrapper { - flex-grow: 1; -} - -.usa-logo { - @include at-media(desktop) { - margin-top: units(2); - } -} - -.usa-logo__text { - @include typeset('sans', 'xl', 2); - color: color('primary-darker'); -} - -.usa-nav__primary { - margin-top: units(1); -} - -p, -address, -.usa-list li { - @include typeset('sans', 'sm', 5); - max-width: measure(5); -} - -h1 { - @include typeset('sans', '2xl', 2); - margin: 0 0 units(2); - color: color('primary-darker'); -} - -h2 { - font-weight: font-weight('semibold'); - line-height: line-height('heading', 3); - margin: units(4) 0 units(1); - color: color('primary-darker'); -} - -.register-form-step > h1 { - //align to top of sidebar on first page of the form - margin-top: units(-1); -} - - //Tighter spacing when H2 is immediatly after H1 -.register-form-step .usa-fieldset:first-of-type h2:first-of-type, -.register-form-step h1 + h2 { - margin-top: units(1); -} - -.register-form-step h3 { - color: color('primary-dark'); - letter-spacing: $letter-space--xs; - margin-top: units(3); - margin-bottom: 0; - - + p { - margin-top: units(0.5); - } -} - -.register-form-step h4 { - margin-bottom: 0; - - + p { - margin-top: units(0.5); - } -} - - -.register-form-step a { - color: color('primary'); - - &:visited { - color: color('violet-70v'); //USWDS default - } -} -.register-form-step .usa-form-group:first-of-type, -.register-form-step .usa-label:first-of-type { - margin-top: units(1); -} - -/* Make "placeholder" links visually obvious */ -a[href$="todo"]::after { - background-color: yellow; - color: color(blue-80v); - content: " [link TBD]"; - font-style: italic; -} - -a.breadcrumb__back { - display:flex; - align-items: center; - margin-bottom: units(2.5); - &:visited { - color: color('primary'); - } - - @include at-media('tablet') { - //align to top of sidebar - margin-top: units(-0.5); - } -} - -a.withdraw { - background-color: color('error'); -} - -a.withdraw_outline, -a.withdraw_outline:visited { - box-shadow: inset 0 0 0 2px color('error'); - color: color('error'); -} - -a.withdraw_outline:hover, -a.withdraw_outline:focus { - box-shadow: inset 0 0 0 2px color('error-dark'); - color: color('error-dark'); -} - -a.withdraw_outline:active { - box-shadow: inset 0 0 0 2px color('error-darker'); - color: color('error-darker'); -} -a.withdraw:hover, -a.withdraw:focus { - background-color: color('error-dark'); -} - -a.withdraw:active { - background-color: color('error-darker'); -} - -.usa-sidenav { - .usa-sidenav__item { - span { - a.link_usa-checked { - padding: 0; - } - } - } -} - -.sidenav__step--locked { - color: color('base-darker'); - span { - display: flex; - align-items: flex-start; - padding: units(1); - - .usa-icon { - flex-shrink: 0; - //align lock body to x-height - margin: units('2px') units(1) 0 0; - } - } -} - - -.stepnav { - margin-top: units(2); -} - -.ao_example p { - margin-top: units(1); -} - -.domain_example { - p { - margin-bottom: 0; - } - - .usa-list { - margin-top: units(0.5); - } -} - -.review__step { - margin-top: units(3); -} - -.summary-item hr, -.review__step hr { - border: none; //reset - border-top: 1px solid color('primary-dark'); - margin-top: 0; - margin-bottom: units(0.5); -} - -.review__step__title a:visited { - color: color('primary'); -} - -.review__step__name { - color: color('primary-dark'); - font-weight: font-weight('semibold'); - margin-bottom: units(0.5); -} - -.usa-form .usa-button { - margin-top: units(3); -} - -.usa-button--unstyled .usa-icon { - vertical-align: bottom; -} - -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'); - } -} - -/** ---- DASHBOARD ---- */ - -#wrapper.dashboard { - background-color: color('primary-lightest'); - padding-top: units(5); -} - -.section--outlined { - background-color: color('white'); - border: 1px solid color('base-lighter'); - border-radius: 4px; - padding: 0 units(2) units(3); - margin-top: units(3); - - h2 { - color: color('primary-dark'); - margin-top: units(2); - margin-bottom: units(2); - } - - p { - margin-bottom: 0; - } - - @include at-media(mobile-lg) { - margin-top: units(5); - - h2 { - margin-bottom: 0; - } - } -} - -.dotgov-table--stacked { - td, th { - padding: units(1) units(2) units(2px) 0; - border: none; - } - - tr:first-child th:first-child { - border-top: none; - } - - tr { - border-bottom: none; - border-top: 2px solid color('base-light'); - margin-top: units(2); - - &:first-child { - margin-top: 0; - } - } - - td[data-label]:before, - th[data-label]:before { - color: color('primary-darker'); - padding-bottom: units(2px); - } -} - -.dotgov-table { - width: 100%; - - a { - display: flex; - align-items: flex-start; - color: color('primary'); - - &:visited { - color: color('primary'); - } - - .usa-icon { - // align icon with x height - margin-top: units(0.5); - margin-right: units(0.5); - } - } - - th[data-sortable]:not([aria-sort]) .usa-table__header__button { - right: auto; - } - - tbody th { - word-break: break-word; - } - - - @include at-media(mobile-lg) { - - margin-top: units(1); - - tr { - border: none; - } - - td, th { - border-bottom: 1px solid color('base-light'); - } - - thead th { - color: color('primary-darker'); - border-bottom: 2px solid color('base-light'); - } - - tbody tr:last-of-type { - td, th { - border-bottom: 0; - } - } - - td, th, - .usa-tabel th{ - padding: units(2) units(2) units(2) 0; - } - - th:first-of-type { - padding-left: 0; - } - - thead tr:first-child th:first-child { - border-top: none; - } - } -} - -.break-word { - word-break: break-word; -} - -.dotgov-status-box { - background-color: color('primary-lightest'); - border-color: color('accent-cool-lighter'); -} - -.dotgov-status-box--action-need { - background-color: color('warning-lighter'); - border-color: color('warning'); -} - -#wrapper { - padding-top: units(3); - padding-bottom: units(6) * 2 ; //Workaround because USWDS units jump from 10 to 15 -} - - -footer { - border-top: 1px solid color('primary-darker'); -} - -.usa-footer__secondary-section { - background-color: color('primary-lightest'); -} - -.usa-footer__secondary-section a { - color: color('primary'); -} - -.usa-identifier__logo { - height: units(7); -} - -abbr[title] { - // workaround for underlining abbr element - border-bottom: none; - text-decoration: none; -} - -.usa-textarea { - @include at-media('tablet') { - height: units('mobile'); - } -} - -// Fixes some font size disparities with the Figma -// for usa-alert alert elements -.usa-alert { - .usa-alert__heading.larger-font-sizing { - font-size: units(3); - } -} - -// The icon was off center for some reason -// Fixes that issue -@media (min-width: 64em){ - .usa-alert--warning{ - .usa-alert__body::before { - left: 1rem !important; - } - } -} diff --git a/src/registrar/assets/sass/_theme/styles.scss b/src/registrar/assets/sass/_theme/styles.scss index 27d844760..8a2e1d2d3 100644 --- a/src/registrar/assets/sass/_theme/styles.scss +++ b/src/registrar/assets/sass/_theme/styles.scss @@ -8,7 +8,15 @@ /*-------------------------------------------------- --- Custom Styles ---------------------------------*/ -@forward "uswds-theme-custom-styles"; +@forward "base"; +@forward "typography"; +@forward "buttons"; +@forward "forms"; +@forward "fieldsets"; +@forward "alerts"; +@forward "tables"; +@forward "sidenav"; +@forward "register-form"; /*-------------------------------------------------- --- Admin ---------------------------------*/ diff --git a/src/registrar/forms/__init__.py b/src/registrar/forms/__init__.py index e889405c9..c83c1e636 100644 --- a/src/registrar/forms/__init__.py +++ b/src/registrar/forms/__init__.py @@ -6,4 +6,5 @@ from .domain import ( DomainOrgNameAddressForm, ContactForm, DomainDsdataFormset, + DomainDsdataForm, ) diff --git a/src/registrar/forms/domain.py b/src/registrar/forms/domain.py index ea74db467..9f3cd2ee1 100644 --- a/src/registrar/forms/domain.py +++ b/src/registrar/forms/domain.py @@ -209,6 +209,11 @@ class DomainDsdataForm(forms.Form): # ) # ], ) + + delete = forms.BooleanField( + required=False, + label="Delete", + ) # TODO: Conditional DS Key Data fields diff --git a/src/registrar/templates/domain_dsdata.html b/src/registrar/templates/domain_dsdata.html index 147fcde64..13e3debe8 100644 --- a/src/registrar/templates/domain_dsdata.html +++ b/src/registrar/templates/domain_dsdata.html @@ -9,28 +9,42 @@ {% include "includes/required_fields.html" %} -
+ {% csrf_token %} {{ formset.management_form }} {% for form in formset %} -
- {% with attr_required=True %} - {% input_with_errors form.key_tag %} - {% endwith %} - {% with attr_required=True %} - {% input_with_errors form.algorithm %} - {% endwith %} - {% with attr_required=True %} - {% input_with_errors form.digest_type %} - {% endwith %} - {% with attr_required=True %} - {% input_with_errors form.digest %} - {% endwith %} -
+
+ + DS Data record {{forloop.counter}} + +
+
+ {% with attr_required=True %} + {% input_with_errors form.key_tag %} + {% endwith %} +
+
+ {% with attr_required=True %} + {% input_with_errors form.algorithm %} + {% endwith %} +
+
+ {% with attr_required=True %} + {% input_with_errors form.digest_type %} + {% endwith %} +
+
+ {% with attr_required=True %} + {% input_with_errors form.digest %} + {% endwith %} + + {% comment %} {% input_with_errors form.delete_checkbox %} {% endcomment %} + +
{% endfor %} -