update minor prebid secure big and fix ui spacing accross prebid

Author: eiman-eltigani-ttd

web-integrations/prebid-integrations/client-server/public/app.css

@@ -128,13 +128,26 @@ h2 {
   border-bottom: 3px solid var(--primary-orange);
 }
 
+/* Teal section header for Prebid */
+h2.section-teal {
+  border-bottom: 3px solid var(--accent-teal);
+}
+
 p {
   font-size: 0.95rem;
   color: var(--text-gray);
   margin-bottom: 2rem;
   line-height: 1.8;
 }
 
+/* Section summary - same styling as intro but gray */
+p.section-summary {
+  font-size: 0.95rem;
+  color: var(--text-gray);
+  margin-bottom: 1rem;
+  line-height: 1.8;
+}
+
 a {
   color: var(--link-color);
   text-decoration: underline;
@@ -146,32 +159,46 @@ a:hover {
   opacity: 0.8;
 }
 
-/* State Table */
+/* State Tables */
 #uid_state {
   width: 100%;
   border-collapse: collapse;
   margin: 2rem 0;
   font-size: 0.875rem;
   border: 1px solid var(--border-color);
   border-radius: 8px;
-  overflow: hidden;
+  overflow: visible;
   position: relative;
+}
+
+#prebid_state {
+  width: 100%;
+  border-collapse: collapse;
+  margin: 1rem 0 2rem 0;
+  font-size: 0.875rem;
+  border: 1px solid var(--border-color);
+  border-radius: 8px;
   overflow: visible;
+  position: relative;
 }
 
-#uid_state tr {
+#uid_state tr,
+#prebid_state tr {
   border-bottom: 1px solid var(--border-color);
 }
 
-#uid_state tr:nth-child(even) {
+#uid_state tr:nth-child(even),
+#prebid_state tr:nth-child(even) {
   background-color: var(--bg-light);
 }
 
-#uid_state tr:last-child {
+#uid_state tr:last-child,
+#prebid_state tr:last-child {
   border-bottom: none;
 }
 
-#uid_state td {
+#uid_state td,
+#prebid_state td {
   padding: 1rem;
   vertical-align: top;
 }
@@ -200,6 +227,11 @@ a:hover {
   margin-top: 2rem;
 }
 
+.form.top-form {
+  margin-top: 0;
+  margin-bottom: 2rem;
+}
+
 .form-inline {
   display: flex;
   gap: 0;

web-integrations/prebid-integrations/client-server/public/index.html

@@ -194,6 +194,23 @@ <h1>Client-Server <%- identityName %> SDK Integration Example with Prebid.js</h1
       This example demonstrates how a content publisher can integrate with <%- identityName %> and Prebid.js using the <a href="<%- docsBaseUrl %>/guides/integration-prebid-client-server"><%- identityName %> Client-Server Integration Guide for Prebid.js</a>, where tokens are generated on the server and passed to Prebid.js on the client side.
         </p>
 
+        <!-- Generate/Clear buttons at the top for easy access -->
+        <div id="login_form" style="display: none" class="form top-form">
+          <div class="form-inline">
+            <input
+              type="text"
+              id="email"
+              name="email"
+              placeholder="Enter an email address"
+              class="email-input"
+            />
+            <button type="button" class="button" id="login">Generate <%- identityName %></button>
+          </div>
+        </div>
+        <div id="clear_storage_form" style="display: none" class="form top-form">
+          <button type="button" class="button" id="clear_storage">Clear <%- identityName %></button>
+        </div>
+
         <h2><%- identityName %> Integration Status</h2>
 
         <table id="uid_state">
@@ -209,9 +226,9 @@ <h2><%- identityName %> Integration Status</h2>
                 </div>
               </div>
             </td>
-        <td class="value"><pre id="targeted_advertising_ready"></pre></td>
-      </tr>
-      <tr>
+            <td class="value"><pre id="targeted_advertising_ready"></pre></td>
+          </tr>
+          <tr>
             <td class="label">
               <div class="tooltip-wrapper">
                 Advertising Token:
@@ -223,8 +240,8 @@ <h2><%- identityName %> Integration Status</h2>
                 </div>
               </div>
             </td>
-        <td class="value"><pre id="advertising_token"></pre></td>
-      </tr>
+            <td class="value"><pre id="advertising_token"></pre></td>
+          </tr>
           <tr>
             <td class="label">
               <div class="tooltip-wrapper">
@@ -239,6 +256,13 @@ <h2><%- identityName %> Integration Status</h2>
             </td>
             <td class="value"><pre id="login_required"></pre></td>
           </tr>
+        </table>
+
+        <!-- Prebid Integration Status Section -->
+        <h2 class="section-teal">Prebid Integration Status</h2>
+        <p class="section-summary">Prebid.js manages token storage in localStorage and shares it with bidders during header bidding auctions.</p>
+
+        <table id="prebid_state">
           <tr>
             <td class="label">
               <div class="tooltip-wrapper">
@@ -253,24 +277,8 @@ <h2><%- identityName %> Integration Status</h2>
             </td>
             <td class="value"><pre id="prebid_storage"></pre></td>
           </tr>
-    </table>
+        </table>
 
-    <div id="login_form" style="display: none" class="form">
-          <div class="form-inline">
-        <input
-          type="text"
-          id="email"
-          name="email"
-          placeholder="Enter an email address"
-              class="email-input"
-            />
-            <button type="button" class="button" id="login">Generate <%- identityName %></button>
-          </div>
-        </div>
-
-        <div id="clear_storage_form" style="display: none" class="form">
-          <button type="button" class="button" id="clear_storage">Clear <%- identityName %></button>
-        </div>
       </div>
 
       <!-- Sidebar for Instructions -->

web-integrations/prebid-secure-signals/client-side/index.html

@@ -97,10 +97,16 @@
         // Check if user is opted out first
         const storedToken = localStorage.getItem(storageKey);
         let isOptedOut = false;
+        let hasTokenInStorage = false;
+        
         if (storedToken) {
           try {
             const tokenData = JSON.parse(storedToken);
             isOptedOut = tokenData.latestToken === 'optout';
+            // Check if there's a valid token in storage
+            if (tokenData.latestToken && tokenData.latestToken.advertising_token) {
+              hasTokenInStorage = true;
+            }
           } catch (e) {
             // Ignore parse errors
           }
@@ -113,9 +119,9 @@
           return;
         }
 
-        // Check if Prebid has the token and encryptedSignalSources is configured
-        const prebidUserIds = pbjs.getUserIds();
-        const uidToken = prebidUserIds[userIdName];
+        // Check if Prebid has the token (either from getUserIds or localStorage)
+        const prebidUserIds = pbjs.getUserIds ? pbjs.getUserIds() : {};
+        const uidToken = prebidUserIds[userIdName] || hasTokenInStorage;
 
         // Check if encryptedSignalSources is configured
         const prebidConfig = pbjs.getConfig('encryptedSignalSources');