mirror of
https://github.com/GSA/notifications-admin.git
synced 2026-08-14 23:08:07 -04:00
c4544eb833
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.
54 lines
1.4 KiB
SCSS
54 lines
1.4 KiB
SCSS
// Dependencies from GOV.UK Frontend Toolkit
|
|
// https://github.com/alphagov/govuk_frontend_toolkit/
|
|
@import 'conditionals';
|
|
@import 'shims';
|
|
@import 'measurements';
|
|
@import 'css3';
|
|
@import 'colours';
|
|
@import 'typography';
|
|
@import 'grid_layout';
|
|
@import 'helpers';
|
|
@import 'url-helpers';
|
|
@import 'design-patterns/buttons';
|
|
@import 'design-patterns/alpha-beta';
|
|
|
|
// Dependencies from GOV.UK Elements
|
|
// https://github.com/alphagov/govuk_elements
|
|
@import 'elements/helpers';
|
|
@import 'elements/reset';
|
|
@import 'elements/buttons';
|
|
@import 'elements/details';
|
|
@import 'elements/elements-typography';
|
|
@import 'elements/forms';
|
|
@import 'elements/forms/form-validation';
|
|
@import 'elements/forms/form-block-labels';
|
|
@import 'elements/forms/form-validation';
|
|
@import 'elements/icons';
|
|
@import 'elements/layout';
|
|
@import 'elements/lists';
|
|
@import 'elements/panels';
|
|
@import 'elements/tables';
|
|
|
|
|
|
// Specific to this application
|
|
@import 'grids';
|
|
@import 'components/template-picker';
|
|
@import 'components/placeholder';
|
|
@import 'components/sms-message';
|
|
@import 'components/page-footer';
|
|
@import 'components/table';
|
|
@import 'components/navigation';
|
|
@import 'components/big-number';
|
|
@import 'components/banner';
|
|
@import 'components/textbox';
|
|
@import 'components/browse-list';
|
|
@import 'components/management-navigation';
|
|
@import 'components/dropdown';
|
|
@import 'components/email-message';
|
|
@import 'components/api-key';
|
|
|
|
@import 'views/job';
|
|
|
|
// TODO: break this up
|
|
@import 'app';
|