From 1380e748bf1a9ebe788fb22a342d067b2dd9d95e Mon Sep 17 00:00:00 2001 From: zandercymatics <141044360+zandercymatics@users.noreply.github.com> Date: Fri, 10 May 2024 15:05:10 -0600 Subject: [PATCH] Add full name functionality, fix up javascript --- src/registrar/assets/js/get-gov.js | 67 ++++++++++++++++--- src/registrar/assets/sass/_theme/_base.scss | 8 ++- src/registrar/assets/sass/_theme/_forms.scss | 14 ++-- .../templates/finish_contact_setup.html | 21 +++--- .../templates/includes/input_with_errors.html | 38 ++--------- .../includes/label_with_edit_button.html | 15 +++++ .../templates/includes/readonly_input.html | 14 ++++ src/registrar/views/contact.py | 8 +++ 8 files changed, 129 insertions(+), 56 deletions(-) create mode 100644 src/registrar/templates/includes/label_with_edit_button.html create mode 100644 src/registrar/templates/includes/readonly_input.html diff --git a/src/registrar/assets/js/get-gov.js b/src/registrar/assets/js/get-gov.js index 6aaca61a9..18ab1ebce 100644 --- a/src/registrar/assets/js/get-gov.js +++ b/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) { - readonlyField.classList.add('display-none'); - inputField.classList.remove('display-none'); - editButton.classList.add('display-none'); + function showInputFieldHideReadonlyField(fieldName, button) { + let inputId = getInputFieldId(fieldName) + let inputField = document.querySelector(inputId) + + 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}`) - readonlyField = document.querySelector(`#${fieldId}__edit-button-readonly`) - showInputFieldHideReadonlyField(inputField, readonlyField, button) + if (fieldName == "full_name"){ + let nameFields = ["first_name", "middle_name", "last_name"] + handleFullNameField(fieldName, nameFields); + }else { + showInputFieldHideReadonlyField(fieldName, button); + } + + button.classList.add('display-none'); // Unlock after it completes button.disabled = false diff --git a/src/registrar/assets/sass/_theme/_base.scss b/src/registrar/assets/sass/_theme/_base.scss index 7677c8ffe..bfdd99fc2 100644 --- a/src/registrar/assets/sass/_theme/_base.scss +++ b/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; diff --git a/src/registrar/assets/sass/_theme/_forms.scss b/src/registrar/assets/sass/_theme/_forms.scss index 2766f596c..bf1f81113 100644 --- a/src/registrar/assets/sass/_theme/_forms.scss +++ b/src/registrar/assets/sass/_theme/_forms.scss @@ -26,20 +26,22 @@ } } -.usa-form--edit-button-form { - margin-top: 0.5em; +.usa-form-readonly { // 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 { - border-top: None +.usa-form-readonly:first-of-type { + 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; } diff --git a/src/registrar/templates/finish_contact_setup.html b/src/registrar/templates/finish_contact_setup.html index 4892a64b7..39429d4eb 100644 --- a/src/registrar/templates/finish_contact_setup.html +++ b/src/registrar/templates/finish_contact_setup.html @@ -24,7 +24,9 @@

Finish setting up your profile

- We require that you maintain accurate contact information. + {% public_site_url 'help/account-management/#get-help-with-login.gov' %} + We require + 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.

@@ -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 %} diff --git a/src/registrar/templates/includes/input_with_errors.html b/src/registrar/templates/includes/input_with_errors.html index d1dc38bc3..43e90dca6 100644 --- a/src/registrar/templates/includes/input_with_errors.html +++ b/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 %} -
-
- {% include "django/forms/label.html" %} -
-
- -
-
+ {% include "includes/label_with_edit_button.html" %} {% else %} {% include "django/forms/label.html" %} {% endif %} @@ -75,25 +63,13 @@ error messages, if necessary.
{% endif %} - {% if show_edit_button %} -
- -
- {{ field.value }} -
-
- {# this is the input field, itself #} - {% include widget.template_name %} - {% else %} - {# this is the input field, itself #} - {% include widget.template_name %} + {% if show_readonly %} + {% include "includes/readonly_input.html" %} {% endif %} + + {# this is the input field, itself #} + {% include widget.template_name %} + {% if append_gov %} .gov
diff --git a/src/registrar/templates/includes/label_with_edit_button.html b/src/registrar/templates/includes/label_with_edit_button.html new file mode 100644 index 000000000..bbff26400 --- /dev/null +++ b/src/registrar/templates/includes/label_with_edit_button.html @@ -0,0 +1,15 @@ + +{% load static field_helpers url_helpers %} +
+
+ {% include "django/forms/label.html" %} +
+
+ +
+
\ No newline at end of file diff --git a/src/registrar/templates/includes/readonly_input.html b/src/registrar/templates/includes/readonly_input.html new file mode 100644 index 000000000..820d4b66c --- /dev/null +++ b/src/registrar/templates/includes/readonly_input.html @@ -0,0 +1,14 @@ +{% load static field_helpers url_helpers %} + +
+ +
+ {{ field.value }} +
+
diff --git a/src/registrar/views/contact.py b/src/registrar/views/contact.py index 3c269587b..f70f59a26 100644 --- a/src/registrar/views/contact.py +++ b/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