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.
This commit is contained in:
Chris Hill-Scott
2016-01-15 10:50:10 +00:00
parent e2021612b4
commit c4544eb833
7 changed files with 94 additions and 5 deletions

View File

@@ -33,6 +33,7 @@
"gulp-load-plugins": "1.1.0",
"gulp-sass": "2.1.1",
"gulp-uglify": "1.5.1",
"jquery": "1.11.2"
"jquery": "1.11.2",
"query-command-supported": "1.0.0"
}
}