app/templates/components/api-key.html

{% 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>
{% endmacro %}
Add email reply address to ID to the page The first users of multiple email reply to addresses will be using the API. This means that the need to be able to specify the ID of the reply to address they want. We chose to implement it like this instead of by passing the address in directly because that means deploying code. For some teams deploying code can take weeks, and we’d like to let teams have the flexibility to make changes faster than this. Same as for templates, you shouldn’t have to go to the _edit_ page in order to get the ID. This means listing them on the page where you see all the reply to addresses. Listing the IDs like this means that it’s not really a table any more, because the information isn’t organised in columns. So I think it makes sense to reuse the pattern from the manage team page, which has a similar relationship between the information. 2017-09-26 15:51:36 +01:00			`{% macro api_key(key, name=None, thing="API key") %}`
			`{% if name %}`
			`<h2 class="api-key-name">`
			`{{ name }}`
			`</h2>`
			`{% endif %}`
Make screen reader announce when API key is copied Currently screen reader users would click the ‘Copy API key’ button but not get any feedback. This commit adds an ARIA attribute which tells the screenreader to announce any changes in to the content of the element (eg when it changes from showing the API to showing the text ‘API key copied to clipboard’). 2017-02-13 14:05:03 +00:00			`<div data-module="api-key" data-key="{{ key }}" data-thing="{{ thing }}" aria-live="assertive">`
Add API key component This commit adds a component for showing an API key. Usage: ```jinja {{ from 'components/api-key.html' import api_key }} {{ api_key('e1b0751388f3cd0fc9982c701acdb3c2') }} ``` Depending on the user’s browser, it works in three different ways. No Javascript --- The API key is shown on the page. Older browsers with Javascript --- The API key is hidden, and users can click a button to reveal it. Newer browsers that support copying to clipboard without Flash --- As above, but when the key is shown there is a button which copies it to the clipboard. This is acheived by using [this polyfill](https://www.npmjs.com/package/query-command-supported) to reliably detect browser support for the ‘copy’ command. The styling of the component is a bit different to the initial sketch. I think a grey button works better than green. Green feels like it’s going to take you somewhere else. 2016-01-15 10:50:10 +00:00			`<span class="api-key-key">{{ key }}</span>`
			`</div>`
			`{% endmacro %}`