Template logic

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

@@ -140,3 +140,20 @@ abbr[title] {
 .cursor-pointer {
   cursor: pointer;
 }
+
+.input-with-edit-button {
+  svg.usa-icon {
+    width: 1.5em !important;
+    height: 1.5em !important;
+    // TODO CHANGE
+    color: green;
+    position: absolute;
+  }
+  &.input-with-edit-button__error {
+    // TODO CHANGE
+    svg.usa-icon {
+      color: red;
+    }
+  }
+
+}

src/registrar/forms/contact.py

@@ -44,15 +44,9 @@ class ContactForm(forms.Form):
         },
     )
     email = forms.EmailField(
-        label="Email",
+        label="Organization email",
         max_length=None,
-        error_messages={"invalid": ("Enter your email address in the required format, like name@example.com.")},
+        required=False,
-        validators=[
-            MaxLengthValidator(
-                320,
-                message="Response must be less than 320 characters.",
-            )
-        ],
     )
     phone = PhoneNumberField(
         label="Phone",

src/registrar/templates/finish_contact_setup.html

@@ -41,22 +41,32 @@
                         <legend class="usa-sr-only">
                             Your contact information
                         </legend>
-                        {{form.first_name}}
                         
+                        {% with show_edit_button=True %}
                             {% input_with_errors form.first_name %}
+                        {% endwith %}
 
+                        {% with show_edit_button=True %}
                             {% input_with_errors form.middle_name %}
+                        {% endwith %}
 
+                        {% with show_edit_button=True %}
                             {% input_with_errors form.last_name %}
+                        {% endwith %}
 
-                        {% input_with_errors form.title %}
+                        {% with show_edit_button=True %}
-                    
                             {% input_with_errors form.email %}
+                        {% endwith %}
 
+                        {% with show_edit_button=True %}
+                            {% input_with_errors form.title %}
+                        {% endwith %}
+
+                        {% with show_edit_button=True %}
                             {% with add_class="usa-input--medium" %}
                                 {% input_with_errors form.phone %}
                             {% endwith %}
-
+                        {% endwith %}
 
                     </fieldset>
                     <div>

src/registrar/templates/includes/input_with_errors.html

@@ -2,7 +2,7 @@
 Template include for form fields with classes and their corresponding
 error messages, if necessary.
 {% endcomment %}
-
+{% load static field_helpers url_helpers %}
 {% load custom_filters %}
 
 {% load widget_tweaks %}
@@ -27,7 +27,18 @@ error messages, if necessary.
 {% endif %}
 
   {% if not field.widget_type == "checkbox" %}
+    {% if show_edit_button %}
+      <div class="grid-row flex-align-baseline">
+        <div class="grid-col">
           {% include "django/forms/label.html" %}
+        </div>
+        <div class="grid-col">
+          <button type="button" class="usa-button usa-button--unstyled">Edit</button>
+        </div>
+      </div>
+    {% else %}
+      {% include "django/forms/label.html" %}
+    {% endif %}
   {% endif %}
 
   {% if sublabel_text %}
@@ -58,9 +69,26 @@ error messages, if necessary.
   {% if append_gov %}
     <div class="display-flex flex-align-center">
   {% endif %}
+
+  {% if show_edit_button %}
+    <div id="{{field.name}}__edit-button-value" class="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>
     {# this is the input field, itself #}
     {% include widget.template_name %}
-
+  {% else %}
+      {# this is the input field, itself #}
+      {% include widget.template_name %}
+  {% endif %}
   {% if append_gov %}
       <span class="padding-top-05 padding-left-2px">.gov </span>
     </div>

src/registrar/templatetags/field_helpers.py

@@ -26,6 +26,7 @@ def input_with_errors(context, field=None):  # noqa: C901
         add_group_class: append to input element's surrounding tag's `class` attribute
         attr_* - adds or replaces any single html attribute for the input
         add_error_attr_* - like `attr_*` but only if field.errors is not empty
+        show_edit_button: shows a simple edit button, and adds display-none to the input field.
 
     Example usage:
         ```
@@ -91,6 +92,14 @@ def input_with_errors(context, field=None):  # noqa: C901
         elif key == "add_group_class":
             group_classes.append(value)
 
+        elif key == "show_edit_button":
+            # Hide the primary input field.
+            # Used such that we can toggle it with JS
+            if "display-none" not in classes and isinstance(value, bool) and value:
+                classes.append("display-none")
+            # Set this as a context value so we know what we're going to display
+            context["show_edit_button"] = value
+
     attrs["id"] = field.auto_id
 
     # do some work for various edge cases