Merge pull request #1585 from alphagov/huh-74-verify-hint

HUH-74: Verify sign-in hint on interstitial page - live test

.rubocop.yml

@@ -11,3 +11,8 @@ Rails/OutputSafety:
   Enabled: false
 Rails/HelperInstanceVariable:
   Enabled: false
+
+# Temporary - should be reverted as soon as the Verify tests finishes
+AllCops:
+  Exclude:
+    - "config/initializers/csp.rb"

app/assets/javascripts/modules/show-gov-uk-verify-hint.js

@@ -0,0 +1,67 @@
+window.GOVUK = window.GOVUK || {}
+window.GOVUK.Modules = window.GOVUK.Modules || {};
+
+(function (global, GOVUK) {
+  'use strict'
+
+  var $ = global.jQuery
+  var VISIBLE_ON_URL = "/personal-tax-account/sign-in/prove-identity"
+
+  GOVUK.Modules.ShowGovUkVerifyHint = function () {
+    this.start = function (element) {
+      if (window.location.href.indexOf(VISIBLE_ON_URL) > -1) {
+        checkLastSuccessfulIdp(element)
+      }
+    }
+
+    this.render = function (element, data) {
+      renderHint(element, data)
+    }
+
+    function checkLastSuccessfulIdp (element) {
+      $.ajax({
+        url: 'https://www.signin.service.gov.uk/successful-idp',
+        cache: false,
+        dataType: 'jsonp',
+        timeout: 3000
+      }).then(function(data){
+          renderHint(element, data);
+      }, function(e){console.log("error", e)})
+    }
+
+    function renderHint (element, data) {
+      if (data != null && data['found'] == 'true') {
+        $(element).html(generateHtml(data)).show()
+        $('button:contains("Continue")').addClass('govuk-button--secondary')
+      }
+    }
+
+    function generateHtml(data) {
+      return  '<div class="verify-hint-box">' +
+                '<h2 class="govuk-heading-m">' +
+                  'Someone recently signed in with '+ data['displayName'] +' on this device' +
+                '</h2>' +
+                '<div class="verify-hint-logos">' +
+                  '<img ' +
+                    'class="verify-hint-logos-idp"' +
+                    'src="https://gds-verify-frontend-assets.s3.amazonaws.com/4af94ca-c1e26b4/'+ data['simpleId'] +'.png"' +
+                    'alt="' + data['displayName'] + '"'+
+                  '>' +
+                  '<img '+
+                    'class="verify-hint-logos-verify"' +
+                    'src="https://gds-verify-frontend-assets.s3.amazonaws.com/4af94ca-c1e26b4/govuk-verify-small-black-text-454fe97ff5e3edfb6eebdc648930c0ff675616ae7956f1d87e67b30f479d7b8d.svg"' +
+                    'alt="GOV.UK Verify logo"' +
+                  '>' +
+                '</div>' +
+                '<a '+
+                  'class="gem-c-button govuk-button"' +
+                  'role="button"' +
+                  'href="https://www.signin.service.gov.uk/initiate-journey/hmrc-personal-tax-account?journey_hint=idp_' + data['simpleId'] + '"' +
+                  'onClick="GOVUK.analytics.trackEvent(\'verify-hint\', \'proceed\', { transport: \'beacon\'})"' +
+                '>' +
+                  'Continue with '+ data['displayName'] +'</a>' +
+              '</div>' +
+              '<p class="govuk-body">If this wasn\'t you, choose one option:</p>'
+    }
+  }
+})(window, window.GOVUK);

app/assets/stylesheets/application.scss

@@ -47,5 +47,6 @@ $govuk-use-legacy-palette: false;
 @import 'views/answer';
 @import 'views/help-page';
 @import "views/guide";
+@import 'views/choose_sign_in';
 
 

app/assets/stylesheets/views/_choose_sign_in.scss

@@ -0,0 +1,21 @@
+.verify-hint-box {
+  border: 5px solid $govuk-border-colour;
+  padding: govuk-spacing(3);
+  box-sizing: border-box;
+  margin: - govuk-spacing(6) 0 govuk-spacing(6);
+
+  .verify-hint-logos {
+    margin-bottom: govuk-spacing(3);
+
+    .verify-hint-logos-idp {
+      height: 60px;
+      border-right: 1px solid $govuk-border-colour;
+      padding-right: govuk-spacing(3);
+    }
+
+    .verify-hint-logos-verify {
+      height: 40px;
+      padding: govuk-spacing(2) 0 govuk-spacing(2) govuk-spacing(3);
+    }
+  }
+}

app/views/content_items/service_sign_in/_choose_sign_in.html.erb

@@ -27,6 +27,7 @@
   <%= render "govuk_publishing_components/components/fieldset", legend_text: legend_text do %>
     <div class="govuk-grid-row">
       <div class="govuk-grid-column-two-thirds">
+      <div data-module="show-gov-uk-verify-hint"></div>
         <%= render 'govuk_publishing_components/components/govspeak', content: raw(@content_item.description) %>
         <% if @error %>
           <%= render "components/error-message", text: t('service_sign_in.error.option') %>

config/initializers/csp.rb

@@ -1 +1,76 @@
-GovukContentSecurityPolicy.configure
+# GovukContentSecurityPolicy.configure
+# THIS A TEMPORARY COPY OF THE POLICY FROM THE GEM ABOVE
+# FOR THE TEMPORARY TEST WE NEED TO ADD A NEW DOMAIN FOR IMAGES (LINE 30)
+# WILL BE REVERTED BACK TO THE GEM ONCE THE TESTS FINISHES
+
+GOVUK_DOMAINS = [
+    '*.publishing.service.gov.uk',
+    "*.#{ENV['GOVUK_APP_DOMAIN_EXTERNAL'] || ENV['GOVUK_APP_DOMAIN'] || 'dev.gov.uk'}",
+    "*.dev.gov.uk"
+  ].uniq.freeze
+
+GOOGLE_ANALYTICS_DOMAINS = %w(www.google-analytics.com
+                              ssl.google-analytics.com
+                              stats.g.doubleclick.net).freeze
+
+Rails.application.config.content_security_policy_report_only = ENV.include?("GOVUK_CSP_REPORT_ONLY")
+
+Rails.application.config.content_security_policy do |policy|
+  # https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/default-src
+  policy.default_src :https, :self, *GOVUK_DOMAINS
+
+  # https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/img-src
+  policy.img_src :self,
+                :data, # Base64 encoded images
+                *GOVUK_DOMAINS,
+                *GOOGLE_ANALYTICS_DOMAINS, # Tracking pixels
+                # Some content still links to an old domain we used to use
+                "assets.digital.cabinet-office.gov.uk",
+                # For a Verify enhanced hint live test (temporary)
+                "gds-verify-frontend-assets.s3.amazonaws.com"
+
+  # https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/script-src
+  policy.script_src :self,
+                    *GOVUK_DOMAINS,
+                    *GOOGLE_ANALYTICS_DOMAINS,
+                    # Allow JSONP call to Verify to check whether the user is logged in
+                    "www.signin.service.gov.uk",
+                    # Allow YouTube Embeds (Govspeak turns YouTube links into embeds)
+                    "*.ytimg.com",
+                    "www.youtube.com",
+                    "www.youtube-nocookie.com",
+                    # Allow all inline scripts until we can conclusively
+                    # document all the inline scripts we use,
+                    # and there's a better way to filter out junk reports
+                    :unsafe_inline
+
+  # https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/style-src
+  policy.style_src :self,
+                  *GOVUK_DOMAINS,
+                  # We use the `style=""` attribute on some HTML elements
+                  :unsafe_inline
+
+  # https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/font-src
+  policy.font_src :self,
+                  *GOVUK_DOMAINS,
+                  :data # Used by some legacy fonts
+
+  # https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/connect-src
+  policy.connect_src :self,
+                    *GOVUK_DOMAINS,
+                    *GOOGLE_ANALYTICS_DOMAINS,
+                    # Allow connecting to web chat from HMRC contact pages
+                    "www.tax.service.gov.uk",
+                    # Allow connecting to Verify to check whether the user is logged in
+                    "www.signin.service.gov.uk"
+
+  # Disallow all <object>, <embed>, and <applet> elements
+  #
+  # https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/object-src
+  policy.object_src :none
+
+  # https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/frame-src
+  policy.frame_src :self, *GOVUK_DOMAINS, "www.youtube.com", "www.youtube-nocookie.com" # Allow youtube embeds
+
+  policy.report_uri ENV["GOVUK_CSP_REPORT_URI"] if ENV.include?("GOVUK_CSP_REPORT_URI")
+end

spec/javascripts/show-gov-uk-verify-hint.spec.js

@@ -0,0 +1,56 @@
+/* global describe beforeEach it spyOn expect */
+
+var $ = window.jQuery
+
+describe('A GOV.UK Verify hint box', function () {
+
+  var GOVUK = window.GOVUK
+  var element
+  var hint
+
+  beforeEach(function () {
+
+    element = $('<div style="display:none"></div>')
+
+    hint = new GOVUK.Modules.ShowGovUkVerifyHint()
+    hint.start(element)
+  })
+
+
+  it('renders when a positive response is received', function () {
+    var data = {
+      found: 'true',
+      displayName: 'Stub IDP',
+      simpleId: 'stub-idp'
+    }
+
+    hint.render(element, data)
+    heading = element.find('h2').text()
+    idp_logo_path = element.find('img.verify-hint-logos-idp')[0].src
+    button_path = element.find('a.govuk-button')[0].href
+    expect(heading).toBe('Someone recently signed in with '+ data['displayName'] +' on this device')
+    expect(idp_logo_path).toBe('https://gds-verify-frontend-assets.s3.amazonaws.com/4af94ca-c1e26b4/' + data['simpleId'] + '.png')
+    expect(button_path).toBe('https://www.signin.service.gov.uk/initiate-journey/hmrc-personal-tax-account?journey_hint=idp_' + data['simpleId'])
+    expect(element.css('display')).not.toBe('none');
+  })
+
+  it('does not render when a negative response is received', function () {
+    var data = {
+      found: 'false'
+    }
+
+    expect($(element)).toBeHidden()
+    hint.render(element, data)
+    expect(element.css('display')).toBe('none');
+    expect($(element)).toBeEmpty()
+  })
+
+  it('does not render when a null response is received', function () {
+    var data = null
+
+    expect($(element)).toBeHidden()
+    hint.render(element, data)
+    expect(element.css('display')).toBe('none');
+    expect($(element)).toBeEmpty()
+  })
+})