Make API key combination of secret and service ID

In research we’ve seen people mix up the service ID and API key because
they’re both 36 character UUIDs. We can’t get rid of the service ID
because it’s used to look up the API key.

Instead, we should change API key to be one long string, which contains
both the service ID, API key and (optionally) the name of the key. For
example:

```
casework_production-8b3aa916-ec82-434e-b0c5-d5d9b371d6a3-dcdc5083-2fee-4fba-8afd-51f3f4bcb7b0
```

We still need to keep the old, separate, key and service ID for a while
until people have updated their clients. But they’re now both on this
page, rather than on two separate pages, which should make for less
fussing anyway.

This shouldn’t be rolled out until the new clients are available.

- [ ] https://github.com/alphagov/notifications-python-client/pull/36
- [ ] https://github.com/alphagov/notifications-node-client/pull/10
- [ ] https://github.com/alphagov/notifications-ruby-client/pull/15
- [ ] https://github.com/alphagov/notifications-java-client/pull/38
- [ ] PHP????

app/templates/views/api/keys.html

@@ -55,10 +55,6 @@
     {% endif %}
   {% endcall %}
 
-  <div class="bottom-gutter-2">
-    {{ api_key(current_service.id, "Service ID", thing="service ID") }}
-  </div>
-
   {{ page_footer(
     secondary_link=url_for('.api_integration', service_id=current_service.id),
     secondary_link_text='Back to API integration'

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

@@ -18,11 +18,31 @@
       once you leave this page.
     </p>
 
-    {{ api_key(secret, key_name) }}
+    <div class="bottom-gutter-2">
 
-    {{ page_footer(
-      secondary_link=url_for('.api_keys', service_id=current_service.id),
-      secondary_link_text='Back to API keys'
-    ) }}
+      {{ api_key(
+        '{}-{}-{}'.format(key_name, service_id, secret),
+        'API key'
+      ) }}
+
+      {{ page_footer(
+        secondary_link=url_for('.api_keys', service_id=current_service.id),
+        secondary_link_text='Back to API keys'
+      ) }}
+
+    </div>
+
+    <h2 class='heading-medium'>For older API clients</h2>
+
+    <p>
+      If the client you’re using needs a service ID and an API key,
+      use these values:
+    </p>
+
+    <div class="bottom-gutter">
+      {{ api_key(service_id, 'Service ID', thing='service ID') }}
+    </div>
+
+    {{ api_key(secret, 'API key') }}
 
 {% endblock %}