Merge pull request #1512 from alphagov/email-reply-tweaks

Tweak email reply to pages, add IDs

app/assets/stylesheets/components/tick-cross.scss

@@ -42,12 +42,12 @@
   &-list {
 
     @extend %grid-row;
-    margin-top: 5px;
     position: relative;
 
     &-permissions {
 
       @include grid-column(3/4);
+      margin-top: 5px;
 
       li {
         display: block;
@@ -59,7 +59,7 @@
     &-edit-link {
       text-align: right;
       position: absolute;
-      top: -1.6em;
+      top: -25px;
       right: -135px;
     }
 

app/main/forms.py

@@ -463,7 +463,7 @@ class ProviderForm(Form):
 
 class ServiceReplyToEmailForm(Form):
     email_address = email_address(label='Email reply to address')
-    is_default = BooleanField("Make this address the default")
+    is_default = BooleanField("Make this email address the default")
 
 
 class ServiceSmsSender(Form):

app/templates/components/api-key.html

@@ -1,7 +1,9 @@
-{% macro api_key(key, name, thing="API key") %}
-  <h2 class="api-key-name">
-    {{ name }}
-  </h2>
+{% macro api_key(key, name=None, thing="API key") %}
+  {% if name %}
+    <h2 class="api-key-name">
+      {{ name }}
+    </h2>
+  {% endif %}
   <div data-module="api-key" data-key="{{ key }}" data-thing="{{ thing }}" aria-live="assertive">
     <span class="api-key-key">{{ key }}</span>
   </div>

app/templates/views/service-settings.html

@@ -44,8 +44,9 @@
         {% if 'email' in current_service.permissions %}
 
           {% call row() %}
-            {{ text_field('Email reply to address') }}
-            {% call field() %}
+            {{ text_field('Email reply to addresses') }}
+            {% call field(status='default' if default_reply_to_email_address == "None" else '') %}
+
               {{ default_reply_to_email_address }}
               {% if reply_to_email_address_count > 1 %}
                 <div class="hint">
@@ -53,7 +54,10 @@
                 </div>
               {% endif %}
             {% endcall %}
-            {{ edit_field('Change', url_for('.service_email_reply_to', service_id=current_service.id)) }}
+            {{ edit_field(
+              'Manage' if reply_to_email_address_count else 'Change',
+              url_for('.service_email_reply_to', service_id=current_service.id))
+            }}
           {% endcall %}
 
         {% endif %}

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

@@ -27,7 +27,7 @@
       'Add',
       back_link=url_for('.service_email_reply_to', service_id=current_service.id),
       back_link_text='Back'
-  ) }}
+    ) }}
   </form>
 
-{% endblock %}
+{% endblock %}

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

@@ -19,7 +19,9 @@
       safe_error_message=True
     ) }}
     {% if form.is_default.data %}
-      <p> This email address is the default </p>
+      <p class="form-group">
+        This is the default reply to address for {{ current_service.name }} emails
+      </p>
     {% else %}
       <div class="form-group">
         {{ checkbox(form.is_default) }}
@@ -32,4 +34,4 @@
   ) }}
   </form>
 
-{% endblock %}
+{% endblock %}

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

@@ -1,5 +1,5 @@
 {% extends "withnav_template.html" %}
-{% from "components/textbox.html" import textbox %}
+{% from "components/api-key.html" import api_key %}
 {% from "components/page-footer.html" import page_footer %}
 {% from "components/table.html" import row_group, row, text_field, edit_field, field, boolean_field, list_table %}
 
@@ -19,27 +19,50 @@
 	   <a href="{{ url_for('.service_add_email_reply_to', service_id=current_service.id) }}" class="button align-with-heading">Add email address</a>
 	 </div>
   </div>
-  <div class="bottom-gutter-3-2 body-copy-table">
-    {% call(item, row_number) list_table(
-      reply_to_email_addresses,
-      empty_message="You haven’t added any email addresses yet.",
-      caption="Reply to email addresses",
-      caption_visible=false,
-      field_headings=[
-        'Email addresses',
-        'Action'
-      ],
-      field_headings_visible=False
-    ) %}
-        {% call field() %}
-          {{ item.email_address }}
-          {% if item.is_default %}
-            <span class="hint">
-              {{ "(default)" }}
-            </span>
-          {% endif %}
-        {% endcall %}
-		{{ edit_field('Change', url_for('.service_edit_email_reply_to', service_id =current_service.id, reply_to_email_id = item.id)) }}        
-    {% endcall %}
+  <div class="user-list">
+    {% if not reply_to_email_addresses %}
+      <div class="user-list-item">
+        <span class="hint">You haven’t added any email reply to addresses yet</span>
+      </div>
+    {% endif %}
+    {% for item in reply_to_email_addresses %}
+      <div class="user-list-item">
+        <h3>
+          <span class="heading-small">{{ item.email_address }}</span>&ensp;<span class="hint">
+            {%- if item.is_default -%}
+              (default)
+            {% endif %}
+          </span>
+        </h3>
+        <ul class="tick-cross-list">
+          <li class="tick-cross-list-edit-link">
+            <a href="{{ url_for('.service_edit_email_reply_to', service_id =current_service.id, reply_to_email_id = item.id) }}">Change</a>
+          </li>
+        </ul>
+        {% if reply_to_email_addresses|length  > 1 %}
+          {{ api_key(item.id, thing="ID") }}
+        {% endif %}
+      </div>
+    {% endfor %}
   </div>
-{% endblock %}
+  <div class="grid-row">
+    <div class="column-five-sixths">
+      <p>
+        Your emails will be sent from
+        {{ current_service.email_from }}@notifications.service.gov.uk
+      </p>
+      <p>
+        This is so they have the best chance of being delivered.
+        This email address can’t receive replies.
+      </p>
+      <p>
+        Set up separate email addresses to receive replies
+        from your users.
+        {% if current_service.restricted and not reply_to_email_addresses %}
+          Your service can’t go live until you’ve added at least one
+          reply to address.
+        {% endif %}
+      </p>
+    </div>
+  </div>
+{% endblock %}