From d07343493f51e0a5498cc215ebca803ff82f87c2 Mon Sep 17 00:00:00 2001 From: Fellyph Cintra Date: Wed, 14 Feb 2024 11:47:20 +0000 Subject: [PATCH 01/17] removing unused file --- src/common/common-scenarios.ejs | 3 --- 1 file changed, 3 deletions(-) delete mode 100644 src/common/common-scenarios.ejs diff --git a/src/common/common-scenarios.ejs b/src/common/common-scenarios.ejs deleted file mode 100644 index 7220aa9..0000000 --- a/src/common/common-scenarios.ejs +++ /dev/null @@ -1,3 +0,0 @@ -
-

To learn more about the CUJs, accessAnalysis Scenarios page

-
\ No newline at end of file From 942a156bfda55bcef3869b4d83e577b625b547aa Mon Sep 17 00:00:00 2001 From: Fellyph Cintra Date: Wed, 14 Feb 2024 11:47:40 +0000 Subject: [PATCH 02/17] adding route for storage access api --- app.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app.js b/app.js index e1e13ba..7522549 100644 --- a/app.js +++ b/app.js @@ -54,7 +54,7 @@ app.use((req, res, next) => { }); // Mount routes for different demo types -const demoTypes = ['chips', 'related-websites-sets', 'private-state-tokens', 'fedcm']; +const demoTypes = ['chips', 'related-websites-sets', 'private-state-tokens', 'fedcm', 'storage-access-api']; demoTypes.forEach(demoType => { const demoRoutes = require(`./src/demos/${demoType}/routes`); app.use(`/${demoType}`, demoRoutes); // Mount the routes on a path specific to the demo type From 00c03e52a284fede9de96609680d3d089ea4cc06 Mon Sep 17 00:00:00 2001 From: Fellyph Cintra Date: Wed, 14 Feb 2024 11:48:11 +0000 Subject: [PATCH 03/17] adding storage api to the homepage --- public/assets/styles/style.css | 25 ------------------------- src/common/index.ejs | 3 ++- 2 files changed, 2 insertions(+), 26 deletions(-) diff --git a/public/assets/styles/style.css b/public/assets/styles/style.css index f9da133..f90e66a 100644 --- a/public/assets/styles/style.css +++ b/public/assets/styles/style.css @@ -667,14 +667,6 @@ video { position: relative; } -.right-8 { - right: 2rem; -} - -.top-8 { - top: 2rem; -} - .z-50 { z-index: 50; } @@ -861,24 +853,12 @@ video { gap: 1.5rem; } -.space-x-2 > :not([hidden]) ~ :not([hidden]) { - --tw-space-x-reverse: 0; - margin-right: calc(0.5rem * var(--tw-space-x-reverse)); - margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse))); -} - .space-x-4 > :not([hidden]) ~ :not([hidden]) { --tw-space-x-reverse: 0; margin-right: calc(1rem * var(--tw-space-x-reverse)); margin-left: calc(1rem * calc(1 - var(--tw-space-x-reverse))); } -.space-y-2 > :not([hidden]) ~ :not([hidden]) { - --tw-space-y-reverse: 0; - margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse))); - margin-bottom: calc(0.5rem * var(--tw-space-y-reverse)); -} - .space-y-4 > :not([hidden]) ~ :not([hidden]) { --tw-space-y-reverse: 0; margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse))); @@ -1005,11 +985,6 @@ video { text-align: center; } -.text-2xl { - font-size: 1.5rem; - line-height: 2rem; -} - .text-3xl { font-size: 1.875rem; line-height: 2.25rem; diff --git a/src/common/index.ejs b/src/common/index.ejs index d7b5399..0ad5ea3 100644 --- a/src/common/index.ejs +++ b/src/common/index.ejs @@ -17,9 +17,10 @@ <%= renderCard('Personalization with localStorage', '🖼️', '/personalization-localstorage') %> <%= renderCard('Single Sign-On', '🔐', '/single-sign-on') %> <%= renderCard('Payment Gateway', '💳', '/payment-gateway') %> - <%= renderCard('CHIPS', '🍪', '/chips') %> <%= renderCard('Legacy GSI', '🔐', '/gsi') %> <%= renderCard('Facebook', '👍', '/social-media') %> + <%= renderCard('CHIPS', '🍪', '/chips') %> + <%= renderCard('Storage Access API', '🗃️', '/storage-access-api') %> From 0c51c23ef46b2e1fb6758034524d588701b554b5 Mon Sep 17 00:00:00 2001 From: Fellyph Cintra Date: Wed, 14 Feb 2024 11:48:40 +0000 Subject: [PATCH 04/17] adding storage access api demo --- src/demos/storage-access-api/index.ejs | 5 ++ .../storage-access-api/personalization.ejs | 76 +++++++++++++++++++ src/demos/storage-access-api/routes.js | 47 ++++++++++++ .../storage-access-api/theme-selection.ejs | 18 +++++ 4 files changed, 146 insertions(+) create mode 100644 src/demos/storage-access-api/index.ejs create mode 100644 src/demos/storage-access-api/personalization.ejs create mode 100644 src/demos/storage-access-api/routes.js create mode 100644 src/demos/storage-access-api/theme-selection.ejs diff --git a/src/demos/storage-access-api/index.ejs b/src/demos/storage-access-api/index.ejs new file mode 100644 index 0000000..5604b62 --- /dev/null +++ b/src/demos/storage-access-api/index.ejs @@ -0,0 +1,5 @@ +<%- include(commonPath + '/header.ejs') %> + <%- include(commonPath + '/internal-page/header.ejs') %> + + <%- include(commonPath + '/internal-page/footer.ejs') %> +<%- include(commonPath + '/footer.ejs') %> diff --git a/src/demos/storage-access-api/personalization.ejs b/src/demos/storage-access-api/personalization.ejs new file mode 100644 index 0000000..8b0be98 --- /dev/null +++ b/src/demos/storage-access-api/personalization.ejs @@ -0,0 +1,76 @@ +document.addEventListener('DOMContentLoaded', () => { + const baseURL = '<%= protocol %>://<%= domainC %><% if (isPortPresent) { %>:<%= port %><% } %>/personalization'; + const pageContainer = document.getElementById('theme-container'); + const themeSwitcher = document.getElementById('dark-mode-switch'); + + async function updateUserPreference() { + + const hasStorageAccess = await document.hasStorageAccess(); + + if ( hasStorageAccess ) { + fetchAndApplyTheme(); + } else { + try { + await document.requestStorageAccess(); + fetchAndApplyTheme(); + } catch (error) { + console.error('There has been a problem with your fetch operation:', error); + } + } + } + + function fetchAndApplyTheme() { + fetch(`${baseURL}/get-personalization`, { + method: 'GET', + credentials: 'include' + }) + .then(response => { + if (!response.ok) { + throw new Error('Network response was not ok'); + } + return response.json(); + }) + .then(data => { + const theme = data.theme; + pageContainer.className = theme; + themeSwitcher.checked = theme === 'dark'; + }) + .catch(error => { + console.error('There has been a problem with your fetch operation:', error); + }); + } + + function fetchSetPersonalization() { + fetch( `${baseURL}/set-personalization`, { + method: 'POST', + credentials: 'include', + headers: { 'Content-Type': 'application/json' }, + body: JSON.stringify({ theme: themeSwitcher?.checked ? 'dark' : 'light' }) + }) + .then(response => response.json()) + .then(data => { + pageContainer.className = data.theme; + }); + } + + async function toggleTheme() { + const hasStorageAccess = await document.hasStorageAccess(); + if( await document.hasStorageAccess() ) { + fetchSetPersonalization(); + } else { + try { + await document.requestStorageAccess(); + if ( await document.hasStorageAccess() ) { + fetchSetPersonalization(); + } else { + console.error('User denied storage access'); + } + } catch (error) { + console.error('There has been a problem with your fetch operation:', error); + } + } + } + + window.toggleTheme = toggleTheme; + // updateUserPreference(); +}); diff --git a/src/demos/storage-access-api/routes.js b/src/demos/storage-access-api/routes.js new file mode 100644 index 0000000..3d3e02f --- /dev/null +++ b/src/demos/storage-access-api/routes.js @@ -0,0 +1,47 @@ +const express = require('express'); +const path = require('path'); +const router = express.Router(); + +router.get('/', (req, res) => { + res.render(path.join(__dirname,'index'), { + title: 'Storage Access API' + }); +}); + +router.get('/theme-selection', (req, res) => { + res.render(path.join(__dirname,'theme-selection'), { + title: 'Storage Access API' + }); +}); + + +router.get( '/get-personalization', ( req, res ) => { + const currentTheme = req.cookies.theme || 'light'; + res.json( { theme: currentTheme }); +}); + +router.post( '/set-personalization', ( req, res ) => { + const { theme } = req.body; + + if (!theme) { + res.status(400).send({ message: 'Invalid request' }); + + } + + res.cookie('theme', theme, { + domain: res.locals.domainC, + maxAge: 30 * 24 * 60 * 60 * 1000, // 30 days + httpOnly: true, + sameSite: "none", + secure: true + }); + res.status(200).send({ message: 'Success', theme : theme}); +}); + +// Serve the personalization.js file to the site +router.get('/personalization.js', (req, res) => { + res.set('Content-Type', 'application/javascript'); + res.render(path.join(__dirname,'personalization')); +}); + +module.exports = router; diff --git a/src/demos/storage-access-api/theme-selection.ejs b/src/demos/storage-access-api/theme-selection.ejs new file mode 100644 index 0000000..a9e0468 --- /dev/null +++ b/src/demos/storage-access-api/theme-selection.ejs @@ -0,0 +1,18 @@ +<%- include(commonPath + '/header.ejs') %> +
+ <%- include(commonPath + '/internal-page/header.ejs', {showHeader: false, containerType: 'sm'}) %> +
+ + +
+ <%- include(commonPath + '/internal-page/footer.ejs') %> +
+ + + +<%- include(commonPath + '/footer.ejs') %> From 77e73470295d7428cf12e810c03dabc05b205fdd Mon Sep 17 00:00:00 2001 From: Fellyph Cintra Date: Wed, 14 Feb 2024 11:49:00 +0000 Subject: [PATCH 05/17] removing console.log --- src/scenarios/personalization-localstorage/theme-selection.ejs | 2 +- src/scenarios/personalization/personalization.ejs | 1 - 2 files changed, 1 insertion(+), 2 deletions(-) diff --git a/src/scenarios/personalization-localstorage/theme-selection.ejs b/src/scenarios/personalization-localstorage/theme-selection.ejs index 87a0e37..057f15e 100644 --- a/src/scenarios/personalization-localstorage/theme-selection.ejs +++ b/src/scenarios/personalization-localstorage/theme-selection.ejs @@ -19,7 +19,7 @@ // Check for saved theme preference in localStorage const currentTheme = localStorage.getItem('theme'); - console.log(currentTheme) + if (currentTheme === 'dark') { themeContainer.classList.add(currentTheme); themeSwitcher.checked = true; diff --git a/src/scenarios/personalization/personalization.ejs b/src/scenarios/personalization/personalization.ejs index 9774e85..78812da 100644 --- a/src/scenarios/personalization/personalization.ejs +++ b/src/scenarios/personalization/personalization.ejs @@ -16,7 +16,6 @@ document.addEventListener('DOMContentLoaded', () => { }) .then(data => { const theme = data.theme; - console.log(data.theme) pageContainer.className = theme; themeSwitcher.checked = theme === 'dark'; }) From 66c91a116257f7e13edd4ccdc452ab3563279ebf Mon Sep 17 00:00:00 2001 From: Fellyph Cintra Date: Wed, 14 Feb 2024 13:12:52 +0000 Subject: [PATCH 06/17] removing header page when appears in a iframe --- public/assets/js/main.js | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/public/assets/js/main.js b/public/assets/js/main.js index 8bf4245..e1b0bf6 100644 --- a/public/assets/js/main.js +++ b/public/assets/js/main.js @@ -4,8 +4,10 @@ document.addEventListener('DOMContentLoaded', function() { if (isIframe) { const mainHeader = document.querySelector('.main-header'); const mainFooter = document.querySelector('.main-footer'); + const internalPageHeader = document.querySelector('.internal-page-header'); mainHeader?.remove(); - mainFooter?.remove(); + mainFooter?.remove(); + internalPageHeader?.remove('hidden'); } }); \ No newline at end of file From 3a5058a7855e84c7bd6dbfb9e1d3224275b59440 Mon Sep 17 00:00:00 2001 From: Fellyph Cintra Date: Wed, 14 Feb 2024 13:23:26 +0000 Subject: [PATCH 07/17] adding class to identify internal page header --- src/common/internal-page/header.ejs | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/common/internal-page/header.ejs b/src/common/internal-page/header.ejs index 1d2b964..f814f82 100644 --- a/src/common/internal-page/header.ejs +++ b/src/common/internal-page/header.ejs @@ -7,7 +7,7 @@ %>
<% if (title && displayHeader) { %> -
+

<%= title %>

<% } %> From 9b219a91652cd65302ecd33b64f5cc18f32b47c3 Mon Sep 17 00:00:00 2001 From: Fellyph Cintra Date: Wed, 14 Feb 2024 13:24:21 +0000 Subject: [PATCH 08/17] using classList to avoid override classes --- src/demos/storage-access-api/personalization.ejs | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/src/demos/storage-access-api/personalization.ejs b/src/demos/storage-access-api/personalization.ejs index 8b0be98..d0e4709 100644 --- a/src/demos/storage-access-api/personalization.ejs +++ b/src/demos/storage-access-api/personalization.ejs @@ -32,8 +32,10 @@ document.addEventListener('DOMContentLoaded', () => { }) .then(data => { const theme = data.theme; - pageContainer.className = theme; - themeSwitcher.checked = theme === 'dark'; + if (theme === 'dark') { + pageContainer.classList.add('dark'); + themeSwitcher.checked = true; + } }) .catch(error => { console.error('There has been a problem with your fetch operation:', error); @@ -49,7 +51,7 @@ document.addEventListener('DOMContentLoaded', () => { }) .then(response => response.json()) .then(data => { - pageContainer.className = data.theme; + pageContainer.classList.toggle('dark'); }); } From fbb23e0eaeb1e9ff255f9a7f1de037f49b8ec084 Mon Sep 17 00:00:00 2001 From: Fellyph Cintra Date: Wed, 14 Feb 2024 13:24:57 +0000 Subject: [PATCH 09/17] removing the iframe when the page is loaded from domain c --- src/demos/storage-access-api/routes.js | 4 +++- src/scenarios/personalization-localstorage/routes.js | 4 +++- 2 files changed, 6 insertions(+), 2 deletions(-) diff --git a/src/demos/storage-access-api/routes.js b/src/demos/storage-access-api/routes.js index 3d3e02f..f0dad07 100644 --- a/src/demos/storage-access-api/routes.js +++ b/src/demos/storage-access-api/routes.js @@ -3,7 +3,9 @@ const path = require('path'); const router = express.Router(); router.get('/', (req, res) => { - res.render(path.join(__dirname,'index'), { + const currentDomain = req.get('host'); + const template = currentDomain === res.locals.domainC ? 'theme-selection' : 'index'; + res.render(path.join(__dirname,template), { title: 'Storage Access API' }); }); diff --git a/src/scenarios/personalization-localstorage/routes.js b/src/scenarios/personalization-localstorage/routes.js index 983db1f..551c863 100644 --- a/src/scenarios/personalization-localstorage/routes.js +++ b/src/scenarios/personalization-localstorage/routes.js @@ -3,7 +3,9 @@ const path = require('path'); const router = express.Router(); router.get('/', (req, res) => { - res.render(path.join(__dirname,'index'), { + const currentDomain = req.get('host'); + const pageTemplate = currentDomain === res.locals.domainC ? 'theme-selection' : 'index'; + res.render(path.join(__dirname, pageTemplate), { title: 'Personalization with localStorage' }); }); From a666092edf5771fdfa7a523c2238bfdae585e15b Mon Sep 17 00:00:00 2001 From: Fellyph Cintra Date: Wed, 14 Feb 2024 13:25:47 +0000 Subject: [PATCH 10/17] removing header only when the page loads from iframe --- src/demos/storage-access-api/theme-selection.ejs | 4 ++-- .../personalization-localstorage/theme-selection.ejs | 4 ++-- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/src/demos/storage-access-api/theme-selection.ejs b/src/demos/storage-access-api/theme-selection.ejs index a9e0468..13f6ecb 100644 --- a/src/demos/storage-access-api/theme-selection.ejs +++ b/src/demos/storage-access-api/theme-selection.ejs @@ -1,6 +1,6 @@ <%- include(commonPath + '/header.ejs') %> -
- <%- include(commonPath + '/internal-page/header.ejs', {showHeader: false, containerType: 'sm'}) %> +
+ <%- include(commonPath + '/internal-page/header.ejs', {containerType: 'sm'}) %>