nx-shell user warning

nx/blocks/shell/shell.css

@@ -16,3 +16,23 @@ iframe {
   width: 100%;
   height: 100%;
 }
+
+.nx-button-group {
+  display: flex;
+  gap: 10px;
+  justify-content: end;
+  margin-top: 20px;
+}
+
+.nx-dialog {
+  padding: 20px;
+  max-width: 600px;
+
+  h2 {
+    margin-bottom: 15px;
+  }
+
+  p {
+    margin-bottom: 10px;
+  }
+}

nx/blocks/shell/shell.js

@@ -8,6 +8,13 @@ import { loadIms } from '../../utils/ims.js';
 const IMS_DETAILS = await loadIms();
 const CHANNEL = new MessageChannel();
 
+await import('../../public/sl/components.js');
+
+const TRUSTED_ORGS = ['adobe'];
+const TRUSTED_APPS = [
+  'https://main--storefront-tools--adobe-commerce.aem.live/tools/site-creator/site-creator.html'
+];
+
 /**
  * Parses the current URL to extract view, organization, repository, reference, path, search, and hash information
  * @returns {Object} Object containing parsed URL components
@@ -72,15 +79,84 @@ function handleLoad({ target }) {
   }, 750);
 }
 
-/**
- * Initializes the shell by creating, configuring, and appending an iframe
- * @param {HTMLElement} el - The container element for the iframe
- */
-export default function init(el) {
+function createIframe(el) {
   if (!document.querySelector('header')) document.body.classList.add('no-shell');
   const iframe = document.createElement('iframe');
   iframe.setAttribute('allow', 'clipboard-write *');
   iframe.addEventListener('load', handleLoad);
   iframe.src = getUrl();
   el.append(iframe);
 }
+
+function isAppTrusted(org, repo, ref) {
+  const url = getUrl();
+  if (TRUSTED_ORGS.includes(org)) return true;
+  if (TRUSTED_APPS.some(trustedApp => url.startsWith(trustedApp))) return true;
+
+  const trustedApps = JSON.parse(localStorage.getItem('trustedApps') || '{}');
+  const appKey = `${org}/${repo}/${ref}`;
+  return trustedApps[appKey] === true;
+}
+
+function trustApp(org, repo, ref) {
+  const trustedApps = JSON.parse(localStorage.getItem('trustedApps') || '{}');
+  const appKey = `${org}/${repo}/${ref}`;
+  trustedApps[appKey] = true;
+  localStorage.setItem('trustedApps', JSON.stringify(trustedApps));
+}
+
+function showDisclaimer(el) {
+  const { org, repo, ref, path } = getParts();
+  const appName = path.split('/').pop();
+  const devWarning = ref !== 'main' 
+    ? `<p><b>Note:</b> You are accessing a development version of the app on branch <b>${ref}</b>.` 
+    : '';
+  const disclaimer = document.createElement('div');
+  disclaimer.classList.add('disclaimer');
+  disclaimer.innerHTML = `
+    <sl-dialog>
+      <div class="nx-dialog">
+        <h2>Warning</h2>
+        <div>
+        </div>
+        <p>You are about to access an app named <b>${appName}</b> hosted by <b>${org}/${repo}</b>.<br>
+        Make sure you trust the host <b>${org}/${repo}</b>. Their app may take any action on your behalf, including <b>deleting content</b> you have access to.</p>
+        ${devWarning}
+        <p><b>Are you sure you want to continue?</b></p>
+        <div class="nx-button-group">
+          <sl-button class="negative outline" name="continue">Continue</sl-button>
+          <sl-button name="cancel">Cancel</sl-button>
+        </div>
+      </div>
+    </sl-dialog>
+  `;
+  document.body.appendChild(disclaimer);
+  disclaimer.querySelector('sl-button[name="continue"]').addEventListener('click', () => {
+    trustApp(org, repo, ref);
+    createIframe(el);
+    disclaimer.remove();
+  });
+  disclaimer.querySelector('sl-button[name="cancel"]').addEventListener('click', () => {
+    disclaimer.remove();
+    window.location = '/';
+  });
+  disclaimer.querySelector('sl-dialog').showModal();
+  setTimeout(() => {
+    disclaimer.querySelector('sl-button[name="cancel"]').focus();
+  }, 400);
+}
+
+/**
+ * Initializes the shell by showing a disclaimer, and if approved, creating an iframe
+ * @param {HTMLElement} el - The container element for the iframe
+ */
+export default function init(el) {
+  const { org, repo, ref } = getParts();
+  const url = getUrl();
+
+  if (isAppTrusted(org, repo, ref)) {
+    createIframe(el);
+  } else {
+    showDisclaimer(el);
+  }
+}

nx/public/sl/components.css

@@ -224,6 +224,17 @@ svg.icon {
         background: var(--s2-red-800);
         border-color: var(--s2-red-800);
       }
+
+      &.outline {
+        background: transparent;
+        color: var(--s2-red-900);
+
+        &:hover {
+          background: transparent;
+          border-color: var(--s2-red-800);
+          color: var(--s2-red-800);
+        }
+      }
     }
 
     &.icon-only {