darkhelm/notifications-admin
1
0
Fork 0
mirror of https://github.com/GSA/notifications-admin.git synced 2026-07-14 02:09:44 -04:00
Code Issues Packages Projects Releases Wiki Activity
Files
4d0da6594de60fcf37dc7796279462e32072d7a1
notifications-admin/app/assets/stylesheets/components/api-key.scss

32 lines
397 B
SCSS
Raw Normal View History

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;
Update buttons on api key pages to govuk-frontend buttons
2020-02-06 14:47:47 +00:00
&__name {
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
@include bold-19;
margin-bottom: 5px;
}
Update buttons on api key pages to govuk-frontend buttons
2020-02-06 14:47:47 +00:00
&__key {
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
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
}
Update buttons on api key pages to govuk-frontend buttons
2020-02-06 14:47:47 +00:00
&__button--show,
&__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
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
}
}
Reference in New Issue Copy Permalink