Merge pull request #411 from dod-ccpo/phone-extensions

Add phone ext

alembic/versions/4c0b8263d800_add_phone_extension.py

@@ -0,0 +1,32 @@
+"""Add Phone Extension
+
+Revision ID: 4c0b8263d800
+Revises: ea8b5681b37c
+Create Date: 2018-10-29 11:14:01.332665
+
+"""
+from alembic import op
+import sqlalchemy as sa
+
+
+# revision identifiers, used by Alembic.
+revision = '4c0b8263d800'
+down_revision = 'ea8b5681b37c'
+branch_labels = None
+depends_on = None
+
+
+def upgrade():
+    # ### commands auto generated by Alembic - please adjust! ###
+    op.add_column('request_reviews', sa.Column('phone_ext_mao', sa.String(), nullable=True))
+    op.add_column('request_revisions', sa.Column('phone_ext', sa.String(), nullable=True))
+    op.add_column('users', sa.Column('phone_ext', sa.String(), nullable=True))
+    # ### end Alembic commands ###
+
+
+def downgrade():
+    # ### commands auto generated by Alembic - please adjust! ###
+    op.drop_column('users', 'phone_ext')
+    op.drop_column('request_revisions', 'phone_ext')
+    op.drop_column('request_reviews', 'phone_ext_mao')
+    # ### end Alembic commands ###

atst/domain/users.py

@@ -69,6 +69,7 @@ class Users(object):
         "last_name",
         "email",
         "phone_number",
+        "phone_ext",
         "service_branch",
         "citizenship",
         "designation",

atst/forms/ccpo_review.py

@@ -19,5 +19,6 @@ class CCPOReviewForm(ValidatedForm):
     phone_mao = TelField(
         "Mission Owner phone number (optional)", validators=[Optional(), PhoneNumber()]
     )
+    phone_ext_mao = StringField("Extension (optional)")
     fname_ccpo = StringField("First Name (optional)", validators=[Optional(), Name()])
     lname_ccpo = StringField("Last Name (optional)", validators=[Optional(), Name()])

atst/forms/edit_user.py

@@ -20,11 +20,8 @@ USER_FIELDS = {
         description="Enter your preferred contact e-mail address",
         validators=[Email()],
     ),
-    "phone_number": TelField(
+    "phone_number": TelField("Phone Number", validators=[PhoneNumber()]),
-        "Phone Number",
+    "phone_ext": StringField("Extension"),
-        description="Enter your 10-digit U.S. phone number",
-        validators=[PhoneNumber()],
-    ),
     "service_branch": SelectField(
         "Service Branch or Agency",
         description="Which service or organization do you belong to within the DoD?",
@@ -86,6 +83,7 @@ class EditUserForm(ValidatedForm):
     last_name = inherit_user_field("last_name")
     email = inherit_user_field("email")
     phone_number = inherit_user_field("phone_number")
+    phone_ext = inherit_user_field("phone_ext")
     service_branch = inherit_user_field("service_branch")
     citizenship = inherit_user_field("citizenship")
     designation = inherit_user_field("designation")

atst/forms/new_request.py

@@ -167,6 +167,7 @@ class InformationAboutYouForm(ValidatedForm):
     lname_request = inherit_field(USER_FIELDS["last_name"])
     email_request = inherit_field(USER_FIELDS["email"])
     phone_number = inherit_field(USER_FIELDS["phone_number"])
+    phone_ext = inherit_field(USER_FIELDS["phone_ext"], required=False)
     service_branch = inherit_field(USER_FIELDS["service_branch"])
     citizenship = inherit_field(USER_FIELDS["citizenship"])
     designation = inherit_field(USER_FIELDS["designation"])

atst/models/request.py

@@ -81,6 +81,7 @@ class Request(Base, mixins.TimestampsMixin, mixins.AuditableMixin):
         "citizenship",
         "designation",
         "phone_number",
+        "phone_ext",
         "email_request",
         "fname_request",
         "lname_request",

atst/models/request_review.py

@@ -18,6 +18,7 @@ class RequestReview(Base, mixins.TimestampsMixin, mixins.AuditableMixin):
     lname_mao = Column(String)
     email_mao = Column(String)
     phone_mao = Column(String)
+    phone_ext_mao = Column(String)
     fname_ccpo = Column(String)
     lname_ccpo = Column(String)
 

atst/models/request_revision.py

@@ -57,6 +57,7 @@ class RequestRevision(Base, mixins.TimestampsMixin, mixins.AuditableMixin):
     citizenship = Column(String)
     designation = Column(String)
     phone_number = Column(String)
+    phone_ext = Column(String)
     email_request = Column(String)
     fname_request = Column(String)
     lname_request = Column(String)

atst/models/user.py

@@ -21,6 +21,7 @@ class User(Base, mixins.TimestampsMixin, mixins.AuditableMixin):
     first_name = Column(String)
     last_name = Column(String)
     phone_number = Column(String)
+    phone_ext = Column(String)
     service_branch = Column(String)
     citizenship = Column(String)
     designation = Column(String)

atst/routes/requests/jedi_request_flow.py

@@ -64,6 +64,7 @@ class JEDIRequestFlow(object):
             "lname_request": user.last_name,
             "email_request": user.email,
             "phone_number": user.phone_number,
+            "phone_ext": user.phone_ext,
             "service_branch": user.service_branch,
             "designation": user.designation,
             "citizenship": user.citizenship,

js/lib/input_validations.js

@@ -47,6 +47,12 @@ export default {
     unmask: ['(',')','-',' '],
     validationError: 'Please enter a 10-digit phone number'
   },
+  phoneExt: {
+    mask: createNumberMask({ prefix: '', allowDecimal: false, allowLeadingZeroes: true, includeThousandsSeparator: false }),
+    match: /^\w{0,10}$/,
+    unmask: [],
+    validationError: 'Optional: Please enter up to 10 digits'
+  },
   dodId: {
     mask: createNumberMask({ prefix: '', allowDecimal: false, includeThousandsSeparator: false }),
     match: /^\d{10}$/,

styles/components/_forms.scss

@@ -42,6 +42,10 @@
         flex-basis: 66.66%;
       }
 
+      &.form-col--sixth {
+        flex-basis: 16.66%;
+      }
+
       .usa-input {
         margin-left: ($gap * 4);
         margin-right: ($gap * 4);

styles/elements/_inputs.scss

@@ -314,3 +314,36 @@ select {
   }
 
 }
+
+.phone-input {
+  display: flex;
+  flex-direction: row;
+
+  .phone-input__phone {
+    margin-right: ($gap * 4);
+
+    .usa-input {
+      input, label, .usa-input__message {
+        max-width: 20rem;
+      }
+
+      .icon-validation {
+        left: 20rem;
+      }
+    }
+  }
+
+  .phone-input__extension {
+    margin-left: ($gap * 4);
+
+    .usa-input {
+      input, label {
+        max-width: 12rem;
+      }
+
+      .icon-validation {
+        left: 12rem;
+      }
+    }
+  }
+}

templates/components/phone_input.html

@@ -0,0 +1,12 @@
+{% from "components/text_input.html" import TextInput %}
+
+{% macro PhoneInput(phone_number, phone_ext, placeholder_phone="") %}
+  <div class='phone-input'>
+      <div class='phone-input__phone'>
+        {{ TextInput(phone_number, placeholder=placeholder_phone, validation='usPhone') }}
+      </div>
+      <div class='phone-input__extension'>
+        {{ TextInput(phone_ext, validation='phoneExt')}}
+      </div>
+  </div>
+{%- endmacro %}

templates/fragments/edit_user_form.html

@@ -1,6 +1,7 @@
 {% from "components/text_input.html" import TextInput %}
 {% from "components/options_input.html" import OptionsInput %}
 {% from "components/date_input.html" import DateInput %}
+{% from "components/phone_input.html" import PhoneInput %}
 
 <form method="POST" action='{{ form_action }}'>
   {{ form.csrf_token }}
@@ -16,15 +17,8 @@
         </div>
       </div>
 
-      <div class='form-row'>
+      {{ TextInput(form.email, validation='email') }}
-        <div class='form-col form-col--half'>
+      {{ PhoneInput(form.phone_number, form.phone_ext) }}
-          {{ TextInput(form.email, validation='email') }}
-        </div>
-
-        <div class='form-col form-col--half'>
-          {{ TextInput(form.phone_number, validation='usPhone') }}
-        </div>
-      </div>
 
       {{ OptionsInput(form.service_branch) }}
       {{ OptionsInput(form.citizenship) }}

templates/requests/_review.html

@@ -102,7 +102,20 @@
 
   {{ DefinitionReviewField("Email Address", "information_about_you", "email_request") }}
 
-  {{ DefinitionReviewField("Phone Number", "information_about_you", "phone_number", filter="usPhone") }}
+  <div>
+    <dt>Phone Number</dt>
+    <dd>
+      {% if data.information_about_you.phone_number is not none %}
+        {{ data.information_about_you.phone_number }}
+      {% else %}
+        {{ RequiredLabel() }}
+      {% endif %}
+
+      {% if data.information_about_you.phone_ext %}
+        ext. {{ data.information_about_you.phone_ext }}
+      {% endif %}
+    </dd>
+  </div>
 
   {{ DefinitionReviewField("Service Branch or Agency", "information_about_you", "service_branch", filter="getOptionLabel", filter_args=[service_branches]) }}
 

templates/requests/approval.html

@@ -3,6 +3,7 @@
 {% from "components/icon.html" import Icon %}
 {% from "components/alert.html" import Alert %}
 {% from "components/text_input.html" import TextInput %}
+{% from "components/phone_input.html" import PhoneInput %}
 
 {% block content %}
 
@@ -112,7 +113,12 @@
                                 <h3 class='approval-log__log-item__header'>Mission Owner approval on behalf of:</h3>
                                 <span>{{ review.full_name_mao }}</span>
                                 <span>{{ review.email_mao }}</span>
-                                <span>{{ review.phone_mao }}</span>
+                                <span>
+                                  {{ review.phone_mao }}
+                                  {% if review.phone_ext_mao %}
+                                    ext. {{ review.phone_ext_mao }}
+                                  {% endif %}
+                                </span>
                               </div>
                             {% endif %}
 
@@ -197,15 +203,8 @@
                     </div>
                   </div>
 
-                  <div class='form-row'>
+                  {{ TextInput(review_form.email_mao, placeholder="name@mail.mil", validation='email') }}
-                    <div class='form-col form-col--half'>
+                  {{ PhoneInput(review_form.phone_mao, review_form.phone_ext_mao) }}
-                      {{ TextInput(review_form.email_mao, placeholder="name@mail.mil", validation='email') }}
-                    </div>
-
-                    <div class='form-col form-col--half'>
-                      {{ TextInput(review_form.phone_mao, placeholder="(123) 456-7890", validation='usPhone') }}
-                    </div>
-                  </div>
 
                   <hr />
 

templates/requests/screen-2.html

@@ -4,6 +4,7 @@
 {% from "components/text_input.html" import TextInput %}
 {% from "components/options_input.html" import OptionsInput %}
 {% from "components/date_input.html" import DateInput %}
+{% from "components/phone_input.html" import PhoneInput %}
 
 {% block heading %}
   Information About You
@@ -25,10 +26,8 @@
   <div class='form-col form-col--half'>{{ TextInput(f.lname_request) }}</div>
 </div>
 
-<div class='form-row'>
+{{ TextInput(f.email_request, placeholder='e.g. jane@mail.mil', validation='email') }}
-  <div class='form-col form-col--half'>{{ TextInput(f.email_request, placeholder='e.g. jane@mail.mil', validation='email') }}</div>
+{{ PhoneInput(f.phone_number, f.phone_ext, placeholder_phone='e.g. (123) 456-7890') }}
-  <div class='form-col form-col--half'>{{ TextInput(f.phone_number, placeholder='e.g. (123) 456-7890', validation='usPhone') }}</div>
-</div>
 
 <p>We want to collect the following information from you for security auditing and determining priviledged user access.</p>
 

tests/factories.py

@@ -163,6 +163,7 @@ class RequestFactory(Base):
             citizenship="United States",
             designation="military",
             phone_number="1234567890",
+            phone_ext="123",
             email_request=user.email,
             fname_request=user.first_name,
             lname_request=user.last_name,