Polishing touches

src/registrar/assets/js/get-gov.js

@@ -842,6 +842,14 @@ function hideDeletedForms() {
  */
 (function finishUserSetupListener() {
 
+  function getInputFieldId(fieldName){
+    return `#id_${fieldName}`
+  }
+
+  function getReadonlyFieldId(fieldName){
+    return `#${fieldName}__edit-button-readonly`
+  }
+
   // Shows the hidden input field and hides the readonly one
   function showInputFieldHideReadonlyField(fieldName, button) {
     let inputId = getInputFieldId(fieldName)
@@ -854,22 +862,11 @@ function hideDeletedForms() {
     inputField.classList.toggle('display-none');
 
     // Toggle the bold style on the grid row
-    let formGroup = button.closest(".usa-form-group")
+    let gridRow = button.closest(".grid-col-2").closest(".grid-row")
-    if (formGroup){
-      gridRow = button.querySelector(".grid-row")
     if (gridRow){
-        gridRow.toggle("bold-usa-label")
+      gridRow.classList.toggle("bold-usa-label")
     }
   }
-  }
-
-  function getInputFieldId(fieldName){
-    return `#id_${fieldName}`
-  }
-
-  function getReadonlyFieldId(fieldName){
-    return `#${fieldName}__edit-button-readonly`
-  }
 
   function handleFullNameField(fieldName, nameFields) {
     // Remove the display-none class from the nearest parent div
@@ -877,6 +874,7 @@ function hideDeletedForms() {
     let inputField = document.querySelector(fieldId);
 
     if (inputField) {
+      // Show each name field
       nameFields.forEach(function(fieldName) {
         let nameId = getInputFieldId(fieldName)
         let nameField = document.querySelector(nameId);
@@ -887,16 +885,29 @@ function hideDeletedForms() {
           }
         }
       });
+
+      // Remove the "full_name" field
+      inputFieldParentDiv = inputField.closest("div");
+      if (inputFieldParentDiv) {
+        inputFieldParentDiv.remove();
       }
     }
     
+  }
+
   function handleEditButtonClick(fieldName, button){
     button.addEventListener('click', function() {
       // Lock the edit button while this operation occurs
       button.disabled = true
 
+      if (fieldName == "full_name"){
+        let nameFields = ["first_name", "middle_name", "last_name"]
+        handleFullNameField(fieldName, nameFields);
+      }else {
         showInputFieldHideReadonlyField(fieldName, button);
-      button.classList.add('display-none');
+      }
+      
+      button.classList.add("display-none");
 
       // Unlock after it completes
       button.disabled = false
@@ -925,10 +936,16 @@ function hideDeletedForms() {
 
           let errorMessage = document.querySelector(`#id_${fieldName}__error-message`);
           if (errorMessage) {
-            if (fieldName == "full_name"){
             let nameFields = ["first_name", "middle_name", "last_name"]
+            // If either the full_name field errors out,
+            // or if any of its associated fields do - show all name related fields. 
+            // Otherwise, just show the problematic field.
+            if (fieldName == "full_name"){
               handleFullNameField(fieldName, nameFields);
-            }else {
+            }else if (nameFields.includes(fieldName)){
+              handleFullNameField("full_name", nameFields);
+            }
+            else {
               button.click()
             }
           }

src/registrar/assets/sass/_theme/_forms.scss

@@ -38,6 +38,10 @@
     font-weight: bold;
   }
 
+  &.bold-usa-label label.usa-label{
+    font-weight: bold;
+  }
+
 }
 
 .usa-form-readonly:first-of-type  {
@@ -62,6 +66,13 @@ legend.float-left-tablet + button.float-right-tablet {
   }
 }
 
+@media (min-width: 35em) {
+  .usa-form--largest {
+      max-width: 35rem;
+  }
+}
+
+
 // Custom style for disabled inputs
 @media (prefers-color-scheme: light) {
   .usa-input:disabled, .usa-select:disabled, .usa-textarea:disabled {

src/registrar/forms/contact.py

@@ -9,22 +9,9 @@ class ContactForm(forms.Form):
         cleaned_data = super().clean()
         # Remove the full name property
         if "full_name" in cleaned_data:
-            full_name: str = cleaned_data["full_name"]
+            # Delete the full name element as its purely decorative.
-            if full_name:
+            # We include it as a normal Charfield for all the advantages
-                name_fields = full_name.split(" ")
+            # and utility that it brings, but we're playing pretend.
-
-                
-                cleaned_data["first_name"] = name_fields[0]
-                if len(name_fields) == 2:
-                    cleaned_data["last_name"] = " ".join(name_fields[1:])
-                elif len(name_fields) > 2:
-                    cleaned_data["middle_name"] = name_fields[1]
-                    cleaned_data["last_name"] = " ".join(name_fields[2:])
-                else:
-                    cleaned_data["middle_name"] = None
-                    cleaned_data["last_name"] = None
-
-                # Delete the full name element as we don't need it anymore
             del cleaned_data["full_name"]
         return cleaned_data
 
@@ -53,6 +40,7 @@ class ContactForm(forms.Form):
     email = forms.EmailField(
         label="Organization email",
         required=False,
+        max_length=None,
     )
     phone = PhoneNumberField(
         label="Phone",

src/registrar/templates/finish_contact_setup.html

@@ -34,9 +34,9 @@
                     Review the details below and update any required information. 
                     Note that editing this information won’t affect your Login.gov account information.
                 </p>
-                {# TODO: maybe remove this? #}
+                {# We use a var called 'remove_margin_top' rather than 'add_margin_top' because most fields use this #}
-                <p>Required information is marked with an asterisk (*).</p>
+                {% include "includes/required_fields.html" with remove_margin_top=True %}
-                <form id="step__{{steps.current}}" class="usa-form usa-form--large" method="post" novalidate>
+                <form id="step__{{steps.current}}" class="usa-form usa-form--largest" method="post" novalidate>
                     {% csrf_token %}
                     <fieldset class="usa-fieldset">
                         <legend class="usa-sr-only">
@@ -61,8 +61,8 @@
                             {% input_with_errors form.last_name %}
                         {% endwith %}
                         
-                        {# TODO: I shouldnt need to do add_class here #}
+                        {# This field doesn't have the readonly button but it has common design elements from it #}
-                        {% with show_readonly=True add_class="display-none" group_classes="usa-form-readonly padding-top-2" sublabel_text=email_sublabel_text %}
+                        {% with show_readonly=True add_class="display-none" group_classes="usa-form-readonly padding-top-2 bold-usa-label" sublabel_text=email_sublabel_text %}
                             {% input_with_errors form.email %}
                         {% endwith %}
 

src/registrar/templates/includes/readonly_input.html

@@ -1,6 +1,6 @@
 {% load static field_helpers url_helpers %}
 
-<div id="{{field.name}}__edit-button-readonly" class="margin-top-1 margin-bottom-1 input-with-edit-button {%if not field.value and field.field.required %}input-with-edit-button__error{% endif %}">
+<div id="{{field.name}}__edit-button-readonly" class="margin-top-2 margin-bottom-1 input-with-edit-button {% if not field.value and field.field.required %}input-with-edit-button__error{% endif %}">
     <svg class="usa-icon" aria-hidden="true" focusable="false" role="img" width="24" height="24">
         {% if field.value or not field.field.required %}
             <use xlink:href="{%static 'img/sprite.svg'%}#check_circle"></use>
@@ -8,7 +8,7 @@
             <use xlink:href="{%static 'img/sprite.svg'%}#error"></use>
         {%endif %}
     </svg>
-    <div class="display-inline padding-left-05 margin-left-3 readonly-field">
+    <div class="display-inline padding-left-05 margin-left-3 readonly-field {% if not field.field.required %}text-base{% endif %}">
         {{ field.value }}
     </div>
 </div>

src/registrar/templates/includes/required_fields.html

@@ -1,3 +1,3 @@
-  <p class="margin-top-3">
+  <p class="{% if not remove_margin_top %}margin-top-3 {% endif %}">
     <em>Required fields are marked with an asterisk (<abbr class="usa-hint usa-hint--required" title="required">*</abbr>).</em>
   </p>