zydronium/manage.get.gov
1
0
Fork 0
mirror of https://github.com/cisagov/manage.get.gov.git synced 2025-07-25 20:18:38 +02:00
Code Issues Projects Releases Packages Wiki Activity

design review

Browse source
This commit is contained in:
matthewswspence 2025-03-27 15:00:23 -05:00
parent 00289f5081
commit 40d893aef5
No known key found for this signature in database
GPG key ID: FB458202A7852BA4
3 changed files with 104 additions and 21 deletions
Download patch file Download diff file Expand all files Collapse all files

83
src/registrar/assets/src/js/getgov/domain-purpose-form.js
View file

@ -1,8 +1,16 @@
import { showElement } from './helpers.js';
// Flag to track if we're in the initial page load
let isInitialLoad = true;
export const domain_purpose_choice_callbacks = {
'new': {
callback: function(value, element) {
callback: function(value, element, event) {
// Only clear errors if this is a user-initiated event (not initial page load)
if (!isInitialLoad) {
clearErrors(element);
}
//show the purpose details container
showElement(element);
// change just the text inside the em tag
@ -13,29 +21,98 @@ export const domain_purpose_choice_callbacks = {
'Include any data that supports a clear public benefit or ' +
'evidence user need for this new domain. ' +
'<span class="usa-label--required">*</span>';
// Mark that we're no longer in initial load
isInitialLoad = false;
},
element: document.getElementById('purpose-details-container')
},
'redirect': {
callback: function(value, element) {
callback: function(value, element, event) {
// Only clear errors if this is a user-initiated event (not initial page load)
if (!isInitialLoad) {
clearErrors(element);
}
// show the purpose details container
showElement(element);
// change just the text inside the em tag
const labelElement = element.querySelector('.usa-label em');
labelElement.innerHTML = 'Explain why a redirect is necessary. ' +
'<span class="usa-label--required">*</span>';
// Mark that we're no longer in initial load
isInitialLoad = false;
},
element: document.getElementById('purpose-details-container')
},
'other': {
callback: function(value, element) {
callback: function(value, element, event) {
// Only clear errors if this is a user-initiated event (not initial page load)
if (!isInitialLoad) {
clearErrors(element);
}
// Show the purpose details container
showElement(element);
// change just the text inside the em tag
const labelElement = element.querySelector('.usa-label em');
labelElement.innerHTML = 'Describe how this domain will be used. ' +
'<span class="usa-label--required">*</span>';
// Mark that we're no longer in initial load
isInitialLoad = false;
},
element: document.getElementById('purpose-details-container')
}
}
// Function to check if errors are currently displayed
function checkForErrors(element) {
const errorMessage = element.querySelector('#id_purpose-purpose__error-message');
const formGroup = element.querySelector('.usa-form-group.usa-form-group--error');
// If either errors exist, set the flag to true
if (errorMessage || formGroup) {
errorsHaveBeenDisplayed = true;
}
return errorsHaveBeenDisplayed;
}
// Helper function to clear error messages in a textarea
function clearErrors(element) {
// Find the error message div
const errorMessage = element.querySelector('#id_purpose-purpose__error-message');
if (errorMessage) {
errorMessage.remove();
}
// Find the form group and remove error class
const formGroup = element.querySelector('.usa-form-group');
if (formGroup) {
formGroup.classList.remove('usa-form-group--error');
}
// Find the textarea and remove error class
const textarea = element.querySelector('#id_purpose-purpose');
if (textarea) {
textarea.classList.remove('usa-input--error');
// Also update aria attributes
textarea.setAttribute('aria-invalid', 'false');
// Remove error message from aria-describedby
const describedBy = textarea.getAttribute('aria-describedby');
if (describedBy) {
const newDescribedBy = describedBy.replace('id_purpose-purpose__error-message', '').trim();
textarea.setAttribute('aria-describedby', newDescribedBy);
}
}
// Find the label and remove error class
const label = element.querySelector('label');
if (label) {
label.classList.remove('usa-label--error');
}
}

4
src/registrar/forms/feb.py
View file

@ -12,6 +12,8 @@ class ExecutiveNamingRequirementsYesNoForm(BaseYesNoForm, BaseDeletableRegistrar
field_name = "feb_naming_requirements"
required_error_message = "Select \"Yes\" if your submission meets each domain naming requirement. Select \"No\" if it doesn't meet each requirement." # noqa: E501
@property
def form_is_checked(self):
"""
@ -26,7 +28,7 @@ class ExecutiveNamingRequirementsDetailsForm(BaseDeletableRegistrarForm):
widget=forms.Textarea(attrs={"maxlength": "2000"}),
max_length=2000,
required=True,
error_messages={"required": ("This field is required.")},
error_messages={"required": ("Provide details on why your submission does not meet each domain naming requirement.")}, # noqa: E501
validators=[
MaxLengthValidator(
2000,

38
src/registrar/templates/domain_request_dotgov_domain.html
View file

@ -2,19 +2,25 @@
{% load static field_helpers url_helpers %}
{% block form_instructions %}
<p>Before requesting a .gov domain, please make sure it meets <a class="usa-link" rel="noopener noreferrer" target="_blank" href="{% if requires_feb_questions %}https://get.gov/domains/executive-branch-guidance/{% else %}{% public_site_url 'domains/choosing' %}{% endif %}">our naming requirements</a>. Your domain name must:
<p>
Before requesting a .gov domain, please make sure it meets
{% if requires_feb_questions %}
<a class="usa-link" rel="noopener noreferrer" target="_blank" href="https://get.gov/domains/executive-branch-guidance/">our naming requirements for executive branch agencies</a>. Your domain name must:
{% else %}
<a class="usa-link" rel="noopener noreferrer" target="_blank" href="{% public_site_url 'domains/choosing' %}">our naming requirements</a>. Your domain name must:
{% endif %}
<ul class="usa-list">
<li>Be available </li>
<li>Relate to your organization's name, location, and/or services </li>
<li>Relate to your organization’s name, location, and/or services </li>
<li>Be unlikely to mislead or confuse the general public (even if your domain is only intended for a specific audience) </li>
</ul>
</p>
<p>Names that <em>uniquely apply to your organization</em> are likely to be approved over names that could also apply to other organizations.
{% if not is_federal %}In most instances, this requires including your state's two-letter abbreviation.{% endif %}</p>
{% if not is_federal %}In most instances, this requires including your state’s two-letter abbreviation.{% endif %}</p>
{% if not portfolio %}
<p>Requests for your organization's initials or an abbreviated name might not be approved, but we encourage you to request the name you want.</p>
<p>Requests for your organization’s initials or an abbreviated name might not be approved, but we encourage you to request the name you want.</p>
{% endif %}
<p>Note that <strong>only federal agencies can request generic terms</strong> like
@ -29,7 +35,7 @@
{% block form_required_fields_help_text %}
{# empty this block so it doesn't show on this page #}
{# empty this block so it doesn’t show on this page #}
{% endblock %}
@ -42,8 +48,8 @@
<h2>What .gov domain do you want?</h2>
</legend>
<p id="domain_instructions" class="margin-top-05">
After you enter your domain, we'll make sure it's available and that it meets some of our naming requirements.
If your domain passes these initial checks, we'll verify that it meets all our requirements after you complete the rest of this form.
After you enter your domain, we’ll make sure it’s available and that it meets some of our naming requirements.
If your domain passes these initial checks, we’ll verify that it meets all our requirements after you complete the rest of this form.
</p>
{% with attr_aria_labelledby="domain_instructions domain_instructions2" attr_aria_describedby="id_dotgov_domain-requested_domain--toast" %}
{# attr_validate / validate="domain" invokes code in getgov.min.js #}
@ -65,7 +71,7 @@
<h2 id="alternative-domains-title">Alternative domains (optional)</h2>
</legend>
<p id="alt_domain_instructions" class="margin-top-05">
Are there other domains you'd like if we can't give you your first choice?
Are there other domains you’d like if we can’t give you your first choice?
</p>
{% with attr_aria_labelledby="alt_domain_instructions" %}
{# Will probably want to remove blank-ok and do related cleanup when we implement delete #}
@ -99,7 +105,7 @@
>Check availability</button>
</div>
<p class="margin-top-05">
If you're not sure this is the domain you want, that's ok. You can change the domain later.
If you’re not sure this is the domain you want, that’s ok. You can change the domain later.
</p>
</fieldset>
@ -114,23 +120,21 @@
<p id="dotgov-domain-naming-requirements" class="margin-top-05">
OMB will review each request against the domain
<a class="usa-link" rel="noopener noreferrer" target="_blank" href="https://get.gov/domains/executive-branch-guidance/">
naming requirements for executive branch agencies
</a>.
Agency submissions are expected to meet each requirement.
naming requirements for executive branch agencies.</a> Agency submissions are expected to meet each requirement.
</p>
<p class="usa-label margin-top-0 margin-bottom-0">
<em>Select one. <abbr class="usa-hint usa-hint--required" title="required">*</abbr></em>
</p>
{% with add_class="usa-radio__input--tile" add_legend_class="usa-sr-only" %}
{% input_with_errors forms.2.feb_naming_requirements %}
{% endwith %}
{# Conditional Details Field – only shown when the executive naming requirements radio is "False" #}
<div id="domain-naming-requirements-details-container" class="conditional-panel" style="display: none;">
<p class="usa-label">
Provide details below <span class="usa-label--required">*</span>
</p>
<div id="domain-naming-requirements-details-container margin-top-3" class="conditional-panel" style="display: none;">
<p><em>Provide details below. <abbr class="usa-hint usa-hint--required" title="required">*</abbr></em></p>
{% with add_label_class="usa-sr-only" attr_required="required" maxlength="2000" %}
{% input_with_errors forms.3.feb_naming_requirements_details %}
{% endwith %}
<p class="usa-hint">Maximum 2000 characters allowed.</p>
</div>
</fieldset>
{% endif %}