Merge pull request #155 from alphagov/fixes-to-front-end-patterns

Fixes to front end patterns

app/assets/stylesheets/components/page-footer.scss

@@ -28,6 +28,10 @@
 
   }
 
+  &-secondary-link {
+    display: block;
+    margin-top: $gutter;
+  }
 
   .button {}
 

app/main/views/api_keys.py

@@ -51,5 +51,5 @@ def revoke_api_key(service_id, key_id):
         )
     elif request.method == 'POST':
         api_key_api_client.revoke_api_key(service_id=service_id, key_id=key_id)
-        flash('‘{}’ was revoked'.format(key_name), 'default')
+        flash('‘{}’ was revoked'.format(key_name), 'default_with_tick')
         return redirect(url_for('.api_keys', service_id=service_id))

app/templates/components/page-footer.html

@@ -3,6 +3,8 @@
   destructive=False,
   back_link=False,
   back_link_text="Back",
+  secondary_link=False,
+  secondary_link_text=None,
   delete_link=False,
   delete_link_text="delete"
 ) %}
@@ -19,5 +21,8 @@
     {% if back_link %}
       <a class="page-footer-back-link" href="{{ back_link }}">{{ back_link_text }}</a>
     {% endif %}
+    {% if secondary_link and secondary_link_text %}
+      <a class="page-footer-secondary-link" href="{{ secondary_link }}">{{ secondary_link_text }}</a>
+    {% endif %}
   </div>
 {% endmacro %}

app/templates/flash_messages.html

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

app/templates/views/api-keys.html

@@ -23,9 +23,10 @@
   </p>
 
   {{ banner(
-    'You can only send notifications to yourself',
+    'You can only send messages to yourself until you <a href="{}">request to go live</a>'.format(
-    subhead='Trial mode',
+      url_for('.service_request_to_go_live', service_id=service_id)
-    type='info'
+    )|safe,
+    type='important'
   ) }}
 
   <h2 class="api-key-name">

app/templates/views/api-keys/create.html

@@ -14,11 +14,7 @@
 
   <form method="post">
     {{ textbox(key_name, hint='eg CRM application') }}
-    {{ page_footer(
+    {{ page_footer('Continue') }}
-      'Continue',
-      back_link=url_for('.api_keys', service_id=service_id),
-      back_link_text='Back to API keys'
-    ) }}
   </form>
 
 {% endblock %}

app/templates/views/api-keys/show.html

@@ -20,14 +20,14 @@
           once you leave this page.
         </p>
 
-        {{ api_key(secret, key_name) }}
-
       </div>
     </div>
 
+    {{ api_key(secret, key_name) }}
+
     {{ page_footer(
-      back_link=url_for('.api_keys', service_id=service_id),
+      secondary_link=url_for('.api_keys', service_id=service_id),
-      back_link_text='Back to API keys'
+      secondary_link_text='Back to API keys'
     ) }}
 
 {% endblock %}

app/templates/views/edit-template.html

@@ -26,8 +26,8 @@ GOV.UK Notify | Edit template
         'Save',
         delete_link=url_for('.delete_service_template', service_id=service_id, template_id=template_id) if template_id or None,
         delete_link_text='delete this template',
-        back_link=url_for('.manage_service_templates', service_id=service_id),
+        secondary_link=url_for('.manage_service_templates', service_id=service_id),
-        back_link_text='Back to templates'
+        secondary_link_text='Back to templates'
       ) }}
     </form>
 

app/templates/views/notification.html

@@ -26,8 +26,8 @@ GOV.UK Notify | Notifications activity
     </div>
 
     {{ page_footer(
-      back_link = url_for('.view_job', service_id=service_id, job_id=job_id),
+      secondary_link = url_for('.view_job', service_id=service_id, job_id=job_id),
-      back_link_text = 'View other messages in this job'
+      secondary_link_text = 'View other messages in this job'
     ) }}
 
 {% endblock %}

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

@@ -24,7 +24,8 @@ GOV.UK Notify | Service settings
         {{ textbox(form.name) }}
         {{ page_footer(
           'Save',
-          back_link=url_for('.service_settings', service_id=service_id)
+          back_link=url_for('.service_settings', service_id=service_id),
+          back_link_text='Back to settings'
         ) }}
       </form>
     </div>

app/templates/views/service-settings/request-to-go-live.html

@@ -39,7 +39,8 @@
       <form method="post">
         {{ page_footer(
           'Send request',
-          back_link=url_for('.service_settings', service_id=service_id)
+          back_link=url_for('.service_settings', service_id=service_id),
+          back_link_text='Back to settings'
         ) }}
       </form>
 

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

@@ -23,9 +23,10 @@ GOV.UK Notify | Service settings
 
       <form method="post">
         {{ page_footer(
-          'Turn off all outgoing notifications',
+          'Suspend API keys',
           destructive=True,
-          back_link=url_for('.service_settings', service_id=service_id)
+          back_link=url_for('.service_settings', service_id=service_id),
+          back_link_text='Back to settings'
         ) }}
       </form>
 

app/templates/views/signin.html

@@ -17,7 +17,7 @@ Sign in
     <form autocomplete="off" method="post">
       {{ textbox(form.email_address) }}
       {{ textbox(form.password) }}
-      {{ page_footer("Continue", back_link=url_for('.forgot_password'), back_link_text="Forgotten password?") }}
+      {{ page_footer("Continue", secondary_link=url_for('.forgot_password'), secondary_link_text="Forgotten password?") }}
     </form>
   </div>
 </div>

app/templates/views/styleguide.html

@@ -51,6 +51,8 @@
     type='tip'
   )}}
 
+  {{ banner('You could go to jail', 'important')}}
+
   <h2 class="heading-large">Big number</h2>
 
   <p>Used to show some important statistics.</p>
@@ -117,6 +119,10 @@
     button_text='Send', back_link='http://example.com', back_link_text="Back to dashboard"
   ) }}
 
+  {{ page_footer(
+    button_text='Sign in', secondary_link='http://example.com', secondary_link_text="I’ve forgotten my password"
+  ) }}
+
   <h2 class="heading-large">SMS message</h2>
 
   <p>Used to show, preview or choose an SMS message.</p>

app/templates/views/user-profile/change-password.html

@@ -17,8 +17,8 @@ GOV.UK Notify | Service settings
         {{ textbox(form.new_password) }}
         {{ page_footer(
           'Save',
-          back_link=url_for('.user_profile'),
+          secondary_link=url_for('.user_profile'),
-          back_link_text="Back to your profile"
+          secondary_link_text="Back to your profile"
         ) }}
       </form>
     </div>

tests/app/main/views/test_service_settings.py

@@ -161,7 +161,7 @@ def test_should_show_status_page(app_,
 
         assert response.status_code == 200
         resp_data = response.get_data(as_text=True)
-        assert 'Turn off all outgoing notifications' in resp_data
+        assert 'Suspend API keys' in resp_data
         assert mock_get_service.called