Merge branch 'main' of https://github.com/cloudadoption/diyfire into ue-support

Author: ravuthu

blocks/header/header.css

@@ -519,6 +519,39 @@ header nav .nav-tools a.button:any-link:not(.nav-tool) {
   transition: all 0.3s;
 }
 
+header nav .nav-tools a.button.nav-auth-link:any-link {
+  padding: 10px 14px;
+  min-height: 36px;
+  line-height: 1;
+  white-space: nowrap;
+}
+
+header nav .nav-auth-link .nav-auth-info {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 14px;
+  height: 14px;
+  margin-left: 8px;
+  border: 1px solid currentcolor;
+  border-radius: 50%;
+  font-size: 10px;
+  font-weight: 700;
+  line-height: 1;
+  text-transform: none;
+}
+
+header nav .nav-sections .default-content-wrapper > ul > li.nav-auth-mobile-item > p > a {
+  display: block;
+  color: inherit;
+  text-decoration: none;
+}
+
+header nav .nav-sections .default-content-wrapper > ul > li.nav-auth-mobile-item > p > a:hover,
+header nav .nav-sections .default-content-wrapper > ul > li.nav-auth-mobile-item > p > a:focus-visible {
+  color: var(--nav-hover-color);
+}
+
 header nav .nav-tools a.button:any-link:not(.nav-tool):hover {
   background: var(--color-rust);
   color: var(--color-light);
@@ -735,6 +768,12 @@ header nav .nav-tools .nav-language-menu a:focus-visible {
       width: 16px;
       height: 16px;
     }
+
+    header nav .nav-tools a.button.nav-auth-link:any-link {
+      padding: 8px 10px;
+      font-size: var(--body-font-size-xs);
+      letter-spacing: 1px;
+    }
   }
 
   /* very small phones */
@@ -1168,6 +1207,10 @@ header nav .nav-tools .nav-language-menu a:focus-visible {
     width: 190px;
   }
 
+  header nav .nav-tools a.button.nav-auth-link:any-link {
+    padding: 12px 18px;
+  }
+
   header nav .nav-tools .nav-search-input:hover {
     border-color: light-dark(rgb(0 0 0 / 24%), rgb(255 255 255 / 30%));
   }
@@ -1177,6 +1220,57 @@ header nav .nav-tools .nav-language-menu a:focus-visible {
   }
 }
 
+@media (width <= 899px) {
+  header nav .nav-tools .nav-auth-desktop {
+    display: none;
+  }
+
+  header nav .nav-sections .default-content-wrapper > ul > li.nav-auth-mobile-item {
+    border-bottom: 0;
+    padding: var(--space-m) 0;
+    text-align: center;
+  }
+
+  header nav .nav-sections .default-content-wrapper > ul > li.nav-auth-mobile-item > p {
+    margin: 0;
+    padding: 0;
+    justify-content: center;
+  }
+
+  header nav .nav-sections .default-content-wrapper > ul > li.nav-auth-mobile-item > p > a.button.nav-auth-mobile:any-link {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    border: 1.5px solid var(--color-rust);
+    border-radius: 4px;
+    background: transparent;
+    color: var(--color-rust);
+    padding: 12px 24px;
+    font-size: 0.75rem;
+    font-weight: 700;
+    text-transform: uppercase;
+    letter-spacing: 1.5px;
+    line-height: 1;
+    min-width: 120px;
+    text-decoration: none;
+  }
+
+  header nav .nav-sections .default-content-wrapper > ul > li.nav-auth-mobile-item > p > a.button.nav-auth-mobile:any-link:hover,
+  header nav .nav-sections .default-content-wrapper > ul > li.nav-auth-mobile-item > p > a.button.nav-auth-mobile:any-link:focus-visible {
+    background: var(--color-rust);
+    color: var(--color-light);
+    transform: none;
+    box-shadow: none;
+    text-decoration: none;
+  }
+}
+
+@media (width >= 900px) {
+  header nav .nav-sections .default-content-wrapper > ul > li.nav-auth-mobile-item {
+    display: none;
+  }
+}
+
 /* large screens: 1200px */
 @media (width >= 1200px) {
   header nav {

blocks/header/header.js

@@ -7,6 +7,12 @@
 import { getMetadata } from '../../scripts/aem.js';
 import { loadFragment } from '../fragment/fragment.js';
 import { getBlockContext } from '../../scripts/shared.js';
+import {
+  getLoginUrl,
+  getLogoutUrl,
+  getDefaultAuthLabel,
+  getSessionState,
+} from '../../scripts/shared/auth-api.js';
 
 const DESKTOP = window.matchMedia('(min-width: 900px)');
 const THEME_KEY = 'diyfire-theme';
@@ -231,6 +237,99 @@ function getCookie(name) {
   return decodeURIComponent(cookie.split('=').slice(1).join('='));
 }
 
+function hasCookieStartingWith(prefix) {
+  return document.cookie
+    .split(';')
+    .map((entry) => decodeURIComponent(entry.split('=')[0] || '').trim())
+    .some((cookieName) => cookieName.startsWith(prefix));
+}
+
+function isLoggedIn() {
+  return hasCookieStartingWith('CF_Authorization');
+}
+
+async function resolveAuthState() {
+  try {
+    const session = await getSessionState();
+    return {
+      authenticated: Boolean(session?.authenticated),
+      email: session?.email || '',
+    };
+  } catch (e) {
+    return {
+      authenticated: isLoggedIn(),
+      email: '',
+    };
+  }
+}
+
+function setAuthUserInfo(link, email) {
+  link.querySelector('.nav-auth-info')?.remove();
+  link.removeAttribute('title');
+  link.removeAttribute('data-auth-email');
+
+  if (!email) return;
+
+  link.dataset.authEmail = email;
+  link.setAttribute('title', email);
+  const info = document.createElement('span');
+  info.className = 'nav-auth-info';
+  info.setAttribute('aria-hidden', 'true');
+  info.setAttribute('title', email);
+  info.textContent = 'i';
+  link.append(info);
+}
+
+async function initAuth(nav, tools) {
+  const loginLabel = getDefaultAuthLabel('login');
+  const logoutLabel = getDefaultAuthLabel('logout');
+
+  const loginCandidate = tools.querySelector('a[href*="login" i], a[data-auth-link]');
+  const shouldCreateLink = !loginCandidate;
+
+  const desktopLink = loginCandidate || document.createElement('a');
+  if (shouldCreateLink) {
+    desktopLink.href = getLoginUrl();
+    desktopLink.className = 'button nav-auth-link nav-auth-desktop';
+    tools.append(desktopLink);
+  }
+
+  desktopLink.dataset.authLink = 'true';
+  if (!desktopLink.classList.contains('button')) desktopLink.classList.add('button');
+  desktopLink.classList.add('nav-auth-link', 'nav-auth-desktop');
+
+  let mobileLink = nav.querySelector('.nav-auth-mobile-item a');
+  if (!mobileLink) {
+    const mobileList = nav.querySelector('.nav-sections .default-content-wrapper > ul');
+    if (mobileList) {
+      const li = document.createElement('li');
+      li.className = 'nav-auth-mobile-item';
+      const p = document.createElement('p');
+      mobileLink = document.createElement('a');
+      mobileLink.className = 'button nav-auth-link nav-auth-mobile';
+      mobileLink.dataset.authLink = 'true';
+      p.append(mobileLink);
+      li.append(p);
+      mobileList.append(li);
+    }
+  }
+  if (mobileLink && !mobileLink.classList.contains('button')) mobileLink.classList.add('button');
+
+  const authState = await resolveAuthState();
+  const loggedIn = authState.authenticated;
+  const loginHref = getLoginUrl();
+  const logoutHref = getLogoutUrl();
+  const targetHref = loggedIn ? logoutHref : loginHref;
+  const label = loggedIn ? logoutLabel : loginLabel;
+
+  [desktopLink, mobileLink].filter(Boolean).forEach((link) => {
+    link.setAttribute('href', targetHref);
+    link.textContent = label;
+    link.setAttribute('aria-label', label);
+    setAuthUserInfo(link, loggedIn ? authState.email : '');
+  });
+}
+
 function ensureGoogleTranslateScript() {
   if (window.__googleTranslateScriptLoaded) return Promise.resolve();
   if (window.__googleTranslateScriptPromise) return window.__googleTranslateScriptPromise;
@@ -437,6 +536,7 @@ export default async function decorate(block) {
   if (tools) {
     initTheme(tools);
     initSearch(tools);
+    await initAuth(nav, tools);
     initLanguage(tools, eventRoot);
     hydrateTranslateFromCookie();
   }

eslint.config.cjs

@@ -2,7 +2,7 @@ const js = require('@eslint/js');
 const globals = require('globals');
 
 module.exports = [
-  { ignores: ['helix-importer-ui/**', 'tools/**', '.skills/**', '**/*.min.js', '.eslintrc.js', 'eslint.config.cjs'] },
+  { ignores: ['helix-importer-ui/**', 'tools/**', '.skills/**', '**/*.min.js', '.eslintrc.js', 'eslint.config.cjs', 'plugins/**'] },
   js.configs.recommended,
   {
     languageOptions: {

package.json

@@ -13,6 +13,9 @@
     "build:json:definitions": "merge-json-cli -i \"ue/models/component-definition.json\" -o \"component-definition.json\"",
     "build:json:filters": "merge-json-cli -i \"ue/models/component-filters.json\" -o \"component-filters.json\"",
     "prepare": "husky",
+    "dev:auth": "wrangler dev --config ./workers/auth/wrangler.toml",
+    "deploy:auth": "wrangler deploy --config ./workers/auth/wrangler.toml",
+    "tail:auth": "wrangler tail --config ./workers/auth/wrangler.toml",
     "dev:contact-us": "wrangler dev --config ./workers/contact_us/wrangler.toml",
     "deploy:contact-us": "wrangler deploy --config ./workers/contact_us/wrangler.toml",
     "tail:contact-us": "wrangler tail --config ./workers/contact_us/wrangler.toml"

plugins/experimentation/.eslintrc.js

@@ -0,0 +1,21 @@
+module.exports = {
+  root: true,
+  extends: 'airbnb-base',
+  env: {
+    browser: true,
+  },
+  parser: '@babel/eslint-parser',
+  parserOptions: {
+    allowImportExportEverywhere: true,
+    sourceType: 'module',
+    requireConfigFile: false,
+  },
+  rules: {
+    // allow reassigning param
+    'no-param-reassign': [2, { props: false }],
+    'linebreak-style': ['error', 'unix'],
+    'import/extensions': ['error', {
+      js: 'always',
+    }],
+  },
+};

plugins/experimentation/.github/workflows/release.yaml

@@ -0,0 +1,35 @@
+name: Release
+on:
+  push:
+    branches:
+      - main
+
+permissions:
+  contents: read
+
+jobs:
+  release:
+    name: Release
+    runs-on: ubuntu-latest
+    permissions:
+      contents: write
+      issues: write
+      pull-requests: write
+      id-token: write
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v3
+        with:
+          fetch-depth: 0
+      - name: Setup Node.js
+        uses: actions/setup-node@v3
+        with:
+          node-version: "lts/*"
+      - name: Install dependencies
+        run: npm ci
+      - name: Verify the integrity of provenance attestations and registry signatures for installed dependencies
+        run: npm audit signatures
+      - name: Release
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+        run: npx semantic-release

plugins/experimentation/.releaserc

@@ -0,0 +1,14 @@
+{
+  "branches": ["main"],
+  "plugins": [
+    "@semantic-release/commit-analyzer",
+    "@semantic-release/release-notes-generator",
+    "@semantic-release/changelog",
+    "@semantic-release/npm",
+    ["@semantic-release/git", {
+      "assets": ["CHANGELOG.md", "package.json"],
+      "message": "chore(release): ${nextRelease.version} [skip ci]\n\n${nextRelease.notes}"
+    }]
+  ]
+
+}

plugins/experimentation/.stylelintrc.json

@@ -0,0 +1,8 @@
+{
+  "extends": [
+    "stylelint-config-standard"
+  ],
+  "rules": {
+    "declaration-block-no-redundant-longhand-properties": null
+  }
+}

plugins/experimentation/CHANGELOG.md

@@ -0,0 +1,27 @@
+## [1.0.4](https://github.com/adobe/aem-experimentation/compare/v1.0.3...v1.0.4) (2025-07-21)
+
+
+### Bug Fixes
+
+* prevent XSS vulnerabilities in preview overlay ([#52](https://github.com/adobe/aem-experimentation/issues/52)) ([960e094](https://github.com/adobe/aem-experimentation/commit/960e094d33a2b11decd3ad1b2e45d5c5c2366175))
+
+## [1.0.3](https://github.com/adobe/aem-experimentation/compare/v1.0.2...v1.0.3) (2024-10-06)
+
+
+### Bug Fixes
+
+* regressions from prerendering logic and experimeantation ([5b90510](https://github.com/adobe/aem-experimentation/commit/5b90510168be9f9b55fc71e9c227cadaf481b968))
+
+## [1.0.2](https://github.com/adobe/aem-experimentation/compare/v1.0.1...v1.0.2) (2024-06-11)
+
+
+### Bug Fixes
+
+* pill css loading on localhost ([a41fafc](https://github.com/adobe/aem-experimentation/commit/a41fafc1003ada023725a451fe2215947a9bdeb9))
+
+## [1.0.1](https://github.com/adobe/aem-experimentation/compare/v1.0.0...v1.0.1) (2024-05-24)
+
+
+### Bug Fixes
+
+* semantic release ([5040fa8](https://github.com/adobe/aem-experimentation/commit/5040fa88c7a01b032431967e230abaaf6d69f9d6))