Merge pull request #904 from alphagov/make-settings-page-a-table

Make settings page a table and do a better job of explaining the reply to address/text message sender

app/assets/stylesheets/_grids.scss

@@ -35,6 +35,10 @@
   margin-bottom: $gutter-half;
 }
 
+.bottom-gutter-2 {
+  margin-bottom: $gutter * 2;
+}
+
 .align-with-heading {
   display: block;
   text-align: center;

app/main/forms.py

@@ -327,17 +327,21 @@ class ProviderForm(Form):
 
 
 class ServiceReplyToEmailFrom(Form):
-    email_address = email_address()
+    email_address = email_address(label='Email reply to address')
 
 
 class ServiceSmsSender(Form):
-    sms_sender = StringField('', validators=[Length(max=11,
-                             message="Text message sender can't be longer than 11 characters")])
+    sms_sender = StringField(
+        'Text message sender',
+        validators=[
+            Length(max=11, message="Enter fewer than 11 characters")
+        ]
+    )
 
     def validate_sms_sender(form, field):
         import re
         if field.data and not re.match('^[a-zA-Z0-9\s]+$', field.data):
-            raise ValidationError('Text message sender can only contain alpha-numeric characters')
+            raise ValidationError('Use letters and numbers only')
 
 
 class ServiceBrandingOrg(Form):

app/main/views/service_settings.py

@@ -34,7 +34,14 @@ from app import user_api_client, current_service, organisations_client
 @login_required
 @user_has_permissions('manage_settings', admin_override=True)
 def service_settings(service_id):
-    return render_template('views/service-settings.html')
+    if current_service['organisation']:
+        organisation = organisations_client.get_organisation(current_service['organisation'])['organisation']
+    else:
+        organisation = None
+    return render_template(
+        'views/service-settings.html',
+        organisation=organisation
+    )
 
 
 @main.route("/services/<service_id>/service-settings/name", methods=['GET', 'POST'])
@@ -157,41 +164,6 @@ def service_switch_research_mode(service_id):
     return redirect(url_for('.service_settings', service_id=service_id))
 
 
-@main.route("/services/<service_id>/service-settings/status", methods=['GET', 'POST'])
-@login_required
-@user_has_permissions('manage_settings', admin_override=True)
-def service_status_change(service_id):
-    if request.method == 'GET':
-        return render_template(
-            'views/service-settings/status.html'
-        )
-    elif request.method == 'POST':
-        return redirect(url_for('.service_status_change_confirm', service_id=service_id))
-
-
-@main.route("/services/<service_id>/service-settings/status/confirm", methods=['GET', 'POST'])
-@login_required
-@user_has_permissions('manage_settings', admin_override=True)
-def service_status_change_confirm(service_id):
-    # Validate password for form
-    def _check_password(pwd):
-        return user_api_client.verify_password(current_user.id, pwd)
-
-    form = ConfirmPasswordForm(_check_password)
-
-    if form.validate_on_submit():
-        service_api_client.update_service(
-            current_service['id'],
-            active=True
-        )
-        return redirect(url_for('.service_settings', service_id=service_id))
-    return render_template(
-        'views/service-settings/confirm.html',
-        heading='Turn off all outgoing notifications',
-        destructive=True,
-        form=form)
-
-
 @main.route("/services/<service_id>/service-settings/delete", methods=['GET', 'POST'])
 @login_required
 @user_has_permissions('manage_settings', admin_override=True)
@@ -233,12 +205,10 @@ def service_set_reply_to_email(service_id):
     if request.method == 'GET':
         form.email_address.data = current_service.get('reply_to_email_address')
     if form.validate_on_submit():
-        message = 'Reply to email set to {}'.format(form.email_address.data)
         service_api_client.update_service(
             current_service['id'],
             reply_to_email_address=form.email_address.data
         )
-        flash(message, 'default_with_tick')
         return redirect(url_for('.service_settings', service_id=service_id))
     return render_template(
         'views/service-settings/set-reply-to-email.html',
@@ -253,15 +223,10 @@ def service_set_sms_sender(service_id):
     if request.method == 'GET':
         form.sms_sender.data = current_service.get('sms_sender')
     if form.validate_on_submit():
-        if form.sms_sender.data:
-            message = 'Text message sender set to {}'.format(form.sms_sender.data)
-        else:
-            message = 'Text message sender removed'
         service_api_client.update_service(
             current_service['id'],
             sms_sender=form.sms_sender.data or None
         )
-        flash(message, 'default_with_tick')
         return redirect(url_for('.service_settings', service_id=service_id))
     return render_template(
         'views/service-settings/set-sms-sender.html',

app/notify_client/organisations_client.py

@@ -15,5 +15,8 @@ class OrganisationsClient(BaseAPIClient):
         self.client_id = app.config['ADMIN_CLIENT_USER_NAME']
         self.secret = app.config['ADMIN_CLIENT_SECRET']
 
+    def get_organisation(self, id):
+        return self.get(url='/organisation/{}'.format(id))
+
     def get_organisations(self):
         return self.get(url='/organisation')['organisations']

app/templates/components/table.html

@@ -73,8 +73,8 @@
   </td>
 {% endmacro %}
 
-{% macro text_field(text) -%}
-  {% call field() %}
+{% macro text_field(text, status='') -%}
+  {% call field(status=status) %}
     {{ text }}
   {% endcall %}
 {%- endmacro %}
@@ -85,6 +85,12 @@
   {% endcall %}
 {%- endmacro %}
 
+{% macro edit_field(text, link) -%}
+  {% call field(align='right') %}
+    <a href="{{ link }}">{{ text }}</a>
+  {% endcall %}
+{%- endmacro %}
+
 {% macro boolean_field(yes) -%}
   {% call field(status='yes' if yes else 'no') %}
     {{ "Yes" if yes else "No" }}

app/templates/views/service-settings.html

@@ -1,61 +1,99 @@
 {% extends "withnav_template.html" %}
 {% from "components/browse-list.html" import browse_list %}
+{% from "components/table.html" import mapping_table, row, text_field, edit_field, field %}
 
 {% block page_title %}
-  Service settings – GOV.UK Notify
+  Settings – GOV.UK Notify
 {% endblock %}
 
 {% block maincolumn_content %}
 
     <h1 class="heading-large">Settings</h1>
 
-    {{ browse_list([
-      {
-        'title': 'Change your service name',
-        'link': url_for('.service_name_change', service_id=current_service.id)
-      },
-      {
-        'title': 'Set email reply to address',
-        'link': url_for('.service_set_reply_to_email', service_id=current_service.id)
-      },
-      {
-        'title': 'Set email branding',
-        'link': url_for('.service_set_branding_and_org', service_id=current_service.id)
-      } if current_user.has_permissions([], admin_override=True) else {},
-      {
-        'title': 'Set text message sender name',
-        'link': url_for('.service_set_sms_sender', service_id=current_service.id)
-      },
-      {
-        'title': 'Request to go live and turn off trial mode',
-        'link': url_for('.service_request_to_go_live', service_id=current_service.id),
-        'hint': 'A live service can send notifications to any phone number or email address',
-      } if current_service.restricted else {
-      },
-      {
-        'title': 'Temporarily suspend API keys',
-        'link': url_for('.service_status_change', service_id=current_service.id),
-        'destructive': True
-      } if not current_service.active else {
-        'title': 'Reactivate API keys',
-        'link': url_for('.service_status_change', service_id=current_service.id)
-      },
-      {
-        'title': 'Make service live',
-        'link': url_for('.service_switch_live', service_id=current_service.id)
-      } if current_service.restricted and current_user.has_permissions([], admin_override=True) else {
-        'title': 'Revert service to trial',
-        'link': url_for('.service_switch_live', service_id=current_service.id)
-      } if not current_service.restricted and current_user.has_permissions([], admin_override=True) else {
-      },
-      {
-        'title': 'Put service into research mode',
-        'link': url_for('.service_switch_research_mode', service_id=current_service.id)
-      } if not current_service.research_mode and current_user.has_permissions([], admin_override=True) else {
-        'title': 'Take service out of research mode',
-        'link': url_for('.service_switch_research_mode', service_id=current_service.id)
-      } if current_service.research_mode and current_user.has_permissions([], admin_override=True) else {
-      }
-    ]) }}
+    <div class="bottom-gutter-2">
+
+      {% call mapping_table(
+        caption='Settings',
+        field_headings=['Label', 'Value', 'Action'],
+        field_headings_visible=False,
+        caption_visible=False
+      ) %}
+        {% call row() %}
+          {{ text_field('Service name' )}}
+          {{ text_field(current_service.name) }}
+          {{ edit_field('Change', url_for('.service_name_change', service_id=current_service.id)) }}
+        {% endcall %}
+        {% call row() %}
+          {{ text_field('Email reply to address')}}
+          {{ text_field(
+            current_service.reply_to_email_address,
+            status='' if current_service.reply_to_email_address else 'default'
+          ) }}
+          {{ edit_field('Change', url_for('.service_set_reply_to_email', service_id=current_service.id)) }}
+        {% endcall %}
+        {% call row() %}
+          {{ text_field('Text message sender')}}
+          {{ text_field(current_service.sms_sender or '40604') }}
+          {{ edit_field('Change', url_for('.service_set_sms_sender', service_id=current_service.id)) }}
+        {% endcall %}
+      {% endcall %}
+    </div>
+
+    <div class="bottom-gutter-2">
+
+      <h2 class="heading-medium">Your service is in trial mode</h2>
+
+      <ul class='list list-bullet'>
+        <li>you can only send messages to yourself</li>
+        <li>you can add people to your team, then you can send messages to them too</li>
+        <li>you can only send 50 messages per day</li>
+      </ul>
+
+      <p>
+        To remove these restrictions
+        <a href="{{ url_for('.service_request_to_go_live', service_id=current_service.id) }}">request to go live</a>.
+      </p>
+
+    </div>
+
+    {% if current_user.has_permissions([], admin_override=True) %}
+
+      <h2 class="heading-medium">Platform admin settings</h2>
+
+      {% call mapping_table(
+        caption='Settings',
+        field_headings=['Label', 'Value', 'Action'],
+        field_headings_visible=False,
+        caption_visible=False
+      ) %}
+        {% call row() %}
+          {{ text_field('Email branding' )}}
+          {% call field() %}
+            {% if current_service.branding == 'govuk' %}
+              GOV.UK
+            {% elif current_service.branding == 'both' %}
+              GOV.UK and {{ organisation.name if organisation else None }}
+            {% elif current_service.branding == 'org' %}
+              Only {{ organisation.name if organisation else None }}
+            {% endif %}
+          {% endcall %}
+          {{ edit_field('Change', url_for('.service_set_branding_and_org', service_id=current_service.id)) }}
+        {% endcall %}
+      {% endcall %}
+
+      <ul>
+        <li class="bottom-gutter">
+          <a href="{{ url_for('.service_switch_live', service_id=current_service.id) }}" class="button">
+            {{ 'Make service live' if current_service.restricted else 'Revert service to trial mode' }}
+          </a>
+        </li>
+        <li>
+          <a href="{{ url_for('.service_switch_research_mode', service_id=current_service.id) }}" class="button">
+            {{ 'Take service out of research mode' if current_service.research_mode else 'Put into research mode' }}
+          </a>
+        </li>
+      </ul>
+
+    {% endif %}
 
 {% endblock %}

app/templates/views/service-settings/name.html

@@ -10,26 +10,22 @@
 
   <h1 class="heading-large">Change your service name</h1>
 
-  <div class="grid-row">
-    <div class="column-three-quarters">
 
-      <div class="form-group">
-        <p>Users will see your service name:</p>
-        <ul class="list-bullet">
-          <li>at the start of every text message, eg ‘Vehicle tax: we received your payment, thank you’</li>
-          <li>as your email sender name</li>
-        </ul>
-      </div>
-
-      <form method="post">
-        {{ textbox(form.name) }}
-        {{ page_footer(
-          'Save',
-          back_link=url_for('.service_settings', service_id=current_service.id),
-          back_link_text='Back to settings'
-        ) }}
-      </form>
-    </div>
+  <div class="form-group">
+    <p>Users will see your service name:</p>
+    <ul class="list-bullet">
+      <li>at the start of every text message, eg ‘Vehicle tax: we received your payment, thank you’</li>
+      <li>as your email sender name</li>
+    </ul>
   </div>
 
+  <form method="post">
+    {{ textbox(form.name) }}
+    {{ page_footer(
+      'Save',
+      back_link=url_for('.service_settings', service_id=current_service.id),
+      back_link_text='Back to settings'
+    ) }}
+  </form>
+
 {% endblock %}

app/templates/views/service-settings/set-branding-and-org.html

@@ -16,7 +16,8 @@
         {{ branding_radios(form.organisation, branding_dict=branding_dict) }}
         {{ page_footer(
           'Save',
-          back_link=url_for('.service_settings', service_id=current_service.id)
+          back_link=url_for('.service_settings', service_id=current_service.id),
+          back_link_text='Back to settings'
         ) }}
       </form>
     </div>

app/templates/views/service-settings/set-reply-to-email.html

@@ -3,26 +3,40 @@
 {% from "components/page-footer.html" import page_footer %}
 
 {% block page_title %}
-  Request to go live – GOV.UK Notify
+  Email reply to address – GOV.UK Notify
 {% endblock %}
 
 {% block maincolumn_content %}
 
-  <div class="grid-row">
-    <div class="column-three-quarters">
-      <h1 class="heading-large">Set email reply to address</h1>
-      <form method="post">
-        {{ textbox(
-          form.email_address,
-          width='1-1',
-          safe_error_message=True
-        ) }}
-        {{ page_footer(
-          'Save',
-          back_link=url_for('.service_settings', service_id=current_service.id)
-      ) }}
-      </form>
-    </div>
-  </div>
+  <h1 class="heading-large">
+    Email reply to address
+  </h1>
+  <p>
+    Your emails will be sent from
+    {{ current_service.email_from }}@notifications.service.gov.uk.
+    This is so they have the best chance of being delivered.
+    This email address can’t receive replies.
+  </p>
+  <p>
+    Set up a separate email address to receive replies from
+    your users, then enter it here.
+  </p>
+  {% if current_service.restricted %}
+    <p>
+      Your service can’t go live until you’ve done this.
+    </p>
+  {% endif %}
+  <form method="post">
+    {{ textbox(
+      form.email_address,
+      width='2-3',
+      safe_error_message=True
+    ) }}
+    {{ page_footer(
+      'Save',
+      back_link=url_for('.service_settings', service_id=current_service.id),
+      back_link_text='Back to settings'
+  ) }}
+  </form>
 
 {% endblock %}

app/templates/views/service-settings/set-sms-sender.html

@@ -8,21 +8,33 @@
 
 {% block maincolumn_content %}
 
-  <div class="grid-row">
-    <div class="column-three-quarters">
-      <h1 class="heading-large">Set text message sender name</h1>
-      <form method="post">
-        {{ textbox(
-          form.sms_sender,
-          width='1-1',
-          safe_error_message=True
-        ) }}
-        {{ page_footer(
-          'Save',
-          back_link=url_for('.service_settings', service_id=current_service.id)
-      ) }}
-      </form>
-    </div>
-  </div>
+  <h1 class="heading-large">Text message sender</h1>
+  <p>
+    This appears instead of a phone number when a user receives a
+    text message from your service.
+  <p>
+    If you leave this blank:
+  </p>
+  <ul class="list list-bullet">
+    <li>
+      your messages will be sent from 40604 (a shortcode that’s
+      reserved for government use)
+    </li>
+    <li>
+      each message will begin with ‘{{ current_service.name }}:’
+    </li>
+  </ul>
+  <form method="post">
+    {{ textbox(
+      form.sms_sender,
+      width='1-4',
+      hint='Up to 11 characters, letters, numbers and spaces only'
+    ) }}
+    {{ page_footer(
+      'Save',
+      back_link=url_for('.service_settings', service_id=current_service.id),
+      back_link_text='Back to settings'
+  ) }}
+  </form>
 
 {% endblock %}

app/templates/views/service-settings/status.html

@@ -1,38 +0,0 @@
-{% extends "withnav_template.html" %}
-{% from "components/page-footer.html" import page_footer %}
-
-{% block page_title %}
-  Temporrily suspend API keys – GOV.UK Notify
-{% endblock %}
-
-{% block maincolumn_content %}
-
-  <h1 class="heading-large">Temporarily suspend API keys</h1>
-
-  <div class="grid-row">
-    <div class="column-three-quarters">
-
-      <p>
-        You’ll still be able to send notifications to yourself by uploading a
-        CSV file.
-      </p>
-
-      <p>
-        You can start sending notifications again when you’re ready.
-      </p>
-
-      <form method="post">
-        {{ page_footer(
-          'Suspend API keys',
-          destructive=True,
-          back_link=url_for('.service_settings', service_id=current_service.id),
-          back_link_text='Back to settings'
-        ) }}
-      </form>
-
-    </div>
-  </div>
-
-
-
-{% endblock %}