@govuk-one-login/frontend-ui 1.5.0 → 3.0.0

package/build/esm/frontend/index.js

@@ -1,171 +1,244 @@
-function useSpinner() {
-    const element = document.getElementById("spinner-container");
-    if (element) {
-        const spinner = new Spinner(element);
-        spinner.init();
+async function useSpinner(containerId, pollingFunction, successFunction, errorFunction) {
+    const element = document.getElementById(containerId);
+    if (element && element instanceof HTMLDivElement) {
+        let spinner;
+        try {
+            spinner = new Spinner(element, pollingFunction, successFunction, errorFunction);
+        }
+        catch (e) {
+            const errorText = document.createElement("p");
+            errorText.textContent = "Error configuring spinner: " + e;
+            element.replaceChildren(errorText);
+            return;
+        }
+        await spinner.init();
     }
     else {
-        console.warn("Attempting to initiate a spinner on a page with no '#spinner-container' element.");
+        console.error(`Attempting to initiate a spinner on a page with no '#${containerId}' div element.`);
     }
 }
+var PollResult;
+(function (PollResult) {
+    PollResult[PollResult["Success"] = 0] = "Success";
+    PollResult[PollResult["Failure"] = 1] = "Failure";
+    PollResult[PollResult["Pending"] = 2] = "Pending";
+})(PollResult || (PollResult = {}));
+var SpinnerState;
+(function (SpinnerState) {
+    SpinnerState[SpinnerState["Waiting"] = 0] = "Waiting";
+    SpinnerState[SpinnerState["LongWaiting"] = 1] = "LongWaiting";
+    SpinnerState[SpinnerState["Error"] = 2] = "Error";
+    SpinnerState[SpinnerState["Complete"] = 3] = "Complete";
+})(SpinnerState || (SpinnerState = {}));
 class Spinner {
-    reflectLongWait() {
-        if (this.state.spinnerState !== "ready") {
-            this.state.spinnerStateText = this.content.longWait.spinnerStateText;
+    constructor(domContainer, pollingFunction, onSuccess, onError) {
+        this.state = SpinnerState.Waiting;
+        this.handleAbort = () => {
+            this.abortController.abort();
+        };
+        this.initTimer = (initTime) => {
+            this.updateDomTimer = setInterval(() => {
+                this.updateStateAccordingToTimeElapsed(initTime);
+                this.updateDom();
+            }, this.config.msBetweenDomUpdate);
+        };
+        this.reflectSuccess = () => {
+            this.state = SpinnerState.Complete;
+            sessionStorage.removeItem("spinnerInitTime");
+        };
+        this.reflectError = () => {
+            this.state = SpinnerState.Error;
+            sessionStorage.removeItem("spinnerInitTime");
+            this.abortController.abort();
+        };
+        this.updateStateAccordingToTimeElapsed = (initTime) => {
+            const elapsedMilliseconds = Date.now() - initTime;
+            if (this.hasCompleted()) {
+                // If we've already finished waiting then there's no need to update again.
+                return;
+            }
+            if (elapsedMilliseconds >= this.config.msBeforeAbort) {
+                this.reflectError();
+            }
+            else if (elapsedMilliseconds >= this.config.msBeforeInformingOfLongWait) {
+                this.reflectLongWait();
+            }
+        };
+        this.updateDom = () => {
+            if (this.hasCompleted()) {
+                // We've reached an end state so stop updating the DOM after this
+                clearInterval(this.updateDomTimer);
+            }
+            if (this.displayState === this.state) {
+                // No need to update anything
+                return;
+            }
+            this.displayState = this.state;
+            const newElementsToDisplay = [];
+            switch (this.displayState) {
+                case SpinnerState.Waiting:
+                    newElementsToDisplay.push(this.createSpinnerElement(""));
+                    this.cloneAndAddIfExists(newElementsToDisplay, this.waitContent);
+                    break;
+                case SpinnerState.LongWaiting:
+                    newElementsToDisplay.push(this.createSpinnerElement(""));
+                    this.cloneAndAddIfExists(newElementsToDisplay, this.longWaitContent);
+                    break;
+                case SpinnerState.Complete:
+                    newElementsToDisplay.push(this.createSpinnerElement("spinner__finished"));
+                    this.cloneAndAddIfExists(newElementsToDisplay, this.successContent);
+                    break;
+                case SpinnerState.Error:
+                    if (!this.config.hideSpinnerOnError) {
+                        newElementsToDisplay.push(this.createSpinnerElement("spinner__finished"));
+                    }
+                    this.cloneAndAddIfExists(newElementsToDisplay, this.errorContent);
+                    break;
+            }
+            this.visibleElementsContainer.replaceChildren(...newElementsToDisplay);
+            if (this.displayState === SpinnerState.Complete) {
+                if (this.onSuccess) {
+                    this.onSuccess();
+                }
+                this.updateAriaAlert(this.config.ariaAlertCompletionText);
+            }
+            if (this.displayState === SpinnerState.Error && !!this.onError) {
+                this.onError();
+            }
+        };
+        this.container = domContainer;
+        this.pollingFunction = pollingFunction;
+        if (!pollingFunction) {
+            throw new Error("Polling function must be provided");
         }
+        this.onSuccess = onSuccess;
+        this.onError = onError;
+        this.noJsContent = this.getElementOrThrow("no-js-content");
+        this.noJsContent.style.display = "none";
+        this.waitContent =
+            this.container.querySelector("#wait-content") || undefined;
+        this.longWaitContent =
+            this.container.querySelector("#long-wait-content") || undefined;
+        this.successContent =
+            this.container.querySelector("#success-content") || undefined;
+        this.errorContent =
+            this.container.querySelector("#error-content") || undefined;
+        if (!this.successContent && !onSuccess) {
+            throw new Error("One of success-content or successFunction must be provided");
+        }
+        if (!this.errorContent && !onError) {
+            throw new Error("One of error-content or errorFunction must be provided");
+        }
+        this.config = this.getConfig(this.container);
+        this.visibleElementsContainer = document.createElement("div");
+        this.container.appendChild(this.visibleElementsContainer);
+        this.ariaLiveContainer = this.createAriaLiveContainer();
+        this.container.appendChild(this.ariaLiveContainer);
+        this.abortController = this.createAbortController();
     }
-    initialiseState() {
-        if (this.domRequirementsMet) {
-            this.state = {
-                heading: this.content.initial.heading,
-                spinnerStateText: this.content.initial.spinnerStateText,
-                spinnerState: this.content.initial.spinnerState,
-                buttonDisabled: true,
-                ariaButtonEnabledMessage: "",
-                done: false,
-                error: false,
-                virtualDom: [],
-            };
+    async init() {
+        const initTime = this.getInitTime();
+        this.updateStateAccordingToTimeElapsed(initTime);
+        this.updateDom();
+        this.initTimer(initTime);
+        await this.callPollingFunction(initTime);
+    }
+    getElementOrThrow(elementId) {
+        const element = this.container.querySelector(`#${elementId}`);
+        if (element === null || !(element instanceof HTMLElement)) {
+            throw new Error(`HTML Element with id ${elementId} must be provided`);
         }
+        return element;
     }
-    initialiseContent(element) {
-        var _a;
-        function throwIfMissing(data) {
-            if (data === undefined || data === null) {
-                throw new Error("Missing required data");
-            }
-            return data;
+    getConfig(element) {
+        return {
+            msBeforeInformingOfLongWait: element.dataset.msBeforeInformingOfLongWait
+                ? parseInt(element.dataset.msBeforeInformingOfLongWait)
+                : 5000,
+            msBeforeAbort: element.dataset.msBeforeAbort
+                ? parseInt(element.dataset.msBeforeAbort)
+                : 30000,
+            msBetweenRequests: element.dataset.msBetweenRequests
+                ? parseInt(element.dataset.msBetweenRequests)
+                : 2000,
+            msBetweenDomUpdate: element.dataset.msBetweenDomUpdate
+                ? parseInt(element.dataset.msBetweenDomUpdate)
+                : 1000,
+            ariaAlertCompletionText: element.dataset.ariaAlertCompletionText
+                ? element.dataset.ariaAlertCompletionText
+                : undefined,
+            hideSpinnerOnError: element.dataset.hideSpinnerOnError
+                ? (element.dataset.hideSpinnerOnError === 'true')
+                : false,
+        };
+    }
+    createAbortController() {
+        const abortController = new AbortController();
+        window.removeEventListener("beforeunload", this.handleAbort);
+        window.addEventListener("beforeunload", this.handleAbort);
+        return abortController;
+    }
+    getInitTime() {
+        const storedSpinnerInitTime = sessionStorage.getItem("spinnerInitTime");
+        let spinnerInitTime;
+        if (storedSpinnerInitTime === null) {
+            spinnerInitTime = Date.now();
+            sessionStorage.setItem("spinnerInitTime", spinnerInitTime.toString());
         }
-        try {
-            this.content = {
-                initial: {
-                    heading: throwIfMissing(element.dataset.initialHeading),
-                    spinnerStateText: throwIfMissing(element.dataset.initialSpinnerstatetext),
-                    spinnerState: throwIfMissing(element.dataset.initialSpinnerstate),
-                },
-                error: {
-                    heading: throwIfMissing(element.dataset.errorHeading),
-                    messageText: throwIfMissing(element.dataset.errorMessagetext),
-                    whatYouCanDo: {
-                        heading: throwIfMissing(element.dataset.errorWhatyoucandoHeading),
-                        message: {
-                            text1: throwIfMissing(element.dataset.errorWhatyoucandoMessageText1),
-                            link: {
-                                href: throwIfMissing(element.dataset.errorWhatyoucandoMessageLinkHref),
-                                text: throwIfMissing(element.dataset.errorWhatyoucandoMessageLinkText),
-                            },
-                            text2: throwIfMissing(element.dataset.errorWhatyoucandoMessageText2),
-                        },
-                    },
-                },
-                complete: {
-                    spinnerState: throwIfMissing(element.dataset.completeSpinnerstate),
-                },
-                longWait: {
-                    spinnerStateText: throwIfMissing(element.dataset.longwaitSpinnerstatetext),
-                },
-                continueButton: {
-                    text: (_a = element.dataset.continuebuttonText) !== null && _a !== void 0 ? _a : "Continue",
-                },
-            };
-            this.config = {
-                apiUrl: element.dataset.apiUrl || this.config.apiUrl,
-                ariaButtonEnabledMessage: throwIfMissing(element.dataset.ariaButtonEnabledMessage),
-                msBeforeInformingOfLongWait: element.dataset.msBeforeInformingOfLongWait
-                    ? parseInt(element.dataset.msBeforeInformingOfLongWait)
-                    : this.config.msBeforeInformingOfLongWait,
-                msBeforeAbort: element.dataset.msBeforeAbort
-                    ? parseInt(element.dataset.msBeforeAbort)
-                    : this.config.msBeforeAbort,
-                msBetweenRequests: element.dataset.msBetweenRequests
-                    ? parseInt(element.dataset.msBetweenRequests)
-                    : this.config.msBetweenRequests,
-                msBetweenDomUpdate: element.dataset.msBetweenDomUpdate
-                    ? parseInt(element.dataset.msBetweenDomUpdate)
-                    : this.config.msBetweenDomUpdate,
-            };
-            this.domRequirementsMet = true;
+        else {
+            spinnerInitTime = parseInt(storedSpinnerInitTime, 10);
         }
-        catch (e) {
-            this.domRequirementsMet = false;
+        return spinnerInitTime;
+    }
+    hasCompleted() {
+        return (this.state === SpinnerState.Error || this.state === SpinnerState.Complete);
+    }
+    reflectLongWait() {
+        if (!this.hasCompleted()) {
+            this.state = SpinnerState.LongWaiting;
         }
     }
-    createVirtualDom() {
-        const domInitialState = [
-            {
-                nodeName: "h1",
-                text: this.state.heading,
-                classes: ["govuk-heading-l"],
-            },
-            {
-                nodeName: "div",
-                id: "spinner",
-                classes: [
-                    "spinner",
-                    "spinner__pending",
-                    "centre",
-                    this.state.spinnerState,
-                ],
-            },
-            {
-                nodeName: "p",
-                text: this.state.spinnerStateText,
-                classes: ["centre", "spinner-state-text", "govuk-body"],
-            },
-            {
-                nodeName: "button",
-                text: this.content.continueButton.text,
-                buttonDisabled: this.state.buttonDisabled,
-                classes: ["govuk-button", "govuk-!-margin-top-4"],
-            },
-        ];
-        const domErrorState = [
-            {
-                nodeName: "h1",
-                text: this.state.heading,
-                classes: ["govuk-heading-l"],
-            },
-            {
-                nodeName: "p",
-                text: this.state.messageText,
-                classes: ["govuk-body"],
-            },
-            {
-                nodeName: "h2",
-                text: this.content.error.whatYouCanDo.heading,
-                classes: ["govuk-heading-m"],
-            },
-            {
-                nodeName: "p",
-                innerHTML: `${this.content.error.whatYouCanDo.message.text1}<a href="${this.content.error.whatYouCanDo.message.link.href}">${this.content.error.whatYouCanDo.message.link.text}</a>${this.content.error.whatYouCanDo.message.text2}`,
-                classes: ["govuk-body"],
-            },
-        ];
-        return this.state.error ? domErrorState : domInitialState;
+    createSpinnerElement(spinnerStateClass) {
+        const spinner = document.createElement("div");
+        spinner.id = "spinner";
+        spinner.classList.add("spinner", "centre");
+        if (spinnerStateClass) {
+            spinner.classList.add(spinnerStateClass);
+        }
+        return spinner;
     }
-    async requestIDProcessingStatus(initTime) {
-        const signal = this.abortController.signal;
-        await fetch(this.config.apiUrl, { signal })
-            .then((response) => response.json())
-            .then((data) => {
-            if (data.status === "COMPLETED" || data.status === "INTERVENTION") {
-                this.reflectCompletion();
+    cloneAndAddIfExists(list, element) {
+        if (element) {
+            const cloned = element.cloneNode(true);
+            cloned.style.display = "";
+            cloned.removeAttribute("id");
+            list.push(cloned);
+        }
+    }
+    async callPollingFunction(initTime) {
+        if (Date.now() - initTime >= this.config.msBeforeAbort) {
+            return;
+        }
+        await this.pollingFunction(this.abortController.signal)
+            .then((response) => {
+            if (response === PollResult.Success) {
+                this.reflectSuccess();
             }
-            else if (data.status === "ERROR") {
+            else if (response === PollResult.Failure) {
                 this.reflectError();
             }
-            else if (this.notInErrorOrDoneState()) {
+            else if (!this.hasCompleted()) {
                 setTimeout(async () => {
                     if (Date.now() - initTime >= this.config.msBeforeAbort) {
                         return;
                     }
-                    await this.requestIDProcessingStatus(initTime);
+                    await this.callPollingFunction(initTime);
                 }, this.config.msBetweenRequests);
             }
         })
             .catch((error) => {
             if (error.name !== "AbortError") {
-                console.error("Error in requestIDProcessingStatus:", error);
+                console.error("Error in polling function: ", error);
                 this.reflectError();
             }
         })
@@ -173,140 +246,24 @@ class Spinner {
             this.updateDom();
         });
     }
-    getInitTime() {
-        const storedSpinnerInitTime = sessionStorage.getItem("spinnerInitTime");
-        let spinnerInitTime;
-        if (storedSpinnerInitTime === null) {
-            spinnerInitTime = Date.now();
-            sessionStorage.setItem("spinnerInitTime", spinnerInitTime.toString());
-        }
-        else {
-            spinnerInitTime = parseInt(storedSpinnerInitTime, 10);
-        }
-        return spinnerInitTime;
-    }
-    init() {
-        if (this.domRequirementsMet) {
-            const initTime = this.getInitTime();
-            this.initTimer(initTime);
-            this.initialiseContainers();
-            this.updateDom();
-            this.requestIDProcessingStatus(initTime);
-        }
+    createAriaLiveContainer() {
+        // For the Aria alert to work reliably we need to create its container once and then update the contents
+        // https://tetralogical.com/blog/2024/05/01/why-are-my-live-regions-not-working/
+        const container = document.createElement("div");
+        container.setAttribute("aria-live", "assertive");
+        container.classList.add("govuk-visually-hidden");
+        return container;
     }
-    constructor(domContainer) {
-        this.config = {
-            apiUrl: "/prove-identity-status",
-            msBeforeInformingOfLongWait: 5000,
-            msBeforeAbort: 25000,
-            msBetweenRequests: 1000,
-            msBetweenDomUpdate: 2000,
-        };
-        this.notInErrorOrDoneState = () => {
-            return !(this.state.done || this.state.error);
-        };
-        this.reflectCompletion = () => {
-            this.state.spinnerState = "spinner__ready";
-            this.state.spinnerStateText = this.content.complete.spinnerState;
-            this.state.buttonDisabled = false;
-            this.state.ariaButtonEnabledMessage =
-                this.content.complete.ariaButtonEnabledMessage;
-            this.state.done = true;
-            sessionStorage.removeItem("spinnerInitTime");
-        };
-        this.reflectError = () => {
-            this.state.heading = this.content.error.heading;
-            this.state.messageText = this.content.error.messageText;
-            this.state.spinnerState = "spinner__failed";
-            this.state.done = true;
-            this.state.error = true;
-            sessionStorage.removeItem("spinnerInitTime");
-            this.abortController.abort();
-        };
-        this.updateAccordingToTimeElapsed = (initTime) => {
-            const elapsedMilliseconds = Date.now() - initTime;
-            if (elapsedMilliseconds >= this.config.msBeforeAbort) {
-                this.reflectError();
-            }
-            else if (elapsedMilliseconds >= this.config.msBeforeInformingOfLongWait) {
-                this.reflectLongWait();
-            }
-        };
-        this.vDomHasChanged = (currentVDom, nextVDom) => {
-            return JSON.stringify(currentVDom) !== JSON.stringify(nextVDom);
-        };
-        this.convert = (node) => {
-            const el = document.createElement(node.nodeName);
-            if (node.text)
-                el.textContent = node.text;
-            if (node.innerHTML)
-                el.innerHTML = node.innerHTML;
-            if (node.id)
-                el.id = node.id;
-            if (node.classes)
-                el.classList.add(...node.classes);
-            if (node.buttonDisabled)
-                el.setAttribute("disabled", `${node.buttonDisabled}`);
-            return el;
-        };
-        this.updateAriaAlert = (messageText) => {
+    updateAriaAlert(messageText) {
+        if (messageText) {
             while (this.ariaLiveContainer.firstChild) {
                 this.ariaLiveContainer.removeChild(this.ariaLiveContainer.firstChild);
             }
             /* Create new message and append it to the live region */
             const messageNode = document.createTextNode(messageText);
             this.ariaLiveContainer.appendChild(messageNode);
-        };
-        this.updateDom = () => {
-            const vDomChanged = this.vDomHasChanged(this.state.virtualDom, this.createVirtualDom());
-            if (vDomChanged) {
-                document.title = this.state.heading;
-                this.state.virtualDom = this.createVirtualDom();
-                const elements = this.state.virtualDom.map(this.convert);
-                this.spinnerContainer.replaceChildren(...elements);
-            }
-            if (this.state.error) {
-                this.spinnerContainer.classList.add("spinner-container__error");
-            }
-            if (this.state.done) {
-                clearInterval(this.updateDomTimer);
-            }
-            if (this.config.ariaButtonEnabledMessage &&
-                this.state.ariaButtonEnabledMessage !== "") {
-                this.updateAriaAlert(this.config.ariaButtonEnabledMessage);
-            }
-        };
-        // For the Aria alert to work reliably we need to create its container once and then update the contents
-        // https://tetralogical.com/blog/2024/05/01/why-are-my-live-regions-not-working/
-        // So here we create a separate DOM element for the Aria live text that won't be touched when the spinner updates.
-        this.initialiseContainers = () => {
-            this.spinnerContainer = document.createElement("div");
-            this.ariaLiveContainer = document.createElement("div");
-            this.ariaLiveContainer.setAttribute("aria-live", "assertive");
-            this.ariaLiveContainer.classList.add("govuk-visually-hidden");
-            this.ariaLiveContainer.appendChild(document.createTextNode(""));
-            this.container.replaceChildren(this.spinnerContainer, this.ariaLiveContainer);
-        };
-        this.initTimer = (initTime) => {
-            this.updateAccordingToTimeElapsed(initTime);
-            this.updateDomTimer = setInterval(() => {
-                this.updateAccordingToTimeElapsed(initTime);
-                this.updateDom();
-            }, this.config.msBetweenDomUpdate);
-        };
-        this.handleAbort = () => {
-            this.abortController.abort();
-        };
-        this.initialiseAbortController = () => {
-            this.abortController = new AbortController();
-            window.removeEventListener("beforeunload", this.handleAbort);
-            window.addEventListener("beforeunload", this.handleAbort);
-        };
-        this.container = domContainer;
-        this.initialiseContent(this.container);
-        this.initialiseState();
-        this.initialiseAbortController();
+        }
     }
 }
 
-export { useSpinner };
+export { PollResult, useSpinner };

package/build/esm/frontend/spinner/__tests__/spinner.test.d.ts

@@ -1,6 +1,2 @@
 export declare function wait(ms: number): Promise<unknown>;
-export declare function waitUntil(conditionFn: Function, { timeout, interval }?: {
-    timeout?: number | undefined;
-    interval?: number | undefined;
-}): Promise<void>;
 //# sourceMappingURL=spinner.test.d.ts.map

package/build/esm/frontend/spinner/__tests__/spinner.test.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"spinner.test.d.ts","sourceRoot":"","sources":["../../../../../frontend-src/spinner/__tests__/spinner.test.ts"],"names":[],"mappings":"AAEA,wBAAgB,IAAI,CAAC,EAAE,EAAE,MAAM,oBAE9B;AAED,wBAAsB,SAAS,CAC7B,WAAW,EAAE,QAAQ,EACrB,EAAE,OAAc,EAAE,QAAa,EAAE;;;CAAK,iBAcvC"}
+{"version":3,"file":"spinner.test.d.ts","sourceRoot":"","sources":["../../../../../frontend-src/spinner/__tests__/spinner.test.ts"],"names":[],"mappings":"AAGA,wBAAgB,IAAI,CAAC,EAAE,EAAE,MAAM,oBAE9B"}