app/templates/components/api-key.html

{% macro api_key(key) %}
  <div data-module="api-key" data-key="{{ key }}">
    <span class="api-key-key">{{ key }}</span>
  </div>
{% endmacro %}
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			`{% macro api_key(key) %}`
			`<div data-module="api-key" data-key="{{ key }}">`
			`<span class="api-key-key">{{ key }}</span>`
			`</div>`
			`{% endmacro %}`