Add full name functionality, fix up javascript

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

@@ -841,24 +841,75 @@ function hideDeletedForms() {
  * An IIFE that hooks up the edit buttons on the finish-user-setup page
  */
 (function finishUserSetupListener() {
-  function showInputFieldHideReadonlyField(inputField, readonlyField, editButton) {
+  function showInputFieldHideReadonlyField(fieldName, button) {
-    readonlyField.classList.add('display-none');
+    let inputId = getInputFieldId(fieldName)
-    inputField.classList.remove('display-none');
+    let inputField = document.querySelector(inputId)
-    editButton.classList.add('display-none');
+
+    let readonlyId = getReadonlyFieldId(fieldName)
+    let readonlyField = document.querySelector(readonlyId)
+
+    readonlyField.classList.toggle('display-none');
+    inputField.classList.toggle('display-none');
+
+    // Toggle the bold style on the grid row
+    let formGroup = button.closest(".usa-form-group")
+    if (formGroup){
+      gridRow = button.querySelector(".grid-row")
+      if (gridRow){
+        gridRow.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
+    let fieldId = getInputFieldId(fieldName)
+    let inputField = document.querySelector(fieldId);
+
+    if (inputField) {
+      nameFields.forEach(function(fieldName) {
+        let nameId = getInputFieldId(fieldName)
+        let nameField = document.querySelector(nameId);
+        if (nameField){
+          let parentDiv = nameField.closest("div");
+          if (parentDiv) {
+            parentDiv.classList.remove("display-none");
+          }
+        }
+      });
+
+      inputFieldParentDiv = inputField.closest("div");
+      if (inputFieldParentDiv) {
+        inputFieldParentDiv.remove();
+      }
+    }
   }
 
   document.querySelectorAll('[id$="__edit-button"]').forEach(function(button) {
     let fieldIdParts = button.id.split("__")
 
     if (fieldIdParts && fieldIdParts.length > 0){
-      let fieldId = fieldIdParts[0]
+      let fieldName = fieldIdParts[0]
       button.addEventListener('click', function() {
         // Lock the edit button while this operation occurs
         button.disabled = true
 
-        inputField = document.querySelector(`#id_${fieldId}`)
+        if (fieldName == "full_name"){
-        readonlyField = document.querySelector(`#${fieldId}__edit-button-readonly`)
+          let nameFields = ["first_name", "middle_name", "last_name"]
-        showInputFieldHideReadonlyField(inputField, readonlyField, button)
+          handleFullNameField(fieldName, nameFields);
+        }else {
+          showInputFieldHideReadonlyField(fieldName, button);
+        }
+  
+        button.classList.add('display-none');
 
         // Unlock after it completes
         button.disabled = false

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

@@ -156,12 +156,16 @@ abbr[title] {
       color: red;
     }
     div.readonly-field {
-      color: red
+      color: red;
     }
   }
 }
 
-.input-with-edit-button--button {
+// We need to deviate from some default USWDS styles here
+// in this particular case, so we have to override this.
+.usa-form .usa-button.readonly-edit-button {
+  margin-top: 0px !important;
+  padding-top: 0px !important;
   svg {
     width: 1.25em !important;
     height: 1.25em !important;

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

@@ -26,20 +26,22 @@
   }
 }
 
-.usa-form--edit-button-form {
+.usa-form-readonly {
-  margin-top: 0.5em;
   // todo update
   border-top: 2px black solid;
-  label.usa-label {
+
+  .bold-usa-label label.usa-label{
     font-weight: bold;
   }
+
 }
 
-.usa-form--edit-button-form:first-of-type  {
+.usa-form-readonly:first-of-type  {
-  border-top: None
+  border-top: None;
+  margin-top: 0px !important;
 }
 
-.usa-form--edit-button-form > .usa-form-group:first-of-type {
+.usa-form-readonly > .usa-form-group:first-of-type {
   margin-top: unset;
 }
 

src/registrar/templates/finish_contact_setup.html

@@ -24,7 +24,9 @@
                 <h1>Finish setting up your profile</h1>
 
                 <p>
-                    We <a href="#">require</a> that you maintain accurate contact information.
+                    {% public_site_url 'help/account-management/#get-help-with-login.gov' %}
+                    We <a href="{% public_site_url 'domains/requirements/#what-.gov-domain-registrants-must-do' %}">require</a> 
+                    that you maintain accurate contact information.
                     The details you provide will only be used to support the administration of .gov and won’t be made public. 
                 </p>
 
@@ -44,31 +46,32 @@
                         
                         {# TODO: if an error is thrown here or edit clicked, show first last and middle fields #}
                         {# Also todo: consolidate all of the scattered classes into this usa form one #}
-                        {% with show_edit_button=True group_classes="usa-form--edit-button-form" %}
+                        {% with show_edit_button=True show_readonly=True group_classes="usa-form-readonly padding-top-2" %}
                             {% input_with_errors form.full_name %}
                         {% endwith %}
 
-                        {% with show_edit_button=True group_classes="usa-form--edit-button-form display-none" %}
+                        {% with show_edit_button=True show_readonly=True group_classes="usa-form-readonly padding-top-2 display-none" %}
                             {% input_with_errors form.first_name %}
                         {% endwith %}
 
-                        {% with show_edit_button=True group_classes="usa-form--edit-button-form display-none" %}
+                        {% with show_edit_button=True show_readonly=True group_classes="usa-form-readonly padding-top-2 display-none" %}
                             {% input_with_errors form.middle_name %}
                         {% endwith %}
 
-                        {% with show_edit_button=True group_classes="usa-form--edit-button-form display-none"%}
+                        {% with show_edit_button=True show_readonly=True group_classes="usa-form-readonly padding-top-2 display-none"%}
                             {% input_with_errors form.last_name %}
                         {% endwith %}
                         
-                        {% with show_edit_button=True group_classes="usa-form--edit-button-form" %}
+                        {# TODO: I shouldnt need to do add_class here #}
+                        {% with show_readonly=True add_class="display-none" group_classes="usa-form-readonly padding-top-2" sublabel_text=email_sublabel_text %}
                             {% input_with_errors form.email %}
                         {% endwith %}
 
-                        {% with show_edit_button=True group_classes="usa-form--edit-button-form" %}
+                        {% with show_edit_button=True show_readonly=True group_classes="usa-form-readonly padding-top-2" %}
                             {% input_with_errors form.title %}
                         {% endwith %}
 
-                        {% with show_edit_button=True group_classes="usa-form--edit-button-form" %}
+                        {% with show_edit_button=True show_readonly=True group_classes="usa-form-readonly padding-top-2" %}
                             {% with add_class="usa-input--medium" %}
                                 {% input_with_errors form.phone %}
                             {% endwith %}

src/registrar/templates/includes/input_with_errors.html

@@ -28,19 +28,7 @@ error messages, if necessary.
 
   {% if not field.widget_type == "checkbox" %}
     {% if show_edit_button %}
-      <div class="grid-row flex-align-baseline">
+      {% include "includes/label_with_edit_button.html" %}
-        <div class="grid-col">
-          {% include "django/forms/label.html" %}
-        </div>
-        <div class="grid-col-2 text-right">
-          <button type="button" id="{{field.name}}__edit-button" class="usa-button usa-button--unstyled input-with-edit-button--button">
-            <svg class="usa-icon" aria-hidden="true" focusable="false" role="img" width="24" height="24">
-              <use xlink:href="{%static 'img/sprite.svg'%}#edit"></use>
-            </svg>
-            <span>Edit</span>
-          </button>
-        </div>
-      </div>
     {% else %}
       {% include "django/forms/label.html" %}
     {% endif %}
@@ -75,25 +63,13 @@ error messages, if necessary.
     <div class="display-flex flex-align-center">
   {% endif %}
 
-  {% if show_edit_button %}
+  {% if show_readonly %}
-    <div id="{{field.name}}__edit-button-readonly" class="margin-top-1 input-with-edit-button {%if not field.value and field.field.required %}input-with-edit-button__error{% endif %}">
+    {% include "includes/readonly_input.html" %}
-      <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>
-        {%elif not field.value %}
-        <use xlink:href="{%static 'img/sprite.svg'%}#error"></use>
-        {%endif %}
-      </svg>
-      <div class="display-inline padding-left-05 margin-left-3 readonly-field">
-        {{ field.value }}
-      </div>
-    </div>
-    {# this is the input field, itself #}
-    {% include widget.template_name %}
-  {% else %}
-      {# this is the input field, itself #}
-      {% include widget.template_name %}
   {% endif %}
+
+  {# this is the input field, itself #}
+  {% include widget.template_name %}
+
   {% if append_gov %}
       <span class="padding-top-05 padding-left-2px">.gov </span>
     </div>

src/registrar/templates/includes/label_with_edit_button.html

@@ -0,0 +1,15 @@
+
+{% load static field_helpers url_helpers %}
+<div class="grid-row bold-usa-label">
+    <div class="grid-col">
+      {% include "django/forms/label.html" %}
+    </div>
+    <div class="grid-col-2 text-right">
+      <button type="button" id="{{field.name}}__edit-button" class="usa-button usa-button--unstyled readonly-edit-button">
+        <svg class="usa-icon" aria-hidden="true" focusable="false" role="img" width="24" height="24">
+          <use xlink:href="{%static 'img/sprite.svg'%}#edit"></use>
+        </svg>
+        <span>Edit</span>
+      </button>
+    </div>
+</div>

src/registrar/templates/includes/readonly_input.html

@@ -0,0 +1,14 @@
+{% 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 %}">
+    <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>
+        {%elif not field.value %}
+            <use xlink:href="{%static 'img/sprite.svg'%}#error"></use>
+        {%endif %}
+    </svg>
+    <div class="display-inline padding-left-05 margin-left-3 readonly-field">
+        {{ field.value }}
+    </div>
+</div>

src/registrar/views/contact.py

@@ -94,3 +94,11 @@ class ContactProfileSetupView(ContactFormBaseView):
         """The initial value for the form (which is a formset here)."""
         db_object = self.form_class.from_database(self.object)
         return db_object
+    
+    def get_context_data(self, **kwargs):
+        context = super().get_context_data(**kwargs)
+        context["email_sublabel_text"] = (
+            "We recommend using your work email for your .gov account. "
+            "If the wrong email is displayed below, you’ll need to update your Login.gov account "
+            "and log back in. Get help with your Login.gov account.")
+        return context