Create PhoneInput macro for phone and ext form fields
This commit is contained in:
parent
8b9fe61a94
commit
b13ba188bf
12
templates/components/phone_input.html
Normal file
12
templates/components/phone_input.html
Normal 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 %}
|
@ -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) }}
|
||||
|
@ -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>
|
||||
{{ PhoneInput(review_form.phone_mao, review_form.phone_ext_mao) }}
|
||||
|
||||
<hr />
|
||||
|
||||
|
@ -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>
|
||||
|
||||
|
Loading…
x
Reference in New Issue
Block a user