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/assets/javascripts/listEntry.js

@@ -0,0 +1,206 @@
+(function (Modules) {
+
+  'use strict';
+
+  var root = this,
+      $ = this.jQuery;
+
+  var lists = [],
+      listEntry,
+      ListEntry;
+
+  ListEntry = function (elm) {
+    var $elm = $(elm),
+        idPattern = $elm.prop('id');
+
+    if (!idPattern) { return false; }
+    this.idPattern = idPattern;
+    this.elementSelector = '.list-entry, .list-entry-remove, .list-entry-add';
+    this.entries = [];
+    this.$wrapper = $elm;
+    this.minEntries = 2;
+    this.listItemName = this.$wrapper.data('listItemName');
+    this.getSharedAttributes();
+
+    this.getValues();
+    this.maxEntries = this.entries.length;
+    this.trimEntries();
+    this.render();
+    this.bindEvents();
+  };
+  ListEntry.optionalAttributes = ['aria-describedby'];
+  ListEntry.prototype.entryTemplate = Hogan.compile(
+    '<div class="list-entry">' +
+      '<label for="{{{id}}}" class="text-box-number-label">' +
+        '<span class="visuallyhidden">{{listItemName}} number </span>{{number}}.' +
+      '</label>' +
+      '<input' +
+        ' name="{{name}}-{{index}}"' +
+        ' id="{{id}}"' +
+        ' value="{{value}}"' +
+        ' {{{sharedAttributes}}}' +
+      '/>' +
+      '{{#button}}' +
+        '<button type="button" class="button-secondary list-entry-remove">' +
+          'Remove<span class="visuallyhidden"> {{listItemName}} number {{number}}</span>' +
+        '</button>' +
+      '{{/button}}' +
+    '</div>'
+  );
+  ListEntry.prototype.addButtonTemplate = Hogan.compile(
+    '<button type="button" class="button-secondary list-entry-add">Add another {{listItemName}} ({{entriesLeft}} remaining)</button>'
+  );
+  ListEntry.prototype.getSharedAttributes = function () {
+    var $inputs = this.$wrapper.find('input'),
+        attributeTemplate = Hogan.compile(' {{name}}="{{value}}"'),
+        generatedAttributes = ['id', 'name', 'value'],
+        attributes = [],
+        attrIdx,
+        elmAttributes,
+        getAttributesHTML;
+
+    getAttributesHTML = function (attrsByElm) {
+      var attrStr = '',
+          elmIdx = attrsByElm.length,
+          elmAttrs,
+          attrIdx;
+
+      while (elmIdx--) {
+        elmAttrs = attrsByElm[elmIdx];
+        attrIdx = elmAttrs.length;
+        while (attrIdx--) {
+          attrStr += attributeTemplate.render({ 'name': elmAttrs[attrIdx].name, 'value': elmAttrs[attrIdx].value });
+        }
+      }
+      return attrStr;
+    };
+
+    $inputs.each(function (idx, elm) {
+      attrIdx = elm.attributes.length;
+      elmAttributes = [];
+      while(attrIdx--) {
+        if ($.inArray(elm.attributes[attrIdx].name, generatedAttributes) === -1) {
+          elmAttributes.push({
+            'name': elm.attributes[attrIdx].name,
+            'value': elm.attributes[attrIdx].value
+          });
+        }
+      }
+      if (elmAttributes.length) {
+        attributes.push(elmAttributes);
+      }
+    });
+
+    this.sharedAttributes = (attributes.length) ? getAttributesHTML(attributes) : '';
+  };
+  ListEntry.prototype.getValues = function () {
+    this.entries = [];
+    this.$wrapper.find('input').each(function (idx, elm) {
+      var val = $(elm).val();
+
+      this.entries.push(val);
+    }.bind(this));
+  };
+  ListEntry.prototype.trimEntries = function () {
+    var entryIdx = this.entries.length,
+        newEntries = [];
+
+    while (entryIdx--) {
+      if (this.entries[entryIdx] !== '') {
+        newEntries.push(this.entries[entryIdx]);
+      } else {
+        if (entryIdx < this.minEntries) {
+          newEntries.push('');
+        }
+      }
+    }
+    this.entries = newEntries.reverse();
+  };
+  ListEntry.prototype.getId = function (num) {
+    var pattern = this.idPattern.replace("list-entry-", "");
+    if ("undefined" === typeof num) {
+      return pattern;
+    } else {
+      return "input-" + pattern + "-" + num;
+    }
+  };
+  ListEntry.prototype.bindEvents = function () {
+    this.$wrapper.on('click', '.list-entry-remove', function (e) {
+      this.removeEntry($(e.target));
+    }.bind(this));
+    this.$wrapper.on('click', '.list-entry-add', function (e) {
+      this.addEntry();
+    }.bind(this));
+  };
+  ListEntry.prototype.shiftFocus = function (opts) {
+    var numberTargeted;
+
+    if (opts.action === 'remove') {
+      numberTargeted = (opts.entryNumberFocused > 1) ? opts.entryNumberFocused - 1 : 1;
+    } else { // opts.action === 'add'
+      numberTargeted = opts.entryNumberFocused + 1;
+    }
+    this.$wrapper.find('.list-entry').eq(numberTargeted - 1).find('input').focus();
+  };
+  ListEntry.prototype.removeEntryFromEntries = function (entryNumber) {
+    var idx,
+        len,
+        newEntries = [];
+
+    for (idx = 0, len = this.entries.length; idx < len; idx++) {
+      if ((entryNumber - 1) !== idx) {
+        newEntries.push(this.entries[idx]);
+      }
+    }
+    this.entries = newEntries;
+  };
+  ListEntry.prototype.addEntry = function ($removeButton) {
+    var currentLastEntryNumber = this.entries.length;
+
+    this.getValues();
+    this.entries.push('');
+    this.render();
+    this.shiftFocus({ 'action' : 'add', 'entryNumberFocused' : currentLastEntryNumber });
+  };
+  ListEntry.prototype.removeEntry = function ($removeButton) {
+    var entryNumber = parseInt($removeButton.find('span').text().match(/\d+/)[0], 10);
+
+    this.getValues();
+    this.removeEntryFromEntries(entryNumber);
+    this.render();
+    this.shiftFocus({ 'action' : 'remove', 'entryNumberFocused' : entryNumber });
+  };
+  ListEntry.prototype.render = function () {
+    this.$wrapper.find(this.elementSelector).remove();
+    $.each(this.entries, function (idx, entry) {
+      var entryNumber = idx + 1,
+          dataObj = {
+            'id' : this.getId(entryNumber),
+            'number' : entryNumber,
+            'index': idx,
+            'name' : this.getId(),
+            'value' : entry,
+            'listItemName' : this.listItemName,
+            'sharedAttributes': this.sharedAttributes
+          };
+
+      if (entryNumber > 1) {
+        dataObj.button = true;
+      }
+      this.$wrapper.append(this.entryTemplate.render(dataObj));
+    }.bind(this));
+    if (this.entries.length < this.maxEntries) {
+      this.$wrapper.append(this.addButtonTemplate.render({
+        'listItemName' : this.listItemName,
+        'entriesLeft' : (this.maxEntries - this.entries.length)
+      }));
+    }
+  };
+
+  Modules.ListEntry = function () {
+
+    this.start = component => lists.push(new ListEntry($(component)));
+
+  };
+
+})(window.GOVUK.Modules);

app/assets/stylesheets/components/list-entry.scss

@@ -0,0 +1,68 @@
+.input-list {
+
+  .list-entry {
+    vertical-align: middle;
+    margin-bottom: 15px;
+    position: relative;
+
+    @include ie-lte(7) {
+      zoom: 1;
+    }
+  }
+
+  .list-entry-remove {
+    @include core-19;
+    display: block;
+    margin-bottom: 15px;
+    margin-top: 5px;
+    position: static;
+
+    @include media(tablet) {
+      @include inline-block;
+      margin: 0 0 0 10px;
+      position: absolute;
+      top: 0;
+      left: 100%;
+    }
+
+    @include ie-lte(7) {
+      top: auto;
+      left: 110%;
+    }
+  }
+
+  .form-control {
+    padding-left: 1.84em;
+    width: 100%;
+    margin-bottom: 0;
+
+    @include ie-lte(8) {
+      width: 95%;
+    }
+
+    @include media(desktop) {
+      @include inline-block;
+    }
+  }
+
+  .text-box-number-label {
+    @include core-19;
+    float: left;
+    width: 1.6em;
+    margin: 6px -1.6em 0 0;
+    position: relative;
+    left: 10px;
+    color: $secondary-text-colour;
+    font-weight: bold;
+    pointer-events: none;
+  }
+
+  .list-entry-add {
+    @include core-19;
+    margin: 0 0 20px 0;
+  }
+}
+
+.button-secondary {
+  @include button($grey-3);
+}

app/assets/stylesheets/main.scss

@@ -57,6 +57,7 @@ $path: '/static/images/';
 @import 'components/phone';
 @import 'components/research-mode';
 @import 'components/tick-cross';
+@import 'components/list-entry';
 
 @import 'views/job';
 @import 'views/edit-template';