Merge branch 'master' into ui/tooltips

templates/base.html

@@ -36,6 +36,11 @@
 
     {% include 'footer.html' %}
     {% block modal %}{% endblock %}
+
+    {% if g.modal %}
+      <div data-modal="{{ g.modal }}" id="modalOpen">
+      </div>
+    {% endif %}
   </div>
 
   {% assets "js_all" %}

templates/components/alert.html

@@ -1,6 +1,6 @@
 {% from "components/icon.html" import Icon %}
 
-{% macro Alert(title, message=None, actions=None, level='info') -%}
+{% macro Alert(title, message=None, actions=None, level='info', fragment=None) -%}
   {% set role = 'alertdialog' if actions else 'alert' %}
   {% set levels = {
     'warning': {
@@ -31,6 +31,12 @@
         <div class='alert__message'>{{ message | safe }}</div>
       {% endif %}
 
+      {% if fragment %}
+        <div class='alert__message'>
+          {% include fragment %}
+        </div>
+      {% endif %}
+
       {% if actions %}
         <div class='alert__actions'>{{ actions | safe }}</div>
       {% endif %}

templates/components/options_input.html

@@ -10,7 +10,6 @@
           {{ field.label | striptags}}
           {% if tooltip %}{{ Tooltip(tooltip) }}{% endif %}
         </div>
-
         {% if field.description %}
           <span class='usa-input__help'>{{ field.description | safe }}</span>
         {% endif %}

templates/components/text_input.html

@@ -1,24 +1,65 @@
 {% from "components/icon.html" import Icon %}
 {% from "components/tooltip.html" import Tooltip %}
 
-{% macro TextInput(field, tooltip='', placeholder='') -%}
-  <div class='usa-input {% if field.errors %}usa-input--error{% endif %}'>
-    <label for={{field.name}}>
-      <div class="usa-input__title">{{ field.label | striptags }} {% if tooltip %}{{ Tooltip(tooltip) }}{% endif %}</div>
+{% macro TextInput(field, tooltip='', placeholder='', validation='anything', paragraph=False) -%}
+  <textinput
+    name='{{ field.name }}'
+    validation='{{ validation }}'
+    {% if field.data %}initial-value='{{ field.data }}'{% endif %}
+    {% if field.errors %}v-bind:initial-errors='{{ field.errors }}'{% endif %}
+    inline-template>
+
+    <div
+      v-bind:class="['usa-input usa-input--validation--' + validation, { 'usa-input--error': showError, 'usa-input--success': showValid }]">
+
+      <label for={{field.name}}>
+        <div class="usa-input__title">{{ field.label | striptags }} {% if tooltip %}{{ Tooltip(tooltip) }}{% endif %}</div>
+
+        {% if field.description %}
+          <span class='usa-input__help'>{{ field.description | safe }}</span>
+        {% endif %}
+
+        <span v-show='showError'>{{ Icon('alert',classes="icon-validation")) }}</span>
+        <span v-show='showValid'>{{ Icon('ok',classes="icon-validation")) }}</span>
+
+      </label>
+
+      {% if paragraph %}
+
+        <textarea
+          v-on:input='onInput'
+          v-on:change='onChange'
+          v-bind:value='value'
+          id='{{ field.name }}'
+          ref='input'
+          placeholder='{{ placeholder }}'>
+        </textarea>
+
+      {% else %}
+
+        <masked-input
+          v-on:input='onInput'
+          v-on:change='onChange'
+          v-bind:value='value'
+          v-bind:mask='mask'
+          v-bind:pipe='pipe'
+          v-bind:keep-char-positions='keepCharPositions'
+          v-bind:aria-invalid='showError'
+          id='{{ field.name }}'
+          type='text'
+          ref='input'
+          placeholder='{{ placeholder }}'>
+        </masked-input>
 
-      {% if field.description %}
-        <span class='usa-input__help'>{{ field.description | safe }}</span>
       {% endif %}
 
-      {% if field.errors %} {{ Icon('alert',classes="icon-validation") }} {% endif %}
-    </label>
+      <input type='hidden' v-bind:value='rawValue' name='{{ field.name }}' />
 
-    {{ field(placeholder=placeholder) | safe }}
+      <template v-if='showError'>
+        <span v-if='initialErrors' v-for='error in initialErrors' class='usa-input__message' v-html='error'></span>
+        <span v-if='!initialErrors' class='usa-input__message' v-html='validationError'></span>
+      </template>
 
-    {% if field.errors %}
-      {% for error in field.errors %}
-        <span class='usa-input__message'>{{ error }}</span>
-      {% endfor %}
-    {% endif %}
-  </div>
-{%- endmacro %}
+    </div>
+  </textinput>
+{%- endmacro %}

templates/fragments/pending_ccpo_approval_alert.html

@@ -0,0 +1,11 @@
+<p>
+  We will review and respond to your request in 72 hours. You’ll be notified via email or phone.
+</p>
+
+<p>
+  While your request is being reviewed, your next step is to create a Task Order associated with JEDI Cloud. Please contact a Contracting Officer (KO), Contracting Officer Representative (COR), or a Financial Manager to help with this step.
+</p>
+
+<p>
+  Learn more about the JEDI Task Order and the Financial Verification process.
+</p>

templates/fragments/pending_ccpo_approval_modal.html

@@ -0,0 +1,35 @@
+<h1>
+  Request submitted. Approval pending.
+</h1>
+
+<p>
+  We will review and respond to your request in 72 hours. You’ll be notified via email or phone.
+</p>
+
+<p>
+  Your request is being reviewed because:
+  <ul>
+    <li>
+      Your request includes over $1 million for cloud resources
+    </li>
+    <li>
+      We may need more information about your request
+    </li>
+  </ul>
+</p>
+
+<h2>
+  Next Steps
+</h2>
+
+<p>
+  While your request is being reviewed, your next step is to create a Task Order associated with JEDI Cloud. Please contact a Contracting Officer (KO), Contracting Officer Representative (COR), or a Financial Manager to help with this step.
+</p>
+
+<p>
+  Once the Task Order has been created, you will be asked to provide details about the task order in the Financial Verification step.
+</p>
+
+<p>
+  Learn more about the JEDI Task Order and the Financial Verification process.
+</p>

templates/fragments/pending_financial_verification.html

@@ -0,0 +1,12 @@
+<p>
+  The next step is to create a Task Order associated with JEDI Cloud.
+  Please contact a Contracting Officer (KO), Contracting Officer
+  Representative (COR), or a Financial Manager to help with this step.
+</p>
+<p>
+  Once the Task Order has been created, you will be asked to provide
+  details about the task order in the Financial Verification step.
+</p>
+<p>
+  <i>Learn more</i> about the JEDI Task Order and the Financial Verification process.
+</p>

templates/requests.html

@@ -4,37 +4,27 @@
 {% from "components/modal.html" import Modal %}
 {% from "components/empty_state.html" import EmptyState %}
 
-{% block modal %}
-  {% if g.modalOpen %}
-    {% call Modal() %}
-      <h1>Your request is now approved!</h1>
-
-      <p>
-        Your next step is to create a <b>Task Order (T.O.)</b> associated with
-        JEDI Cloud. Please consult a <b>Contracting Officer (KO)</b> or
-        <b>Contracting Officer Representative (COR)</b> to help with this step.
-      </p>
-
-      <p>
-        Once the Task Order (T.O.) has been created, we will need the following
-        details to create your account. These details will help keep your cloud
-        usage in sync with your budget.
-      </p>
-
-      {{ Alert("You'll need these details: ",
-        message="<p>Task Order Number</p><p>Contracting Officer: Name, E-mail and Office</p>"
-      ) }}
-
-
-      <div class='action-group'>
-        <a href='/requests' class='action-group__action usa-button'>Close</a>
-      </div>
-    {% endcall %}
-  {% endif %}
-{% endblock %}
-
 {% block content %}
 
+  {% call Modal(name='pendingFinancialVerification', dismissable=True) %}
+    <h1>Request submitted!</h1>
+
+    {% include 'fragments/pending_financial_verification.html' %}
+
+    <div class='action-group'>
+      <a v-on:click="closeModal('pendingFinancialVerification')" class='action-group__action usa-button'>Close</a>
+    </div>
+  {% endcall %}
+
+  {% call Modal(name='pendingCCPOApproval', dismissable=True) %}
+
+    {% include 'fragments/pending_ccpo_approval_modal.html' %}
+
+    <div class='action-group'>
+      <a v-on:click="closeModal('pendingCCPOApproval')" class='action-group__action usa-button'>Close</a>
+    </div>
+  {% endcall %}
+
 {% if not requests %}
 
   {{ EmptyState(
@@ -46,9 +36,32 @@
 
 {% else %}
 
-  {{ Alert('Pending Financial Verification',
-    message="<p>Your next step is to create a Task Order (T.O.) associated with JEDI Cloud. Please consult a Contracting Officer (KO) or Contracting Officer Representative (COR) to help with this step.</p>"
-  ) }}
+  {% if pending_financial_verification %}
+
+    {{ Alert('Pending Financial Verification', fragment="fragments/pending_financial_verification.html") }}
+
+  {% endif %}
+
+  {% if pending_ccpo_approval %}
+
+    {{ Alert('Request submitted. Approval pending.', fragment="fragments/pending_ccpo_approval_alert.html") }}
+
+  {% endif %}
+
+  <div class="row kpi">
+    <div class="kpi__item col col--grow">
+      <div class="kpi__item__value">3</div>
+      <div class="kpi__item__description">Pending Requests</div>
+    </div>
+    <div class="kpi__item col col--grow">
+      <div class="kpi__item__value">2,456</div>
+      <div class="kpi__item__description">Completed Requests This Year</div>
+    </div>
+    <div class="kpi__item col col--grow">
+      <div class="kpi__item__value">234</div>
+      <div class="kpi__item__description">Denied Requests</div>
+    </div>
+  </div>
 
   <div class="col col--grow">
 

templates/requests/menu.html

@@ -1,7 +1,7 @@
 <div class="progress-menu progress-menu--four">
   <ul>
     {% for s in screens %}
-      {% if loop.index < current %}
+      {% if jedi_request and s.section in jedi_request.body %}
         {% set step_indicator = 'complete' %}
       {% elif loop.index == current %}
         {% set step_indicator = 'active' %}

templates/requests/screen-1.html

@@ -17,7 +17,6 @@
   ) }}
 {% endif %}
 
-
 <p>We’d like to know a little about how you plan to use JEDI Cloud services to process your request. Please answer the following questions to the best of your ability. Note that the CCPO does not directly help with migrating systems to JEDI Cloud. These questions are for learning about your cloud readiness and financial usage of the JEDI Cloud; your estimates will not be used for any department level reporting.</p>
 <p><em>All fields are required, unless specified optional.</em></p>
 
@@ -26,7 +25,7 @@
 {{ TextInput(f.jedi_usage,placeholder="Briefly describe how you are expecting to use the JEDI Cloud. \n e.g. We are migrating XYZ application to the cloud so that...",tooltip="Your answer will help us provide tangible examples to DoD leadership how and why commercial cloud resources are accelerating the Department\\'s missions.") }}
 
 <h2>Cloud Readiness</h2>
-{{ TextInput(f.num_software_systems,placeholder="Number of systems",tooltip="A software system can be any code that you plan to host on cloud infrastructure. For example, it could be a custom-developed web application, or a large ERP system.") }}
+{{ TextInput(f.num_software_systems,validation="integer",tooltip="A software system can be any code that you plan to host on cloud infrastructure. For example, it could be a custom-developed web application, or a large ERP system.") }}
 {{ OptionsInput(f.jedi_migration, tooltip="Cloud migration is the process of moving data, applications or other business elements from an organization\\'s onsite computers/data centers to the cloud, or moving them from one cloud environment to another.") }}
 {{ OptionsInput(f.rationalization_software_systems, tooltip="Rationalization is the DoD process to determine whether the application should move to the cloud.") }}
 {{ OptionsInput(f.technical_support_team) }}
@@ -37,13 +36,12 @@
 {{ OptionsInput(f.cloud_native, tooltip="Cloud native is architecting and designing your application to use all the benefits of the commercial cloud. Specifically, designing applications so that they are decoupled from a physical resource.") }}
 
 <h2>Financial Usage</h2>
-{{ TextInput(f.estimated_monthly_spend, tooltip="Refer to financial verification step help docs") }}
+{{ TextInput(f.estimated_monthly_spend, tooltip="Refer to financial verification step help docs", validation="dollars") }}
 <span>So this means you are spending approximately <b class="label">$1,000,023</b> annually.</span>
-{{ TextInput(f.dollar_value) }}
-{{ TextInput(f.number_user_sessions) }}
-{{ TextInput(f.average_daily_traffic, tooltip="Requests are the client-to-server network traffic that is being transferred to your systems") }}
-{{ TextInput(f.average_daily_traffic_gb, tooltip="GB uploaded is the gigabyte amount of data traffic that is being transferred to your systems") }}
-{{ TextInput(f.start_date) }}
-
+{{ TextInput(f.dollar_value,validation="dollars") }}
+{{ TextInput(f.number_user_sessions,validation="integer") }}
+{{ TextInput(f.average_daily_traffic, tooltip="Requests are the client-to-server network traffic that is being transferred to your systems",validation="integer") }}
+{{ TextInput(f.average_daily_traffic_gb, tooltip="GB uploaded is the gigabyte amount of data traffic that is being transferred to your systems",validation="gigabytes") }}
+{{ TextInput(f.start_date, validation="date", placeholder="MM / DD / YYYY") }}
 
 {% endblock %}

templates/requests/screen-2.html

@@ -19,16 +19,15 @@
 
 <p>Please tell us more about you.</p>
 
-{{ TextInput(f.fname_request,placeholder='First Name') }}
-{{ TextInput(f.lname_request,placeholder='Last Name') }}
-{{ TextInput(f.email_request,placeholder='jane@mail.mil') }}
-{{ TextInput(f.phone_number,placeholder='(123) 456-7890') }}
+{{ TextInput(f.fname_request, placeholder='First Name') }}
+{{ TextInput(f.lname_request, placeholder='Last Name') }}
+{{ TextInput(f.email_request, placeholder='jane@mail.mil', validation='email') }}
+{{ TextInput(f.phone_number, placeholder='e.g. (123) 456-7890', validation='usPhone') }}
 
 <p>We want to collect the following information from you for security auditing and determining priviledged user access.</p>
 
 {{ TextInput(f.service_branch,placeholder='e.g. US Air Force, US Army, US Navy, Marine Corps, Defense Media Agency') }}
 {{ OptionsInput(f.citizenship) }}
 {{ OptionsInput(f.designation) }}
-{{ TextInput(f.date_latest_training,tooltip="When was the last time you completed the IA training? <br> Information Assurance (IA) training is an important step in cyber awareness.") }}
-
+{{ TextInput(f.date_latest_training,tooltip="When was the last time you completed the IA training? <br> Information Assurance (IA) training is an important step in cyber awareness.",placeholder="MM / DD / YYYY", validation="date") }}
 {% endblock %}

templates/requests/screen-3.html

@@ -30,7 +30,7 @@
 
 {{ TextInput(f.fname_poc,placeholder='First Name') }}
 {{ TextInput(f.lname_poc,placeholder='Last Name') }}
-{{ TextInput(f.email_poc,placeholder='jane@mail.mil') }}
-{{ TextInput(f.dodid_poc,placeholder='10-digit number on the back of the CAC') }}
+{{ TextInput(f.email_poc,placeholder='jane@mail.mil', validation='email') }}
+{{ TextInput(f.dodid_poc,placeholder='10-digit number on the back of the CAC', validation='dodId') }}
 
 {% endblock %}