scss refactor, DS record layout, WIP add new ds record js

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}`)
+  }
+})();

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;
+    }
+  } 
+}

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;
+}

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');
+  }
+}

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')
+}

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');
+  }
+}

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);
+}

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);
+}

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;
+    }
+  }
+}

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');
+}

src/registrar/assets/sass/_theme/_uswds-theme-custom-styles.scss

@@ -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;
-    }
-  } 
-}

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 ---------------------------------*/

src/registrar/forms/__init__.py

@@ -6,4 +6,5 @@ from .domain import (
     DomainOrgNameAddressForm,
     ContactForm,
     DomainDsdataFormset,
+    DomainDsdataForm,
 )

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
     

src/registrar/templates/domain_dsdata.html

@@ -9,28 +9,42 @@
 
   {% include "includes/required_fields.html" %}
 
-  <form class="usa-form usa-form--large" method="post" novalidate id="form-container">
+  <form class="usa-form usa-form--extra-large" method="post" novalidate id="form-container">
     {% csrf_token %}
     {{ formset.management_form }}
 
     {% for form in formset %}
-    <div class="server-form">
-    {% 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 %}
-    </div>
+    <fieldset class="ds-record">
+
+      <legend>DS Data record {{forloop.counter}}</legend>
+
+      <div class="grid-row grid-gap-2">
+        <div class="tablet:grid-col-4">
+          {% with attr_required=True %}
+            {% input_with_errors form.key_tag %}
+          {% endwith %}
+        </div>
+        <div class="tablet:grid-col-4">
+          {% with attr_required=True %}
+            {% input_with_errors form.algorithm %}
+          {% endwith %}
+        </div>
+        <div class="tablet:grid-col-4">
+          {% with attr_required=True %}
+            {% input_with_errors form.digest_type %}
+          {% endwith %}
+        </div>
+      </div>
+      {% with attr_required=True %}
+        {% input_with_errors form.digest %}
+      {% endwith %}
+
+      {% comment %} {% input_with_errors form.delete_checkbox %} {% endcomment %}
+
+    </fieldset>
     {% endfor %}
 
-    <button type="button" class="usa-button usa-button--unstyled display-block" id="add-form">
+    <button type="button" class="usa-button usa-button--unstyled display-block" id="add-form2">
       <svg class="usa-icon" aria-hidden="true" focusable="false" role="img" width="24" height="24">
         <use xlink:href="{%static 'img/sprite.svg'%}#add_circle"></use>
       </svg><span class="margin-left-05">Add new record</span>

src/registrar/views/domain.py

@@ -29,6 +29,7 @@ from ..forms import (
     DomainSecurityEmailForm,
     NameserverFormset,
     DomainDsdataFormset,
+    DomainDsdataForm,
 )
 
 from epplibwrapper import (
@@ -241,6 +242,7 @@ class DomainDsdataView(DomainPermissionView, FormMixin):
 
     template_name = "domain_dsdata.html"
     form_class = DomainDsdataFormset
+    
 
     def get_initial(self):
         """The initial value for the form (which is a formset here)."""
@@ -256,13 +258,12 @@ class DomainDsdataView(DomainPermissionView, FormMixin):
 
             if dnssecdata.dsData is not None:
                 # Add existing nameservers as initial data
-                # TODO: create context for each element in the record
-                # key_tag
-                # algorithm
-                # digest_type
-                # digest
                 initial_data.extend({"key_tag": record.keyTag, "algorithm": record.alg, "digest_type": record.digestType, "digest": record.digest} for record in dnssecdata.dsData)
 
+        # form = DomainDsdataForm()
+        # delete_checkbox = form.fields['delete']
+        # initial_data.extend({delete_checkbox: delete_checkbox})
+        
         return initial_data
 
     def get_success_url(self):