Add pages to invite, edit, and delete users

This takes the original prototype version of this page, and, using the same
fake data (ie nothing is wired up):
- adds an invite users page
- adds an edit (and delete) user page

Both these pages allow the user to set another user’s permissions.

This commit adds images for the ticks and crosses, so we have control over their
appearance.

app/templates/components/table.html

@@ -55,6 +55,18 @@
   </td>
 {%- endmacro %}
 
+{% macro text_field(text) -%}
+  {% call field() %}
+    {{ text }}
+  {% endcall %}
+{%- endmacro %}
+
+{% macro boolean_field(yes) -%}
+  {% call field(status='yes' if yes else 'no') %}
+    {{ "Yes" if yes else "No" }}
+  {% endcall %}
+{%- endmacro %}
+
 {% macro right_aligned_field_heading(text) %}
   <span class="table-field-heading-right-aligned">{{ text }}</span>
 {%- endmacro %}

app/templates/components/yes-no.html

@@ -0,0 +1,17 @@
+{% macro yes_no(name, label, current_value=None) %}
+  <fieldset class='yes-no'>
+    <legend class='yes-no-label'>
+      {{ label }}
+    </legend>
+    <div class='yes-no-fields inline'>
+      <label class='block-label'>
+        <input type='radio' name='{{ name }}' {% if current_value == True %}checked{% endif %} />
+        Yes
+      </label>
+      <label class='block-label'>
+        <input type='radio' name='{{ name }}' {% if current_value == False %}checked{% endif %} />
+        No
+      </label>
+    </div>
+  </fieldset>
+{% endmacro %}

app/templates/flash_messages.html

@@ -5,7 +5,7 @@
       {{ banner(
         message,
         'default' if ((category == 'default') or (category == 'default_with_tick')) else 'dangerous',
-        delete_button="Yes, delete this template" if 'delete' == category else None,
+        delete_button="Yes, delete" if 'delete' == category else None,
         with_tick=True if category == 'default_with_tick' else False
       )}}
     {% endfor %}

app/templates/main_nav.html

@@ -8,7 +8,7 @@
   </ul>
   <ul>
     <li><a href="{{ url_for('.manage_service_templates', service_id=service_id) }}">Manage templates</a></li>
-    <li><a href="{{ url_for('.manage_users', service_id=service_id) }}">Manage users</a></li>
+    <li><a href="{{ url_for('.manage_users', service_id=service_id) }}">Manage team</a></li>
     <li><a href="{{ url_for('.service_settings', service_id=service_id) }}">Manage service settings</a></li>
   </ul>
   <ul>

app/templates/views/api-keys.html

@@ -57,7 +57,7 @@
     {% endif %}
   {% endcall %}
 
-  <p>
+  <p class='table-show-more-link'>
     <a href="{{ url_for('.create_api_key', service_id=service_id) }}">Create a new API key</a>
   </p>
 

app/templates/views/invite-user.html

@@ -0,0 +1,48 @@
+{% 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 %}
+
+{% block page_title %}
+Manage users – GOV.UK Notify
+{% endblock %}
+
+{% block maincolumn_content %}
+
+  <h1 class="heading-large">
+    {{ user.name or user.email_localpart or "Add a new team member" }}
+  </h1>
+
+  <div class="grid-row">
+    <form method="post" class="column-three-quarters">
+
+      {% if user %}
+        <p class='bottom-gutter'>
+          {{ user.email_localpart }}@digital.cabinet-office.gov.uk
+        </p>
+      {% else %}
+        {{ textbox(form.email_address, hint='Email address must end in .gov.uk', width='1-1') }}
+      {% endif %}
+
+      <fieldset class='yes-no-wrapper'>
+        <legend class='heading-small'>
+          Permissions
+        </legend>
+        {{ yes_no('send_messages', 'Send messages', user.permission_send_messages) }}
+        {{ yes_no('manage_service', 'Manage service', user.permission_manage_service) }}
+        {{ yes_no('manage_api_keys', 'Manage API keys', user.permission_manage_api_keys) }}
+      </fieldset>
+
+      {% if user %}
+        {{ page_footer(
+          'Save',
+          delete_link=url_for('.delete_user', service_id=service_id, user_id=user_id),
+          delete_link_text='delete this account'
+        ) }}
+      {% else %}
+        {{ page_footer('Send invitation email') }}
+      {% endif %}
+
+    </form>
+  </div>
+{% endblock %}

app/templates/views/manage-users.html

@@ -1,65 +1,56 @@
 {% extends "withnav_template.html" %}
-{% from "components/table.html" import list_table, row, field %}
+{% from "components/table.html" import list_table, row, field, boolean_field, hidden_field_heading %}
 {% from "components/page-footer.html" import page_footer %}
 
+{% set table_options = {
+  'field_headings': [
+    'Name', 'Send messages', 'Manage service', 'Manage API keys', hidden_field_heading('Link to change')
+  ],
+  'field_headings_visible': True,
+  'caption_visible': True
+} %}
+
 {% block page_title %}
 Manage users – GOV.UK Notify
 {% endblock %}
 
 {% block maincolumn_content %}
 
-<h1 class="heading-large">Manage users</h1>
+  <h1 class="heading-large">
+    Manage team
+  </h1>
 
-<p>
-  <a href="#" class="button">Invite users</a>
-</p>
+  {% call(item) list_table(
+    users, caption='Active', **table_options
+  ) %}
+    {% call field() %}
+      {{ item.name }}
+    {% endcall %}
+    {{ boolean_field(item.permission_send_messages) }}
+    {{ boolean_field(item.permission_manage_service) }}
+    {{ boolean_field(item.permission_manage_api_keys) }}
+    {% call field(align='right') %}
+      <a href="{{ url_for('.edit_user', service_id=service_id, user_id=item.id)}}">Change</a>
+    {% endcall %}
+  {% endcall %}
+  <p class='table-show-more-link'>
+    <a href="{{ url_for('.invite_user', service_id=service_id) }}">Add a new team member</a>
+  </p>
 
-{% call(item) list_table(
-  users,
-  caption='Active users',
-  field_headings=['Name', 'Send messages', 'Manage Service', 'Manage API keys', 'Link to change'],
-  field_headings_visible=True,
-  caption_visible=True
-) %}
-  {% call field() %}
-    {{ item.name }}
-  {% endcall %}
-  {% call field() %}
-    {{ "✔" if item.permission_send_messages else "❌" }}
-  {% endcall %}
-  {% call field() %}
-    {{ "✔" if item.permission_manage_service else "❌" }}
-  {% endcall %}
-  {% call field() %}
-    {{ "✔" if item.permission_manage_api_keys else "❌" }}
-  {% endcall %}
-  {% call field(align='right') %}
-    <a href="#">Change</a>
-  {% endcall %}
-{% endcall %}
-
-{% call(item) list_table(
-  invited_users,
-  caption='Invited users',
-  field_headings=['Name', 'Send messages', 'Manage Service', 'Manage API keys', 'Link to change'],
-  field_headings_visible=True,
-  caption_visible=True
-) %}
-  {% call field() %}
-    {{ item.email_localpart }}
-  {% endcall %}
-  {% call field() %}
-    {{ "✔" if item.permission_send_messages else "❌" }}
-  {% endcall %}
-  {% call field() %}
-    {{ "✔" if item.permission_manage_service else "❌" }}
-  {% endcall %}
-  {% call field() %}
-    {{ "✔" if item.permission_manage_api_keys else "❌" }}
-  {% endcall %}
-  {% call field(align='right') %}
-    <a href="#">Change</a>
-  {% endcall %}
-{% endcall %}
+  {% if invited_users %}
+    {% call(item) list_table(
+      invited_users, caption='Invited', **table_options
+    ) %}
+      {% call field() %}
+        {{ item.email_localpart }}
+      {% endcall %}
+      {{ boolean_field(item.permission_send_messages) }}
+      {{ boolean_field(item.permission_manage_service) }}
+      {{ boolean_field(item.permission_manage_api_keys) }}
+      {% call field(align='right') %}
+        <a href="{{ url_for('.edit_user', service_id=service_id, user_id=item.id)}}">Change</a>
+      {% endcall %}
+    {% endcall %}
+  {% endif %}
 
 {% endblock %}