From 618b0519543bd71ffae27637732fe896b3016d18 Mon Sep 17 00:00:00 2001 From: Niall Molloy Date: Thu, 10 Sep 2020 12:11:06 +0100 Subject: [PATCH] Allow users to set a different URL for timeouts than manual sign outs --- CHANGELOG.md | 6 ++++ package-lock.json | 2 +- package.json | 2 +- src/components/timeout-dialog/template.njk | 1 + .../timeout-dialog/timeout-dialog.js | 10 +++++- .../timeout-dialog/timeout-dialog.test.js | 34 ++++++++++++++----- 6 files changed, 43 insertions(+), 12 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 1eeb71ed..ad7d0e8d 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -7,6 +7,12 @@ and this project adheres to [Semantic Versioning](http://semver.org/). ## [Unreleased] +## [1.16.0] - 2020-09-10 + +### Changed + +- `hmrcTimeoutDialog` Allow users to set a different URL for timeouts than manual sign outs + ## [1.15.3] - 2020-08-14 ### Fixed diff --git a/package-lock.json b/package-lock.json index e729082b..29b02320 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,6 +1,6 @@ { "name": "hmrc-frontend", - "version": "1.15.1", + "version": "1.15.3", "lockfileVersion": 1, "requires": true, "dependencies": { diff --git a/package.json b/package.json index ca1c16ab..f003f30a 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "hmrc-frontend", - "version": "1.15.3", + "version": "1.16.0", "description": "Design patterns for HMRC frontends", "scripts": { "start": "gulp dev", diff --git a/src/components/timeout-dialog/template.njk b/src/components/timeout-dialog/template.njk index 0339f720..4ffd5a67 100644 --- a/src/components/timeout-dialog/template.njk +++ b/src/components/timeout-dialog/template.njk @@ -6,6 +6,7 @@ data-countdown="{{ params.countdown }}" data-keep-alive-url="{{ params.keepAliveUrl }}" data-sign-out-url="{{ params.signOutUrl }}" + data-timeout-url="{{ params.timeoutUrl }}" data-title="{{ params.title }}" data-message="{{ params.message }}" data-message-suffix="{{ params.messageSuffix }}" diff --git a/src/components/timeout-dialog/timeout-dialog.js b/src/components/timeout-dialog/timeout-dialog.js index a0d73fe0..79847ef3 100644 --- a/src/components/timeout-dialog/timeout-dialog.js +++ b/src/components/timeout-dialog/timeout-dialog.js @@ -58,6 +58,7 @@ function TimeoutDialog ($module) { countdown: validate.int(lookupData('data-countdown')), keepAliveUrl: validate.string(lookupData('data-keep-alive-url')), signOutUrl: validate.string(lookupData('data-sign-out-url')), + timeoutUrl: validate.string(lookupData('data-timeout-url')), title: validate.string(lookupData('data-title')), message: validate.string(lookupData('data-message')), messageSuffix: validate.string(lookupData('data-message-suffix')), @@ -69,6 +70,9 @@ function TimeoutDialog ($module) { ) } + // Default timeoutUrl to signOutUrl if not set + options.timeoutUrl = options.timeoutUrl || options.signOutUrl + validateInput(options) settings = mergeOptionsWithDefaults(options, localisedDefaults) setupDialogTimer() @@ -255,7 +259,7 @@ function TimeoutDialog ($module) { var counter = getSecondsRemaining() updateCountdown(counter, $countdownElement) if (counter <= 0) { - signOut() + timeout() } currentTimer = window.setTimeout(runUpdate, getNextTimeout()) } @@ -278,6 +282,10 @@ function TimeoutDialog ($module) { RedirectHelper.redirectToUrl(settings.signOutUrl) } + function timeout () { + RedirectHelper.redirectToUrl(settings.timeoutUrl) + } + function cleanup () { while (cleanupFunctions.length > 0) { var fn = cleanupFunctions.shift() diff --git a/src/components/timeout-dialog/timeout-dialog.test.js b/src/components/timeout-dialog/timeout-dialog.test.js index 7012a593..4dc19d19 100644 --- a/src/components/timeout-dialog/timeout-dialog.test.js +++ b/src/components/timeout-dialog/timeout-dialog.test.js @@ -267,7 +267,8 @@ describe('/components/timeout-dialog', () => { 'data-message-suffix': 'My message suffix.', 'data-keep-alive-button-text': 'KEEP alive', 'data-sign-out-button-text': 'sign OUT', - 'data-sign-out-url': '/mySignOutUrl.html' + 'data-sign-out-url': '/mySignOutUrl.html', + 'data-timeout-url': '/myTimeoutUrl.html' }) pretendSecondsHavePassed(780) }) @@ -416,7 +417,8 @@ describe('/components/timeout-dialog', () => { 'data-timeout': 130, 'data-countdown': 120, 'data-message': 'time:', - 'data-sign-out-url': 'logout' + 'data-sign-out-url': 'signout', + 'data-timeout-url': 'timeout' }) pretendSecondsHavePassed(10) @@ -451,7 +453,7 @@ describe('/components/timeout-dialog', () => { expect(getAudibleCountText()).toEqual('time: 20 seconds.') pretendSecondsHavePassed(1) - expect(redirectHelper.redirectToUrl).toHaveBeenCalledWith('logout') + expect(redirectHelper.redirectToUrl).toHaveBeenCalledWith('timeout') expect(getVisualCountText()).toEqual('time: -1 seconds.') expect(getAudibleCountText()).toEqual('time: 20 seconds.') pretendSecondsHavePassed(1) @@ -459,12 +461,23 @@ describe('/components/timeout-dialog', () => { expect(getVisualCountText()).toEqual('time: -2 seconds.') expect(getAudibleCountText()).toEqual('time: 20 seconds.') }) + it('should default redirectToUrl to data-sign-out-url if data-timeout-url is not set', function () { + setupDialog({ + 'data-timeout': 130, + 'data-countdown': 120, + 'data-message': 'time:', + 'data-sign-out-url': 'logout' + }) + pretendSecondsHavePassed(131) + expect(redirectHelper.redirectToUrl).toHaveBeenCalledWith('logout') + }) it('should have an audio countdown which counts the last minute in 20 second decrements', function () { setupDialog({ 'data-timeout': 70, 'data-countdown': 65, 'data-message': 'time:', - 'data-sign-out-url': 'logout' + 'data-sign-out-url': 'signout', + 'data-timeout-url': 'timeout' }) pretendSecondsHavePassed(10) @@ -505,7 +518,8 @@ describe('/components/timeout-dialog', () => { 'data-timeout': 130, 'data-countdown': 120, 'data-message': 'Welsh, time:', - 'data-sign-out-url': 'logout' + 'data-sign-out-url': 'signout', + 'data-timeout-url': 'timeout' }) pretendSecondsHavePassed(10) @@ -540,7 +554,7 @@ describe('/components/timeout-dialog', () => { expect(getAudibleCountText()).toEqual('Welsh, time: 20 eiliad.') pretendSecondsHavePassed(1) - expect(redirectHelper.redirectToUrl).toHaveBeenCalledWith('logout') + expect(redirectHelper.redirectToUrl).toHaveBeenCalledWith('timeout') expect(getVisualCountText()).toEqual('Welsh, time: -1 eiliad.') expect(getAudibleCountText()).toEqual('Welsh, time: 20 eiliad.') pretendSecondsHavePassed(1) @@ -623,7 +637,8 @@ describe('/components/timeout-dialog', () => { 'data-timeout': 130, 'data-countdown': 50, 'data-message': 'Remaining time is', - 'data-sign-out-url': 'logout' + 'data-sign-out-url': 'signout', + 'data-timeout-url': 'timeout' }) const lowestAudibleCount = 'Remaining time is 20 seconds.' @@ -651,7 +666,7 @@ describe('/components/timeout-dialog', () => { expect(getAudibleCountText()).toEqual(lowestAudibleCount) pretendSecondsHavePassed(1) - expect(redirectHelper.redirectToUrl).toHaveBeenCalledWith('logout') + expect(redirectHelper.redirectToUrl).toHaveBeenCalledWith('timeout') expect(getVisualCountText()).toEqual('Remaining time is -1 seconds.') expect(getAudibleCountText()).toEqual(lowestAudibleCount) pretendSecondsHavePassed(1) @@ -666,7 +681,8 @@ describe('/components/timeout-dialog', () => { 'data-timeout': 130, 'data-countdown': 50, 'data-message': 'time:', - 'data-sign-out-url': 'logout' + 'data-sign-out-url': 'signout', + 'data-timeout-url': 'timeout' }) pretendSecondsHavePassed(80)