mirror of
https://github.com/cisagov/manage.get.gov.git
synced 2025-07-05 10:43:23 +02:00
Add full name functionality, fix up javascript
This commit is contained in:
zandercymatics
parent
5a60388a9c
commit
1380e748bf
8 changed files with 129 additions and 56 deletions
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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 %}
|
||||
|
|
|
|||
|
|
@ -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">
|
||||
<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>
|
||||
{% include "includes/label_with_edit_button.html" %}
|
||||
{% 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 %}
|
||||
<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 %}">
|
||||
<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>
|
||||
{% if show_readonly %}
|
||||
{% include "includes/readonly_input.html" %}
|
||||
{% 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>
|
||||
|
|
|
|||
15
src/registrar/templates/includes/label_with_edit_button.html
Normal file
15
src/registrar/templates/includes/label_with_edit_button.html
Normal file
|
|
@ -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>
|
||||
14
src/registrar/templates/includes/readonly_input.html
Normal file
14
src/registrar/templates/includes/readonly_input.html
Normal file
|
|
@ -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>
|
||||
|
|
@ -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
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue