Set permissions with checkboxes, not yes/no inputs

The yes/no pattern didn’t work too well, because:
- it didn’t read naturally as a question and answer
- often users left them completely unclicked if they didn’t want to set
  the permission (rather than clicking no)

This commit changes both the invite and edit user pages to use
checkboxes to set permissions. If also rewords these pages to read more
naturally, and explain what the permissions mean.

This meant changing some of the view logic around invites and
persmissions, and I ended up refactoring a bunch of it because I found
it hard to understand what was going on.

app/templates/components/checkbox.html

@@ -4,9 +4,11 @@
   help_link=None,
   help_link_text=None,
   width='2-3',
-  suffix=None
+  suffix=None,
+  block=False
 ) %}
-    <label class="form-checkbox" for="{{ field.name }}">
+    <label class="{% if block %}block-label{% endif %}" for="{{ field.name }}">
+        {{ field()}}
         {{ field.label }}
         {% if hint %}
             <span class="form-hint">
@@ -18,9 +20,6 @@
                 {{ field.errors[0] }}
             </span>
         {% endif %}
-        {{ field(**{
-            'class': 'form-control form-control-{} textbox-highlight-textbox'.format(width) if highlight_tags else 'form-control form-control-{} {}'.format(width, 'textbox-right-aligned' if suffix else ''),
-            'data-module': 'highlight-tags' if highlight_tags else ''})}}
         {% if help_link and help_link_text %}
             <p class="textbox-help-link">
                 <a href='{{ help_link }}'>{{ help_link_text }}</a>

app/templates/components/yes-no.html

@@ -1,22 +0,0 @@
-{% macro yes_no(field, current_value=None) %}
-  <fieldset class='yes-no'>
-    <legend class='yes-no-label{% if field.errors %} error{% endif %}'>
-      {{ field.label }}
-       {% if field.errors %}
-        <span class="error-message">
-          {{ field.errors[0] }}
-        </span>
-      {% endif %}
-    </legend>
-    <div class='yes-no-fields inline'>
-      <label class='block-label'>
-        <input type='radio' name='{{ field.name }}' value='yes' {% if current_value == 'yes' %}checked{% endif %} />
-        Yes
-      </label>
-      <label class='block-label'>
-        <input type='radio' name='{{ field.name }}' value='no' {% if current_value == 'no' %}checked{% endif %} />
-        No
-      </label>
-    </div>
-  </fieldset>
-{% endmacro %}

app/templates/views/edit-user-permissions.html

@@ -1,5 +1,4 @@
 {% extends "withnav_template.html" %}
-{% from "components/yes-no.html" import yes_no %}
 {% from "components/textbox.html" import textbox %}
 {% from "components/page-footer.html" import page_footer %}
 
@@ -10,21 +9,17 @@ Manage users – GOV.UK Notify
 {% block maincolumn_content %}
 
   <h1 class="heading-large">
-    {{ user.name or user.email_localpart or "Add a new team member" }}
+    {{ user.name or user.email_localpart }}
   </h1>
 
+  <p>
+    {{ user.email_address }}
+  </p>
+
   <div class="grid-row">
     <form method="post" class="column-three-quarters">
 
-      <fieldset class='yes-no-wrapper'>
-        <legend class='heading-small'>
-          Permissions
-        </legend>
-        <span class="form-hint">All team members can see message history</span>
-        {{ yes_no(form.send_messages, form.send_messages.data) }}
-        {{ yes_no(form.manage_service, form.manage_service.data) }}
-        {{ yes_no(form.manage_api_keys, form.manage_api_keys.data) }}
-      </fieldset>
+      {% include 'views/manage-users/permissions.html' %}
 
       {{ page_footer(
         'Save',

app/templates/views/invite-user.html

@@ -1,5 +1,5 @@
 {% extends "withnav_template.html" %}
-{% from "components/yes-no.html" import yes_no %}
+{% from "components/checkbox.html" import checkbox %}
 {% from "components/textbox.html" import textbox %}
 {% from "components/page-footer.html" import page_footer %}
 
@@ -10,23 +10,15 @@ Manage users – GOV.UK Notify
 {% block maincolumn_content %}
 
   <h1 class="heading-large">
-    {{ user.name or user.email_localpart or "Invite a team member" }}
+    {{ "Invite a team member" }}
   </h1>
 
   <div class="grid-row">
     <form method="post" class="column-three-quarters">
 
-      {{ textbox(form.email_address, hint='You must use an email address from a central government organisation', width='1-1', safe_error_message=True) }}
+      {{ textbox(form.email_address, hint='Must be from a central government organisation', width='1-1', safe_error_message=True) }}
 
-      <fieldset class='yes-no-wrapper'>
-        <legend class='heading-small'>
-          Permissions
-        </legend>
-        <span class="form-hint">All team members can see message history</span>
-        {{ yes_no(form.send_messages, form.send_messages.data) }}
-        {{ yes_no(form.manage_service, form.manage_service.data) }}
-        {{ yes_no(form.manage_api_keys, form.manage_api_keys.data) }}
-      </fieldset>
+      {% include 'views/manage-users/permissions.html' %}
 
       {{ page_footer('Send invitation email') }}
 

app/templates/views/manage-users.html

@@ -4,7 +4,7 @@
 
 {% set table_options = {
   'field_headings': [
-    'Name', 'Send messages', 'Manage service', 'Manage API keys', hidden_field_heading('Link to change')
+    'Name', 'Send messages', 'Modify service', 'Access API keys', hidden_field_heading('Link to change')
   ],
   'field_headings_visible': True,
   'caption_visible': True

app/templates/views/manage-users/permissions.html

@@ -0,0 +1,21 @@
+{% from "components/checkbox.html" import checkbox %}
+
+<fieldset class="form-group">
+  <legend class="form-label">
+    Permissions
+  </legend>
+  {{ checkbox(form.send_messages, block=True) }}
+  {{ checkbox(form.manage_service, block=True) }}
+  {{ checkbox(form.manage_api_keys, block=True) }}
+</fieldset>
+
+<div class="form-group">
+  <p class="form-label">
+    All team members can see
+  </p>
+  <ul class="list list-bullet">
+    <li>templates</li>
+    <li>history of sent messages</li>
+    <li>who the other team members are</li>
+  </ul>
+</div>

app/templates/views/styleguide.html

@@ -9,7 +9,6 @@
 {% from "components/table.html" import mapping_table, list_table, row, field, text_field, boolean_field, right_aligned_field_heading %}
 {% from "components/textbox.html" import textbox %}
 {% from "components/file-upload.html" import file_upload %}
-{% from "components/yes-no.html" import yes_no %}
 {% from "components/api-key.html" import api_key %}
 
 {% block page_title %}
@@ -243,17 +242,6 @@
   <h2 class="heading-large">File upload</h2>
   {{ file_upload(form.file_upload) }}
 
-  <h2 class="heading-large">Yes/no</h2>
-  <div class="grid-row">
-    <div class='column-half'>
-      <fieldset class='yes-no-wrapper'>
-        {{ yes_no(form.manage_service, form.manage_service.data) }}
-        {{ yes_no(form.manage_templates, form.manage_templates.data) }}
-      </fieldset>
-    </div>
-  </div>
-
-
   <h2 class="heading-large">API key</h2>
 
   {{ api_key('d30512af92e1386d63b90e5973b49a10') }}