Add a page to manage a service’s whitelist

Services who are in alpha or building prototypes need a way of sending
to any email address or phone number without having to sign the MOU.

This commit adds a page where they can whitelist up to 5 email addresses
and 5 phone numbers.

It uses the ‘list entry’ UI pattern from the Digital Marketplace
frontend toolkit [1] [2] [3].

I had to do some modification:
- of the Javascript, to make it work with the GOV.UK Module pattern
- of the template to make it work with WTForms
- of the content security policy, because the list entry pattern uses
  Hogan[1], which needs to use `eval()` (this should be fine if we’re
  only allowing it for scripts that we serve)
- of our SASS lint config, to allow browser-targeting mixins to come
  after normal rules (so that they can override them)

This commit also adds a new form class to validate and populate the two
whitelists. The validation is fairly rudimentary at the moment, and
doesn’t highlight which item in the list has the error, but it’s
probably good enough.

The list can only be updated all-at-once, this is how it’s possible to
remove items from the list without having to make multiple `POST`
requests.

1. 434ad30791/toolkit/templates/forms/list-entry.html
2. 434ad30791/toolkit/scss/forms/_list-entry.scss
3. 434ad30791/toolkit/javascripts/list-entry.js
4. http://twitter.github.io/hogan.js/

app/templates/views/api/index.html

@@ -17,18 +17,30 @@
     {% call banner_wrapper(type='warning') %}
       <h2 class="heading-medium">Your service is in trial mode</h2>
       <p>
-        You can only send messages to people in your team.
+        You can only send messages to people in your team or whitelist.
       </p>
     {% endcall %}
   {% endif %}
 
-  <nav class="grid-row">
-    <div class="column-half">
-      <a class="pill-separate-item" href="{{ url_for('.api_keys', service_id=current_service.id) }}">API keys</a>
-    </div>
-    <div class="column-half">
-      <a class="pill-separate-item" href="{{ url_for('.api_documentation', service_id=current_service.id) }}">Documentation</a>
-    </div>
+  <nav class="grid-row bottom-gutter-3-2">
+    {% if current_service.restricted %}
+      <div class="column-one-third">
+        <a class="pill-separate-item" href="{{ url_for('.api_keys', service_id=current_service.id) }}">API keys</a>
+      </div>
+      <div class="column-one-third">
+        <a class="pill-separate-item" href="{{ url_for('.whitelist', service_id=current_service.id) }}">Whitelist</a>
+      </div>
+      <div class="column-one-third">
+        <a class="pill-separate-item" href="{{ url_for('.api_documentation', service_id=current_service.id) }}">Documentation</a>
+      </div>
+    {% else %}
+      <div class="column-half">
+        <a class="pill-separate-item" href="{{ url_for('.api_keys', service_id=current_service.id) }}">API keys</a>
+      </div>
+      <div class="column-half">
+        <a class="pill-separate-item" href="{{ url_for('.api_documentation', service_id=current_service.id) }}">Documentation</a>
+      </div>
+    {% endif %}
   </nav>
 
 {% endblock %}

app/templates/views/api/whitelist.html

@@ -0,0 +1,43 @@
+{% extends "withnav_template.html" %}
+{% from "components/table.html" import list_table, field, hidden_field_heading %}
+{% from "components/api-key.html" import api_key %}
+{% from "components/page-footer.html" import page_footer %}
+{% from "components/list-entry.html" import list_entry %}
+
+{% block page_title %}
+  API integration – GOV.UK Notify
+{% endblock %}
+
+{% block maincolumn_content %}
+
+  <h1 class="heading-large">
+    Whitelist
+  </h1>
+
+  <form method="post">
+
+    <div class="grid-row">
+      <div class="column-two-thirds">
+
+        {{ list_entry(
+          form.email_addresses,
+          item_name='email address',
+        ) }}
+
+        {{ list_entry(
+          form.phone_numbers,
+          item_name='phone number',
+        ) }}
+
+      </div>
+    </div>
+
+    {{ page_footer(
+      'Save',
+      secondary_link=url_for('.api_integration', service_id=current_service.id),
+      secondary_link_text='Back to API integration'
+    ) }}
+
+  </form>
+
+{% endblock %}