Ticket #1693: Implement "check availability" section on get.gov/domains/choosing/

_includes/content-blocks/general_domain_requirements.md

@@ -1,6 +1,6 @@
 Your domain name must:
 
-- Be available [(Check availability)](../../#domain-input)
+- Be available
 - Relate to your organization’s name, location, and/or services
 - Be clear to the general public. Your domain name must not be easily confused with other organizations.
 

_includes/layouts/info-page.html

@@ -6,17 +6,84 @@
 This template is for longer information pages
 {% endcomment %}
 
+
+{% comment %}
+Insert custom scripts for all info-pages here
+{% endcomment %}
+<script>
+    function checkDomainAvailability() {
+        // Cancel the default action
+        event.preventDefault();
+
+        const baseUrl = "https://manage.get.gov/api/v1/available/?domain="
+
+        var requested_domain = document.getElementById('domain-input').value
+
+        if (requested_domain === null || requested_domain.length === 0) {
+            render_result(``)
+        }
+
+        var searchEndpoint = new URL("", baseUrl + requested_domain);
+
+        fetch(searchEndpoint).then(function(reply) {
+            return reply.json()
+        }).then(function(response) {
+            var requested_domain_display_string = requested_domain
+                if (!requested_domain_display_string.endsWith('.gov')) {
+                    requested_domain_display_string += '.gov'
+                }
+            if (response.available) {
+                render_result(`
+                <div class="usa-alert usa-alert--success usa-alert--slim" role="alert">
+                    <div class="usa-alert__body">
+                        <p class="usa-alert__text">
+                            That domain is available!
+                            <br>
+                            <strong>We’ll try to give you the domain you want, but it's not guaranteed.</strong>
+                            <a class="usa-link" href="{{ '/domains/before/' | url }}">
+                                Read about next steps to take before requesting your .gov domain.
+                            </a>
+                        </p>
+                    </div>
+                </div>
+                `
+                )
+            } else {
+                render_result(`
+                <div class="usa-alert usa-alert--error usa-alert--slim" role="alert">
+                    <div class="usa-alert__body">
+                        <p class="usa-alert__text">
+                            ${response.message} 
+                            <a class="usa-link" href="www.whois.com/whois/${requested_domain_display_string}">
+                                Learn about this domain.
+                            </a>
+                        </p>
+                    </div>
+                </div>
+                `
+                )
+            }
+        }).catch(function(err) {
+            console.log('parsing failed', err);
+        })
+    }
+
+    function render_result(content, append = true){
+    document.getElementById('usa-search--domain_message').innerHTML = (append == true) ? content : `<div></div>`;
+    }
+</script>
+
 <div class="usa-layout-docs" >
-  <div class="grid-container margin-top-5">
-    <div class="grid-row grid-gap">
-      {% if sidenav == true %}
-        {% assign collection = collections[tags] %}
-        {% include "sidenav.html" with collection %}
-      {% endif %}
-      <main id="main-content"class="usa-layout-docs__main desktop:grid-col-9 usa-prose margin-top-neg-1">
-        <h1>{{- title -}} </h1>
-        {{ content }}
-      </main>
+    <div class="grid-container margin-top-5">
+        <div class="grid-row grid-gap">
+            {% if sidenav == true %}
+                {% assign collection = collections[tags] %}
+                {% include "sidenav.html" with collection %}
+            {% endif %}
+            <main id="main-content"class="usa-layout-docs__main desktop:grid-col-9 usa-prose margin-top-neg-1">
+                <h1>{{- title -}} </h1>
+                {{ content }}
+            </main>
+        </div>
     </div>
-  </div>
 </div>

pages/domains/domains_choosing.md

@@ -11,7 +11,45 @@ eleventyNavigation:
   title: Choosing your .gov domain name
 ---
 
-
+## Start your .gov domain search
+Check if the .gov domain you want is available. We'll work with you to find the best domain for your organization that meets our requirements. 
+<form class="usa-search usa-search--domain-choosing" role="search">
+
+  <div class="grid-row">
+    <div class="grid-col grid-col__input-grid">
+      <label class="usa-sr-only" for="domain-input">Search</label>
+      <input
+        id="domain-input" 
+        class="usa-input" 
+        type="search" 
+        aria-label="Check Domain Name input"
+        title="Check Domain input"
+      />
+      <span class="padding-left-05">.gov</span>
+    </div>
+  </div>
+
+  <div class="grid-row margin-top-2">
+    <div class="grid-col">
+		<div class="usa-search--domain_message-choosing" id="usa-search--domain_message"></div>
+    </div>
+  </div>
+
+  <div class="grid-row margin-top-2">
+    <div class="grid-col">
+      <button 
+      class="usa-button" 
+      type="submit"
+      onclick="checkDomainAvailability()"
+      onsubmit="return false"
+      aria-label="Check availability of Domain Name"
+      title="Check Domain Availability"
+      >
+        Check availability
+      </button>
+    </div>
+  </div>
+</form>
 
 ## General rules for .gov domain names
 Your domain name represents your organization and your services to the world online. Good domain names are memorable and easy to say out loud (like over the phone or in a presentation).

styles/_uswds-theme-custom-styles.scss

@@ -234,6 +234,40 @@ HOME
   }
 }
 
+// ## DOMAIN SEARCH (domains_choosing page) ---------------------------------------
+.usa-search--domain-choosing {
+  flex-direction: column;
+  // The default input styling has no styling on the right.
+  // Lets correct that.
+  input.usa-input {
+    border-right-style: solid;
+    border-right-width: 0.8px;
+    border-right-color: rgb(86, 92, 101);
+    max-width: 400px;
+    height: 36px;
+    font-size: inherit;
+  }
+
+  span {
+    line-height: 2;
+  }
+
+  button.usa-button {
+    border-top-left-radius: 4px;
+    border-bottom-left-radius: 4px;
+    height: 36px;
+  }
+
+  // todo: fix
+  /*
+  @include at-media(mobile-lg) {
+    input.usa-input {
+      max-width: 250px;
+    }
+  }
+  */
+}
+
 // ## DOMAIN SEARCH ---------------------------------------
 .usa-search--domain {
   flex-direction: column;
@@ -322,6 +356,16 @@ HOME
   line-height: 1.59rem;
 }
 
+.usa-search--domain_message-choosing {
+  max-width: 400px;
+
+  .usa-alert--success.usa-alert--slim::before {
+    height: 3.5rem;
+  }
+}
+
+
+
 .usa-search--domain_message {
   @include at-media(mobile-lg) {
     max-width: 50%;