mirror of
https://github.com/GSA/notifications-admin.git
synced 2026-09-02 17:48:50 -04: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.
This commit is contained in:
17
app/assets/stylesheets/components/api-key.scss
Normal file
17
app/assets/stylesheets/components/api-key.scss
Normal file
@@ -0,0 +1,17 @@
|
||||
.api-key {
|
||||
|
||||
&-key {
|
||||
font-family: monospace;
|
||||
display: block;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
&-button-show {
|
||||
@include button($grey-3);
|
||||
}
|
||||
|
||||
&-button-copy {
|
||||
@include button($grey-3);
|
||||
}
|
||||
|
||||
}
|
||||
Reference in New Issue
Block a user