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

.api-key {

  position: relative;
  padding-bottom: 38px;  // height of button
  display: flex;

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

  &-key {
    font-family: monospace;
    display: block;
    padding: 0 0 10px 0;
    margin: auto 0;
  }

  &-button-show,
  &-button-copy {

    @include button($grey-3);
    position: absolute;
    bottom: 2px;

    &:active {
      top: auto;
    }

  }

}
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 {`

Don’t have copy API key button jump around It’s annoying that this button moves after you click on it. It’s happening because the API key is wrapping onto multiple lines. This commit fixes the height of the container so that it doesn’t reflow when it has less content in it. Uses a bit of flexbox to vertically centre the text. 2018-10-30 13:03:44 +00:00			`position: relative;`
			`padding-bottom: 38px; // height of button`
			`display: flex;`

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;`
Don’t have copy API key button jump around It’s annoying that this button moves after you click on it. It’s happening because the API key is wrapping onto multiple lines. This commit fixes the height of the container so that it doesn’t reflow when it has less content in it. Uses a bit of flexbox to vertically centre the text. 2018-10-30 13:03:44 +00:00			`padding: 0 0 10px 0;`
			`margin: auto 0;`
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			`}`

Make the flow of using templates better For users who: - want to send messages from a template - want to edit templates For developers: - who need to get the ID of a template This commit mainly cleans up the choose template page so there are less options, and the options that are there are less wordy. This means: - moving ‘send yourself a test’ onto the send messages page, and making it button - stripping a lot of stuff out of the ‘send from API’ page, so it’s more obvious what the template ID is 2016-04-18 11:10:47 +01:00			`&-button-show,`
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			`&-button-copy {`
Don’t have copy API key button jump around It’s annoying that this button moves after you click on it. It’s happening because the API key is wrapping onto multiple lines. This commit fixes the height of the container so that it doesn’t reflow when it has less content in it. Uses a bit of flexbox to vertically centre the text. 2018-10-30 13:03:44 +00:00
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			`@include button($grey-3);`
Don’t have copy API key button jump around It’s annoying that this button moves after you click on it. It’s happening because the API key is wrapping onto multiple lines. This commit fixes the height of the container so that it doesn’t reflow when it has less content in it. Uses a bit of flexbox to vertically centre the text. 2018-10-30 13:03:44 +00:00			`position: absolute;`
			`bottom: 2px;`

			`&:active {`
			`top: auto;`
			`}`

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			`}`

			`}`