Merge pull request #34 from rtCamp/feature/reusable-templates-interna…

…l-page Create reusable templates internal page
rtCamp · Jan 30, 2024 · bbad002 · bbad002
2 parents c199375 + 7de4eef
commit bbad002
Show file tree

Hide file tree

Showing 19 changed files with 63 additions and 91 deletions.
diff --git a/public/assets/js/main.js b/public/assets/js/main.js
@@ -0,0 +1,11 @@
+document.addEventListener('DOMContentLoaded', function() {
+    const isIframe = window.self !== window.top;
+
+    if (isIframe) {
+        const mainHeader = document.querySelector('.main-header');
+        const mainFooter = document.querySelector('.main-footer');
+
+        mainHeader?.remove(); 
+        mainFooter?.remove(); 
+    }
+});
diff --git a/public/assets/styles/style.css b/public/assets/styles/style.css
@@ -626,10 +626,6 @@ video {
   margin-bottom: 0.5rem;
 }
 
-.mb-3 {
-  margin-bottom: 0.75rem;
-}
-
 .mb-4 {
   margin-bottom: 1rem;
 }
@@ -726,10 +722,6 @@ video {
   max-width: 32rem;
 }
 
-.max-w-md {
-  max-width: 28rem;
-}
-
 .appearance-none {
   -webkit-appearance: none;
      -moz-appearance: none;
@@ -887,6 +879,14 @@ video {
   padding-bottom: 2rem;
 }
 
+.pb-20 {
+  padding-bottom: 5rem;
+}
+
+.pt-8 {
+  padding-top: 2rem;
+}
+
 .text-left {
   text-align: left;
 }

diff --git a/src/common/footer.ejs b/src/common/footer.ejs
@@ -4,13 +4,5 @@
         <a href="https://chromewebstore.google.com/detail/privacy-sandbox-analysis/ehbnpceebmgpanbbfckhoefhdibijkef" class="text-600 font-bold hover:underline" target="_blank" rel="noopener">Download the PSAT extension</a>
         <a href="https://privacysandbox.com/" class="text-600 font-bold hover:underline" target="_blank" rel="noopener">About Privacy Sandbox</a>
     </footer>
-    <script>
-        const mainFooter = document.querySelector('.main-footer');
-        const isIframe = window.self !== window.top;
-        
-        if (mainFooter && isIframe) {
-           mainFooter.remove(); 
-        }
-    </script>
 </body>
 </html>
diff --git a/src/common/header.ejs b/src/common/header.ejs
@@ -9,16 +9,7 @@
     <link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;700&display=swap" rel="stylesheet">
 
     <link rel="stylesheet" href="/assets/styles/style.css">
-    <script>
-        document.addEventListener('DOMContentLoaded', function() {
-            const mainHeader = document.querySelector('.main-header');
-            const isIframe = window.self !== window.top;
-
-            if (mainHeader && isIframe) {
-                mainHeader.remove(); 
-            }
-        });
-    </script>
+    <script src="/assets/js/main.js"></script>
 </head>
 <body class="<%= backgroundColor %> flex flex-col min-h-screen">
     <header class="main-header last:fixed w-full bg-white z-50 shadow-md">

diff --git a/src/common/internal-page/footer.ejs b/src/common/internal-page/footer.ejs
@@ -0,0 +1,2 @@
+        </div>
+    </div>
diff --git a/src/common/internal-page/header.ejs b/src/common/internal-page/header.ejs
@@ -0,0 +1,7 @@
+    <div class="container mx-auto pt-8 pb-20">
+        <% if (title) { %>
+            <header>
+                <h1 class="text-3xl font-bold my-8 text-center text-slate-800"><%= title %></h1>
+            </header>
+        <% } %>
+        <div class="border p-8 bg-white drop-shadow-[8px_8px_0_rgba(32,33,37,.1)] rounded-lg text-center w-[60rem] mx-auto max-w-full">
diff --git a/src/demos/chips/analytics-first-party.ejs b/src/demos/chips/analytics-first-party.ejs
@@ -1,8 +1,6 @@
 <%- include(commonPath + '/header.ejs') %>
 
-<div class="container mx-auto py-8">
-	<h1 class="text-3xl font-bold mb-4 text-center"><%= title %></h1>
-	<div class="border p-8 bg-white drop-shadow-[8px_8px_0_rgba(32,33,37,.1)] rounded-lg text-center">
+	<%- include(commonPath + '/internal-page/header.ejs') %>
 		<p class="text-center">Track user interactions using the analytics code provided below:</p>
 		<div class="flex justify-center space-x-4 mt-4">
 			<button onclick="trackInteraction('buttonClicked')" class="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-700 transition duration-300">
@@ -13,8 +11,7 @@
 			</button>
 		</div>
 		<div id="status" class="text-center mt-4"></div>
-	</div>
-</div>
+	<%- include(commonPath + '/internal-page/footer.ejs') %>
 
 <script src="<%= protocol %>://<%= domainA %><% if (isPortPresent) { %>:<%= port %><% } %>/chips/analytics.js"></script>
 

diff --git a/src/demos/chips/analytics-third-party.ejs b/src/demos/chips/analytics-third-party.ejs
@@ -1,8 +1,6 @@
 <%- include(commonPath + '/header.ejs') %>
 
-<div class="container mx-auto py-8">
-	<h1 class="text-3xl font-bold mb-4 text-center"><%= title %></h1>
-	<div class="border p-8 bg-white drop-shadow-[8px_8px_0_rgba(32,33,37,.1)] rounded-lg text-center">
+	<%- include(commonPath + '/internal-page/header.ejs') %>
 		<p class="text-center">Track user interactions using the analytics code provided below:</p>
 
 		<div class="flex justify-center space-x-4 mt-4">
@@ -14,8 +12,7 @@
 			</button>
 		</div>
 		<div id="status" class="text-center mt-4"></div>
-	</div>
-</div>
+	<%- include(commonPath + '/internal-page/footer.ejs') %>
 
 <script src="<%= protocol %>://<%= domainC %><% if (isPortPresent) { %>:<%= port %><% } %>/chips/analytics.js"></script>
 

diff --git a/src/demos/chips/index.ejs b/src/demos/chips/index.ejs
@@ -1,8 +1,6 @@
 <%- include(commonPath + '/header.ejs') %>
 
-<div class="container mx-auto py-8">
-	<h1 class="text-3xl font-bold mb-4 text-center">CHIPS</h1>
-	<div class="border p-8 bg-white drop-shadow-[8px_8px_0_rgba(32,33,37,.1)] rounded-lg text-center">
+	<%- include(commonPath + '/internal-page/header.ejs') %>
 		<p class="text-center font-bold">Cookies Having Independent Partitioned State</p>
 		<div class="flex justify-center space-x-4 mt-4">
 			<a href="<%= protocol %>://<%= domainC %><% if (isPortPresent) { %>:<%= port %><% } %>/chips/analytics-first-party"
@@ -14,7 +12,6 @@
 				Analytics Third-Party
 			</a>
 		</div>
-	</div>
-</div>
+	<%- include(commonPath + '/internal-page/footer.ejs') %>
 
 <%- include(commonPath + '/footer.ejs') %>
diff --git a/src/scenarios/analytics/index.ejs b/src/scenarios/analytics/index.ejs
@@ -1,18 +1,15 @@
 <%- include(commonPath + '/header.ejs') %>
 
-    <div class="container mx-auto py-8">
-        <h1 class="text-3xl font-bold my-8 text-center text-slate-800">Analytics</h1>
-        <div class="border p-8 bg-white drop-shadow-[8px_8px_0_rgba(32,33,37,.1)] rounded-lg text-center w-[60rem] mx-auto max-w-full">
-            <p class="text-lg mb-4 text-center">Here is a button that tracks clicks using a third-party analytics service; check if it works.</p>
+    <%- include(commonPath + '/internal-page/header.ejs') %>
+        <p class="text-lg mb-4 text-center">Here is a button that tracks clicks using a third-party analytics service; check if it works.</p>
 
-            <div class="flex justify-center space-x-4 my-10">
-                <button onclick="trackInteraction('buttonClicked')" class="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-700 transition duration-300">
-                    Track me!
-                </button>
-            </div>
-            <div id="status" class="text-center text-lg my-4"></div>
+        <div class="flex justify-center space-x-4 my-10">
+            <button onclick="trackInteraction('buttonClicked')" class="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-700 transition duration-300">
+                Track me!
+            </button>
         </div>
-    </div>
+        <div id="status" class="text-center text-lg my-4"></div>
+    <%- include(commonPath + '/internal-page/footer.ejs') %>
 
 <script src="<%= protocol %>://<%= domainC %><% if (isPortPresent) { %>:<%= port %><% } %>/analytics/analytics.js"></script>
 

diff --git a/src/scenarios/ecommerce/index.ejs b/src/scenarios/ecommerce/index.ejs
@@ -1,13 +1,10 @@
 <%- include(commonPath + '/header.ejs') %>
 
-<div class="container mx-auto py-8">
-	<h1 class="text-3xl font-bold mb-4 text-center text-slate-800">E-Commerce</h1>
-	<div class="border p-8 bg-white drop-shadow-[8px_8px_0_rgba(32,33,37,.1)] rounded-lg text-center w-[60rem] mx-auto max-w-full">
+	<%- include(commonPath + '/internal-page/header.ejs') %>
 		<p class="text-lg font-bold mb-4 text-center">Here is an embedded Third-Party e-commerce site, check if you can add products to cart.</p>
 		<div class="mt-8 flex justify-center">
 			<iframe src="<%= protocol %>://<%= domainC %><% if (isPortPresent) { %>:<%= port %><% } %>/ecommerce/products" class="border-8 rounded w-1/2 h-96"></iframe>
 		</div>
-	</div>
-</div>
+	<%- include(commonPath + '/internal-page/footer.ejs') %>
 
 <%- include(commonPath + '/footer.ejs') %>
diff --git a/src/scenarios/ecommerce/routes.js b/src/scenarios/ecommerce/routes.js
@@ -13,7 +13,9 @@ router.use((req, res, next) => {
 // Route to serve the home page
 router.get('/', (req, res) => {
 	// Render the index view (homepage)
-	res.render(path.join(__dirname,'index'));
+	res.render(path.join(__dirname,'index'), {
+        title: 'E-commerce'
+    });
 });
 
 // Route to serve the products page

diff --git a/src/scenarios/embedded-video/index.ejs b/src/scenarios/embedded-video/index.ejs
@@ -1,8 +1,6 @@
 <%- include(commonPath + '/header.ejs') %>
 
-<div class="container mx-auto py-8">
-    <h1 class="text-3xl font-bold my-8 text-center text-slate-800">Embedded Video</h1>
-    <div class="border p-8 bg-white drop-shadow-[8px_8px_0_rgba(32,33,37,.1)] rounded-lg text-center w-[60rem] mx-auto max-w-full">
+    <%- include(commonPath + '/internal-page/header.ejs') %>
         <p class="text-lg font-bold mb-4 text-center">Here is an embedded Third-Party video player, check if you can play the video and if it shows up in your history in your logged in account.</p>
         <div class="mt-8 flex justify-center">
             <iframe class="border-8 rounded" width="560" height="315" src="https://www.youtube.com/embed/aqz-KE-bpKQ?si=CuSLBTjNMf9NA1eg" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
@@ -12,7 +10,6 @@
                 Check your YouTube history
             </a>
         </footer>
-    </div>
-</div>
+    <%- include(commonPath + '/internal-page/footer.ejs') %>
 
 <%- include(commonPath + '/footer.ejs') %>
diff --git a/src/scenarios/payment-gateway/checkout.ejs b/src/scenarios/payment-gateway/checkout.ejs
@@ -1,13 +1,10 @@
 <%- include(commonPath + '/header.ejs') %>
 
-<div class="container mx-auto py-8">
-    <h1 class="text-3xl font-bold mb-4 text-center text-slate-800">Checkout</h1>
-    <div class="border p-8 bg-white drop-shadow-[8px_8px_0_rgba(32,33,37,.1)] rounded-lg text-center w-[60rem] mx-auto max-w-full">
+    <%- include(commonPath + '/internal-page/header.ejs') %>
         <p class="bg-gray-100 p-4 rounded-lg mb-4 text-lg">Item: <%= item %> - $<%= price %></p>
         <div class="overflow-hidden rounded-lg">
             <iframe src="<%= protocol %>://<%= domainC %><% if (isPortPresent) { %>:<%= port %><% } %>/payment-gateway/payment-form" class="w-full h-96" frameborder="0"></iframe>
         </div>
-    </div>
-</div>
+    <%- include(commonPath + '/internal-page/footer.ejs') %>
 
 <%- include(commonPath + '/footer.ejs') %>
diff --git a/src/scenarios/payment-gateway/routes.js b/src/scenarios/payment-gateway/routes.js
@@ -5,7 +5,7 @@ const router = express.Router();
 
 router.get( '/', ( req, res ) => {
 	res.render( path.join( __dirname, 'checkout' ), {
-		title: 'Payment Gateway',
+		title: 'Checkout',
 		item: "Virtual Badge for testing the site",
 		price: 10,
 	} );

diff --git a/src/scenarios/single-sign-on/login.ejs b/src/scenarios/single-sign-on/login.ejs
@@ -1,8 +1,6 @@
 <%- include(commonPath + '/header.ejs') %>
 
-<div class="container mx-auto py-8">
-    <h1 class="text-3xl font-bold mb-4 text-center">Login</h1>
-    <div class="bg-white rounded-lg p-8 shadow-lg w-full max-w-md mx-auto">
+    <%- include(commonPath + '/internal-page/header.ejs') %>
         <form id="loginForm" action="<%= protocol %>://<%= domainC %>/single-sign-on/validate" method="POST">
             <div class="mb-6">
                 <label for="email" class="block text-gray-700 text-sm font-bold mb-2">Email Address:</label>
@@ -14,7 +12,6 @@
                 </button>
             </div>
         </form>
-    </div>
-</div>
+    <%- include(commonPath + '/internal-page/footer.ejs') %>
 
 <%- include(commonPath + '/footer.ejs') %>
diff --git a/src/scenarios/single-sign-on/profile.ejs b/src/scenarios/single-sign-on/profile.ejs
@@ -1,13 +1,10 @@
 <%- include(commonPath + '/header.ejs') %>
 
-<div class="container mx-auto py-8">
-    <div class="bg-white rounded-lg p-8 shadow-lg w-full max-w-lg mx-auto text-center">
-        <h1 class="text-3xl font-bold mb-4">Welcome</h1>
+    <%- include(commonPath + '/internal-page/header.ejs') %>
         <p class="text-lg font-bold mb-4">You are logged in as <%= email %></p>
         <div class="text-center">
             <a href="/single-sign-on/logout" class="bg-blue-500 text-white font-bold py-2 px-4 rounded-full inline-block">Logout</a>
         </div>
-    </div>
-</div>
+    <%- include(commonPath + '/internal-page/footer.ejs') %>
 
 <%- include(commonPath + '/footer.ejs') %>
diff --git a/src/scenarios/single-sign-on/routes.js b/src/scenarios/single-sign-on/routes.js
@@ -4,14 +4,9 @@ const router = express.Router();
 
 router.get('/', (req, res) => {
 	const email = req.cookies.localemail;
-
-	if (email) {
-		// User is 'logged in', redirect to profile page
-		res.redirect('/single-sign-on/profile');
-	} else {
-		// User is not logged in, redirect to sign-in page
-		res.redirect('/single-sign-on/sign-in');
-	}
+	// User is 'logged in', redirect to profile page or sign-in page
+	const redirectURL = (email) ? '/single-sign-on/profile' : '/single-sign-on/sign-in';	
+	res.redirect(redirectURL);
 });
 
 router.get('/profile', (req, res) => {
@@ -20,7 +15,7 @@ router.get('/profile', (req, res) => {
 	const domain = req.get('host');
 
 	if (email) {
-		res.render(path.join(__dirname, 'profile'), { title: 'Single Sign-On for ' + domain, email: email });
+		res.render(path.join(__dirname, 'profile'), { title: 'Welcome ' + email, email: email });
 	} else {
 		res.redirect('/single-sign-on/sign-in');
 	}

diff --git a/src/scenarios/single-sign-on/signin.ejs b/src/scenarios/single-sign-on/signin.ejs
@@ -1,10 +1,9 @@
 <%- include(commonPath + '/header.ejs') %>
 
 <div class="container mx-auto py-8">
-	<h1 class="text-3xl font-bold mb-4 text-center">Single Sign-On</h1>
-	<div class="text-center">
+    <%- include(commonPath + '/internal-page/header.ejs') %>
 		<button id="signInButton" class="bg-blue-500 text-white font-bold py-2 px-4 rounded-full inline-block">Sign In</button>
-	</div>
+	<%- include(commonPath + '/internal-page/footer.ejs') %>
 </div>
 
 <script>