app/assets/stylesheets/components/api-key.scss

.api-key {

  &-name {
    @include bold-19;
    margin-bottom: 5px;
  }

  &-key {
    font-family: monospace;
    display: block;
    margin-bottom: 10px;
  }

  &-button-show {
    @include button($grey-3);
  }

  &-button-copy {
    @include button($grey-3);
  }

}
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			`.api-key {`

Add pages for create/view/revoke API keys Copying what they’ve done on GOV.UK Pay, we should let users: - generate as many keys as they want - only see the key at time of creation - give keys a name - revoke any key at any time (this should be a one way operation) And based on discussions with @minglis and @servingUpAces, the keys should be used in conjunction with some kind of service ID, which gets encrypted with the key. In other words the secret itself never gets sent over the wire. This commit adds the UI (but not the underlying API integration) for doing the above. 2016-01-19 09:55:13 +00:00			`&-name {`
			`@include bold-19;`
			`margin-bottom: 5px;`
			`}`

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			`&-key {`
			`font-family: monospace;`
			`display: block;`
			`margin-bottom: 10px;`
			`}`

			`&-button-show {`
			`@include button($grey-3);`
			`}`

			`&-button-copy {`
			`@include button($grey-3);`
			`}`

			`}`