From 57b031c0710d764176d732ad9f14bc88d3aa526b Mon Sep 17 00:00:00 2001 From: Jingle Huang Date: Wed, 12 Feb 2025 14:25:07 -0800 Subject: [PATCH 01/50] synced from old repo --- express/code/blocks/susi-light/susi-light.css | 28 ++++++ express/code/blocks/susi-light/susi-light.js | 98 +++++++++++-------- 2 files changed, 86 insertions(+), 40 deletions(-) diff --git a/express/code/blocks/susi-light/susi-light.css b/express/code/blocks/susi-light/susi-light.css index 649cfff3..39a01576 100644 --- a/express/code/blocks/susi-light/susi-light.css +++ b/express/code/blocks/susi-light/susi-light.css @@ -3,3 +3,31 @@ width: 360px; min-height: 462px; } + +.easy-in-wrapper { + text-align: center; +} + +.easy-in-wrapper .express-logo { + width: unset; + height: 24px; + padding-top: 32px; +} + +.easy-in-wrapper .title { + font-size: var(--heading-font-size-s); + line-height: 28.6px; + font-weight: 900; + padding-top: 4px; + text-align: center; +} +.easy-in-wrapper .guest { + text-align: center; + padding: 16px 0 24px; + background-color: #f3f3f3; + font-weight: 700; +} +.easy-in-wrapper .guest a { + text-decoration: underline; + color: initial; +} diff --git a/express/code/blocks/susi-light/susi-light.js b/express/code/blocks/susi-light/susi-light.js index 8820c48d..f63fc61a 100644 --- a/express/code/blocks/susi-light/susi-light.js +++ b/express/code/blocks/susi-light/susi-light.js @@ -1,11 +1,10 @@ /* eslint-disable no-underscore-dangle */ /* eslint-disable camelcase */ -import { getLibs } from '../../scripts/utils.js'; +import { getLibs, getIconElementDeprecated } from '../../scripts/utils.js'; let createTag; let loadScript; let getConfig; let isStage; -const variant = 'edu-express'; const usp = new URLSearchParams(window.location.search); const onRedirect = (e) => { @@ -39,6 +38,59 @@ function getDestURL(url) { return destURL.toString(); } +function sendEventToAnalytics(type, eventName, client_id) { + const sendEvent = () => { + window._satellite.track('event', { + xdm: {}, + data: { + eventType: 'web.webinteraction.linkClicks', + web: { + webInteraction: { + name: eventName, + linkClicks: { + value: 1, + }, + type, + }, + }, + _adobe_corpnew: { + digitalData: { + primaryEvent: { + eventInfo: { + eventName, + client_id, + }, + }, + }, + }, + }, + }); + }; + if (window._satellite?.track) { + sendEvent(); + } else { + window.addEventListener('alloy_sendEvent', () => { + sendEvent(); + }, { once: true }); + } +} + +// wrap with our customizations +function wrapEasyIn(client_id, susi, title, guest) { + const wrapper = createTag('div', { class: 'easy-in-wrapper' }, susi); + const logo = getIconElementDeprecated('adobe-express-logo'); + logo.classList.add('express-logo'); + const titleDiv = createTag('div', { class: 'title' }, title); + const guestDiv = createTag('div', { class: 'guest' }, guest); + [...guestDiv.querySelectorAll('a, button')].forEach((e) => { + e.addEventListener('click', () => { + sendEventToAnalytics('event', `acomx:susi-light:guest-${e.title || e.textContent}`, client_id); + }); + }); + wrapper.append(logo, titleDiv, susi, guestDiv); + return wrapper; +} + export default async function init(el) { ({ createTag, loadScript, getConfig } = await import(`${getLibs()}/utils/utils.js`)); isStage = (usp.get('env') && usp.get('env') !== 'prod') || getConfig().env.name !== 'prod'; @@ -47,6 +99,8 @@ export default async function init(el) { // eslint-disable-next-line camelcase const client_id = rows[1]?.textContent?.trim() || 'AdobeExpressWeb'; const title = rows[2]?.textContent?.trim(); + const variant = el.classList.contains('standard') ? 'standard' : 'edu-express'; + const isEasyIn = el.classList.contains('easy-in'); const authParams = { dt: false, locale: getConfig().locale.ietf.toLowerCase(), @@ -72,49 +126,13 @@ export default async function init(el) { susi.config = config; if (isStage) susi.stage = 'true'; susi.variant = variant; - function sendEventToAnalytics(type, eventName) { - const sendEvent = () => { - window._satellite.track('event', { - xdm: {}, - data: { - eventType: 'web.webinteraction.linkClicks', - web: { - webInteraction: { - name: eventName, - linkClicks: { value: 1 }, - type, - }, - }, - /* eslint-disable object-curly-newline */ - _adobe_corpnew: { - digitalData: { - primaryEvent: { - eventInfo: { - eventName, - client_id, - }, - }, - }, - }, - /* eslint-enable object-curly-newline */ - }, - }); - }; - if (window._satellite?.track) { - sendEvent(); - } else { - window.addEventListener('alloy_sendEvent', () => { - sendEvent(); - }, { once: true }); - } - } const onAnalytics = (e) => { const { type, event } = e.detail; - sendEventToAnalytics(type, event); + sendEventToAnalytics(type, event, client_id); }; susi.addEventListener('redirect', onRedirect); susi.addEventListener('on-error', onError); susi.addEventListener('on-analytics', onAnalytics); - el.append(susi); + el.append(isEasyIn ? wrapEasyIn(client_id, susi, title, rows[3]) : susi); } From 78a00a1fdbbb163770e6b35abaf3abe4e3cd2db7 Mon Sep 17 00:00:00 2001 From: Jingle Huang Date: Wed, 12 Feb 2025 17:24:55 -0800 Subject: [PATCH 02/50] wip --- express/code/blocks/susi-light/susi-light.css | 5 +- express/code/blocks/susi-light/susi-light.js | 157 ++++++++++++------ 2 files changed, 113 insertions(+), 49 deletions(-) diff --git a/express/code/blocks/susi-light/susi-light.css b/express/code/blocks/susi-light/susi-light.css index 39a01576..e87efbf8 100644 --- a/express/code/blocks/susi-light/susi-light.css +++ b/express/code/blocks/susi-light/susi-light.css @@ -22,10 +22,13 @@ text-align: center; } .easy-in-wrapper .guest { + font-size: var(--body-font-size-s); text-align: center; - padding: 16px 0 24px; + padding: 16px 0; background-color: #f3f3f3; font-weight: 700; + color: #292929; + line-height: 20.8px; } .easy-in-wrapper .guest a { text-decoration: underline; diff --git a/express/code/blocks/susi-light/susi-light.js b/express/code/blocks/susi-light/susi-light.js index f63fc61a..981ec254 100644 --- a/express/code/blocks/susi-light/susi-light.js +++ b/express/code/blocks/susi-light/susi-light.js @@ -75,64 +75,125 @@ function sendEventToAnalytics(type, eventName, client_id) { } } -// wrap with our customizations -function wrapEasyIn(client_id, susi, title, guest) { - const wrapper = createTag('div', { class: 'easy-in-wrapper' }, susi); - const logo = getIconElementDeprecated('adobe-express-logo'); - logo.classList.add('express-logo'); - const titleDiv = createTag('div', { class: 'title' }, title); - const guestDiv = createTag('div', { class: 'guest' }, guest); - [...guestDiv.querySelectorAll('a, button')].forEach((e) => { - e.addEventListener('click', () => { - sendEventToAnalytics('event', `acomx:susi-light:guest-${e.title || e.textContent}`, client_id); - }); - }); - wrapper.append(logo, titleDiv, susi, guestDiv); - return wrapper; -} - -export default async function init(el) { - ({ createTag, loadScript, getConfig } = await import(`${getLibs()}/utils/utils.js`)); - isStage = (usp.get('env') && usp.get('env') !== 'prod') || getConfig().env.name !== 'prod'; - const rows = el.querySelectorAll(':scope> div > div'); - const redirectUrl = rows[0]?.textContent?.trim().toLowerCase(); - // eslint-disable-next-line camelcase - const client_id = rows[1]?.textContent?.trim() || 'AdobeExpressWeb'; - const title = rows[2]?.textContent?.trim(); - const variant = el.classList.contains('standard') ? 'standard' : 'edu-express'; - const isEasyIn = el.classList.contains('easy-in'); - const authParams = { - dt: false, - locale: getConfig().locale.ietf.toLowerCase(), - response_type: 'code', - client_id, - scope: 'AdobeID,openid', - }; - const destURL = getDestURL(redirectUrl); - const goDest = () => window.location.assign(destURL); - if (window.feds?.utilities?.imslib) { - const { imslib } = window.feds.utilities; - /* eslint-disable chai-friendly/no-unused-expressions */ - imslib.isReady() && imslib.isSignedInUser() && goDest(); - imslib.onReady().then(() => imslib.isSignedInUser() && goDest()); - } - el.innerHTML = ''; - await loadWrapper(); - const config = { consentProfile: 'free' }; - if (title) { config.title = title; } +function createSUSIComponent({ variant, config, authParams, destURL }) { const susi = createTag('susi-sentry-light'); susi.authParams = authParams; susi.authParams.redirect_uri = destURL; susi.config = config; if (isStage) susi.stage = 'true'; susi.variant = variant; - const onAnalytics = (e) => { const { type, event } = e.detail; - sendEventToAnalytics(type, event, client_id); + sendEventToAnalytics(type, event, authParams.client_id); }; susi.addEventListener('redirect', onRedirect); susi.addEventListener('on-error', onError); susi.addEventListener('on-analytics', onAnalytics); - el.append(isEasyIn ? wrapEasyIn(client_id, susi, title, rows[3]) : susi); + return susi; +} + +function buildSUSIParams(client_id, variant, destURL, locale, title) { + const params = { + variant, + authParams: { + dt: false, + locale, + response_type: 'code', + client_id, + scope: 'AdobeID,openid', + }, + destURL, + config: { + consentProfile: 'free', + }, + }; + if (title) { + params.config.title = title; + } + return params; +} + +function extractOptions(rows, locale, imsClientId) { + const tabNames = [...rows[1].querySelectorAll('div')].map((div) => div.textContent); + const variants = [...rows[2].querySelectorAll('div')].map((div) => div.textContent?.trim().toLowerCase()); + const redirectUrls = [...rows[3].querySelectorAll('div')].map((div) => div.textContent?.trim().toLowerCase()); + const client_ids = [...rows[4].querySelectorAll('div')].map((div) => div.textContent?.trim() || (imsClientId ?? 'AdobeExpressWeb')); + const guests = [...rows[5].querySelectorAll('div')]; + const options = tabNames.map((tabName, index) => ({ + tabName, + ...buildSUSIParams( + client_ids[index], + variants[index], + getDestURL(redirectUrls[index]), + locale, + ), + guest: guests[index], + })); + return options; +} + +function extractSingleOption(el, locale, imsClientId) { + const rows = el.querySelectorAll(':scope > div > div'); + const redirectUrl = rows[0]?.textContent?.trim().toLowerCase(); + const client_id = rows[1]?.textContent?.trim() || (imsClientId ?? 'AdobeExpressWeb'); + const title = rows[2]?.textContent?.trim(); + // only edu variant used singly + const variant = 'edu-express'; + return buildSUSIParams(client_id, variant, getDestURL(redirectUrl), locale, title); +} + +function buildTabs(el, locale, imsClientId) { + const rows = [...el.children]; + const options = extractOptions(rows, locale, imsClientId); + const wrapper = createTag('div', { class: 'easy-in-wrapper' }); + const panelList = createTag('div', { class: 'panel-list' }); + const panels = options.map((option) => { + const panel = createTag('div', { class: 'panel' }); + panel.append(createSUSIComponent(option)); + const guestDiv = createTag('div', { class: 'guest' }, option.guest); + [...guestDiv.querySelectorAll('a, button')].forEach((e) => { + e.addEventListener('click', () => { + sendEventToAnalytics('event', `acomx:susi-light:guest-${e.title || e.textContent}`, option.authParams.client_id); + }); + }); + panel.append(guestDiv); + return panel; + }); + + const logo = getIconElementDeprecated('adobe-express-logo'); + logo.classList.add('express-logo'); + const title = rows[0].textContent?.trim(); + const titleDiv = createTag('div', { class: 'title' }, title); + wrapper.append(logo, titleDiv, panelList, ...panels); + return wrapper; +} + +export default async function init(el) { + ({ createTag, loadScript, getConfig } = await import(`${getLibs()}/utils/utils.js`)); + isStage = (usp.get('env') && usp.get('env') !== 'prod') || getConfig().env.name !== 'prod'; + const locale = getConfig().locale.ietf.toLowerCase(); + const { imsClientId } = getConfig(); + + const isTabs = el.classList.contains('tabs'); + + const loadWrapperPromise = loadWrapper(); + if (!isTabs) { + const option = extractSingleOption(el, locale, imsClientId); + const goDest = () => window.location.assign(option.destURL); + if (window.feds?.utilities?.imslib) { + const { imslib } = window.feds.utilities; + /* eslint-disable chai-friendly/no-unused-expressions */ + imslib.isReady() && imslib.isSignedInUser() && goDest(); + imslib.onReady().then(() => imslib.isSignedInUser() && goDest()); + } + await loadWrapperPromise; + const susi = createSUSIComponent(option); + el.innerHTML = ''; + el.append(susi); + } else { + await loadWrapperPromise; + const tabs = buildTabs(el, locale, imsClientId); + el.innerHTML = ''; + el.append(tabs); + } } From d482fd50a355e2bc349cc3851787372ade29872f Mon Sep 17 00:00:00 2001 From: Jingle Huang Date: Thu, 13 Feb 2025 15:10:52 -0800 Subject: [PATCH 03/50] partial success --- express/code/blocks/susi-light/susi-light.css | 49 ++++++- express/code/blocks/susi-light/susi-light.js | 133 ++++++++++-------- express/code/scripts/express-delayed.js | 2 +- 3 files changed, 119 insertions(+), 65 deletions(-) diff --git a/express/code/blocks/susi-light/susi-light.css b/express/code/blocks/susi-light/susi-light.css index e87efbf8..22cc9afa 100644 --- a/express/code/blocks/susi-light/susi-light.css +++ b/express/code/blocks/susi-light/susi-light.css @@ -4,24 +4,60 @@ min-height: 462px; } -.easy-in-wrapper { +.susi-tabs { text-align: center; + display: flex; + flex-direction: column; + align-items: center; } -.easy-in-wrapper .express-logo { +.susi-tabs .express-logo { width: unset; height: 24px; padding-top: 32px; } -.easy-in-wrapper .title { +.susi-tabs .title { font-size: var(--heading-font-size-s); line-height: 28.6px; font-weight: 900; - padding-top: 4px; + padding-top: 12px; + padding-bottom: 16px; text-align: center; } -.easy-in-wrapper .guest { + +.susi-tabs [role='tab-panel'][aria-hidden='true'] { + display: none; +} + +.susi-tabs [role='tab-list'] { + background-color: var(--color-white); + border-radius: 8px; + display: flex; + gap: 4px; + padding: 4px; + box-shadow: 0px 2px 8px 0px #00000029; +} + +.susi-tabs [role='tab'] { + background-color: var(--color-white); + border: initial; + font-family: var(--body-font-family); + font-size: var(--body-font-size-xs); + font-weight: 700; + padding: 8px 12px 10px; + line-height: 15.6px; + cursor: pointer; +} + +.susi-tabs [role='tab'][aria-selected='true'] { + color: var(--color-white); + background-color: var(--color-black); + border-radius: 6px; +} + +/* FIXME: rename easy in and guest to tabbed and footer */ +.susi-tabs .footer { font-size: var(--body-font-size-s); text-align: center; padding: 16px 0; @@ -30,7 +66,8 @@ color: #292929; line-height: 20.8px; } -.easy-in-wrapper .guest a { + +.susi-tabs .footer a { text-decoration: underline; color: initial; } diff --git a/express/code/blocks/susi-light/susi-light.js b/express/code/blocks/susi-light/susi-light.js index 981ec254..9d2033f7 100644 --- a/express/code/blocks/susi-light/susi-light.js +++ b/express/code/blocks/susi-light/susi-light.js @@ -19,7 +19,7 @@ const onError = (e) => { window.lana?.log('on error:', e); }; -export function loadWrapper() { +export function loadSUSIScripts() { const CDN_URL = `https://auth-light.identity${isStage ? '-stage' : ''}.adobe.com/sentry/wrapper.js`; return loadScript(CDN_URL); } @@ -113,50 +113,40 @@ function buildSUSIParams(client_id, variant, destURL, locale, title) { return params; } -function extractOptions(rows, locale, imsClientId) { - const tabNames = [...rows[1].querySelectorAll('div')].map((div) => div.textContent); - const variants = [...rows[2].querySelectorAll('div')].map((div) => div.textContent?.trim().toLowerCase()); - const redirectUrls = [...rows[3].querySelectorAll('div')].map((div) => div.textContent?.trim().toLowerCase()); - const client_ids = [...rows[4].querySelectorAll('div')].map((div) => div.textContent?.trim() || (imsClientId ?? 'AdobeExpressWeb')); - const guests = [...rows[5].querySelectorAll('div')]; - const options = tabNames.map((tabName, index) => ({ - tabName, - ...buildSUSIParams( - client_ids[index], - variants[index], - getDestURL(redirectUrls[index]), - locale, - ), - guest: guests[index], - })); - return options; -} - -function extractSingleOption(el, locale, imsClientId) { - const rows = el.querySelectorAll(':scope > div > div'); - const redirectUrl = rows[0]?.textContent?.trim().toLowerCase(); - const client_id = rows[1]?.textContent?.trim() || (imsClientId ?? 'AdobeExpressWeb'); - const title = rows[2]?.textContent?.trim(); - // only edu variant used singly - const variant = 'edu-express'; - return buildSUSIParams(client_id, variant, getDestURL(redirectUrl), locale, title); -} - -function buildTabs(el, locale, imsClientId) { +function buildSUSITabs(el, options) { const rows = [...el.children]; - const options = extractOptions(rows, locale, imsClientId); - const wrapper = createTag('div', { class: 'easy-in-wrapper' }); - const panelList = createTag('div', { class: 'panel-list' }); - const panels = options.map((option) => { - const panel = createTag('div', { class: 'panel' }); + const wrapper = createTag('div', { class: 'susi-tabs' }); + const tabList = createTag('div', { role: 'tab-list' }); + const panels = options.map((option, i) => { + const { footer, tabName, authParams } = option; + const panel = createTag('div', { role: 'tab-panel' }); panel.append(createSUSIComponent(option)); - const guestDiv = createTag('div', { class: 'guest' }, option.guest); - [...guestDiv.querySelectorAll('a, button')].forEach((e) => { + const footerDiv = createTag('div', { class: 'footer' }, footer); + [...footerDiv.querySelectorAll('a, button')].forEach((e) => { e.addEventListener('click', () => { - sendEventToAnalytics('event', `acomx:susi-light:guest-${e.title || e.textContent}`, option.authParams.client_id); + sendEventToAnalytics('event', `acomx:susi-light:footer-${e.title || e.textContent}`, authParams.client_id); + }); + }); + panel.append(footerDiv); + + const id = `${tabName}`; + panel.setAttribute('aria-labelledby', `tab-${id}`); + panel.id = `panel-${id}`; + panel.setAttribute('aria-hidden', i > 0); + const tab = createTag('button', { + role: 'tab', + 'aria-selected': i === 0, + 'aria-controls': `panel-${id}`, + id: `tab-${id}`, + }, tabName); + tab.addEventListener('click', () => { + tabList.querySelector('[aria-selected=true]')?.setAttribute('aria-selected', false); + tab.setAttribute('aria-selected', true); + panels.forEach((p) => { + p.setAttribute('aria-hidden', p !== panel); }); }); - panel.append(guestDiv); + tabList.append(tab); return panel; }); @@ -164,10 +154,20 @@ function buildTabs(el, locale, imsClientId) { logo.classList.add('express-logo'); const title = rows[0].textContent?.trim(); const titleDiv = createTag('div', { class: 'title' }, title); - wrapper.append(logo, titleDiv, panelList, ...panels); + wrapper.append(logo, titleDiv, tabList, ...panels); return wrapper; } +function redirectIfLoggedIn(destURL) { + const goDest = () => window.location.assign(destURL); + if (window.feds?.utilities?.imslib) { + const { imslib } = window.feds.utilities; + /* eslint-disable chai-friendly/no-unused-expressions */ + imslib.isReady() && imslib.isSignedInUser() && goDest(); + imslib.onReady().then(() => imslib.isSignedInUser() && goDest()); + } +} + export default async function init(el) { ({ createTag, loadScript, getConfig } = await import(`${getLibs()}/utils/utils.js`)); isStage = (usp.get('env') && usp.get('env') !== 'prod') || getConfig().env.name !== 'prod'; @@ -175,25 +175,42 @@ export default async function init(el) { const { imsClientId } = getConfig(); const isTabs = el.classList.contains('tabs'); + const noRedirect = el.classList.contains('no-redirect'); - const loadWrapperPromise = loadWrapper(); + await loadSUSIScripts(); + + // only edu variant shows single if (!isTabs) { - const option = extractSingleOption(el, locale, imsClientId); - const goDest = () => window.location.assign(option.destURL); - if (window.feds?.utilities?.imslib) { - const { imslib } = window.feds.utilities; - /* eslint-disable chai-friendly/no-unused-expressions */ - imslib.isReady() && imslib.isSignedInUser() && goDest(); - imslib.onReady().then(() => imslib.isSignedInUser() && goDest()); + const rows = el.querySelectorAll(':scope > div > div'); + const redirectUrl = rows[0]?.textContent?.trim().toLowerCase(); + const client_id = rows[1]?.textContent?.trim() || (imsClientId ?? 'AdobeExpressWeb'); + const title = rows[2]?.textContent?.trim(); + const variant = 'edu-express'; + const params = buildSUSIParams(client_id, variant, getDestURL(redirectUrl), locale, title); + if (!noRedirect) { + redirectIfLoggedIn(params.destURL); } - await loadWrapperPromise; - const susi = createSUSIComponent(option); - el.innerHTML = ''; - el.append(susi); - } else { - await loadWrapperPromise; - const tabs = buildTabs(el, locale, imsClientId); - el.innerHTML = ''; - el.append(tabs); + el.replaceChildren(createSUSIComponent(params)); + return; + } + const rows = [...el.children]; + const tabNames = [...rows[1].querySelectorAll('div')].map((div) => div.textContent); + const variants = [...rows[2].querySelectorAll('div')].map((div) => div.textContent?.trim().toLowerCase()); + const redirectUrls = [...rows[3].querySelectorAll('div')].map((div) => div.textContent?.trim().toLowerCase()); + const client_ids = [...rows[4].querySelectorAll('div')].map((div) => div.textContent?.trim() || (imsClientId ?? 'AdobeExpressWeb')); + const footers = [...rows[5].querySelectorAll('div')]; + const tabParams = tabNames.map((tabName, index) => ({ + tabName, + ...buildSUSIParams( + client_ids[index], + variants[index], + getDestURL(redirectUrls[index]), + locale, + ), + footer: footers[index], + })); + if (!noRedirect) { + redirectIfLoggedIn(tabParams[0].destURL); } + el.replaceChildren(buildSUSITabs(el, tabParams)); } diff --git a/express/code/scripts/express-delayed.js b/express/code/scripts/express-delayed.js index 8e7cc96d..a59afef2 100644 --- a/express/code/scripts/express-delayed.js +++ b/express/code/scripts/express-delayed.js @@ -21,7 +21,7 @@ function preloadSUSILight() { preloadTag.setAttribute('data-stage', 'true'); } import('../blocks/susi-light/susi-light.js') - .then((mod) => mod.loadWrapper()) + .then((mod) => mod.loadSUSIScripts()) .then(() => { document.head.append(preloadTag); }); From 7b1ef2c9940fa209d3f80072a93269d170ec9aad Mon Sep 17 00:00:00 2001 From: Jingle Huang Date: Tue, 18 Feb 2025 13:59:34 -0800 Subject: [PATCH 04/50] init login-page --- express/code/blocks/login-page/login-page.css | 0 express/code/blocks/login-page/login-page.js | 5 ++++ express/code/blocks/susi-light/susi-light.js | 23 +++++++++++-------- 3 files changed, 19 insertions(+), 9 deletions(-) create mode 100644 express/code/blocks/login-page/login-page.css create mode 100644 express/code/blocks/login-page/login-page.js diff --git a/express/code/blocks/login-page/login-page.css b/express/code/blocks/login-page/login-page.css new file mode 100644 index 00000000..e69de29b diff --git a/express/code/blocks/login-page/login-page.js b/express/code/blocks/login-page/login-page.js new file mode 100644 index 00000000..bc3fe072 --- /dev/null +++ b/express/code/blocks/login-page/login-page.js @@ -0,0 +1,5 @@ +export default function init(el) { + const background = el.children[0]; + const footer = el.children[el.children.length - 1]; + console.log(background, footer); +} diff --git a/express/code/blocks/susi-light/susi-light.js b/express/code/blocks/susi-light/susi-light.js index 9d2033f7..e1c89e91 100644 --- a/express/code/blocks/susi-light/susi-light.js +++ b/express/code/blocks/susi-light/susi-light.js @@ -113,7 +113,9 @@ function buildSUSIParams(client_id, variant, destURL, locale, title) { return params; } +let tabsId = 0; function buildSUSITabs(el, options) { + tabsId += 1; const rows = [...el.children]; const wrapper = createTag('div', { class: 'susi-tabs' }); const tabList = createTag('div', { role: 'tab-list' }); @@ -121,15 +123,17 @@ function buildSUSITabs(el, options) { const { footer, tabName, authParams } = option; const panel = createTag('div', { role: 'tab-panel' }); panel.append(createSUSIComponent(option)); - const footerDiv = createTag('div', { class: 'footer' }, footer); - [...footerDiv.querySelectorAll('a, button')].forEach((e) => { - e.addEventListener('click', () => { - sendEventToAnalytics('event', `acomx:susi-light:footer-${e.title || e.textContent}`, authParams.client_id); + if (footer) { + const footerDiv = createTag('div', { class: 'footer' }, footer); + [...footerDiv.querySelectorAll('a, button')].forEach((e) => { + e.addEventListener('click', () => { + sendEventToAnalytics('event', `acomx:susi-light:footer-${e.title || e.textContent}`, authParams.client_id); + }); }); - }); - panel.append(footerDiv); + panel.append(footerDiv); + } - const id = `${tabName}`; + const id = `${tabName}-${tabsId}`; panel.setAttribute('aria-labelledby', `tab-${id}`); panel.id = `panel-${id}`; panel.setAttribute('aria-hidden', i > 0); @@ -198,7 +202,7 @@ export default async function init(el) { const variants = [...rows[2].querySelectorAll('div')].map((div) => div.textContent?.trim().toLowerCase()); const redirectUrls = [...rows[3].querySelectorAll('div')].map((div) => div.textContent?.trim().toLowerCase()); const client_ids = [...rows[4].querySelectorAll('div')].map((div) => div.textContent?.trim() || (imsClientId ?? 'AdobeExpressWeb')); - const footers = [...rows[5].querySelectorAll('div')]; + const footers = rows[5] ? [...rows[5].querySelectorAll('div')] : []; const tabParams = tabNames.map((tabName, index) => ({ tabName, ...buildSUSIParams( @@ -207,9 +211,10 @@ export default async function init(el) { getDestURL(redirectUrls[index]), locale, ), - footer: footers[index], + footer: footers[index] ?? null, })); if (!noRedirect) { + // redirect to first one if logged in redirectIfLoggedIn(tabParams[0].destURL); } el.replaceChildren(buildSUSITabs(el, tabParams)); From 0f3712deb6f52e9729f88e762afb7e55761b4d54 Mon Sep 17 00:00:00 2001 From: Jingle Huang Date: Tue, 18 Feb 2025 14:00:56 -0800 Subject: [PATCH 05/50] rm custom analytics clientid event --- express/code/blocks/susi-light/susi-light.js | 7 +------ 1 file changed, 1 insertion(+), 6 deletions(-) diff --git a/express/code/blocks/susi-light/susi-light.js b/express/code/blocks/susi-light/susi-light.js index e1c89e91..d81df4fe 100644 --- a/express/code/blocks/susi-light/susi-light.js +++ b/express/code/blocks/susi-light/susi-light.js @@ -120,16 +120,11 @@ function buildSUSITabs(el, options) { const wrapper = createTag('div', { class: 'susi-tabs' }); const tabList = createTag('div', { role: 'tab-list' }); const panels = options.map((option, i) => { - const { footer, tabName, authParams } = option; + const { footer, tabName } = option; const panel = createTag('div', { role: 'tab-panel' }); panel.append(createSUSIComponent(option)); if (footer) { const footerDiv = createTag('div', { class: 'footer' }, footer); - [...footerDiv.querySelectorAll('a, button')].forEach((e) => { - e.addEventListener('click', () => { - sendEventToAnalytics('event', `acomx:susi-light:footer-${e.title || e.textContent}`, authParams.client_id); - }); - }); panel.append(footerDiv); } From 093c63cf79589f6d3baf935943a291b417662095 Mon Sep 17 00:00:00 2001 From: Jingle Huang Date: Thu, 20 Feb 2025 15:56:08 -0800 Subject: [PATCH 06/50] login-page init --- express/code/blocks/login-page/login-page.css | 17 +++++++++++++++++ express/code/blocks/login-page/login-page.js | 7 ++++--- express/code/blocks/susi-light/susi-light.css | 6 ++++++ 3 files changed, 27 insertions(+), 3 deletions(-) diff --git a/express/code/blocks/login-page/login-page.css b/express/code/blocks/login-page/login-page.css index e69de29b..092cd181 100644 --- a/express/code/blocks/login-page/login-page.css +++ b/express/code/blocks/login-page/login-page.css @@ -0,0 +1,17 @@ +.login-page .background { + opacity: 0.3; + position: absolute; +} + +.login-page .foreground { + padding-top: 30px; +} + +.login-page .susi-tabs { + background-color: white; + border-radius: 16px; +} + +.login-page .footer { + border-radius: 0 0 16px 16px; +} diff --git a/express/code/blocks/login-page/login-page.js b/express/code/blocks/login-page/login-page.js index bc3fe072..47bfcf7e 100644 --- a/express/code/blocks/login-page/login-page.js +++ b/express/code/blocks/login-page/login-page.js @@ -1,5 +1,6 @@ -export default function init(el) { +export default async function init(el) { const background = el.children[0]; - const footer = el.children[el.children.length - 1]; - console.log(background, footer); + background.classList.add('background'); + const foreground = el.children[1]; + foreground.classList.add('foreground'); } diff --git a/express/code/blocks/susi-light/susi-light.css b/express/code/blocks/susi-light/susi-light.css index 22cc9afa..1842d352 100644 --- a/express/code/blocks/susi-light/susi-light.css +++ b/express/code/blocks/susi-light/susi-light.css @@ -4,6 +4,12 @@ min-height: 462px; } +.susi-light { + display: flex; + align-items: center; + justify-content: center; +} + .susi-tabs { text-align: center; display: flex; From f9bbc4c2e1a6170c87dae44cd01b43c80a26a4bd Mon Sep 17 00:00:00 2001 From: Jingle Huang Date: Thu, 20 Feb 2025 16:17:36 -0800 Subject: [PATCH 07/50] fix bg height --- express/code/blocks/login-page/login-page.css | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/express/code/blocks/login-page/login-page.css b/express/code/blocks/login-page/login-page.css index 092cd181..6e7e289c 100644 --- a/express/code/blocks/login-page/login-page.css +++ b/express/code/blocks/login-page/login-page.css @@ -3,8 +3,14 @@ position: absolute; } +.login-page .background img { + height: 716px; + width: auto; + max-width: initial; +} + .login-page .foreground { - padding-top: 30px; + padding: 30px 0 32px; } .login-page .susi-tabs { From a038c40ce9b23da76f19d3d8d725800a5db4f3b5 Mon Sep 17 00:00:00 2001 From: Jingle Huang Date: Thu, 20 Feb 2025 16:21:17 -0800 Subject: [PATCH 08/50] hide mobile bg --- express/code/blocks/login-page/login-page.css | 13 ++++++++++--- 1 file changed, 10 insertions(+), 3 deletions(-) diff --git a/express/code/blocks/login-page/login-page.css b/express/code/blocks/login-page/login-page.css index 6e7e289c..2cca6bbd 100644 --- a/express/code/blocks/login-page/login-page.css +++ b/express/code/blocks/login-page/login-page.css @@ -4,9 +4,7 @@ } .login-page .background img { - height: 716px; - width: auto; - max-width: initial; + display: none; } .login-page .foreground { @@ -21,3 +19,12 @@ .login-page .footer { border-radius: 0 0 16px 16px; } + +@media (min-width: 600px) { + .login-page .background img { + display: block; + height: 716px; + width: auto; + max-width: initial; + } +} From 6c7abd52204a9d92facb3ebd16eaddae9b4e0b61 Mon Sep 17 00:00:00 2001 From: Jingle Huang Date: Tue, 25 Feb 2025 13:34:06 -0800 Subject: [PATCH 09/50] fix stage merge --- express/code/blocks/susi-light/susi-light.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/express/code/blocks/susi-light/susi-light.js b/express/code/blocks/susi-light/susi-light.js index a23253c7..7ff561e7 100644 --- a/express/code/blocks/susi-light/susi-light.js +++ b/express/code/blocks/susi-light/susi-light.js @@ -162,7 +162,7 @@ function redirectIfLoggedIn(destURL) { const goDest = () => { sendEventToAnalytics('redirect', 'logged-in-auto-redirect'); window.location.assign(destURL); - } + }; if (window.adobeIMS) { window.adobeIMS.isSignedInUser() && goDest(); } else { @@ -172,6 +172,7 @@ function redirectIfLoggedIn(destURL) { window.adobeIMS?.isSignedInUser() && goDest(); }) .catch((e) => { window.lana?.log(`Unable to load IMS in susi-light: ${e}`); }); + } } export default async function init(el) { From 4c05741235eb9e1d5eca3e6e31a2476c2904ee0c Mon Sep 17 00:00:00 2001 From: Jingle Huang Date: Tue, 25 Feb 2025 16:21:48 -0800 Subject: [PATCH 10/50] added responsive bg imgs --- express/code/blocks/login-page/login-page.css | 36 ++++++++++++++----- express/code/blocks/login-page/login-page.js | 7 +++- 2 files changed, 34 insertions(+), 9 deletions(-) diff --git a/express/code/blocks/login-page/login-page.css b/express/code/blocks/login-page/login-page.css index 2cca6bbd..31a8a1f8 100644 --- a/express/code/blocks/login-page/login-page.css +++ b/express/code/blocks/login-page/login-page.css @@ -1,6 +1,7 @@ -.login-page .background { - opacity: 0.3; - position: absolute; +.login-page { + display: flex; + justify-content: center; + align-items: center; } .login-page .background img { @@ -20,11 +21,30 @@ border-radius: 0 0 16px 16px; } -@media (min-width: 600px) { - .login-page .background img { +@media (min-width: 768px) { + .login-page .foreground { + position: absolute; + } + .login-page .background .m-background { + display: block; + min-height: 716px; + } +} + +@media (min-width: 1280px) { + .login-page .background .m-background { + display: none; + } + .login-page .background .l-background { + display: block; + } +} + +@media (min-width: 1680px) { + .login-page .background .l-background { + display: none; + } + .login-page .background .xl-background { display: block; - height: 716px; - width: auto; - max-width: initial; } } diff --git a/express/code/blocks/login-page/login-page.js b/express/code/blocks/login-page/login-page.js index 47bfcf7e..55f25dfb 100644 --- a/express/code/blocks/login-page/login-page.js +++ b/express/code/blocks/login-page/login-page.js @@ -1,6 +1,11 @@ +const breakpoints = ['m', 'l', 'xl']; export default async function init(el) { const background = el.children[0]; background.classList.add('background'); - const foreground = el.children[1]; + const imgs = [...background.querySelectorAll('img')]; + imgs.forEach((img, index) => { + img.classList.add(`${breakpoints[index]}-background`); + }); + const foreground = el.children[el.children.length - 1]; foreground.classList.add('foreground'); } From 621c6c90c7dbeb7fc751e2a0a549e5b90358ed92 Mon Sep 17 00:00:00 2001 From: Jingle Huang Date: Wed, 26 Feb 2025 13:44:49 -0800 Subject: [PATCH 11/50] using all 6 images --- express/code/blocks/login-page/login-page.css | 32 +++++++++++++++++-- express/code/blocks/login-page/login-page.js | 3 +- 2 files changed, 31 insertions(+), 4 deletions(-) diff --git a/express/code/blocks/login-page/login-page.css b/express/code/blocks/login-page/login-page.css index 31a8a1f8..c1866500 100644 --- a/express/code/blocks/login-page/login-page.css +++ b/express/code/blocks/login-page/login-page.css @@ -27,24 +27,50 @@ } .login-page .background .m-background { display: block; - min-height: 716px; } } -@media (min-width: 1280px) { +@media (min-width: 1024px) { .login-page .background .m-background { display: none; } + .login-page .background .tablet-background { + display: block; + } +} + +@media (min-width: 1280px) { + .login-page .background .tablet-background { + display: none; + } .login-page .background .l-background { display: block; } } -@media (min-width: 1680px) { +@media (min-width: 1440px) { .login-page .background .l-background { display: none; } + .login-page .background .desktop-background { + display: block; + } +} + +@media (min-width: 1680px) { + .login-page .background .desktop-background { + display: none; + } .login-page .background .xl-background { display: block; } } + +@media (min-width: 1920px) { + .login-page .background .xl-background { + display: none; + } + .login-page .background .xxl-background { + display: block; + } +} diff --git a/express/code/blocks/login-page/login-page.js b/express/code/blocks/login-page/login-page.js index 55f25dfb..6bddb6dc 100644 --- a/express/code/blocks/login-page/login-page.js +++ b/express/code/blocks/login-page/login-page.js @@ -1,4 +1,5 @@ -const breakpoints = ['m', 'l', 'xl']; +// 768/1024/1280/1440/1600/1920 +const breakpoints = ['m', 'tablet', 'l', 'desktop', 'xl', 'xxl']; export default async function init(el) { const background = el.children[0]; background.classList.add('background'); From b9b343fd83de425ad92aba45ac1760e9e6147c25 Mon Sep 17 00:00:00 2001 From: Jingle Huang Date: Mon, 3 Mar 2025 12:54:38 -0800 Subject: [PATCH 12/50] use css only --- express/code/blocks/susi-light/susi-light.css | 13 ++++++++----- 1 file changed, 8 insertions(+), 5 deletions(-) diff --git a/express/code/blocks/susi-light/susi-light.css b/express/code/blocks/susi-light/susi-light.css index 1842d352..511709ca 100644 --- a/express/code/blocks/susi-light/susi-light.css +++ b/express/code/blocks/susi-light/susi-light.css @@ -32,10 +32,6 @@ text-align: center; } -.susi-tabs [role='tab-panel'][aria-hidden='true'] { - display: none; -} - .susi-tabs [role='tab-list'] { background-color: var(--color-white); border-radius: 8px; @@ -45,6 +41,10 @@ box-shadow: 0px 2px 8px 0px #00000029; } +.susi-tabs [role='tab-list']:has(:first-child:last-child) { + display: none; +} + .susi-tabs [role='tab'] { background-color: var(--color-white); border: initial; @@ -62,7 +62,10 @@ border-radius: 6px; } -/* FIXME: rename easy in and guest to tabbed and footer */ +.susi-tabs [role='tab-panel'][aria-hidden='true'] { + display: none; +} + .susi-tabs .footer { font-size: var(--body-font-size-s); text-align: center; From c00cb33a3d059d32ca40b3b514b3f91c81c5b8f2 Mon Sep 17 00:00:00 2001 From: Jingle Huang Date: Mon, 3 Mar 2025 13:39:02 -0800 Subject: [PATCH 13/50] supported bubbles footer --- express/code/blocks/susi-light/susi-light.css | 28 ++++++++++++++++++- express/code/blocks/susi-light/susi-light.js | 15 ++++++++-- 2 files changed, 40 insertions(+), 3 deletions(-) diff --git a/express/code/blocks/susi-light/susi-light.css b/express/code/blocks/susi-light/susi-light.css index 511709ca..bd8b2d8a 100644 --- a/express/code/blocks/susi-light/susi-light.css +++ b/express/code/blocks/susi-light/susi-light.css @@ -70,7 +70,6 @@ font-size: var(--body-font-size-s); text-align: center; padding: 16px 0; - background-color: #f3f3f3; font-weight: 700; color: #292929; line-height: 20.8px; @@ -79,4 +78,31 @@ .susi-tabs .footer a { text-decoration: underline; color: initial; + font-weight: 500; +} + +.susi-tabs .footer.banner { + background-color: #f3f3f3; +} + +.susi-tabs .footer.bubbles h2 { + font-size: var(--body-font-size-l); + font-weight: 700; +} + +.susi-tabs .footer .bubble-container { + display: flex; + gap: 12px; + justify-content: center; + padding-top: 8px; +} + +.susi-tabs .footer .bubble { + font-size: var(--body-font-size-s); + background-color: #f3f3f3; + display: flex; + flex-direction: column; + padding: 12px 24px; + border-radius: 8px; + margin: 0; } diff --git a/express/code/blocks/susi-light/susi-light.js b/express/code/blocks/susi-light/susi-light.js index 7ff561e7..754fdd67 100644 --- a/express/code/blocks/susi-light/susi-light.js +++ b/express/code/blocks/susi-light/susi-light.js @@ -125,8 +125,19 @@ function buildSUSITabs(el, options) { const panel = createTag('div', { role: 'tab-panel' }); panel.append(createSUSIComponent(option)); if (footer) { - const footerDiv = createTag('div', { class: 'footer' }, footer); - panel.append(footerDiv); + footer.classList.add('footer'); + if (footer.querySelector('h2')) { + footer.classList.add('bubbles'); + const bubbleContainer = createTag('div', { class: 'bubble-container' }); + [...footer.querySelectorAll('p')].forEach((p) => { + p.classList.add('bubble'); + bubbleContainer.append(p); + }); + footer.append(bubbleContainer); + } else { + footer.classList.add('banner'); + } + panel.append(footer); } const id = `${tabName}-${tabsId}`; From 03294e0e09de3ed3154398c697248bf1ba842d40 Mon Sep 17 00:00:00 2001 From: Jingle Huang Date: Mon, 3 Mar 2025 13:49:30 -0800 Subject: [PATCH 14/50] shift padding from title to tablist --- express/code/blocks/susi-light/susi-light.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/express/code/blocks/susi-light/susi-light.css b/express/code/blocks/susi-light/susi-light.css index bd8b2d8a..43022ce0 100644 --- a/express/code/blocks/susi-light/susi-light.css +++ b/express/code/blocks/susi-light/susi-light.css @@ -28,7 +28,6 @@ line-height: 28.6px; font-weight: 900; padding-top: 12px; - padding-bottom: 16px; text-align: center; } @@ -38,6 +37,7 @@ display: flex; gap: 4px; padding: 4px; + margin-top: 16px; box-shadow: 0px 2px 8px 0px #00000029; } From fa99c9258b1be0c4431dec68f864540d51a510a5 Mon Sep 17 00:00:00 2001 From: Jingle Huang Date: Tue, 4 Mar 2025 11:37:25 -0800 Subject: [PATCH 15/50] test dctx_id --- express/code/blocks/susi-light/susi-light.js | 1 + 1 file changed, 1 insertion(+) diff --git a/express/code/blocks/susi-light/susi-light.js b/express/code/blocks/susi-light/susi-light.js index 754fdd67..ee21cdeb 100644 --- a/express/code/blocks/susi-light/susi-light.js +++ b/express/code/blocks/susi-light/susi-light.js @@ -80,6 +80,7 @@ function createSUSIComponent({ variant, config, authParams, destURL }) { const susi = createTag('susi-sentry-light'); susi.authParams = authParams; susi.authParams.redirect_uri = destURL; + susi.authParams.dctx_id = 'v:2,s,dcp-r,bg:express2024,45faecb0-e687-11ee-a865-f545a8ca5d2c'; susi.config = config; if (isStage) susi.stage = 'true'; susi.variant = variant; From e364080a0379acf59d2b25e964bcd75982a4a085 Mon Sep 17 00:00:00 2001 From: Jingle Huang Date: Tue, 4 Mar 2025 14:53:50 -0800 Subject: [PATCH 16/50] avoid conflicts with banner.css --- express/code/blocks/susi-light/susi-light.css | 8 ++++---- express/code/blocks/susi-light/susi-light.js | 8 ++++---- 2 files changed, 8 insertions(+), 8 deletions(-) diff --git a/express/code/blocks/susi-light/susi-light.css b/express/code/blocks/susi-light/susi-light.css index 43022ce0..7621727c 100644 --- a/express/code/blocks/susi-light/susi-light.css +++ b/express/code/blocks/susi-light/susi-light.css @@ -81,23 +81,23 @@ font-weight: 500; } -.susi-tabs .footer.banner { +.susi-tabs .footer.susi-banner { background-color: #f3f3f3; } -.susi-tabs .footer.bubbles h2 { +.susi-tabs .footer.susi-bubbles h2 { font-size: var(--body-font-size-l); font-weight: 700; } -.susi-tabs .footer .bubble-container { +.susi-tabs .footer .susi-bubble-container { display: flex; gap: 12px; justify-content: center; padding-top: 8px; } -.susi-tabs .footer .bubble { +.susi-tabs .footer .susi-bubble { font-size: var(--body-font-size-s); background-color: #f3f3f3; display: flex; diff --git a/express/code/blocks/susi-light/susi-light.js b/express/code/blocks/susi-light/susi-light.js index ee21cdeb..18d512d7 100644 --- a/express/code/blocks/susi-light/susi-light.js +++ b/express/code/blocks/susi-light/susi-light.js @@ -128,15 +128,15 @@ function buildSUSITabs(el, options) { if (footer) { footer.classList.add('footer'); if (footer.querySelector('h2')) { - footer.classList.add('bubbles'); - const bubbleContainer = createTag('div', { class: 'bubble-container' }); + footer.classList.add('susi-bubbles'); + const bubbleContainer = createTag('div', { class: 'susi-bubble-container' }); [...footer.querySelectorAll('p')].forEach((p) => { - p.classList.add('bubble'); + p.classList.add('susi-bubble'); bubbleContainer.append(p); }); footer.append(bubbleContainer); } else { - footer.classList.add('banner'); + footer.classList.add('susi-banner'); } panel.append(footer); } From a74ac7ed158136970570985239e41fe8a654d4f9 Mon Sep 17 00:00:00 2001 From: Jingle Huang Date: Wed, 5 Mar 2025 11:44:11 -0800 Subject: [PATCH 17/50] hide icons and title for edu-express variant --- express/code/blocks/susi-light/susi-light.css | 4 ++++ express/code/blocks/susi-light/susi-light.js | 20 ++++++++++++------- 2 files changed, 17 insertions(+), 7 deletions(-) diff --git a/express/code/blocks/susi-light/susi-light.css b/express/code/blocks/susi-light/susi-light.css index 7621727c..f29e201c 100644 --- a/express/code/blocks/susi-light/susi-light.css +++ b/express/code/blocks/susi-light/susi-light.css @@ -62,6 +62,10 @@ border-radius: 6px; } +.susi-tabs [role='tab-panel'] { + width: 400px; +} + .susi-tabs [role='tab-panel'][aria-hidden='true'] { display: none; } diff --git a/express/code/blocks/susi-light/susi-light.js b/express/code/blocks/susi-light/susi-light.js index 18d512d7..b13e650a 100644 --- a/express/code/blocks/susi-light/susi-light.js +++ b/express/code/blocks/susi-light/susi-light.js @@ -94,7 +94,7 @@ function createSUSIComponent({ variant, config, authParams, destURL }) { return susi; } -function buildSUSIParams(client_id, variant, destURL, locale, title) { +function buildSUSIParams({ client_id, variant, destURL, locale, title, hideIcon }) { const params = { variant, authParams: { @@ -107,11 +107,15 @@ function buildSUSIParams(client_id, variant, destURL, locale, title) { destURL, config: { consentProfile: 'free', + fullWidth: true, }, }; - if (title) { + if (title !== undefined) { params.config.title = title; } + if (hideIcon) { + params.config.hideIcon = true; + } return params; } @@ -220,12 +224,14 @@ export default async function init(el) { const footers = rows[5] ? [...rows[5].querySelectorAll('div')] : []; const tabParams = tabNames.map((tabName, index) => ({ tabName, - ...buildSUSIParams( - client_ids[index], - variants[index], - getDestURL(redirectUrls[index]), + ...buildSUSIParams({ + client_id: client_ids[index], + variant: variants[index], + destURL: getDestURL(redirectUrls[index]), locale, - ), + title: '', // rm titles + hideIcon: true, + }), footer: footers[index] ?? null, })); if (!noRedirect) { From 536c8f7e60273ff5822819af1f8c7e018d58f6bd Mon Sep 17 00:00:00 2001 From: Jingle Huang Date: Wed, 5 Mar 2025 15:08:27 -0800 Subject: [PATCH 18/50] rm nested blocks --- express/code/blocks/login-page/login-page.css | 23 +++++++++---------- express/code/blocks/login-page/login-page.js | 2 -- 2 files changed, 11 insertions(+), 14 deletions(-) diff --git a/express/code/blocks/login-page/login-page.css b/express/code/blocks/login-page/login-page.css index c1866500..aa8ecb4e 100644 --- a/express/code/blocks/login-page/login-page.css +++ b/express/code/blocks/login-page/login-page.css @@ -1,29 +1,28 @@ -.login-page { +/* make susi-light in the same ax-login-page section hover */ +.section.ax-login-page { display: flex; justify-content: center; align-items: center; } -.login-page .background img { - display: none; -} - -.login-page .foreground { - padding: 30px 0 32px; -} - -.login-page .susi-tabs { +.section.ax-login-page .susi-tabs { background-color: white; border-radius: 16px; } -.login-page .footer { +.section.ax-login-page .susi-tabs .footer { border-radius: 0 0 16px 16px; } +.login-page .background img { + display: none; + width: 100vw; /* not needed if authored right images */ +} + @media (min-width: 768px) { - .login-page .foreground { + .section.ax-login-page .susi-light { position: absolute; + padding: 30px 0 32px; } .login-page .background .m-background { display: block; diff --git a/express/code/blocks/login-page/login-page.js b/express/code/blocks/login-page/login-page.js index 6bddb6dc..6ac238af 100644 --- a/express/code/blocks/login-page/login-page.js +++ b/express/code/blocks/login-page/login-page.js @@ -7,6 +7,4 @@ export default async function init(el) { imgs.forEach((img, index) => { img.classList.add(`${breakpoints[index]}-background`); }); - const foreground = el.children[el.children.length - 1]; - foreground.classList.add('foreground'); } From a3dfd0e72eb77808d7817112e6869b1aa824e420 Mon Sep 17 00:00:00 2001 From: Jingle Huang Date: Wed, 5 Mar 2025 15:18:49 -0800 Subject: [PATCH 19/50] reduce cls --- express/code/blocks/susi-light/susi-light.css | 9 +++++++++ express/code/blocks/susi-light/susi-light.js | 5 +++-- 2 files changed, 12 insertions(+), 2 deletions(-) diff --git a/express/code/blocks/susi-light/susi-light.css b/express/code/blocks/susi-light/susi-light.css index f29e201c..a37e125c 100644 --- a/express/code/blocks/susi-light/susi-light.css +++ b/express/code/blocks/susi-light/susi-light.css @@ -70,6 +70,15 @@ display: none; } +/* reduce CLS */ +.susi-tabs [role='tab-panel'].standard susi-sentry-light { + min-height: 457.5px; +} + +.susi-tabs [role='tab-panel'].edu-express susi-sentry-light { + min-height: 366.5px; +} + .susi-tabs .footer { font-size: var(--body-font-size-s); text-align: center; diff --git a/express/code/blocks/susi-light/susi-light.js b/express/code/blocks/susi-light/susi-light.js index b13e650a..d53f8ff0 100644 --- a/express/code/blocks/susi-light/susi-light.js +++ b/express/code/blocks/susi-light/susi-light.js @@ -126,8 +126,8 @@ function buildSUSITabs(el, options) { const wrapper = createTag('div', { class: 'susi-tabs' }); const tabList = createTag('div', { role: 'tab-list' }); const panels = options.map((option, i) => { - const { footer, tabName } = option; - const panel = createTag('div', { role: 'tab-panel' }); + const { footer, tabName, variant } = option; + const panel = createTag('div', { role: 'tab-panel', class: variant }); panel.append(createSUSIComponent(option)); if (footer) { footer.classList.add('footer'); @@ -168,6 +168,7 @@ function buildSUSITabs(el, options) { const logo = getIconElementDeprecated('adobe-express-logo'); logo.classList.add('express-logo'); + logo.height = 24; const title = rows[0].textContent?.trim(); const titleDiv = createTag('div', { class: 'title' }, title); wrapper.append(logo, titleDiv, tabList, ...panels); From 01e446d171c91d3d76effdb66618bbcdf4d722fc Mon Sep 17 00:00:00 2001 From: Jingle Huang Date: Wed, 5 Mar 2025 15:23:06 -0800 Subject: [PATCH 20/50] accessibility --- express/code/blocks/susi-light/susi-light.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/express/code/blocks/susi-light/susi-light.js b/express/code/blocks/susi-light/susi-light.js index d53f8ff0..a0f80675 100644 --- a/express/code/blocks/susi-light/susi-light.js +++ b/express/code/blocks/susi-light/susi-light.js @@ -124,10 +124,10 @@ function buildSUSITabs(el, options) { tabsId += 1; const rows = [...el.children]; const wrapper = createTag('div', { class: 'susi-tabs' }); - const tabList = createTag('div', { role: 'tab-list' }); + const tabList = createTag('div', { role: 'tablist' }); const panels = options.map((option, i) => { const { footer, tabName, variant } = option; - const panel = createTag('div', { role: 'tab-panel', class: variant }); + const panel = createTag('div', { role: 'tabpanel', class: variant }); panel.append(createSUSIComponent(option)); if (footer) { footer.classList.add('footer'); From 2a32976cbcc928abc43e41eb03eb072f9d52b08e Mon Sep 17 00:00:00 2001 From: Jingle Huang Date: Wed, 5 Mar 2025 15:34:41 -0800 Subject: [PATCH 21/50] fx accessibility css --- express/code/blocks/susi-light/susi-light.css | 12 ++++++------ express/code/blocks/susi-light/susi-light.js | 10 +++++++++- 2 files changed, 15 insertions(+), 7 deletions(-) diff --git a/express/code/blocks/susi-light/susi-light.css b/express/code/blocks/susi-light/susi-light.css index a37e125c..f8a1b80f 100644 --- a/express/code/blocks/susi-light/susi-light.css +++ b/express/code/blocks/susi-light/susi-light.css @@ -31,7 +31,7 @@ text-align: center; } -.susi-tabs [role='tab-list'] { +.susi-tabs [role='tablist'] { background-color: var(--color-white); border-radius: 8px; display: flex; @@ -41,7 +41,7 @@ box-shadow: 0px 2px 8px 0px #00000029; } -.susi-tabs [role='tab-list']:has(:first-child:last-child) { +.susi-tabs [role='tablist']:has(:first-child:last-child) { display: none; } @@ -62,20 +62,20 @@ border-radius: 6px; } -.susi-tabs [role='tab-panel'] { +.susi-tabs [role='tabpanel'] { width: 400px; } -.susi-tabs [role='tab-panel'][aria-hidden='true'] { +.susi-tabs [role='tabpanel'][aria-hidden='true'] { display: none; } /* reduce CLS */ -.susi-tabs [role='tab-panel'].standard susi-sentry-light { +.susi-tabs [role='tabpanel'].standard susi-sentry-light { min-height: 457.5px; } -.susi-tabs [role='tab-panel'].edu-express susi-sentry-light { +.susi-tabs [role='tabpanel'].edu-express susi-sentry-light { min-height: 366.5px; } diff --git a/express/code/blocks/susi-light/susi-light.js b/express/code/blocks/susi-light/susi-light.js index a0f80675..f079812f 100644 --- a/express/code/blocks/susi-light/susi-light.js +++ b/express/code/blocks/susi-light/susi-light.js @@ -119,6 +119,14 @@ function buildSUSIParams({ client_id, variant, destURL, locale, title, hideIcon return params; } +function sanitizeId(input) { + return input + .toLowerCase() + .trim() + .replace(/\s+/g, '-') + .replace(/[^\w-]/g, ''); +} + let tabsId = 0; function buildSUSITabs(el, options) { tabsId += 1; @@ -145,7 +153,7 @@ function buildSUSITabs(el, options) { panel.append(footer); } - const id = `${tabName}-${tabsId}`; + const id = sanitizeId(`${tabName}-${tabsId}`); panel.setAttribute('aria-labelledby', `tab-${id}`); panel.id = `panel-${id}`; panel.setAttribute('aria-hidden', i > 0); From a60d63f2ddb832641463030f1fc457c2c6ed5b7f Mon Sep 17 00:00:00 2001 From: Jingle Huang Date: Wed, 5 Mar 2025 17:12:27 -0800 Subject: [PATCH 22/50] perf --- express/code/blocks/susi-light/susi-light.css | 4 ++-- express/code/blocks/susi-light/susi-light.js | 9 +++++---- 2 files changed, 7 insertions(+), 6 deletions(-) diff --git a/express/code/blocks/susi-light/susi-light.css b/express/code/blocks/susi-light/susi-light.css index f8a1b80f..f32bf0c2 100644 --- a/express/code/blocks/susi-light/susi-light.css +++ b/express/code/blocks/susi-light/susi-light.css @@ -71,11 +71,11 @@ } /* reduce CLS */ -.susi-tabs [role='tabpanel'].standard susi-sentry-light { +.susi-tabs [role='tabpanel'].standard .susi-wrapper { min-height: 457.5px; } -.susi-tabs [role='tabpanel'].edu-express susi-sentry-light { +.susi-tabs [role='tabpanel'].edu-express .susi-wrapper { min-height: 366.5px; } diff --git a/express/code/blocks/susi-light/susi-light.js b/express/code/blocks/susi-light/susi-light.js index f079812f..ffd2ab5d 100644 --- a/express/code/blocks/susi-light/susi-light.js +++ b/express/code/blocks/susi-light/susi-light.js @@ -133,10 +133,12 @@ function buildSUSITabs(el, options) { const rows = [...el.children]; const wrapper = createTag('div', { class: 'susi-tabs' }); const tabList = createTag('div', { role: 'tablist' }); + const susiScriptReady = loadSUSIScripts(); const panels = options.map((option, i) => { const { footer, tabName, variant } = option; - const panel = createTag('div', { role: 'tabpanel', class: variant }); - panel.append(createSUSIComponent(option)); + const susiWrapper = createTag('div', { class: 'susi-wrapper' }); + const panel = createTag('div', { role: 'tabpanel', class: variant }, susiWrapper); + susiScriptReady.then(() => susiWrapper.append(createSUSIComponent(option))); if (footer) { footer.classList.add('footer'); if (footer.querySelector('h2')) { @@ -209,8 +211,6 @@ export default async function init(el) { const isTabs = el.classList.contains('tabs'); const noRedirect = el.classList.contains('no-redirect'); - await loadSUSIScripts(); - // only edu variant shows single if (!isTabs) { const rows = el.querySelectorAll(':scope > div > div'); @@ -222,6 +222,7 @@ export default async function init(el) { if (!noRedirect) { redirectIfLoggedIn(params.destURL); } + await loadSUSIScripts(); el.replaceChildren(createSUSIComponent(params)); return; } From 961a4ee20551a5060a4443d9a46231d78336755f Mon Sep 17 00:00:00 2001 From: Jingle Huang Date: Thu, 6 Mar 2025 16:56:40 -0800 Subject: [PATCH 23/50] ut wip --- express/code/blocks/login-page/login-page.css | 13 --- express/code/blocks/susi-light/susi-light.css | 17 ++++ express/code/blocks/susi-light/susi-light.js | 4 +- test/blocks/login-page/login-page.test.js | 24 ++++++ test/blocks/login-page/mocks/body.html | 79 +++++++++++++++++++ test/blocks/susi-light/mocks/body.html | 42 +++++++++- test/blocks/susi-light/mocks/susi-script.js | 24 ++++++ test/blocks/susi-light/susi-light.test.js | 29 +++++-- 8 files changed, 209 insertions(+), 23 deletions(-) create mode 100644 test/blocks/login-page/login-page.test.js create mode 100644 test/blocks/login-page/mocks/body.html create mode 100644 test/blocks/susi-light/mocks/susi-script.js diff --git a/express/code/blocks/login-page/login-page.css b/express/code/blocks/login-page/login-page.css index aa8ecb4e..af67fbed 100644 --- a/express/code/blocks/login-page/login-page.css +++ b/express/code/blocks/login-page/login-page.css @@ -5,25 +5,12 @@ align-items: center; } -.section.ax-login-page .susi-tabs { - background-color: white; - border-radius: 16px; -} - -.section.ax-login-page .susi-tabs .footer { - border-radius: 0 0 16px 16px; -} - .login-page .background img { display: none; width: 100vw; /* not needed if authored right images */ } @media (min-width: 768px) { - .section.ax-login-page .susi-light { - position: absolute; - padding: 30px 0 32px; - } .login-page .background .m-background { display: block; } diff --git a/express/code/blocks/susi-light/susi-light.css b/express/code/blocks/susi-light/susi-light.css index f32bf0c2..7f821d14 100644 --- a/express/code/blocks/susi-light/susi-light.css +++ b/express/code/blocks/susi-light/susi-light.css @@ -119,3 +119,20 @@ border-radius: 8px; margin: 0; } + +/* ax-login-page section metadata styles */ +.section.ax-login-page .susi-tabs { + background-color: white; + border-radius: 16px; +} + +.section.ax-login-page .susi-tabs .footer { + border-radius: 0 0 16px 16px; +} + +@media (min-width: 768px) { + .section.ax-login-page .susi-light { + position: absolute; + padding: 30px 0 32px; + } +} diff --git a/express/code/blocks/susi-light/susi-light.js b/express/code/blocks/susi-light/susi-light.js index ffd2ab5d..de9d2e4a 100644 --- a/express/code/blocks/susi-light/susi-light.js +++ b/express/code/blocks/susi-light/susi-light.js @@ -218,7 +218,9 @@ export default async function init(el) { const client_id = rows[1]?.textContent?.trim() || (imsClientId ?? 'AdobeExpressWeb'); const title = rows[2]?.textContent?.trim(); const variant = 'edu-express'; - const params = buildSUSIParams(client_id, variant, getDestURL(redirectUrl), locale, title); + const params = buildSUSIParams({ + client_id, variant, destURL: getDestURL(redirectUrl), locale, title, + }); if (!noRedirect) { redirectIfLoggedIn(params.destURL); } diff --git a/test/blocks/login-page/login-page.test.js b/test/blocks/login-page/login-page.test.js new file mode 100644 index 00000000..9e342717 --- /dev/null +++ b/test/blocks/login-page/login-page.test.js @@ -0,0 +1,24 @@ +import { readFile } from '@web/test-runner-commands'; +import { expect } from '@esm-bundle/chai'; + +const imports = await Promise.all([import('../../../express/code/scripts/utils.js'), import('../../../express/code/scripts/scripts.js')]); +const { getLibs } = imports[0]; +await import(`${getLibs()}/utils/utils.js`).then((mod) => { + const conf = {}; + mod.setConfig(conf); +}); +const [{ default: decorate }] = await Promise.all([import('../../../express/code/blocks/login-page/login-page.js')]); +document.body.innerHTML = await readFile({ path: './mocks/body.html' }); +describe('login-page', () => { + let block; + before(async () => { + block = document.querySelector('.login-page'); + decorate(block); + }); + it('has a background image', async () => { + expect(block.querySelector('img.m-background')).to.exist; + expect(block.querySelector('img.l-background')).to.exist; + expect(block.querySelector('img.xl-background')).to.exist; + expect(block.querySelector('img.xxl-background')).to.exist; + }); +}); diff --git a/test/blocks/login-page/mocks/body.html b/test/blocks/login-page/mocks/body.html new file mode 100644 index 00000000..52deeaf8 --- /dev/null +++ b/test/blocks/login-page/mocks/body.html @@ -0,0 +1,79 @@ +
+ +
+
+
Sign in or create account
+
+
+
Individual / Business
+
Educators
+
+
+
standard
+
edu-express
+
+ +
+
+
+
+
+
Not ready to Sign in? Continue as a guest
+
+

Are you a student?

+

K-12 students Enter a class code

+

Higher ed students Enter email

+
+
+
+
+
+
style
+
Ax-login-page
+
+
+
diff --git a/test/blocks/susi-light/mocks/body.html b/test/blocks/susi-light/mocks/body.html index 0322b03f..8fe51cb1 100644 --- a/test/blocks/susi-light/mocks/body.html +++ b/test/blocks/susi-light/mocks/body.html @@ -1,5 +1,43 @@ -
+ + + diff --git a/test/blocks/susi-light/mocks/susi-script.js b/test/blocks/susi-light/mocks/susi-script.js new file mode 100644 index 00000000..07e84b04 --- /dev/null +++ b/test/blocks/susi-light/mocks/susi-script.js @@ -0,0 +1,24 @@ +/* eslint-disable */ +(()=>{var r={};r=":host{display:block}:host,.overflow-page{width:100%;height:100%}.main,.overflow{height:100%;transition:transform .3s,opacity .3s,visibility .3s}.overflow-page{grid-template-columns:100% 100%;display:grid;position:relative;overflow:hidden}.overflow{opacity:0;visibility:hidden;inset:0 -100% 0 100%}.overflow-page.overflow--active .main{opacity:0;visibility:hidden;transform:translate(-100%)}.overflow-page.overflow--active .overflow{opacity:1;visibility:visible;transform:translate(-100%)}:host *{box-sizing:border-box}:host,#sentry-container,#sentry-container iframe{color-scheme:normal;background:0 0;border:0;width:100%;height:100%}#sentry-iframe{position:fixed;top:-10000px;left:-10000px}@-webkit-keyframes shimmer{0%{background-position:-100% 0}to{background-position:100% 0}}@keyframes shimmer{0%{background-position:-1200px 0}to{background-position:1200px 0}}.social-button-loader{background:linear-gradient(90deg,#f8f8f8 8%,#eee 18%,#f8f8f8 33%) 0 0/1200px 100%;animation-name:shimmer;animation-duration:2.2s;animation-timing-function:linear;animation-iteration-count:infinite;animation-fill-mode:forwards}#sentry-container.light-mode{--blue-100-rgb:224,242,255;--blue-100:rgba(var(--blue-100-rgb));--blue-200-rgb:202,232,255;--blue-200:rgba(var(--blue-200-rgb));--blue-300-rgb:181,222,255;--blue-300:rgba(var(--blue-300-rgb));--blue-400-rgb:150,206,253;--blue-400:rgba(var(--blue-400-rgb));--blue-500-rgb:120,187,250;--blue-500:rgba(var(--blue-500-rgb));--blue-600-rgb:89,167,246;--blue-600:rgba(var(--blue-600-rgb));--blue-700-rgb:56,146,243;--blue-700:rgba(var(--blue-700-rgb));--blue-800-rgb:20,122,243;--blue-800:rgba(var(--blue-800-rgb));--blue-900-rgb:2,101,220;--blue-900:rgba(var(--blue-900-rgb));--blue-1000-rgb:0,84,182;--blue-1000:rgba(var(--blue-1000-rgb));--blue-1100-rgb:0,68,145;--blue-1100:rgba(var(--blue-1100-rgb));--blue-1200-rgb:0,53,113;--blue-1200:rgba(var(--blue-1200-rgb));--blue-1300-rgb:0,39,84;--blue-1300:rgba(var(--blue-1300-rgb));--blue-1400-rgb:0,28,60;--blue-1400:rgba(var(--blue-1400-rgb));--red-100-rgb:255,235,231;--red-100:rgba(var(--red-100-rgb));--red-200-rgb:255,221,214;--red-200:rgba(var(--red-200-rgb));--red-300-rgb:255,205,195;--red-300:rgba(var(--red-300-rgb));--red-400-rgb:255,183,169;--red-400:rgba(var(--red-400-rgb));--red-500-rgb:255,155,136;--red-500:rgba(var(--red-500-rgb));--red-600-rgb:255,124,101;--red-600:rgba(var(--red-600-rgb));--red-700-rgb:247,92,70;--red-700:rgba(var(--red-700-rgb));--red-800-rgb:234,56,41;--red-800:rgba(var(--red-800-rgb));--red-900-rgb:211,21,16;--red-900:rgba(var(--red-900-rgb));--red-1000-rgb:180,0,0;--red-1000:rgba(var(--red-1000-rgb));--red-1100-rgb:147,0,0;--red-1100:rgba(var(--red-1100-rgb));--red-1200-rgb:116,0,0;--red-1200:rgba(var(--red-1200-rgb));--red-1300-rgb:89,0,0;--red-1300:rgba(var(--red-1300-rgb));--red-1400-rgb:67,0,0;--red-1400:rgba(var(--red-1400-rgb));--gray-50-rgb:255,255,255;--gray-50:rgb(var(--gray-50-rgb));--gray-75-rgb:253,253,253;--gray-75:rgb(var(--gray-75-rgb));--gray-100-rgb:248,248,248;--gray-100:rgb(var(--gray-100-rgb));--gray-200-rgb:230,230,230;--gray-200:rgb(var(--gray-200-rgb));--gray-300-rgb:213,213,213;--gray-300:rgb(var(--gray-300-rgb));--gray-400-rgb:177,177,177;--gray-400:rgb(var(--gray-400-rgb));--gray-500-rgb:144,144,144;--gray-500:rgb(var(--gray-500-rgb));--gray-600-rgb:109,109,109;--gray-600:rgb(var(--gray-600-rgb));--gray-700-rgb:70,70,70;--gray-700:rgb(var(--gray-700-rgb));--gray-800-rgb:34,34,34;--gray-800:rgb(var(--gray-800-rgb));--gray-900-rgb:0,0,0;--gray-900:rgb(var(--gray-900-rgb))}#sentry-container.dark-mode{--blue-100-rgb:0,56,119;--blue-100:rgba(var(--blue-100-rgb));--blue-200-rgb:0,65,138;--blue-200:rgba(var(--blue-200-rgb));--blue-300-rgb:0,77,163;--blue-300:rgba(var(--blue-300-rgb));--blue-400-rgb:0,89,194;--blue-400:rgba(var(--blue-400-rgb));--blue-500-rgb:3,103,224;--blue-500:rgba(var(--blue-500-rgb));--blue-600-rgb:19,121,243;--blue-600:rgba(var(--blue-600-rgb));--blue-700-rgb:52,143,244;--blue-700:rgba(var(--blue-700-rgb));--blue-800-rgb:84,163,246;--blue-800:rgba(var(--blue-800-rgb));--blue-900-rgb:114,183,249;--blue-900:rgba(var(--blue-900-rgb));--blue-1000-rgb:143,202,252;--blue-1000:rgba(var(--blue-1000-rgb));--blue-1100-rgb:174,219,254;--blue-1100:rgba(var(--blue-1100-rgb));--blue-1200-rgb:204,233,255;--blue-1200:rgba(var(--blue-1200-rgb));--blue-1300-rgb:232,246,255;--blue-1300:rgba(var(--blue-1300-rgb));--blue-1400-rgb:255,255,255;--blue-1400:rgba(var(--blue-1400-rgb));--red-100-rgb:123,0,0;--red-100:rgba(var(--red-100-rgb));--red-200-rgb:141,0,0;--red-200:rgba(var(--red-200-rgb));--red-300-rgb:165,0,0;--red-300:rgba(var(--red-300-rgb));--red-400-rgb:190,4,3;--red-400:rgba(var(--red-400-rgb));--red-500-rgb:215,25,19;--red-500:rgba(var(--red-500-rgb));--red-600-rgb:234,56,41;--red-600:rgba(var(--red-600-rgb));--red-700-rgb:246,88,67;--red-700:rgba(var(--red-700-rgb));--red-800-rgb:255,117,94;--red-800:rgba(var(--red-800-rgb));--red-900-rgb:255,149,129;--red-900:rgba(var(--red-900-rgb));--red-1000-rgb:255,176,161;--red-1000:rgba(var(--red-1000-rgb));--red-1100-rgb:255,201,189;--red-1100:rgba(var(--red-1100-rgb));--red-1200-rgb:255,222,216;--red-1200:rgba(var(--red-1200-rgb));--red-1300-rgb:255,241,238;--red-1300:rgba(var(--red-1300-rgb));--red-1400-rgb:255,255,255;--red-1400:rgba(var(--red-1400-rgb));--gray-50-rgb:29,29,29;--gray-50:rgb(var(--gray-50-rgb));--gray-75-rgb:38,38,38;--gray-75:rgb(var(--gray-75-rgb));--gray-100-rgb:50,50,50;--gray-100:rgb(var(--gray-100-rgb));--gray-200-rgb:63,63,63;--gray-200:rgb(var(--gray-200-rgb));--gray-300-rgb:84,84,84;--gray-300:rgb(var(--gray-300-rgb));--gray-400-rgb:112,112,112;--gray-400:rgb(var(--gray-400-rgb));--gray-500-rgb:144,144,144;--gray-500:rgb(var(--gray-500-rgb));--gray-600-rgb:178,178,178;--gray-600:rgb(var(--gray-600-rgb));--gray-700-rgb:209,209,209;--gray-700:rgb(var(--gray-700-rgb));--gray-800-rgb:235,235,235;--gray-800:rgb(var(--gray-800-rgb));--gray-900-rgb:255,255,255;--gray-900:rgb(var(--gray-900-rgb))}";let e=["bg-bg","cs-cz","da-dk","de-de","el-gr","en-ae","en-gb","en-hr","en-il","en-ke","en-lk","en-mo","en-mu","en-ng","en-tt","en-us","en-vn","en-xm","es-bo","es-do","es-es","es-la","es-mx","es-na","es-pa","es-py","es-sv","es-uy","et-ee","fi-fi","fil-ph","fr-ca","fr-fr","fr-ma","fr-xm","hi-in","hr-hr","hu-hu","id-id","it-it","in-id","ja-jp","ko-kr","lt-lt","lv-lv","nb-no","nl-nl","ms-my","pl-pl","pt-br","ro-ro","ru-ru","sk-sk","sl-si","sr-rs","sr-sp","sv-se","th-th","tr-tr","uk-ua","vi-vn","zh-cn","zh-hans","zh-hant","zh-mo","zh-tw"],t=["en-us","es-es","fr-fr","sr-rs","zh-cn"];function a(r){let a=r.toLowerCase().replace("_","-"),[i]=a.split("-");if(e.includes(a))return a;let n=t.find(r=>r.startsWith(i))||e.find(r=>r.startsWith(i));return n||"en-us"}let i={LOCAL:"local",STAGE:"stage",PROD:"prod"};function n(r,e=!1){return e?i.STAGE:r.includes("localhost.corp.adobe.com")?i.LOCAL:r.includes("identity-stage.adobe.com")?i.STAGE:i.PROD}class s extends Error{name="ElmError"}let g={[i.LOCAL]:"https://localhost.corp.adobe.com:8081",[i.STAGE]:"https://auth-light.identity-stage.adobe.com/sentry",[i.PROD]:"https://auth-light.identity.adobe.com/sentry"},o={[i.LOCAL]:"https://localhost.corp.adobe.com:25000",[i.STAGE]:"https://auth-light.identity-stage.adobe.com",[i.PROD]:"https://auth-light.identity.adobe.com"},b={[i.LOCAL]:"https://localhost.corp.adobe.com:4200/signin",[i.STAGE]:"https://auth-stg1.services.adobe.com/signin/v1/audit",[i.PROD]:"https://auth.services.adobe.com/signin/v1/audit"};i.LOCAL,i.STAGE,i.PROD,i.LOCAL,i.STAGE,i.PROD;let l=r=>g[r],d=r=>o[r],u=r=>b[r],h=new Map,c=new Map;async function p(r,e=!1){let t=e?h:c;if(t.has(r))return t.get(r);{var a;let i=n(window.location.href,e),s=l(i),g=(a=`${s}/${r.script}`,new Promise((r,e)=>{let t=document.createElement("script");t.src=a,document.head.appendChild(t),t.onload=r,t.onerror=e}));return t.set(r,g),g}}function m(r){try{return JSON.parse(r)}catch(e){return r}}function v(r,e,t){if(r&&Object.prototype.hasOwnProperty.call(r,e)&&"object"==typeof r[e]&&"function"==typeof r[e].subscribe){let a=r[e];a.subscribe(r=>t(m(r)))}else console.error("No port: "+e)}var y={variants:[["edu-express","EduExpress"],["sandbox","Sandbox"],["standard","Standard"]],locales:["bg-bg","cs-cz","da-dk","de-de","el-gr","en-ae","en-gb","en-hr","en-il","en-ke","en-lk","en-mo","en-mu","en-ng","en-tt","en-us","en-vn","en-xm","es-bo","es-do","es-es","es-la","es-mx","es-na","es-pa","es-py","es-sv","es-uy","et-ee","fi-fi","fil-ph","fr-ca","fr-fr","fr-ma","fr-xm","hi-in","hr-hr","hu-hu","id-id","in-id","it-it","ja-jp","ko-kr","lt-lt","lv-lv","ms-my","nb-no","nl-nl","pl-pl","pt-br","ro-ro","ru-ru","sk-sk","sl-si","sr-rs","sr-sp","sv-se","th-th","tr-tr","uk-ua","vi-vn","zh-cn","zh-hans","zh-hant","zh-mo","zh-tw"],example:"__NAME__.__LOCALE__.69bbf9e3.js"};let f=new Map(y.variants),w=new Map;function _(r,e){let t=f.get(r),i=a(e);if(!t)throw Error("Invalid variant.");y.locales.includes(i)||(console.warn(`Locale ${i} not found for variant ${r}, defaulting to "en-us".`),i="en-us");let n=y.example.replace("__NAME__",r).replace("__LOCALE__",i);return w.has(n)||w.set(n,{script:n,name:t,translations:y.translations}),w.get(n)}let E=["relay","client_id","locale","redirect_uri","scope","sl","response_type","dt"];document.querySelectorAll('meta[name="susi-sentry-preload"]').forEach(r=>{let e="true"===r.dataset.stage,t=r.dataset.locale,a=_(r.content,t);a&&p(a,e)});class P extends HTMLElement{renderRoot;isConstructed=!1;_authparams=null;_config=null;_variant=null;_stage=!1;_popup=!1;module;_variantPromise=null;logMessage;requiredParams=["authParams","config","variant"];constructor(){super();try{this.renderRoot=this.attachShadow({mode:"open"}),this.popup=this.getAttribute("popup"),this.stage=this.getAttribute("stage"),this.variant=this.getAttribute("variant")}catch(r){console.warn("SUSI Light - Missing parameters on init.",r)}}connectedCallback(){this.isConstructed=!0,this.attemptRenderModule()}set variant(r){r&&(this._variant=r),this.attemptRenderModule()}get variant(){return this._variant??""}get locale(){return this.authParams.locale}get popup(){return this._popup}set popup(r){this._popup="string"==typeof r?"true"===r:!!r,this.attemptRenderModule()}get stage(){return this._stage}set stage(r){this._stage="string"==typeof r?"true"===r:!!r,this.attemptRenderModule()}get darkMode(){return this.authParams?.dt}set authParams(r){this._authparams=r,this.attemptRenderModule()}get authParams(){return this._authparams}set config(r){this._config=r,this.attemptRenderModule()}get config(){return this._config}get systemParams(){return{mode:this.popup?"popup":"redirect"}}get appState(){if(!this.authParams)return{};let r=this.authParams.relay??function(){let r=new Uint8Array(16);crypto.getRandomValues(r),r[6]=15&r[6]|64,r[8]=63&r[8]|128;let e=Array.from(r,r=>r.toString(16).padStart(2,"0")),t=[...e.slice(0,4),"-",...e.slice(4,6),"-",...e.slice(6,8),"-",...e.slice(8,10),"-",...e.slice(10)].join("");return t}(),e=!!this.stage,t={...this.authParams,sl:window.origin,sl_stage:e,relay:r},a=r=>E.includes(r),i=Object.fromEntries(Object.entries(t).filter(([r,e])=>e&&a(r))),n=Object.entries(t).map(([r,e])=>[r,e.toString()]);return{queryState:i,authParams:n,systemParams:this.systemParams,config:this.config}}async initializeApplication(r,e){var t,g;let o=n(window.location.href,this.stage),b=(t=this.module,g=a(this.locale),o===i.LOCAL?t.translations:window.ElmTranslations[t.name][g]),l=window.Elm[this.module.name].Main.init({node:r,flags:{...this.appState,translations:b}});return l.ports&&(v(l.ports,"onOpenPopup",r=>{!function({url:r,title:e,w:t,h:a}){let i=void 0!==window.screenLeft?window.screenLeft:window.screenX,n=void 0!==window.screenTop?window.screenTop:window.screenY,s=window.innerWidth?window.innerWidth:document.documentElement.clientWidth?document.documentElement.clientWidth:screen.width,g=window.innerHeight?window.innerHeight:document.documentElement.clientHeight?document.documentElement.clientHeight:screen.height,o=(s-parseInt(t))/2+i,b=(g-parseInt(a))/2+n;window.open(r,e,` + menubar=0, + resizable=0, + scrollbars=no, + width=${t}, + height=${a}, + top=${b}, + left=${o} + `)}({url:r,title:"SUSI Light Login",w:"688",h:"768"})}),v(l.ports,"onSentryEvent",r=>{this.dispatchEvent(new CustomEvent(r.name,{detail:r.data})),"on-analytics"===r.name&&(e.postMessage(r),this.logMessage({name:"app-analytics",message:r.data}))}),v(l.ports,"onLogMessage",r=>{if("app-error"===r.name){let e=new s(r.message);this.dispatchError(e)}else this.logMessage(r)})),l}static observedAttributes=["authParams","config","stage","variant","stage","popup"];createShadow(){return this.attachShadow({mode:"closed"})}renderModule(){this.module=_(this.variant,this.locale),this._variantPromise=p(this.module,this.stage),this.isConstructed&&this.render()}attemptRenderModule(){let r=this.requiredParams.filter(r=>!this[r]);if(r.length>0){console.warn(`All required parameters not yet supplied: ${r.join(", ")}`);return}let{queryState:e}=this.appState,t=n(window.location.href,this.stage);this.logMessage=function(r,e,t,a){let n=function(r){switch(r){case i.LOCAL:return"susi-light-local";case i.STAGE:return"susi-light-stage";case i.PROD:return"susi-light-prod";default:return"susi-light-unknown"}}(r);return function(i){fetch(u(r),{method:"POST",headers:{"Content-Type":"application/json","X-IMS-CLIENTID":e,"X-DEBUG-ID":t},body:JSON.stringify({...i,variant:a,envName:n,clientId:e})})}}(t,e.client_id,e.relay,this.variant),this.renderModule()}async render(){var e;let t=n(window.location.href,this.stage),a=d(t),i=new Promise((r,e)=>{window.addEventListener("message",function t(i){if(a.includes(i.origin)){if("connection-invalid-origin"===i.data)e(Error("Invalid origin")),window.removeEventListener("message",t);else if("connection"===i.data){if(0===i.ports.length)return e(Error("Missing port"));r(i.ports[0]),window.removeEventListener("message",t)}}})}),{client_id:s,relay:g}=this.appState.queryState,o=this.authParams.st_valid_origin,b=this.darkMode?"dark-mode":"light-mode";if(this.shadowRoot)this.shadowRoot.innerHTML=` + +
+
+
+