Upstream/bitwarden-browser
1
0
Fork 0
mirror of https://github.com/bitwarden/browser.git synced 2024-11-22 11:45:59 +01:00
Code Issues Projects Releases Wiki Activity

[PM-5384] Add Countdown Timer to Duo Redirect (#7694)

Browse Source 
* add countdown timer if a number is provided in duoHandOffMessage

* add documentation

* refactor to use object for handOffMessage
This commit is contained in:
rr-bw 2024-01-30 12:37:02 -08:00 committed by GitHub
parent b5f6508c0e
commit 2511ae959a
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 68 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
apps/web/src/connectors/duo-redirect.html
View File

@ -12,7 +12,12 @@
<body class="layout_frontend">
<div class="mt-5 d-flex justify-content-center">
<div>
<img src="../images/logo-dark@2x.png" class="mb-4 logo" alt="Bitwarden" />
<img
src="../images/logo-primary@2x.png"
class="mb-4"
style="display: block; max-width: 290px; margin: 0 auto"
alt="Bitwarden"
/>
<div id="content">
<p class="text-center">
<i

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

@ -23,21 +23,80 @@ window.addEventListener("load", () => {
}
});
/**
* The `duoHandOffMessage` is set in the client via a cookie. This allows us to
* 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):
*
* ```
* const duoHandOffMessage = {
* title: "You successfully logged in",
* message: "This window will automatically close in 5 seconds",
* buttonText: "Close",
* countdown: 5
* };
*
* 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.
*
* If no `countdown` property is given, there will be no countdown timer and the user will simply
* have to close the tab manually.
*/
function processAndDisplayHandoffMessage() {
const handOffMessage = ("; " + document.cookie)
const handOffMessageCookie = ("; " + document.cookie)
.split("; duoHandOffMessage=")
.pop()
.split(";")
.shift();
const handOffMessage = JSON.parse(decodeURIComponent(handOffMessageCookie));
// Clear the cookie
document.cookie = "duoHandOffMessage=;SameSite=strict;max-age=0";
const content = document.getElementById("content");
content.className = "text-center";
content.innerHTML = "";
const h1 = document.createElement("h1");
const p = document.createElement("p");
p.className = "text-center";
p.innerText = handOffMessage;
const button = document.createElement("button");
h1.textContent = handOffMessage.title;
p.textContent = handOffMessage.message;
button.textContent = handOffMessage.buttonText;
h1.className = "font-weight-semibold";
p.className = "mb-4";
button.className = "bg-primary text-white border-0 rounded py-2 px-3";
button.addEventListener("click", () => {
window.close();
});
content.appendChild(h1);
content.appendChild(p);
content.appendChild(button);
// Countdown timer (closes tab upon completion)
if (handOffMessage.countdown && Number.isInteger(handOffMessage.countdown)) {
let num = handOffMessage.countdown;
const interval = setInterval(() => {
if (num > 1) {
p.textContent = `This window will automatically close in ${num - 1} seconds`;
num--;
} else {
clearInterval(interval);
window.close();
}
}, 1000);
}
}

BIN
apps/web/src/images/logo-primary@2x.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 8.7 KiB