/* LAST MODIFIED: 2026-10-19 17:00 EST */ /* * Custom JS to maintain EDS API auth and session tokens in the API Reference */ // Intercept ReadMe's API requests const { fetch: originalFetch } = window; window.fetch = async (...args) => { let [resource, config] = args; const response = await originalFetch(resource, config); var apikey = document.getElementById("header-sessionsCreatesessionGet_x-api-key"); // Extract auth token when the EDS API auth endpoint was called if (resource && resource.includes('authservice/rest/uidauth')) { //Reset the API Key on authentication window.localStorage.removeItem('edsapi-api-key') response.clone().json().then((data) => { if (data && data.AuthToken) { //console.log('Got an auth token! ', data.AuthToken); window.localStorage.setItem('edsapi-auth', data.AuthToken) } }); } /////////////////////**** // Extract the latest meds bearer token from any meds request that returns access_token if (resource && resource.includes('medsapi')) { response.clone().json().then((data) => { if (data && data.access_token) { console.log('Meds token endpoint hit:', resource); console.log('Got latest meds access_token'); window.localStorage.removeItem('current-meds-token'); window.localStorage.setItem('current-meds-token', data.access_token); } }).catch(() => { // not JSON or no access_token, ignore }); } // Extract session token when the EDS API session endpoint was called if (resource && resource.includes('edsapi/rest/createsession')) { if (apikey) { if (apikey.value) { //console.log('API Key:', apikey.value); window.localStorage.setItem('edsapi-api-key', apikey.value) } } response.clone().json().then((data) => { if (data && data.SessionToken) { //console.log('Got a session token! ', data.SessionToken); window.localStorage.setItem('edsapi-session', data.SessionToken) } }); } return response; }; // Wrapper to update one or more ReadMe inputs in the UI function updateReadMeInputs(inputs, values){ const nativeInputValueSetter = Object.getOwnPropertyDescriptor(window.HTMLInputElement.prototype, 'value').set; for (let i = 0; i < inputs.length; i++) { nativeInputValueSetter.call(inputs[i], values[i]); inputs[i].dispatchEvent(new Event('input', { bubbles: true })); }; } // Check for stored EDS API tokens and populate form when they are present function populateEdsApiTokens() { let inputs = []; let values = []; const authInput = document.querySelector("input[id$='x-authenticationToken']"); const authToken = localStorage.getItem('edsapi-auth'); console.log('----Populate token----'); if (authInput && authToken) { inputs.push(authInput); values.push(authToken); } const sessionInput = document.querySelector("input[id$='x-sessionToken']"); const sessionToken = localStorage.getItem('edsapi-session'); if (sessionInput && sessionToken) { inputs.push(sessionInput); values.push(sessionToken); } const apikeyInput = document.querySelector("input[id$='x-api-key']"); const apikeyValue = localStorage.getItem('edsapi-api-key'); if (apikeyInput && apikeyValue) { inputs.push(apikeyInput); values.push(apikeyValue); } ////////////////////////***** // Meds const tokenkeyInput = document.querySelector("input[id$='APIAuth-token']"); const tokenkeyValue = localStorage.getItem('current-meds-token'); //console.log('--- Meds Token Retrieval Debug ---'); //console.log('Input found:', !!tokenkeyInput); //console.log('current-meds-product:', currentMedsProduct); //console.log('current-meds-token exists:', !!tokenkeyValue); //console.log('token', tokenkeyValue); //console.log('--- MEDS RETRIEVE DEBUG ---'); //console.log('token from localStorage:', tokenkeyValue); // console.log('input found:', !!tokenkeyInput); if (tokenkeyInput && tokenkeyValue) { console.log('Setting latest meds token'); inputs.push(tokenkeyInput); values.push(tokenkeyValue); } ///////////////////////***** if (inputs.length > 0) { //console.log('Populate tokens!'); updateReadMeInputs(inputs, values); } } /////////////////////// //// Start Display app /////////////////////// const myApps = { "app": [ { "appFamily": "default", "appId": "66d7f3f0-aa20-4498-9f11-c7ae77", "attributes": [ { "name": "DisplayName", "value": "Architecture Test App" }, { "name": "Notes", "value": "" }, { "name": "Registration-Type", "value": "2" } ], "callbackUrl": "http://127.0.0.1/auth-callback", "createdAt": 1604958732846, "createdBy": "aray@ebsco.com", "credentials": [ { "apiProducts": [ { "apiproduct": "Loopback", "status": "approved" }, { "apiproduct": "discoveryapi-internal", "status": "approved" } ], "attributes": [], "consumerKey": "GO6e5wJIuBZUVNLmAUIo2IbCocc", "consumerSecret": "CWKhn0a9K2itqhKWSpMyQsjBfj8VJuRW88qqFxnN4aFUXpNN-dUGvV7Zh1oNippp", "expiresAt": -1, "issuedAt": 1604958833793, "scopes": [], "status": "approved" } ], "developerId": "06b47f48-41b9-41dc-8b35-e89192c", "lastModifiedAt": 1717787972702, "lastModifiedBy": "draspa@ebsco.com", "name": "ArchitectureTestApp", "scopes": [], "status": "approved" }, { "accessType": "read", "appFamily": "default", "appId": "88f5ac50-0ba8-441d-9274-8fbc270a2328", "attributes": [ { "name": "AppType", "value": "Service" }, { "name": "CustID", "value": "demo" }, { "name": "DisplayName", "value": "Test app 2" }, { "name": "GroupID", "value": "" }, { "name": "OpenID", "value": "Do not use OpenID scopes" }, { "name": "creationDate", "value": "2025-07-16 20:22 PM" }, { "name": "lastModified", "value": "2025-07-16 20:22 PM" }, { "name": "lastModifier", "value": "mattjones@ebsco.com" } ], "callbackUrl": "", "createdAt": 1752697353636, "createdBy": "apigee.ebscois.live@ebsco.com", "credentials": [ { "apiProducts": [ { "apiproduct": "discoveryapi", "status": "pending" } ], "attributes": [], "consumerKey": "etHShJIcBNhtsA8sau0A0kVnRz1nrDf9", "consumerSecret": "dT5R9xejiX388opJ", "expiresAt": -1, "issuedAt": 1752697354436, "scopes": [], "status": "approved" } ], "developerId": "06b47f48-41b9-41dc-8b35-e89192cf3", "lastModifiedAt": 1752697353636, "lastModifiedBy": "apigee.ebscois.live@ebsco.com", "name": "test-app-2", "scopes": [], "status": "approved" }, { "accessType": "read", "appFamily": "default", "appId": "b42d8798-a19f-4122-b2c4-ccab22da8", "attributes": [ { "name": "AppType", "value": "Service" }, { "name": "CustID", "value": "demo" }, { "name": "DisplayName", "value": "Test App 123" }, { "name": "GroupID", "value": "" }, { "name": "OpenID", "value": "Do not use OpenID scopes" }, { "name": "creationDate", "value": "2023-05-31 15:14 PM" }, { "name": "lastModified", "value": "2023-05-31 15:14 PM" }, { "name": "lastModifier", "value": "mattjones@ebsco.com" } ], "callbackUrl": "", "createdAt": 1685546086065, "createdBy": "apigee.ebscois.live@gmail.com", "credentials": [ { "apiProducts": [ { "apiproduct": "discoveryapi", "status": "pending" } ], "attributes": [], "consumerKey": "tWAoGGDLCMlMtbC2ZoHEF2UoANepODgJ", "consumerSecret": "7NIHwt7dWEVKzDHe", "expiresAt": -1, "issuedAt": 1685546087026, "scopes": [], "status": "approved" } ], "developerId": "06b47f48-41b9-41dc-8b35-e89192cf30a8", "lastModifiedAt": 1685546086065, "lastModifiedBy": "apigee.ebscois.live@gmail.com", "name": "test-app-123", "scopes": [], "status": "approved" }, { "accessType": "read", "appFamily": "default", "appId": "3c6f9c3a-7e1a-4c8e-9f0e-2a3d2f7b", "attributes": [ { "name": "AppType", "value": "Service" }, { "name": "CustID", "value": "demo" }, { "name": "DisplayName", "value": "Sample Two-Creds App" }, { "name": "GroupID", "value": "" }, { "name": "OpenID", "value": "Do not use OpenID scopes" }, { "name": "creationDate", "value": "2025-09-22 10:05 AM" }, { "name": "lastModified", "value": "2025-09-22 10:05 AM" }, { "name": "lastModifier", "value": "mattjones@ebsco.com" } ], "callbackUrl": "https://example.com/callback", "createdAt": 1758528305000, "createdBy": "apigee.ebscois.live@ebsco.com", "credentials": [ { "apiProducts": [ { "apiproduct": "discoveryapi", "status": "approved" }, { "apiproduct": "holdingsiq", "status": "approved" } ], "attributes": [], "consumerKey": "X1a2b3c4d5e6f7g8h9i0jSampleKey001", "consumerSecret": "S3cr3tKey001abcd", "expiresAt": -1, "issuedAt": 1758528310000, "scopes": [], "status": "approved" }, { "apiProducts": [ { "apiproduct": "medsapi", "status": "revoked" } ], "attributes": [], "consumerKey": "Y1a2b3c4d5e6f7g8h9i0jSampleKey002", "consumerSecret": "S3cr3tKey002wxyz", "expiresAt": -1, "issuedAt": 1758528322000, "scopes": [], "status": "approved" } ], "developerId": "06b47f48-41b9-41dc-8b35-e89192cf30a8", "lastModifiedAt": 1758528305000, "lastModifiedBy": "apigee.ebscois.live@ebsco.com", "name": "sample-two-creds-app", "scopes": [], "status": "approved" }, { "appFamily": "default", "appId": "66d7f3f0-aa20-4498-9f11-c7ae77b", "attributes": [ { "name": "DisplayName", "value": "Dev App 1" }, { "name": "Notes", "value": "" }, { "name": "Registration-Type", "value": "2" } ], "callbackUrl": "http://127.0.0.1/auth-callback", "createdAt": 1604958732846, "createdBy": "aray@ebsco.com", "credentials": [ { "apiProducts": [ { "apiproduct": "Loopback", "status": "approved" }, { "apiproduct": "discoveryapi-internal", "status": "approved" } ], "attributes": [], "consumerKey": "GO6e5wJIuBZUVNLmAUIo2IbCobb6R", "consumerSecret": "CWKhn0a9K2itqhKWSpMyQsjBfj8VJuRW88qqFxnN4aFUXpNN-dUGvVbbb", "expiresAt": -1, "issuedAt": 1604958833793, "scopes": [], "status": "approved" } ], "developerId": "06b47f48-41b9-41dc-8b35-e89192cf3aaa", "lastModifiedAt": 1717787972702, "lastModifiedBy": "draspa@ebsco.com", "name": "dev-app-1", "scopes": [], "status": "revoked" } ] }; //////////////////////////////////////////// // App Display component // Define a new custom element /////////////////////////////////////////// class AppDisplay extends HTMLElement { constructor() { super(); //Call the constructor of the html element // Attach a shadow DOM to encapsulate sytles and structure this.attachShadow({ mode: "open" }); let style = document.createElement('style'); style.textContent = ` .app-card { width: 100%; /* Full width of the container */ padding-top: 10px; padding-bottom: 10px; padding-right: 10px; padding-left: 10px; box-sizing: border-box; } .app-header { display: flex; justify-content: space-between; /* Push app name left, status right */ cursor: pointer; /* Show pointer cursor over hover */ align-items: center; border-radius: 8px; padding: 12px 14px; background: #F3F4F6; border: 1px solid #E5E7EB; } .app-list { list-style: none; max-width: min(860px); display: flex; flex-direction: column; margin: 16px auto; padding-inline: clamp(8px, 2vw, 16px); gap: 12px; padding-left: 0px; padding-right: 19px; padding-top: 0px; padding-bottom: 0px; } .app-item { background: #e0e0e0; margin: 10px 0; padding: 15px; border-radius: 8px; display: flex; justify-content: space-between; align-items: center; border: 1px solid #ddd; transition: background 0.3s ease, box-shadow 0.3s ease; box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1); width: 100%; } .app-item:hover { background: rgb(213, 225, 235); box-shadow: 3px 3px 8px rgba(0, 0, 0, 0.15); } .approved { background: #5bc0de; color: white; } .pending { background: #777777; color: white; } .revoked { background: #F44336; color: white; } .app-details { display: none; padding: 15px; background: white; border: 1px solid #ddd; margin-top: 5px; border-radius: 8px; box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1); } .credentials-container { background: #fff; margin-top: 12px; max-width: 100%; box-sizing: border-box; padding: 10px 12px; border: 1px solid #E5E7EB; border-radius: 12px; box-shadow: 0 1px 0 rgba(16,24,40,.04), 0 1px 2px rgba(16,24,40,.06); } .credentials-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; } .credentials-header-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; } .app-name { font-weight: bold; font-size: 1.1em; } .credentials-table { width: 100%; border-collapse: collapse; } .credentials-table td { padding: 8px 10px; border-top: 1px solid #eee; vertical-align: top; } .credentials-table td:first-child { font-weight: 500; width: 30%; } .status { border-radius: 5px; white-space: nowrap; font-weight: bold; font-size: 0.8rem; line-height: 1; padding: 6px 10px; min-width: 61px; } .status.approved.blue { background: #5bc0de; color: white; } .status.approved.yellow { background: #f0ad4e; color: white; } .status.pending.gray { background: #777777; color: white; text-align: center; } .status.revoked { background: #F44336; color: white; text-align: center; } /* allow long tokens to wrap instead of overflowing */ .credentials-table td:nth-child(2) { word-break: break-word; overflow-wrap: anywhere; } /* remove the fixed 30% width on small screens so labels stack nicely */ @media (max-width: 640px) { .credentials-table, .credentials-table tbody, .credentials-table tr, .credentials-table td { display: block; width: 100%; } .credentials-table tr { padding: 10px 0; border-top: 1px solid #eee; } .credentials-table td { padding: 6px 0; border-top: 0; /* handled by tr now */ } .credentials-table td:first-child { width: auto; /* drop the 30% on mobile */ margin-bottom: 2px; /* label above value */ color: #374151; font-weight: 600; } .app-header { flex-direction: column; align-items: flex-start; gap: 8px; } } /* tighten vertical rhythm a bit on wide screens */ @media (min-width: 641px) { .credentials-table td { padding: 10px 12px; } } `; // Create a container element that will hold the component's HTML this.container = document.createElement("div"); // Add the stylesheet and container to the shadow DOM this.shadowRoot.append(style, this.container); // console.log('appDisplay'); } connectedCallback() { const src = "https://developer.ebsco.com/apiconfig/v1/developer/displayappdata?expand=true" if (src) this.loadAppsFrom(src); } async loadAppsFrom(url) { const API_KEY = 'ke6EsUbTXdOGiBjRpVBy'; this.container.innerHTML = `

Loading your apps…

`; // console.log('loadAppsFrom'); try { const headers = { "x-eis-id-token": this.getAttribute('x-eis-id-token') || '', 'x-api-key': API_KEY, "Authorization": this.getAttribute('authorization') || '' }; // console.log("Fetching app data from:", url, "with headers:", headers); // console.log('API x-eis-id-token', window._auth.idToken); // console.log('API authorization', window._auth.authorization); // Read from API const res = await fetch(url, { method: 'GET', headers }); if (!res.ok) { const body = await res.text().catch(() => ""); const error = new Error(`GET ${res.status} ${res.statusText}: ${body.slice(0, 200)}`); error.status = res.status; error.statusText = res.statusText; throw error; } const data = await res.json(); //console.log("Fetched app data:", data); // unwrap `.app` (array) for your setter const apps = Array.isArray(data?.app) ? data.app : Array.isArray(data) ? data : []; // Your setter expects a JSON string of an array this.apps = JSON.stringify(apps); // End Read from API } catch (err) { console.error("loadAppsFrom error:", err); let statusMsg; if (err.status === 401) { statusMsg = "You are unauthorized. Please sign in to the EBSCO Developer portal or register to create an account and try again."; } else if (err.status === 403) { statusMsg = "Your email address is not verified. Please verify your email address and try again."; } else if (err.status === 404) { statusMsg = "You have not created any Apps."; } else if (err.status === 502) { statusMsg = "Bad Gateway. Please try again later."; } else if (typeof err.status === 'number') { statusMsg = `Error ${err.status}${err.statusText ? `: ${err.statusText}` : ""}`; } else if (err.name === 'TypeError') { statusMsg = "Network error (possibly CORS). Please try again later."; } else { statusMsg = "An error occurred."; } this.container.innerHTML = `

Your applications were not loaded.
${statusMsg}

`; } } // Receive App Data // Setter method to receive app data set apps(data) { // Parse the JSON string into an array of app objects this._apps = JSON.parse(data); console.log("apps setter called with data:", this._apps); //If no apps exist, show a message and stop if (Array.isArray(this._apps) && this._apps.length === 0) { this.container.innerHTML = `

You don't have any Apps yet.

Get started by adding a new App above.

`; return; } // Render the component using the data this.render(); } // Render the HTML for the Application display // Displays initial name and Status // Monitors to hide or display details when clicked render() { // Helper to derive a credential's status from its products const deriveCredStatus = (cred) => { const rawCredStatus = String(cred?.status || '').toLowerCase(); const prods = Array.isArray(cred?.apiProducts) ? cred.apiProducts : Array.isArray(cred?.products) ? cred.products : []; const statuses = prods.map(p => String(p?.status || '').toLowerCase()).filter(Boolean); // console.log('Render the Screen'); let credstatus; if (rawCredStatus === 'revoked') { credstatus = 'revoked'; } else if (prods.length > 0 && statuses.every(s => s === 'revoked')) { credstatus = 'revoked'; } else if (statuses.includes('approved')) { credstatus = 'approved'; } else if (prods.length > 0 && statuses.every(s => s === 'pending')) { credstatus = 'pending'; } else { credstatus = 'pending'; } return credstatus; }; // Build HTML this.container.innerHTML = `

${title} ${appStatusLabel}

`; // Add event listeners for expand/collapse const items = this.container.querySelectorAll(".app-item"); items.forEach(item => { // item.addEventListener("click", () => { item.addEventListener("click", (event) => { const index = item.dataset.index; const app = this._apps[index]; const detailContainer = item.querySelector(".app-details"); // Do not collapse when clicking inside the credentials area if (event.composedPath().includes(detailContainer)) return; // console.log("1 App clicked:", app.displayName); // console.log("1 Credentials:", app.credentials); // console.log("1 type of app:", app.typeOfApp); const isVisible = detailContainer.style.display === "block"; detailContainer.style.display = isVisible ? "none" : "block"; if (!isVisible && detailContainer.innerHTML.trim() === "") { //console.log("Creating credentials-display..."); const cred = document.createElement("credentials-display"); const attrs = Array.isArray(app.attributes) ? app.attributes : []; const getAttr = (n) => attrs.find(a => a.name === n)?.value; // console.log("attributes:", attrs); // console.log("type of app:", attrs[6].value); const displayName = getAttr('DisplayName') || app.name || 'Unknown'; const appType = getAttr('typeOfApp') || getAttr('AppType') || 'Unknown'; const openId = getAttr('appAccess') || 'Unknown'; // pass overridden/derived app status to child const incomingAppStatus = String(app.status || '').toLowerCase(); let appStatusLabel; if (incomingAppStatus === 'revoked') { appStatusLabel = 'Revoked'; } else { const credStatuses = (Array.isArray(app.credentials) ? app.credentials : []).map(deriveCredStatus); const allApproved = credStatuses.length > 0 && credStatuses.every(s => s === 'approved'); const anyApproved = credStatuses.includes('approved'); appStatusLabel = allApproved ? 'Approved' : anyApproved ? 'Approved' : 'Pending'; } console.log("App clicked:", displayName); console.log("needuseridentitydetails", openId); console.log("type of app:", appType); cred.setAttribute("appname", displayName); cred.setAttribute("status", appStatusLabel); cred.setAttribute("typeofapp", appType); cred.setAttribute("needuseridentitydetails", openId); cred.setAttribute("callbackurl", app.callbackUrl || ""); cred.credentials = JSON.stringify(app.credentials || []); detailContainer.appendChild(cred); } }); }); } } //end // Register the web componenet so that it can be used as in HTML customElements.define("app-display", AppDisplay); //////////////////////////////////////////// // Credential Display component // Define a new custom element /////////////////////////////////////////// class CredentialsDisplay extends HTMLElement { constructor() { super(); //Call the constructor of the html element // Attach a shadow DOM to encapsulate sytles and structure this.attachShadow({ mode: "open" }); let style = document.createElement('style'); style.textContent = ` .app-card { width: 100%; /* Full width of the container */ padding-top: 10px; padding-bottom: 10px; padding-right: 10px; padding-left: 10px; box-sizing: border-box; } .app-header { display: flex; justify-content: space-between; /* Push app name left, status right */ align-items: center; border-radius: 8px; padding: 10px; padding: 12px 14px; background: #F3F4F6; border: 1px solid #E5E7EB; } .app-list { list-style: none; display: flex; flex-direction: column; gap: 12px; /* Space between list items */ max-width: min(860px); margin: 16px auto; padding-inline: clamp(8px, 2vw, 16px); padding-left: 0px; padding-right: 19px; padding-top: 0px; padding-bottom: 0px; } .app-item { background: #e0e0e0; margin: 10px 0; padding: 15px; cursor: pointer; /* Show pointer cursor over hover */ border-radius: 8px; display: flex; justify-content: space-between; align-items: center; border: 1px solid #ddd; transition: background 0.3s ease, box-shadow 0.3s ease; box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1); width: 100%; } .app-item:hover { background: rgb(213, 225, 235); box-shadow: 3px 3px 8px rgba(0, 0, 0, 0.15); } .app-details { display: none; padding: 15px; background: white; border: 1px solid #ddd; margin-top: 5px; border-radius: 8px; box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1); } .credentials-container { background: #fff; margin-top: 12px; max-width: 100%; box-sizing: border-box; padding: 10px 12px; border: 1px solid #E5E7EB; border-radius: 12px; box-shadow: 0 1px 0 rgba(16,24,40,.04), 0 1px 2px rgba(16,24,40,.06); } .credentials-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; } .credentials-header-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; } .app-name { font-weight: bold; font-size: 1.1em; } .credentials-table { width: 100%; border-collapse: collapse; } .credentials-table td { padding: 8px 10px; border-top: 1px solid #eee; vertical-align: top; word-break: normal; /* do not break words */ overflow-wrap: normal; /* no arbitrary breaks */ hyphens: none; /* no auto-hyphenation */ } .credentials-table td:first-child { font-weight: bold; width: 30%; } .status { font-size: 0.8rem; line-height: 1; min-width: 61px; text-transform: capitalize; font-weight: bold; white-space: nowrap; border-radius: 5px; padding-left: 10px; padding-right: 10px; padding-top: 2px; padding-bottom: 4px; } .status.approved { background: #5bc0de; color: white; } .status.pending { background: #777777; color: white; padding-left: 14px; padding-right: 14px; } .status.revoked { background: #F44336; color: white; padding-left: 14px; padding-right: 14px; } /* Row background + separators */ .credentials-table .cred-header-row td { background: var(--card-accent, #f5faff); padding: 6px 8px; border-top: 1px solid var(--card-border, #e6edf5); border-bottom: 1px solid var(--card-border, #e6edf5); } /* Softer, less-bold heading text */ .credentials-table .cred-heading { font-weight: 500; /* use 400 if you want fully normal weight */ font-size: 0.95rem; /* slightly smaller than body */ letter-spacing: 0.2px; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; color: var(--text-muted, #334155); } /* Left column: same as cred-heading + constrained width */ .credentials-table tr:not(.cred-header-row) td:first-child { font-weight: 500; /* use 400 if you want fully normal */ font-size: 0.95rem; letter-spacing: 0.2px; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; color: var(--text-muted, #334155); white-space: normal; /* allow wrapping */ width: 30%; /* target width for label column */ max-width: 24ch; /* cap by characters for consistency */ } /* Removes indent for any UL in the right-hand cell */ .credentials-table tr td:last-child ul { margin: 0; padding-left: 0; list-style: none; } .credentials-table tr td:last-child ul li + li { margin-top: 4px; } @media (max-width: 640px) { .credentials-table, .credentials-table tbody, .credentials-table tr, .credentials-table td { display: block; width: 100%; } /* Header row: put the blue highlight on the TD (full width) */ .credentials-table .cred-header-row td { display: block; background: white !important; padding: 6px 8px; border-top: 0px; border-bottom: 0px; white-space: nowrap; /* keep "Credential 1" on one line */ overflow: visible; /* don't clip the number */ text-overflow: clip; /* no ellipsis cutting off the end */ } /* Inner span: no special background, just the text style */ .credentials-table .cred-header-row .cred-heading { display: inline; background: transparent !important; white-space: nowrap; /* keep label + number together */ } /* space between each label/value pair */ .credentials-table tr:not(.cred-header-row) { padding: 8px 0; border-bottom: 1px solid var(--card-border, #e6edf5); } /* label row (left column) now full-width, above value */ .credentials-table tr:not(.cred-header-row) td:first-child { margin: 0 0 4px 0; width: 100%; max-width: none; white-space: normal; /* wrap at spaces, not mid-word */ } /* value row (right column) now full-width; allow horizontal scroll for long tokens */ .credentials-table tr:not(.cred-header-row) td:last-child { white-space: nowrap; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; } /* On mobile: allow long tokens to wrap in their own cells */ .credentials-table .token-cell { white-space: normal !important; /* allow wrapping */ overflow-wrap: anywhere; /* break long strings */ word-break: break-word; /* fallback for older engines */ } /* list shouldn't inherit nowrap; keep it readable */ .credentials-table tr td:last-child ul { white-space: normal; overflow: visible; } .app-header { flex-direction: column; align-items: flex-start; gap: 8px; } } /* tighten vertical a bit on wide screens */ @media (min-width: 641px) { .credentials-table td { padding: 10px 12px; } } `; // Create a container element that will hold the component's HTML this.container = document.createElement("div"); // Add the stylesheet and container to the shadow DOM this.shadowRoot.append(style, this.container); //console.log('credDisplaycomponent'); } // end constructor // Accepts the credentials data passed into the component set credentials(value) { //console.log("Received credentials:", value); // Parse the credential data passed in this._credentials = JSON.parse(value); this.render(); } // Renders the credential data HTML render() { try { //console.log("Rendering credentials:", this._credentials); // Exit if no credentials exist if (!this._credentials || this._credentials.length === 0) return; // Format timestamps from the API into human-readable local time const toLocal = (ts) => { if (ts == null) return "N/A"; // numeric epoch (ms), or numeric string epoch if (typeof ts === "number" || (/^\d+$/.test(ts))) { const n = Number(ts); // If someone ever sends seconds instead of ms, upscale const ms = n < 1e12 ? n * 1000 : n; const d = new Date(ms); return isNaN(d) ? String(ts) : d.toLocaleString(); } // ISO/string date fallback const d = new Date(ts); return isNaN(d) ? String(ts) : d.toLocaleString(); }; // Get metadata passed via attributes const appName = this.getAttribute("appname") || "App"; const statusAttr = this.getAttribute("status") || "Unknown"; const typeOfAppAttr = this.getAttribute("typeofapp") || "Unknown"; const identityDetailsAttr = this.getAttribute("needuseridentitydetails") || "Unknown"; const callbackUrlAttr = this.getAttribute("callbackurl") || "N/A"; const status = statusAttr.toLowerCase(); //console.log("status:", statusAttr); //console.log("appname:", appName); //console.log("typeofapp:", typeOfAppAttr); // Build one table per credential const credsHtml = this._credentials.map((cred, i) => { //console.log("cred:", cred); const issued = toLocal(cred.issuedAt); const expires = cred.expiresAt === -1 ? "Never" : toLocal(cred.expiresAt); const products = (cred.apiProducts || []).map(prod => `

${prod.apiproduct} - ${prod.status || "Unknown"}

`).join(''); // Derive credential status with "revoked" taking precedence const prods = Array.isArray(cred.apiProducts) ? cred.apiProducts : []; const statuses = prods.map(p => String(p.status || '').toLowerCase()); const rawCredStatus = String(cred.status || '').toLowerCase(); let credstatus; let credKeyDisplay; let credSecretDisplay; if (rawCredStatus === 'revoked') { // Keep revoked if it comes through that way credstatus = 'Revoked'; credKeyDisplay = '*********************************'; credSecretDisplay = '*********************************'; } else if (prods.length > 0 && statuses.every(s => s === 'revoked')) { // if all products are revoked -> credential is revoked credstatus = 'Revoked'; credKeyDisplay = '*********************************'; credSecretDisplay = '*********************************'; } else if (statuses.includes('approved')) { // Any approved product -> approved credstatus = 'Approved'; credKeyDisplay = cred.consumerKey || 'N/A'; credSecretDisplay = cred.consumerSecret || 'N/A'; } else if (prods.length > 0 && statuses.every(s => s === 'pending')) { // All products pending -> pending credstatus = 'Pending'; credKeyDisplay = '*********************************'; credSecretDisplay = '*********************************'; } else { // Otherwise, fall back to the credential's own status (or Unknown) credstatus = 'Pending'; credKeyDisplay = '*********************************'; credSecretDisplay = '*********************************'; } // If the App status is Revoked, always mask the key if (statusAttr == 'Revoked') { credKeyDisplay = '*********************************'; credSecretDisplay = '*********************************'; } return `

Credential ${i + 1}
Client ID	${credKeyDisplay}
Client Secret	${credSecretDisplay}
Key Issued	${issued}
Callback URL	${callbackUrlAttr \|\| "N/A"}
Type of App	${typeOfAppAttr}
Does this App Need to Access User Identities and/or Details?	${identityDetailsAttr}
API Products:	${products}
Credential Status	${credstatus}

`; }).join(''); // Render the HTML (header once, multiple credential tables) this.container.innerHTML = `

${credsHtml}

`; } catch (err) { console.error("Error rendering credentials-display:", err); } } } // end Credential web component // Register the web component customElements.define('credentials-display', CredentialsDisplay); //////////////////////////////////// //// Create App Display //////////////////////////////////// function createAppDisplay() { //console.log("Create Application Display"); const placeholder = document.querySelector('#app-placeholder'); if (!placeholder) { console.warn('Placeholder not found'); return; } const appDisplay = document.createElement('app-display'); // pass headers as attributes (safe even if empty) if (window._auth) { appDisplay.setAttribute('x-eis-id-token', window._auth.idToken || ''); appDisplay.setAttribute('authorization', window._auth.authorization || ''); //console.log('Set auth attributes'); } placeholder.innerHTML = ''; placeholder.appendChild(appDisplay); console.log('appendChild'); //placeholder.replaceWith(appDisplay); //console.log('createAppDisplay end'); //console.log('x-eis-id-token', appDisplay.getAttribute('x-eis-id-token')); //console.log('authorization', appDisplay.getAttribute('authorization')); } /////////////////// // End Display app /////////////////// //////////////////////////////////// //// Create Token Display //////////////////////////////////// function createTokenDisplay() { console.log("Create Token Display"); const placeholder = document.querySelector('#token-placeholder'); if (!placeholder) { console.warn('Token-placeholder not found'); return; } const scriptElement = document.getElementById('hub-me'); if (!scriptElement) { console.warn('hub-me script element not found'); return; } const jsonString = scriptElement.getAttribute('data-json'); if (!jsonString) { console.warn('hub-me data-json not found'); return; } const userJSON = JSON.parse(jsonString); console.log(userJSON.user); const htmlContent = Object.entries(userJSON.user) .map(([key, value]) => `

${key}: ${value}

`) .join(""); placeholder.innerHTML = htmlContent; //placeholder.appendChild(tokenDisplay); //console.log(tokenDisplay); //placeholder.replaceWith(tokenDisplay); //console.log('createTokenDisplay end'); //console.log('x-eis-id-token', tokenDisplay.getAttribute('x-eis-id-token')); //console.log('authorization', tokenDisplay.getAttribute('authorization')); } ////////////////////// // End Display Tokens ////////////////////// function runReferenceInit() { console.log("pathname:", location.pathname); console.log("href:", location.href); let currentPath = location.pathname; let currentHref = location.href; try { if (window.top && window.top.location) { currentPath = window.top.location.pathname; currentHref = window.top.location.href; } } catch (err) { console.log("Could not access top window location, using frame location"); } console.log("pathname:", currentPath); console.log("href:", currentHref); if (currentPath.includes('/reference/')) { console.log("matched reference path"); setTimeout(function () { populateEdsApiTokens(); }, 2500); } } function runMyApplicationsInit() { let currentPath = location.pathname; let currentHref = location.href; try { if (window.top && window.top.location) { currentPath = window.top.location.pathname; currentHref = window.top.location.href; } } catch (err) { console.log("Could not access top window location, using frame location"); } console.log("pathname:", currentPath); console.log("href:", currentHref); console.log("Entering runMyApplicationsInit"); if (currentPath.includes('/my-applications')) { console.log("Navigated to /my-applications for Display Apps"); //check to make sure it is not already mounted if (document.querySelector('app-display')) { console.log('app-display already mounted, skipping'); return; } (function() { const scriptElement = document.getElementById('hub-me'); if (!scriptElement) { console.warn('hub-me script element not found'); return; } const jsonString = scriptElement.getAttribute('data-json'); if (!jsonString) { console.warn('hub-me data-json not found'); return; } const userJSON = JSON.parse(jsonString); //console.log(userJSON.user); const u = userJSON.user || {}; window._auth = { idToken: u['x-eis-id-token'] ?? u.id_token ?? '', authorization: u.Authorization ?? u.authorization ?? (u.access_token ? `Bearer ${u.access_token}` : '') }; })(); setTimeout(createAppDisplay, 1000); } // added for debugging else if (currentPath.includes('/onboarding-test')) { console.log("Navigated to /onboarding-test"); setTimeout(createTokenDisplay, 1000); } } // Populate auth and session tokens in the API Reference input fields document.addEventListener("DOMContentLoaded", function () { runReferenceInit(); runMyApplicationsInit(); $(window).on('pageLoad', function(e, state) { runReferenceInit(); runMyApplicationsInit(); }); }); ////////////////////////////////////////////////////// // Define the API Key Registration form Web Component ////////////////////////////////////////////////////// class APIKeyForm extends HTMLElement { constructor() { super(); this.attachShadow({ mode: 'open' }); this.shadowRoot.innerHTML = `

API Key Request

Thank you for your interest in EBSCO Knowledge Services. HoldingsIQ allows EBSCO Knowledge Base data, holdings data and HLM services to be integrated with your other systems. HoldingsIQ can be utilized with FOLIO and can also be integrated with other commercial library automation system partners to allow subscribing customers to access their holdings and EBSCO Knowledge Base data.

Access to HoldingsIQ requires a subscription. Please reach out to your sales rep or contact EBSCO Support to learn more about what a HoldingsIQ subscription can do for your institution.

To request information about obtaining a production API key, please fill out the following form and an EBSCO representative will contact you within 5 business days with the information.

Please note that your production API key to access HoldingsIQ will not give you access to our sandbox. You will need a sandbox API key to gain access to the sandbox. If you require a sandbox API key, please contact EBSCO customer support.

Requesting Organization/Group Name * Library Name * Library Street Address * Library City * Library State/Province * Library EBSCO Customer ID * Library Zip/Postal Code * Library Country * Library Phone * Library Contact Email * Library Contact First Name * Library Contact Last Name * Requester First Name * Requester Last Name * Requester Job Title * Requester Email * ILS System * ERM System * Should Information Be Sent to the Requester? This question determines the email where an EBSCO representative will reach out to cover specific product details. If you select "NO", the information will be sent to the Library Contact Email. If you select "OTHER", please add an additional email address to receive the information in the Comments field below. * Comments

` let style = document.createElement('style'); style.textContent = ` #keyForm { display: flex; flex-direction: column; max-width: 700px; margin: 2rem auto; padding: 2rem; border-radius: 12px; background: #ffffff; /* white inner card */ border: 1px solid #cbd5e0; /* soft gray-blue border */ box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); /* soft drop shadow */ font-family: "Segoe UI", sans-serif; box-sizing: border-box; } /* Outer card background container*/ .outer-card { /* background-color: #e4ecf3; */ background-color: rgb(213, 225, 235); padding: .005rem 2rem; border-radius: 8px; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08); margin: 0 auto; max-width: 715px; } /* Header bar inside the card */ h2 { background-color: #ffffff; padding-bottom: 10px; font-size: 1.25rem; font-weight: bold; margin-bottom: 1.5rem; color: #384248; border-bottom: 2px solid #8f8585; } fieldset { border: none; margin-bottom: 2rem; padding: 0; } legend { font-weight: 600; font-size: 1.1rem; margin-bottom: 1rem; color: #333; } label { display: block; font-weight: 500; margin-bottom: 0.25rem; color: #333; } input, select { width: 100%; padding: 0.6rem; margin-bottom: 1rem; border: 1px solid #ccc; border-radius: 6px; font-size: 0.95rem; background: #fff; box-sizing: border-box; } .checkbox-container { display: flex; flex-direction: column; margin-bottom: 1rem; } .checkbox-container label { font-weight: 400; margin-bottom: 0.5rem; padding-left: 1.5rem; position: relative; } .checkbox-container input[type="checkbox"] { position: absolute; left: 0; top: 0.2rem; } button[type="submit"] { align-self: flex-start; padding: 0.6rem 1.2rem; background-color: #e3706c; color: #fff; border: none; border-radius: 8px; font-size: 1rem; cursor: pointer; transition: background-color 0.3s ease; box-shadow: 0 2px 4px rgba(0,0,0,0.1); } button[type="submit"]:hover { background-color: #595454; } .message { margin-top: 1rem; font-weight: 500; color: #444; } .api-error-message { margin-top: 1rem; background: #fdecea; color: #e3706c; border: 1px solid #f5c2c0; border-radius: 6px; padding: 0.75rem 1rem; font-size: 0.95rem; line-height: 1.4; } .api-error-message strong { display: block; font-weight: 600; margin-bottom: 4px; color: #e3706c; } .api-error-message a { color: inherit; /* same as the surrounding text */ text-decoration: underline; font-weight: 500; } .api-error-message a:hover { text-decoration: none; /* subtle hover effect */ } .thank-you-message { align-items: center; justify-content: center; background-color: rgb(213, 225, 235); border-radius: 10px; box-shadow: 0 0 25px 4px rgba(0, 0, 0, 0.08); padding: 2em; margin: 1em auto; max-width: 400px; } /* Inner white box */ .thank-you-message .inner-box { background: #fff; border-radius: 8px; box-shadow: inset 0 0 15px rgba(255, 255, 255, 0.7), /* soft inner white glow */ 0 2px 10px rgba(0, 0, 0, 0.05); /* light shadow for depth */ padding: 1.5em 2em; text-align: center; } .thank-you-message h2 { margin: .5em 4em .5em 4em; color: #2c3e50; border-bottom: 2px solid #d2cfcf; /* brings back that gray line */ box-shadow: none; background: none; padding-bottom: 17px; } .thank-you-message p { margin: 1em;; color: #2c3e50; } .thank-you-message a { color: inherit; text-decoration: underline; } @media (max-width: 600px) { #keyForm { padding: 1rem; } h2 { font-size: 1.1rem; } .outer-card { margin-left: 12px; } } `; this.shadowRoot.appendChild(style); } connectedCallback() { this.postUrl = "https://developer.ebsco.com/apiconfig/v1/keyrequest"; this.shadowRoot.querySelector('#keyForm').addEventListener('submit', this.handleSubmit.bind(this)); } handleSubmit(event) { event.preventDefault(); const keyForm = this.shadowRoot.querySelector('#keyForm'); const formData = new URLSearchParams(new FormData(keyForm)); const API_KEY = 'ke6EsUbTXdOGiBjRpVBy'; // Log form data const dataObj = {}; for (const [key, value] of formData.entries()) { dataObj[key] = value; } fetch(this.postUrl, { method: 'POST', headers: { 'Content-Type': 'application/x-www-form-urlencoded', 'x-eis-id-token': this.getAttribute('x-eis-id-token') || '', 'x-api-key': API_KEY, 'Authorization': this.getAttribute('authorization') || '' }, body: formData }) .then(async (response) => { // console.log('Response status:', response.status); if (response.ok) { // Clear everything inside the component and show just the Thank You message const shadow = this.shadowRoot; // Keep