From 2db2ddd29d02fed66494bc39347f475a8829b180 Mon Sep 17 00:00:00 2001 From: Alex Saunders Date: Tue, 24 Oct 2023 14:45:33 +0100 Subject: [PATCH 01/30] add dialog with loading spinner --- lang/en.json | 7 +++- web/assets/scss/main.scss | 1 + .../scss/patterns/_loading_spinner.scss | 22 +++++++++++ web/template/upload_evidence.gohtml | 38 +++++++++++++++++++ 4 files changed, 67 insertions(+), 1 deletion(-) create mode 100644 web/assets/scss/patterns/_loading_spinner.scss diff --git a/lang/en.json b/lang/en.json index 4197139d6f..3cdfbffd86 100644 --- a/lang/en.json +++ b/lang/en.json @@ -859,5 +859,10 @@ "confirmYourCertificateProviderIsNotRelatedContent": "

The details you have given indicate that your certificate provider may be related to you or one of your attorneys.

Your certificate provider cannot be related to you or any of your attorneys (on this LPA or any other LPA for you).

If your certificate provider is related to you or one of you attorneys, you must choose a different certificate provider.

If they are not related, you can tick the box to confirm this and continue.

", "iConfirmThatMyCertificateProviderIsNotRelated": "I confirm that my certificate provider is not related to me or any of my attorneys", "theBoxToConfirmYourCertificateProviderIsNotRelated": "the box to confirm your certificate provider is not related to you or your attorneys, or choose another certificate provider", - "youMustReviewTheInformationYouHaveEntered": "You must review the information you have entered." + "youMustReviewTheInformationYouHaveEntered": "You must review the information you have entered.", + "yourFilesAreUploading": "Your files uploading", + "nOfNFilesUploaded": "1 of 4 files uploaded", + "yourFilesAreUploadingContent": "This may take a few minutes. Please do not close your browser window.", + "cancelUpload": "Cancel upload" + } diff --git a/web/assets/scss/main.scss b/web/assets/scss/main.scss index 56107a21ec..f8bc68763d 100644 --- a/web/assets/scss/main.scss +++ b/web/assets/scss/main.scss @@ -4,6 +4,7 @@ @import "patterns/task_list"; @import "patterns/trans_switch"; @import "patterns/data_loss_warning"; +@import "patterns/loading_spinner"; .app-float-right { float: right; diff --git a/web/assets/scss/patterns/_loading_spinner.scss b/web/assets/scss/patterns/_loading_spinner.scss new file mode 100644 index 0000000000..d17b49587b --- /dev/null +++ b/web/assets/scss/patterns/_loading_spinner.scss @@ -0,0 +1,22 @@ +.app-loading-spinner { + &__spinner{ + border: 12px solid #DEE0E2; + border-radius: 50%; + border-top-color: #005EA5; + width: 80px; + height: 80px; + -webkit-animation: spin 2s linear infinite; + animation: spin 2s linear infinite; + margin-bottom: 1.5em; + } +} + +@-webkit-keyframes spin { + 0% { -webkit-transform: rotate(0deg); } + 100% { -webkit-transform: rotate(360deg); } +} + +@keyframes spin { + 0% { transform: rotate(0deg); } + 100% { transform: rotate(360deg); } +} diff --git a/web/template/upload_evidence.gohtml b/web/template/upload_evidence.gohtml index e83f60d415..1bdcc33698 100644 --- a/web/template/upload_evidence.gohtml +++ b/web/template/upload_evidence.gohtml @@ -104,6 +104,44 @@ {{ tr .App "returnToTaskList" }} + +
+ {{ template "csrf-field" . }} + + + +
+ + +
+ + {{ end }} From faf047b8d7a789c770200326ac79bb1739054b87 Mon Sep 17 00:00:00 2001 From: Alex Saunders Date: Tue, 24 Oct 2023 15:33:48 +0100 Subject: [PATCH 02/30] trigger files uploadig on continue button click --- web/assets/file-upload-spinner.js | 64 +++++++++++++++++++++++++++++ web/assets/main.js | 3 ++ web/template/upload_evidence.gohtml | 6 +-- 3 files changed, 69 insertions(+), 4 deletions(-) create mode 100644 web/assets/file-upload-spinner.js diff --git a/web/assets/file-upload-spinner.js b/web/assets/file-upload-spinner.js new file mode 100644 index 0000000000..9b8557fb41 --- /dev/null +++ b/web/assets/file-upload-spinner.js @@ -0,0 +1,64 @@ +export class FileUploadSpinner { + init() { + this.continueButton = document.getElementById('continue-or-pay') + this.returnToTaskListButton = document.getElementById('return-to-tasklist-btn') + this.dialog = document.getElementById('dialog') + this.dialogOverlay = document.getElementById('dialog-overlay') + // so we can reference the same func when removing event + this.handleTrapFocus = this.handleTrapFocus.bind(this) + + this.registerListeners() + } + + registerListeners() { + this.continueButton.addEventListener('click', (e) => {e.preventDefault()}) + this.continueButton.addEventListener('click', this.toggleDialogVisibility.bind(this)) + + document.getElementById('cancel-upload-button').addEventListener('click', this.toggleDialogVisibility.bind(this)) + } + + dialogVisible() { + return !this.dialog.classList.contains('govuk-!-display-none') && !this.dialogOverlay.classList.contains('govuk-!-display-none') + } + + toggleDialogVisibility() { + this.dialog.classList.toggle('govuk-!-display-none') + this.dialogOverlay.classList.toggle('govuk-!-display-none') + + if (this.dialogVisible()) { + this.dialog.addEventListener('keydown', this.handleTrapFocus) + this.continueButton.focus() + } else { + this.dialog.removeEventListener('keydown', this.handleTrapFocus) + this.returnToTaskListButton.focus() + } + } + + handleTrapFocus(e) { + const firstFocusableEl = document.getElementById('dialog-title') + const lastFocusableEl = document.getElementById('cancel-upload-button') + const KEY_CODE_TAB = 9 + const KEY_CODE_ESC = 27 + + const tabPressed = (e.key === 'Tab' || e.keyCode === KEY_CODE_TAB) + const escPressed = (e.key === 'Esc' || e.keyCode === KEY_CODE_ESC) + + if (tabPressed) { + if (e.shiftKey) { /* shift + tab */ + if (document.activeElement === firstFocusableEl) { + lastFocusableEl.focus() + e.preventDefault() + } + } else /* tab */ { + if (document.activeElement === lastFocusableEl) { + firstFocusableEl.focus() + e.preventDefault() + } + } + } + + if (escPressed) { + this.toggleDialogVisibility() + } + } +} diff --git a/web/assets/main.js b/web/assets/main.js index b3a3198a43..d0fcf10451 100644 --- a/web/assets/main.js +++ b/web/assets/main.js @@ -4,6 +4,7 @@ import * as GOVUKFrontend from "govuk-frontend"; import $ from 'jquery'; import { CrossServiceHeader } from './service-header'; import { DataLossWarning } from './data-loss-warning'; +import {FileUploadSpinner} from "./file-upload-spinner"; // Account for DOMContentLoaded firing before JS runs if (document.readyState !== "loading") { @@ -25,6 +26,8 @@ function init() { new DataLossWarning().init() + new FileUploadSpinner().init() + const backLink = document.querySelector('.govuk-back-link'); if (backLink) { backLink.addEventListener('click', function (e) { diff --git a/web/template/upload_evidence.gohtml b/web/template/upload_evidence.gohtml index 1bdcc33698..52178d797e 100644 --- a/web/template/upload_evidence.gohtml +++ b/web/template/upload_evidence.gohtml @@ -99,7 +99,7 @@
{{ if gt $evidenceCount 0 }} - + {{ end }} {{ tr .App "returnToTaskList" }}
@@ -136,12 +136,10 @@

{{ trHtml .App "yourFilesAreUploadingContent" }}

- +
- - {{ end }} From 16a5adc1c12bbe398bbc83277617419e7a21a702 Mon Sep 17 00:00:00 2001 From: Alex Saunders Date: Tue, 24 Oct 2023 19:04:06 +0100 Subject: [PATCH 03/30] add dummy random events endpoint --- internal/page/donor/events.go | 27 ++++++++++++++ internal/page/donor/register.go | 3 ++ internal/page/paths.go | 2 + web/assets/file-upload-spinner.js | 57 ++++++++--------------------- web/template/upload_evidence.gohtml | 8 +--- 5 files changed, 50 insertions(+), 47 deletions(-) create mode 100644 internal/page/donor/events.go diff --git a/internal/page/donor/events.go b/internal/page/donor/events.go new file mode 100644 index 0000000000..e7702557b2 --- /dev/null +++ b/internal/page/donor/events.go @@ -0,0 +1,27 @@ +package donor + +import ( + "fmt" + "math/rand" + "net/http" + "time" + + "github.com/ministryofjustice/opg-modernising-lpa/internal/page" +) + +func Events() Handler { + return func(appData page.AppData, w http.ResponseWriter, r *http.Request, lpa *page.Lpa) error { + w.Header().Set("Access-Control-Allow-Origin", "*") + w.Header().Set("Cache-Control", "no-cache") + w.Header().Set("Connection", "keep-alive") + w.Header().Set("Content-Type", "text/event-stream") + + // send a random number every 2 seconds + for { + rand.Seed(time.Now().UnixNano()) + fmt.Fprintf(w, "data: %d \n\n", rand.Intn(100)) + w.(http.Flusher).Flush() + time.Sleep(2 * time.Second) + } + } +} diff --git a/internal/page/donor/register.go b/internal/page/donor/register.go index ee0ad3d2e5..708f2f5fc6 100644 --- a/internal/page/donor/register.go +++ b/internal/page/donor/register.go @@ -349,6 +349,9 @@ func Register( handleWithLpa(page.Paths.Progress, CanGoBack, LpaProgress(tmpls.Get("lpa_progress.gohtml"), certificateProviderStore, attorneyStore)) + + handleWithLpa(page.Paths.Events, None, + Events()) } type handleOpt byte diff --git a/internal/page/paths.go b/internal/page/paths.go index c09af6dc59..f4ab60172d 100644 --- a/internal/page/paths.go +++ b/internal/page/paths.go @@ -132,6 +132,7 @@ type AppPaths struct { EnterReplacementTrustCorporationAddress LpaPath EnterTrustCorporation LpaPath EnterTrustCorporationAddress LpaPath + Events LpaPath EvidenceRequired LpaPath FeeDenied LpaPath GettingHelpSigning LpaPath @@ -263,6 +264,7 @@ var Paths = AppPaths{ EnterReplacementTrustCorporationAddress: "/enter-replacement-trust-corporation-address", EnterTrustCorporation: "/enter-trust-corporation", EnterTrustCorporationAddress: "/enter-trust-corporation-address", + Events: "/events", EvidenceRequired: "/evidence-required", FeeDenied: "/fee-denied", Fixtures: "/fixtures", diff --git a/web/assets/file-upload-spinner.js b/web/assets/file-upload-spinner.js index 9b8557fb41..d4fe6d6115 100644 --- a/web/assets/file-upload-spinner.js +++ b/web/assets/file-upload-spinner.js @@ -1,11 +1,13 @@ export class FileUploadSpinner { init() { this.continueButton = document.getElementById('continue-or-pay') - this.returnToTaskListButton = document.getElementById('return-to-tasklist-btn') + this.cancelUploadButton = document.getElementById('cancel-upload-button') + this.dialog = document.getElementById('dialog') this.dialogOverlay = document.getElementById('dialog-overlay') - // so we can reference the same func when removing event - this.handleTrapFocus = this.handleTrapFocus.bind(this) + + this.sseURL = document.querySelector("[data-sse-url]").dataset.sseUrl + this.eventSource = null this.registerListeners() } @@ -13,52 +15,25 @@ export class FileUploadSpinner { registerListeners() { this.continueButton.addEventListener('click', (e) => {e.preventDefault()}) this.continueButton.addEventListener('click', this.toggleDialogVisibility.bind(this)) + this.continueButton.addEventListener('click', this.openConnection.bind(this)) - document.getElementById('cancel-upload-button').addEventListener('click', this.toggleDialogVisibility.bind(this)) - } - - dialogVisible() { - return !this.dialog.classList.contains('govuk-!-display-none') && !this.dialogOverlay.classList.contains('govuk-!-display-none') + this.cancelUploadButton.addEventListener('click', this.toggleDialogVisibility.bind(this)) + this.cancelUploadButton.addEventListener('click', this.closeConnection.bind(this)) } toggleDialogVisibility() { this.dialog.classList.toggle('govuk-!-display-none') this.dialogOverlay.classList.toggle('govuk-!-display-none') - - if (this.dialogVisible()) { - this.dialog.addEventListener('keydown', this.handleTrapFocus) - this.continueButton.focus() - } else { - this.dialog.removeEventListener('keydown', this.handleTrapFocus) - this.returnToTaskListButton.focus() - } } - handleTrapFocus(e) { - const firstFocusableEl = document.getElementById('dialog-title') - const lastFocusableEl = document.getElementById('cancel-upload-button') - const KEY_CODE_TAB = 9 - const KEY_CODE_ESC = 27 - - const tabPressed = (e.key === 'Tab' || e.keyCode === KEY_CODE_TAB) - const escPressed = (e.key === 'Esc' || e.keyCode === KEY_CODE_ESC) - - if (tabPressed) { - if (e.shiftKey) { /* shift + tab */ - if (document.activeElement === firstFocusableEl) { - lastFocusableEl.focus() - e.preventDefault() - } - } else /* tab */ { - if (document.activeElement === lastFocusableEl) { - firstFocusableEl.focus() - e.preventDefault() - } - } - } + openConnection() { + this.eventSource = new EventSource(this.sseURL); + this.eventSource.onmessage = (event) => { + console.log(event.data) + }; + } - if (escPressed) { - this.toggleDialogVisibility() - } + closeConnection() { + this.eventSource.close() } } diff --git a/web/template/upload_evidence.gohtml b/web/template/upload_evidence.gohtml index 52178d797e..f47bd5ecf3 100644 --- a/web/template/upload_evidence.gohtml +++ b/web/template/upload_evidence.gohtml @@ -122,12 +122,8 @@

{{ tr .App "yourFilesAreUploading" }}

-