Upstream/bitwarden-browser
1
0
Fork 0
mirror of https://github.com/bitwarden/browser.git synced 2025-01-04 18:37:45 +01:00
Code Issues Projects Releases Wiki Activity

Duo Redirect Handoff Message Fix (#7938)

Browse Source 
* refactor handoff message countdown timer

* update documentation
This commit is contained in:
rr-bw 2024-02-13 12:21:13 -08:00 committed by GitHub
parent 9980c3feb9
commit aa11feec1b
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 21 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
apps/web/src/connectors/duo-redirect.ts
View File

@ -24,8 +24,8 @@ window.addEventListener("load", () => {
}); });
/** /**
* The `duoHandOffMessage` is set in the client via a cookie. This allows us to * The `duoHandOffMessage` must be set in the client via a cookie. This is so
* make use of i18n translations. * we can make use of i18n translations.
* *
* Format the message as an object and set is as a cookie. The following gives an * 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): * example (be sure to replace strings with i18n translated text):
@ -35,19 +35,29 @@ window.addEventListener("load", () => {
* title: "You successfully logged in", * title: "You successfully logged in",
* message: "This window will automatically close in 5 seconds", * message: "This window will automatically close in 5 seconds",
* buttonText: "Close", * buttonText: "Close",
* countdown: 5 * isCountdown: true
* }; * };
* *
* document.cookie = `duoHandOffMessage=${encodeURIComponent(JSON.stringify(duoHandOffMessage))};SameSite=strict`; * document.cookie = `duoHandOffMessage=${encodeURIComponent(JSON.stringify(duoHandOffMessage))};SameSite=strict`;
* *
* ``` * ```
* *
* The `title`, `message`, and `buttonText` properties will be used to create the relevant * The `title`, `message`, and `buttonText` properties will be used to create the
* DOM elements. The `countdown` property will be used for the starting value of the countdown. * relevant DOM elements.
* Make sure the `countdown` number matches the number set in the `message` property.
* *
* If no `countdown` property is given, there will be no countdown timer and the user will simply * Countdown timer:
* have to close the tab manually. * 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() { function processAndDisplayHandoffMessage() {
const handOffMessageCookie = ("; " + document.cookie) const handOffMessageCookie = ("; " + document.cookie)
@ -86,12 +96,12 @@ function processAndDisplayHandoffMessage() {
content.appendChild(button); content.appendChild(button);
// Countdown timer (closes tab upon completion) // Countdown timer (closes tab upon completion)
if (handOffMessage.countdown && Number.isInteger(handOffMessage.countdown)) { if (handOffMessage.isCountdown) {
let num = handOffMessage.countdown; let num = Number(p.textContent.match(/\d+/)[0]);
const interval = setInterval(() => { const interval = setInterval(() => {
if (num > 1) { 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--; num--;
} else { } else {
clearInterval(interval); clearInterval(interval);