diff --git a/app/assets/javascripts/apiKey.js b/app/assets/javascripts/apiKey.js index 215be5672..2bbfa174c 100644 --- a/app/assets/javascripts/apiKey.js +++ b/app/assets/javascripts/apiKey.js @@ -6,13 +6,13 @@ Modules.ApiKey = function() { const states = { - 'keyVisible': key => ` + 'keyVisible': (key, thing) => ` ${key} - + `, - 'keyCopied': ` + 'keyCopied': thing => ` Copied to clipboard - + ` }; @@ -30,21 +30,22 @@ this.start = function(component) { const $component = $(component), - key = $component.data('key'); + key = $component.data('key'), + thing = $component.data('thing'); $component - .html(states.keyVisible(key)) + .html(states.keyVisible(key, thing)) .attr('aria-live', 'polite') .on( 'click', '.api-key-button-copy', () => this.copyKey( $('.api-key-key', component)[0], () => - $component.html(states.keyCopied) + $component.html(states.keyCopied(thing)) ) ) .on( 'click', '.api-key-button-show', () => - $component.html(states.keyVisible(key)) + $component.html(states.keyVisible(key, thing)) ); }; diff --git a/app/assets/javascripts/highlightTags.js b/app/assets/javascripts/highlightTags.js index 1e2dae456..62b9ba736 100644 --- a/app/assets/javascripts/highlightTags.js +++ b/app/assets/javascripts/highlightTags.js @@ -25,7 +25,7 @@ this.initialHeight = this.$textbox.height(); this.$backgroundMaskForeground.css({ - 'width': this.$textbox.width(), + 'width': this.$textbox.outerWidth(), 'border-width': this.$textbox.css('border-width') }); diff --git a/app/assets/stylesheets/app.scss b/app/assets/stylesheets/app.scss index a34ba0521..c14cc30c5 100644 --- a/app/assets/stylesheets/app.scss +++ b/app/assets/stylesheets/app.scss @@ -97,6 +97,10 @@ td { margin-bottom: 20px; } +.heading-medium { + margin-top: $gutter; +} + #footer { .footer-categories { @@ -132,3 +136,7 @@ a[rel='external'] { .hint { color: $secondary-text-colour; } + +.button { + padding: 0.3em 0.6em 0.2em 0.6em; +} diff --git a/app/assets/stylesheets/components/api-key.scss b/app/assets/stylesheets/components/api-key.scss index e17b45ef4..6099524b5 100644 --- a/app/assets/stylesheets/components/api-key.scss +++ b/app/assets/stylesheets/components/api-key.scss @@ -11,10 +11,7 @@ margin-bottom: 10px; } - &-button-show { - @include button($grey-3); - } - + &-button-show, &-button-copy { @include button($grey-3); } diff --git a/app/assets/stylesheets/components/email-message.scss b/app/assets/stylesheets/components/email-message.scss index 15dbab8c7..a6e27ad5f 100644 --- a/app/assets/stylesheets/components/email-message.scss +++ b/app/assets/stylesheets/components/email-message.scss @@ -1,4 +1,5 @@ $white-50-opaque: rgba($white, 0.5); +$button-bottom-border-colour: rgba(0, 0, 0, 0.17); .email-message { @@ -63,7 +64,7 @@ $white-50-opaque: rgba($white, 0.5); position: absolute; left: 50%; bottom: -18px; - height: 25px; + height: 27px; display: inline-block; padding: 0; margin: 0 0 0 -30px; @@ -75,23 +76,20 @@ $white-50-opaque: rgba($white, 0.5); cursor: pointer; width: 60px; text-decoration: none; - background: $grey-1; - color: $white; + background: $grey-3; + color: $text-colour; border-style: solid; border-width: 3px; border-color: $white; - border-radius: 6px; - box-shadow: 0 0 0 1px $white-50-opaque; + box-shadow: inset 0 -2px 0 $button-bottom-border-colour, 0 0 0 1px $white-50-opaque; &:hover { - background: $link-hover-colour; + background: $grey-2; } &:focus, &:active { - background: $yellow; - border-color: $white; - color: $text-colour; + border-color: $yellow; outline: none; } diff --git a/app/assets/stylesheets/components/page-footer.scss b/app/assets/stylesheets/components/page-footer.scss index f38a0e6ea..bb627a396 100644 --- a/app/assets/stylesheets/components/page-footer.scss +++ b/app/assets/stylesheets/components/page-footer.scss @@ -5,7 +5,6 @@ &-back-link { @include button($grey-1); display: inline-block; - padding: 0.52632em 0.78947em 0.26316em 0.78947em; margin-left: 10px; } diff --git a/app/assets/stylesheets/components/pill.scss b/app/assets/stylesheets/components/pill.scss index 42c56869f..de839a37c 100644 --- a/app/assets/stylesheets/components/pill.scss +++ b/app/assets/stylesheets/components/pill.scss @@ -2,7 +2,8 @@ display: flex; - a, span { + a, + span { display: block; padding: 10px; flex-grow: 1; @@ -38,4 +39,4 @@ border: 1px solid $grey-1; color: $text-colour; } -} \ No newline at end of file +} diff --git a/app/assets/stylesheets/components/secondary-button.scss b/app/assets/stylesheets/components/secondary-button.scss new file mode 100644 index 000000000..6e7a0ff7c --- /dev/null +++ b/app/assets/stylesheets/components/secondary-button.scss @@ -0,0 +1,8 @@ +.secondary-button { + @include button($grey-1); + padding: 0.3em 0.1em 0.2em 0.1em; + width: 100%; + padding-left: 0; + padding-right: 0; + text-align: center; +} diff --git a/app/assets/stylesheets/components/sms-message.scss b/app/assets/stylesheets/components/sms-message.scss index b7ebd7144..32d57ebd9 100644 --- a/app/assets/stylesheets/components/sms-message.scss +++ b/app/assets/stylesheets/components/sms-message.scss @@ -52,6 +52,7 @@ .sms-message-use-links { @include copy-19; + margin-top: -5px; a { display: block; @@ -68,7 +69,7 @@ .sms-message-use-links-with-title { @extend %sms-message-use-links; - margin-top: 52px; + margin-top: 55px; } .sms-message-from { diff --git a/app/assets/stylesheets/components/table.scss b/app/assets/stylesheets/components/table.scss index 5455046c5..32b3e7512 100644 --- a/app/assets/stylesheets/components/table.scss +++ b/app/assets/stylesheets/components/table.scss @@ -112,13 +112,12 @@ @include core-16; color: $secondary-text-colour; margin-top: -20px; - margin-bottom: $gutter * 1.5; + margin-bottom: $gutter * 1.3333; border-bottom: 1px solid $border-colour; padding-bottom: 10px; text-align: center; } a.table-show-more-link { - @include bold-16; color: $link-colour; } diff --git a/app/assets/stylesheets/main.scss b/app/assets/stylesheets/main.scss index 98910957e..a8ba3e209 100644 --- a/app/assets/stylesheets/main.scss +++ b/app/assets/stylesheets/main.scss @@ -49,6 +49,7 @@ $path: '/static/images/'; @import 'components/api-key'; @import 'components/vendor/previous-next-navigation'; @import 'components/pill'; +@import 'components/secondary-button'; @import 'views/job'; @import 'views/edit-template'; diff --git a/app/main/views/send.py b/app/main/views/send.py index 6a97941de..469612a0d 100644 --- a/app/main/views/send.py +++ b/app/main/views/send.py @@ -183,19 +183,16 @@ def send_message_to_self(service_id, template_id): @user_has_permissions('manage_api_keys') def send_from_api(service_id, template_id): template = Template( - service_api_client.get_service_template(service_id, template_id)['data'] + service_api_client.get_service_template(service_id, template_id)['data'], + prefix=current_service['name'] ) - payload = { - "to": current_user.mobile_number, - "template": template.id, - "personalisation": { - placeholder: "{} 1".format(placeholder) for placeholder in template.placeholders - } + personalisation = { + placeholder: "..." for placeholder in template.placeholders } return render_template( 'views/send-from-api.html', template=template, - payload=json.dumps(payload, indent=4) + personalisation=json.dumps(personalisation, indent=4) if personalisation else None ) diff --git a/app/templates/components/api-key.html b/app/templates/components/api-key.html index 2a2eb2525..74bce2b55 100644 --- a/app/templates/components/api-key.html +++ b/app/templates/components/api-key.html @@ -1,8 +1,8 @@ -{% macro api_key(key, name) %} +{% macro api_key(key, name, thing="API key") %}

{{ name }}

-
+
{{ key }}
{% endmacro %} diff --git a/app/templates/components/sms-message.html b/app/templates/components/sms-message.html index 4d0e1fdd7..eb809d409 100644 --- a/app/templates/components/sms-message.html +++ b/app/templates/components/sms-message.html @@ -1,6 +1,4 @@ -{% macro sms_message( - body, recipient=None, name=None, id=None, edit_link=None, from=None -) %} +{% macro sms_message(body, recipient=None, name=None, id=None, edit_link=None, from=None) %} {% if name %}

{% if edit_link %} diff --git a/app/templates/main_nav.html b/app/templates/main_nav.html index a9685cec1..901a4ad7f 100644 --- a/app/templates/main_nav.html +++ b/app/templates/main_nav.html @@ -7,8 +7,8 @@
  • Activity
  • {% endif %} {% if current_user.has_permissions(['view_activity', 'manage_templates', 'manage_api_keys'], admin_override=True, any_=True) %} -
  • Text message templates
  • Email templates
  • +
  • Text message templates
  • {% endif %} {% if current_user.has_permissions(['manage_users', 'manage_settings'], admin_override=True) %}
  • Team members
  • diff --git a/app/templates/views/send-from-api.html b/app/templates/views/send-from-api.html index 9bb1ddb4f..50536c2a0 100644 --- a/app/templates/views/send-from-api.html +++ b/app/templates/views/send-from-api.html @@ -1,6 +1,7 @@ {% extends "withnav_template.html" %} {% from "components/email-message.html" import email_message %} {% from "components/sms-message.html" import sms_message %} +{% from "components/api-key.html" import api_key %} {% block page_title %} API integration – GOV.UK Notify @@ -9,50 +10,32 @@ {% block maincolumn_content %}

    - API integration + API info

    -
    -
    - - {% if 'email' == template.template_type %} - {{ email_message( - template.subject, - template.formatted_as_markup, - ) }} - {% elif 'sms' == template.template_type %} + {% if 'email' == template.template_type %} + {{ email_message( + template.formatted_subject_as_markup, + template.formatted_as_markup, + ) }} + {% elif 'sms' == template.template_type %} +
    +
    {{ sms_message( template.formatted_as_markup, ) }} - {% endif %} - -

    - You can send this message from your existing apps or systems by - connecting them to GOV.UK Notify. -

    -

    - You’ll need to work with a developer to do this. -

    - +
    + {% endif %} + +
    + {{ api_key(template.id, name="Template ID", thing='template ID') }}
    -

    - Example payload for this template -

    - {{payload|syntax_highlight_json}} - -

    - Endpoint -

    - -
    -
    -      {{- 'POST https://api.notifications.service.gov.uk/notifications/{}'.format(
    -        template.template_type
    -      ) -}}
    -    
    -
    + {% if personalisation %} +

    Personalisation (all fields are required)

    + {{ personalisation|syntax_highlight_json }} + {% endif %}


    See the developer documentation for full details. diff --git a/app/templates/views/send.html b/app/templates/views/send.html index b916b5e28..0ff51054a 100644 --- a/app/templates/views/send.html +++ b/app/templates/views/send.html @@ -11,32 +11,34 @@ {% block maincolumn_content %} -

    Send from a CSV file

    - {% if 'sms' == template.template_type %} -
    -
    +

    Send {{ 'text messages' if 'sms' == template.template_type else 'emails' }}

    + +
    +
    + {% if 'sms' == template.template_type %} {{ sms_message(template.formatted_as_markup) }} -
    + {% elif 'email' == template.template_type %} + {{ email_message( + template.formatted_subject_as_markup, + template.formatted_as_markup + ) }} + {% endif %}
    - {% elif 'email' == template.template_type %} - {{ email_message( - template.formatted_subject_as_markup, - template.formatted_as_markup, - from_address='{}@notifications.service.gov.uk'.format(current_service.email_from), - from_name=current_service.name - ) }} - {% endif %} + +

    - You need + Make a CSV file with {{ template.placeholders|length + 1 }} {% if template.placeholders %} - columns + columns, {% else %} - column + column, {% endif %} - in your file, like this: + like this:

    {% call(item, row_number) list_table( diff --git a/app/templates/views/templates/_template.html b/app/templates/views/templates/_template.html index 7863ac383..77d67cc07 100644 --- a/app/templates/views/templates/_template.html +++ b/app/templates/views/templates/_template.html @@ -10,22 +10,21 @@ ) }} {% elif 'sms' == template.template_type %} {{ sms_message( - template.formatted_as_markup, - name=template.name if show_title else None - ) }} + template.formatted_as_markup, + name=template.name if show_title else None + ) }} {% endif %}
    {% if current_user.has_permissions(permissions=['send_texts', 'send_emails', 'send_letters']) %} - Send from a CSV file - Send yourself a test - {% endif %} - {% if current_user.has_permissions(permissions=['manage_api_keys']) %} - API integration + + Send {{ 'text messages' if 'sms' == template.template_type else 'emails' }} + {% endif %} {% if current_user.has_permissions(permissions=['manage_templates'], admin_override=True) %} Edit template {% endif %} + API info
    \ No newline at end of file diff --git a/app/templates/views/templates/template.html b/app/templates/views/templates/template.html index 8a6ec558b..4257761f6 100644 --- a/app/templates/views/templates/template.html +++ b/app/templates/views/templates/template.html @@ -14,15 +14,14 @@

    {{ template.name }}

    - {% include 'views/templates/_template.html' %} + {% with show_title=False %} + {% include 'views/templates/_template.html' %} + {% endwith %}
    -

    - - All - {{ 'email' if 'email' == template.template_type else 'text message' }} - templates - -

    + {{ page_footer( + secondary_link=url_for('.choose_template', service_id=current_service.id, template_type=template.template_type), + secondary_link_text='All {} templates'.format('email' if 'email' == template.template_type else 'text message') + ) }} {% endblock %} diff --git a/docs/index.md b/docs/index.md index 017ba4446..d639967b8 100644 --- a/docs/index.md +++ b/docs/index.md @@ -158,7 +158,7 @@ where: * `to` is the phone number (required) * `template` is the template ID to send (required) - **Note:** Access the template ID from the [GOV.UK Notify](https://www.notifications.service.gov.uk/) web application: go to **Text message templates**, click on **Edit template** and recover the template id from the url eg `/templates//edit` + **Note:** Access the template ID from the [GOV.UK Notify](https://www.notifications.service.gov.uk/) web application: go to **Text message templates** or **Email templates** and click on **API info**. * `personalisation` (optional) specifies the values for the placeholders in your templates diff --git a/tests/app/main/views/test_send.py b/tests/app/main/views/test_send.py index 07ea44e60..79512cde4 100644 --- a/tests/app/main/views/test_send.py +++ b/tests/app/main/views/test_send.py @@ -419,10 +419,6 @@ def test_route_choose_template_send_messages_permissions(mocker, "main.send_messages", service_id=service_one['id'], template_id=template_id) in page - assert url_for( - "main.send_message_to_self", - service_id=service_one['id'], - template_id=template_id) in page assert url_for( "main.edit_service_template", service_id=service_one['id'],