Skip to content

Commit

Permalink
PP-13146 update created api key warning next (#4271)
Browse files Browse the repository at this point in the history 
Co-authored-by: Alan Maddrell <[email protected]>
  • Loading branch information
@nlsteers @alanmaddrell
nlsteers and alanmaddrell authored Sep 16, 2024
1 parent 5af9f34 commit 619e7ac
Showing 1 changed file with 59 additions and 57 deletions.
116 changes: 59 additions & 57 deletions app/views/api-keys/create.njk
View file
Original file line number Diff line number Diff line change
@@ -1,22 +1,23 @@
{% extends "../layout.njk" %}

{% block pageTitle %}
Create an API key - {{currentService.name}} {{currentGatewayAccount.full_type}} - GOV.UK Pay
Create an API key - {{ currentService.name }} {{ currentGatewayAccount.full_type }} - GOV.UK Pay
{% endblock %}

{% block side_navigation %}
{% include "includes/side-navigation.njk" %}
{% endblock %}

{% block mainContent %}
<div class="govuk-grid-column-two-thirds">
{% if not token %}
<h1 class="govuk-heading-l page-title">Create an API key</h1>
<form class="form" method="post" action="{{formatAccountPathsFor(routes.account.apiKeys.create, currentGatewayAccount.external_id)}}" novalidate>
<input id="csrf" name="csrfToken" type="hidden" value="{{csrf}}" />
<div class="govuk-grid-column-two-thirds">
{% if not token %}
<h1 class="govuk-heading-l page-title">Create an API key</h1>
<form class="form" method="post"
action="{{ formatAccountPathsFor(routes.account.apiKeys.create, currentGatewayAccount.external_id) }}"
novalidate>
<input id="csrf" name="csrfToken" type="hidden" value="{{ csrf }}"/>

{{
govukInput({
{{ govukInput({
id: "description",
name: "description",
type: "text",
Expand All @@ -30,72 +31,73 @@ Create an API key - {{currentService.name}} {{currentGatewayAccount.full_type}}
hint: {
text: "For example, “John Smith’s API key”"
}
})
}}
<p class="govuk-body">When generated the key will only be shown once.</p>
}) }}
<p class="govuk-body">When generated the key will only be shown once.</p>

{{
govukButton({
{{ govukButton({
text: "Continue",
attributes: {
id: "generate-button"
}
})
}}
</form>
<p class="govuk-body">
<a class="govuk-link govuk-link--no-visited-state" href="{{formatAccountPathsFor(routes.account.apiKeys.index, currentGatewayAccount.external_id)}}">Cancel</a>
</p>
{% else %}
<h1 class="govuk-heading-l page-title">New API key</h1>
<p class="govuk-body">Copy your key to somewhere safe. You won’t be able to see it again once you leave this page. You must copy the whole key, including the <code>api_test_</code> or <code>api_live_</code> prefix.</p>
}) }}
</form>
<p class="govuk-body">
<a class="govuk-link govuk-link--no-visited-state"
href="{{ formatAccountPathsFor(routes.account.apiKeys.index, currentGatewayAccount.external_id) }}">Cancel</a>
</p>
{% else %}
<h1 class="govuk-heading-l page-title">New API key</h1>

<div class="govuk-warning-text govuk-!-margin-bottom-0">
<span class="govuk-warning-text__icon" aria-hidden="true">!</span>
<strong class="govuk-warning-text__text">
<span class="govuk-warning-text__assistive">Warning</span>
<h2 class="govuk-heading-m">API security</h2>
<div class="govuk-warning-text govuk-!-margin-bottom-0">
<span class="govuk-warning-text__icon" aria-hidden="true">!</span>
<strong class="govuk-warning-text__text">
<span class="govuk-warning-text__assistive">Warning</span>
<h2 class="govuk-heading-m">Store your API key securely</h2>
</strong>

<p class="govuk-body">Do not:</p>
<ul class="govuk-list govuk-list--bullet">
<li>You must store your API keys securely.</li>
<li>You must not share this key in publicly accessible documents or repositories.</li>
<li>You must not share it with anyone who should not be using the GOV.UK Pay API directly.</li>
</ul>
</strong>
<strong class="govuk-warning-text__text">
<p class="govuk-body">
More about <a class="govuk-link" href="https://docs.payments.service.gov.uk/security/#securing-your-developer-keys">securing your API keys</a>.
</p>
</strong>
</div>
<li>email it to anyone</li>
<li>keep it in documents or repositories publicly available on the internet</li>
<li>share it with anyone who should not have direct access to the GOV.UK Pay API</li>
</ul>
<p class="govuk-body">Copy your key to somewhere safe. You will not be able to see it again after you leave this
page. You must copy the whole key, including the <code>api_test_</code> or <code>api_live_</code> prefix.</p>
<p class="govuk-body">
More about <a class="govuk-link"
href="https://docs.payments.service.gov.uk/security/#securing-your-developer-keys">securing
your API keys</a>.
</p>
</div>

<h2 class="govuk-heading-m">
{{description}}
</h2>
<div>
<span id="token" class="code copy-this-api-key">{{token}}</span>
</div>
<h2 class="govuk-heading-m">
{{ description }}
</h2>
<div>
<span id="token" class="code copy-this-api-key">{{ token }}</span>
</div>

{{
govukButton({
{{ govukButton({
text: "Copy API key to clipboard",
classes: "govuk-button--secondary govuk-!-margin-top-4",
attributes: {
id: "generate-button",
"data-copy-text": true,
"data-target": "copy-this-api-key",
"data-success": "API key has been copied",
"data-notification-target": "copy-this-api-key-notification"
"data-notification-target": "copy-this-api-key-notification"
}
})
}}
}) }}

<div class="copy-this-api-key-notification govuk-visually-hidden" aria-live="assertive"></div>
<div class="copy-this-api-key-notification govuk-visually-hidden" aria-live="assertive"></div>

<p class="govuk-body">
<a class="govuk-link govuk-link--no-visited-state" href="{{formatAccountPathsFor(routes.account.apiKeys.index, currentGatewayAccount.external_id)}}" id="finish-link">
Back to API keys
</a>
</p>
{% endif %}
</div>
<p class="govuk-body">
<a class="govuk-link govuk-link--no-visited-state"
href="{{ formatAccountPathsFor(routes.account.apiKeys.index, currentGatewayAccount.external_id) }}"
id="finish-link">
Back to API keys
</a>
</p>
{% endif %}
</div>
{% endblock %}

0 comments on commit 619e7ac

Please sign in to comment.