Create PhoneInput macro for phone and ext form fields

This commit is contained in:
leigh-mil 2018-10-31 15:40:07 -04:00
parent 8b9fe61a94
commit b13ba188bf
4 changed files with 20 additions and 31 deletions

View File

@ -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)}}
</div>
</div>
{%- endmacro %}

View File

@ -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 }}
@ -17,15 +18,7 @@
</div>
{{ TextInput(form.email, validation='email') }}
<div class='phone-input'>
<div class='phone-input__phone'>
{{ TextInput(form.phone_number, validation='usPhone') }}
</div>
<div class='phone-input__extension'>
{{ TextInput(form.phone_ext)}}
</div>
</div>
{{ PhoneInput(form.phone_number, form.phone_ext) }}
{{ OptionsInput(form.service_branch) }}
{{ OptionsInput(form.citizenship) }}

View File

@ -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 %}
@ -202,19 +203,8 @@
</div>
</div>
<div class='form-row'>
<div class='form-col form-col--half'>
{{ TextInput(review_form.email_mao, placeholder="name@mail.mil", validation='email') }}
</div>
<div class='form-col form-col--third'>
{{ TextInput(review_form.phone_mao, placeholder="(123) 456-7890", validation='usPhone') }}
</div>
<div class='form-col form-col--sixth'>
{{ TextInput(review_form.phone_ext_mao)}}
</div>
</div>
{{ TextInput(review_form.email_mao, placeholder="name@mail.mil", validation='email') }}
{{ PhoneInput(review_form.phone_mao, review_form.phone_ext_mao) }}
<hr />

View File

@ -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,15 +26,8 @@
<div class='form-col form-col--half'>{{ TextInput(f.lname_request) }}</div>
</div>
<div class='form-row'>
<div class='form-col form-col--half'>{{ TextInput(f.email_request, placeholder='e.g. jane@mail.mil', validation='email') }}</div>
<div class='form-col form-col--third'>
{{ TextInput(f.phone_number, placeholder='e.g. (123) 456-7890', validation='usPhone') }}
</div>
<div class='form-col form-col--sixth'>
{{ TextInput(f.phone_ext)}}
</div>
</div>
{{ TextInput(f.email_request, placeholder='e.g. jane@mail.mil', validation='email') }}
{{ PhoneInput(f.phone_number, f.phone_ext, placeholder_phone='e.g. (123) 456-7890') }}
<p>We want to collect the following information from you for security auditing and determining priviledged user access.</p>