diff --git a/apps/web/src/connectors/duo-redirect.ts b/apps/web/src/connectors/duo-redirect.ts index d6a8f8de59..362cf78e7d 100644 --- a/apps/web/src/connectors/duo-redirect.ts +++ b/apps/web/src/connectors/duo-redirect.ts @@ -24,8 +24,8 @@ window.addEventListener("load", () => { }); /** - * The `duoHandOffMessage` is set in the client via a cookie. This allows us to - * make use of i18n translations. + * The `duoHandOffMessage` must be set in the client via a cookie. This is so + * we can make use of i18n translations. * * Format the message as an object and set is as a cookie. The following gives an * example (be sure to replace strings with i18n translated text): @@ -35,19 +35,29 @@ window.addEventListener("load", () => { * title: "You successfully logged in", * message: "This window will automatically close in 5 seconds", * buttonText: "Close", - * countdown: 5 + * isCountdown: true * }; * * document.cookie = `duoHandOffMessage=${encodeURIComponent(JSON.stringify(duoHandOffMessage))};SameSite=strict`; * * ``` * - * The `title`, `message`, and `buttonText` properties will be used to create the relevant - * DOM elements. The `countdown` property will be used for the starting value of the countdown. - * Make sure the `countdown` number matches the number set in the `message` property. + * The `title`, `message`, and `buttonText` properties will be used to create the + * relevant DOM elements. * - * If no `countdown` property is given, there will be no countdown timer and the user will simply - * have to close the tab manually. + * Countdown timer: + * The `isCountdown` signifies that you want to start a countdown timer that will + * automatically close the tab when finished. The starting point for the timer will + * be based upon the first number that can be parsed from the `message` property + * (so be sure to add exactly one number to the `message`). + * + * This implementation makes it so the client does not have to split up the `message` into + * three translations, such as: + * ['This window will automatically close in', '5', 'seconds'] + * ...which would cause bad translations in languages that swap the order of words. + * + * If `isCountdown` is undefined/false, there will be no countdown timer and the user + * will simply have to close the tab manually. */ function processAndDisplayHandoffMessage() { const handOffMessageCookie = ("; " + document.cookie) @@ -86,12 +96,12 @@ function processAndDisplayHandoffMessage() { content.appendChild(button); // Countdown timer (closes tab upon completion) - if (handOffMessage.countdown && Number.isInteger(handOffMessage.countdown)) { - let num = handOffMessage.countdown; + if (handOffMessage.isCountdown) { + let num = Number(p.textContent.match(/\d+/)[0]); const interval = setInterval(() => { if (num > 1) { - p.textContent = `This window will automatically close in ${num - 1} seconds`; + p.textContent = p.textContent.replace(String(num), String(num - 1)); num--; } else { clearInterval(interval);