ngx-xtroedge-cms 1.3.1 → 1.3.3

package/dist/index.mjs

@@ -237,6 +237,58 @@ var CMS_STYLES = `
 }
 .lcms-spinner-lg { width: 36px; height: 36px; border: 3px solid rgba(255,255,255,0.2); border-top-color: var(--lcms-primary, #00C853); border-radius: 50%; animation: lcmsSpin 0.6s linear infinite; }
 
+/* LOGIN MODAL */
+.lcms-login-overlay {
+  position: fixed; inset: 0; z-index: 10010;
+  display: flex; align-items: center; justify-content: center;
+  background: rgba(8, 8, 15, 0.75);
+  backdrop-filter: blur(16px) saturate(1.4);
+  -webkit-backdrop-filter: blur(16px) saturate(1.4);
+  font-family: system-ui, -apple-system, sans-serif;
+}
+.lcms-login-box {
+  background: #13151a; border: 1px solid rgba(255,255,255,0.1);
+  border-radius: 16px; padding: 36px 32px; width: 340px;
+  box-shadow: 0 24px 60px rgba(0,0,0,0.6);
+}
+.lcms-login-logo {
+  display: flex; align-items: center; justify-content: center;
+  gap: 8px; margin-bottom: 24px;
+}
+.lcms-login-logo-icon {
+  width: 32px; height: 32px; border-radius: 8px;
+  background: linear-gradient(135deg, var(--lcms-primary, #00C853), var(--lcms-primary-dark, #2E7D32));
+  display: flex; align-items: center; justify-content: center;
+}
+.lcms-login-logo-text { color: white; font-size: 15px; font-weight: 700; letter-spacing: 0.5px; }
+.lcms-login-title { color: white; font-size: 18px; font-weight: 700; text-align: center; margin-bottom: 6px; }
+.lcms-login-sub { color: rgba(255,255,255,0.4); font-size: 12px; text-align: center; margin-bottom: 24px; }
+.lcms-login-field { margin-bottom: 14px; }
+.lcms-login-label { display: block; color: rgba(255,255,255,0.6); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.8px; margin-bottom: 6px; }
+.lcms-login-input {
+  width: 100%; box-sizing: border-box;
+  background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12);
+  border-radius: 8px; padding: 10px 12px;
+  color: white; font-size: 13px; font-family: inherit; outline: none;
+  transition: border-color 0.2s;
+}
+.lcms-login-input:focus { border-color: var(--lcms-primary, #00C853); }
+.lcms-login-input::placeholder { color: rgba(255,255,255,0.25); }
+.lcms-login-btn {
+  width: 100%; padding: 11px; margin-top: 6px; border: none; border-radius: 8px; cursor: pointer;
+  background: linear-gradient(135deg, var(--lcms-primary, #00C853), var(--lcms-primary-dark, #2E7D32));
+  color: white; font-size: 13px; font-weight: 700; font-family: inherit;
+  letter-spacing: 0.3px; transition: filter 0.2s;
+}
+.lcms-login-btn:hover { filter: brightness(1.1); }
+.lcms-login-btn:disabled { opacity: 0.6; cursor: not-allowed; }
+.lcms-login-error {
+  background: rgba(239,68,68,0.15); border: 1px solid rgba(239,68,68,0.3);
+  border-radius: 8px; padding: 9px 12px; color: #f87171;
+  font-size: 12px; text-align: center; margin-top: 12px; display: none;
+}
+.lcms-login-error.visible { display: block; }
+
 /* HIDDEN ELEMENTS */
 .lcms-hidden { display: none !important; }
 `;
@@ -286,6 +338,9 @@ var XtroedgeCMS = class _XtroedgeCMS {
     this.brandingEl = null;
     this.siteIdentifier = "";
     this.siteIdEl = null;
+    this.loginModalEl = null;
+    this.pendingEditMode = false;
+    // edit=true was requested but token missing
     // ===== State =====
     this.editMode = false;
     this.currentLang = "en";
@@ -475,12 +530,24 @@ var XtroedgeCMS = class _XtroedgeCMS {
       this.resetAll();
     }
     const editFromSession = sessionStorage.getItem("builder_edit_mode") === "true";
-    if (editViaParam || editFromSession) {
+    const wantsEdit = editViaParam || editFromSession;
+    if (wantsEdit) {
+      const token = localStorage.getItem("builder_token");
+      if (!token) {
+        this.pendingEditMode = true;
+        this.currentLang = this.detectCurrentLanguage();
+        this.setLoading(true);
+        setTimeout(() => {
+          this.loadTranslationsAndInit(false);
+          this.showLoginModal();
+        }, 300);
+        return;
+      }
       this.editMode = true;
     }
     this.currentLang = this.detectCurrentLanguage();
     this.setLoading(true);
-    const loadDraft = editViaParam || editFromSession;
+    const loadDraft = wantsEdit;
     setTimeout(() => {
       this.loadTranslationsAndInit(loadDraft);
     }, 300);
@@ -753,7 +820,7 @@ var XtroedgeCMS = class _XtroedgeCMS {
     if (this.containerSelector) {
       return document.querySelector(this.containerSelector) || document.body;
     }
-    return document.querySelector(".layout") || document.body;
+    return document.body;
   }
   autoDetectElements() {
     const container = this.resolveContainer();
@@ -761,7 +828,29 @@ var XtroedgeCMS = class _XtroedgeCMS {
     for (const el of this.autoDetectedElements) {
       if (!document.contains(el)) this.autoDetectedElements.delete(el);
     }
+    const getSectionSlug = (el) => {
+      let parent = el.parentElement;
+      while (parent && parent !== document.body) {
+        const tag = parent.tagName.toLowerCase();
+        if (tag === "header" || tag.endsWith("-header")) return "/header";
+        if (tag === "footer" || tag.endsWith("-footer")) return "/footer";
+        parent = parent.parentElement;
+      }
+      return this.currentSlug;
+    };
     const tagCounters = {};
+    const assignKey = (el, sectionSlug) => {
+      const sectionKey = sectionSlug === "/header" ? "header" : sectionSlug === "/footer" ? "footer" : "page";
+      if (!tagCounters[sectionKey]) tagCounters[sectionKey] = {};
+      const tag = el.tagName.toLowerCase();
+      if (!tagCounters[sectionKey][tag]) tagCounters[sectionKey][tag] = 0;
+      const prefix = sectionKey !== "page" ? `${sectionKey}_` : "";
+      const key = `${prefix}xcms_${tag}_${tagCounters[sectionKey][tag]}`;
+      tagCounters[sectionKey][tag]++;
+      el.setAttribute("data-cms", key);
+      el.setAttribute("data-cms-section", sectionSlug);
+      this.autoDetectedElements.add(el);
+    };
     const selector = this.editableTags.join(",");
     const elements = container.querySelectorAll(selector);
     elements.forEach((el) => {
@@ -770,12 +859,13 @@ var XtroedgeCMS = class _XtroedgeCMS {
       if (el.children.length > 3) return;
       const text = this.getDirectTextContent(el).trim();
       if (text.length < 2) return;
-      const tag = el.tagName.toLowerCase();
-      if (!tagCounters[tag]) tagCounters[tag] = 0;
-      const key = `xcms_${tag}_${tagCounters[tag]}`;
-      tagCounters[tag]++;
-      el.setAttribute("data-cms", key);
-      this.autoDetectedElements.add(el);
+      assignKey(el, getSectionSlug(el));
+    });
+    const dataEditables = container.querySelectorAll("[data-editable]");
+    dataEditables.forEach((el) => {
+      if (el.hasAttribute("data-cms")) return;
+      if (el.closest("#xtroedge-cms-root, script, style, noscript")) return;
+      assignKey(el, getSectionSlug(el));
     });
   }
   scanDOM() {
@@ -846,8 +936,13 @@ var XtroedgeCMS = class _XtroedgeCMS {
       const currentVal = this.getPageText(key);
       if (text !== currentVal) this.onTextChanged(key, text);
     };
-    this.managedElements.set(el, { key, blurHandler, keydownHandler, inputHandler });
-    if (this.editMode) this.enableElementEdit(el, key, blurHandler, keydownHandler, inputHandler);
+    const clickHandler = (e) => {
+      e.preventDefault();
+      e.stopPropagation();
+    };
+    const sectionSlug = el.getAttribute("data-cms-section") || this.currentSlug;
+    this.managedElements.set(el, { key, sectionSlug, blurHandler, keydownHandler, inputHandler, clickHandler });
+    if (this.editMode) this.enableElementEdit(el, key, blurHandler, keydownHandler, inputHandler, clickHandler);
   }
   detachElement(el) {
     const info = this.managedElements.get(el);
@@ -855,11 +950,12 @@ var XtroedgeCMS = class _XtroedgeCMS {
       el.removeEventListener("blur", info.blurHandler);
       el.removeEventListener("keydown", info.keydownHandler);
       el.removeEventListener("input", info.inputHandler);
+      el.removeEventListener("click", info.clickHandler, true);
       el.removeAttribute("contenteditable");
       this.managedElements.delete(el);
     }
   }
-  enableElementEdit(el, _key, blurH, keyH, inputH) {
+  enableElementEdit(el, _key, blurH, keyH, inputH, clickH) {
     const val = this.getPageText(_key);
     if (val) el.textContent = val;
     el.setAttribute("contenteditable", "true");
@@ -873,8 +969,9 @@ var XtroedgeCMS = class _XtroedgeCMS {
     el.addEventListener("blur", blurH);
     el.addEventListener("keydown", keyH);
     el.addEventListener("input", inputH);
+    el.addEventListener("click", clickH, true);
   }
-  disableElementEdit(el, _key, blurH, keyH, inputH) {
+  disableElementEdit(el, _key, blurH, keyH, inputH, clickH) {
     el.removeAttribute("contenteditable");
     el.style.borderBottom = "";
     el.style.padding = "";
@@ -888,11 +985,12 @@ var XtroedgeCMS = class _XtroedgeCMS {
     el.removeEventListener("blur", blurH);
     el.removeEventListener("keydown", keyH);
     el.removeEventListener("input", inputH);
+    el.removeEventListener("click", clickH, true);
   }
   applyEditMode(editMode) {
     for (const [el, info] of this.managedElements) {
-      if (editMode) this.enableElementEdit(el, info.key, info.blurHandler, info.keydownHandler, info.inputHandler);
-      else this.disableElementEdit(el, info.key, info.blurHandler, info.keydownHandler, info.inputHandler);
+      if (editMode) this.enableElementEdit(el, info.key, info.blurHandler, info.keydownHandler, info.inputHandler, info.clickHandler);
+      else this.disableElementEdit(el, info.key, info.blurHandler, info.keydownHandler, info.inputHandler, info.clickHandler);
     }
     this.applyImageEditMode(editMode);
   }
@@ -1214,23 +1312,43 @@ var XtroedgeCMS = class _XtroedgeCMS {
   getPageSection() {
     return this.currentSlug.replace(/^\//, "").replace(/-/g, "_").toUpperCase();
   }
+  // Fetch texts for a single slug and merge into pageTexts
+  async fetchSectionTexts(slug, status) {
+    try {
+      const res = await fetch(`${this.config.apiBase}/web-page/get?slug=${encodeURIComponent(slug)}&status=${status}&site_identifier=${encodeURIComponent(this.siteIdentifier)}`);
+      if (!res.ok) return null;
+      const page = await res.json();
+      return page?.published_content?.texts || page?.content?.texts || null;
+    } catch {
+      return null;
+    }
+  }
   async loadPageContent(status) {
     this.setLoading(true);
     this.cleanOldHistory();
     try {
-      const res = await fetch(`${this.config.apiBase}/web-page/get?slug=${encodeURIComponent(this.currentSlug)}&status=${status}&site_identifier=${encodeURIComponent(this.siteIdentifier)}`);
-      if (!res.ok) throw new Error(`HTTP ${res.status}`);
-      const page = await res.json();
-      const texts = page?.published_content?.texts || page?.content?.texts;
-      if (texts) {
-        this.pageTexts = JSON.parse(JSON.stringify(texts));
+      const [pageTexts, headerTexts, footerTexts] = await Promise.all([
+        this.fetchSectionTexts(this.currentSlug, status),
+        this.fetchSectionTexts("/header", status),
+        this.fetchSectionTexts("/footer", status)
+      ]);
+      if (pageTexts || headerTexts || footerTexts) {
+        this.pageTexts = {
+          ...pageTexts || {},
+          ...headerTexts || {},
+          ...footerTexts || {}
+        };
       } else {
         this.buildDefaultTexts();
       }
-      const images = page?.published_content?.images || page?.content?.images;
-      if (images) {
-        this.pageImages = JSON.parse(JSON.stringify(images));
-        this.applyPageImages();
+      const resImg = await fetch(`${this.config.apiBase}/web-page/get?slug=${encodeURIComponent(this.currentSlug)}&status=${status}&site_identifier=${encodeURIComponent(this.siteIdentifier)}`).catch(() => null);
+      if (resImg?.ok) {
+        const page = await resImg.json();
+        const images = page?.published_content?.images || page?.content?.images;
+        if (images) {
+          this.pageImages = JSON.parse(JSON.stringify(images));
+          this.applyPageImages();
+        }
       }
       this.originalTexts = JSON.parse(JSON.stringify(this.pageTexts));
       this.originalImages = JSON.parse(JSON.stringify(this.pageImages));
@@ -1248,18 +1366,24 @@ var XtroedgeCMS = class _XtroedgeCMS {
   async loadPublishedContent() {
     this.setLoading(true);
     try {
-      const res = await fetch(`${this.config.apiBase}/web-page/get?slug=${encodeURIComponent(this.currentSlug)}&status=published&site_identifier=${encodeURIComponent(this.siteIdentifier)}`);
-      if (!res.ok) throw new Error(`HTTP ${res.status}`);
-      const page = await res.json();
-      const texts = page?.published_content?.texts;
-      if (texts && Object.keys(texts).length > 0) {
-        this.pageTexts = JSON.parse(JSON.stringify(texts));
+      const [pageTexts, headerTexts, footerTexts] = await Promise.all([
+        this.fetchSectionTexts(this.currentSlug, "published"),
+        this.fetchSectionTexts("/header", "published"),
+        this.fetchSectionTexts("/footer", "published")
+      ]);
+      const merged = { ...pageTexts || {}, ...headerTexts || {}, ...footerTexts || {} };
+      if (Object.keys(merged).length > 0) {
+        this.pageTexts = JSON.parse(JSON.stringify(merged));
         this.updateElementTexts();
       }
-      const images = page?.published_content?.images;
-      if (images && Object.keys(images).length > 0) {
-        this.pageImages = JSON.parse(JSON.stringify(images));
-        this.applyPageImages();
+      const res = await fetch(`${this.config.apiBase}/web-page/get?slug=${encodeURIComponent(this.currentSlug)}&status=published&site_identifier=${encodeURIComponent(this.siteIdentifier)}`);
+      if (res.ok) {
+        const page = await res.json();
+        const images = page?.published_content?.images;
+        if (images && Object.keys(images).length > 0) {
+          this.pageImages = JSON.parse(JSON.stringify(images));
+          this.applyPageImages();
+        }
       }
     } catch {
     } finally {
@@ -1297,6 +1421,18 @@ var XtroedgeCMS = class _XtroedgeCMS {
       }
     }
   }
+  // Group pageTexts by section slug based on managedElements info
+  groupTextsBySection() {
+    const sections = {};
+    for (const [, info] of this.managedElements) {
+      const slug = info.sectionSlug;
+      if (!sections[slug]) sections[slug] = {};
+      if (this.pageTexts[info.key] !== void 0) {
+        sections[slug][info.key] = this.pageTexts[info.key];
+      }
+    }
+    return sections;
+  }
   async saveChanges() {
     if (!this.config.apiBase) {
       this.showToast("No API configured. Set apiBase to enable save.", "error");
@@ -1304,19 +1440,22 @@ var XtroedgeCMS = class _XtroedgeCMS {
     }
     this.isSaving = true;
     this.updateUI();
-    const payload = {
-      slug: this.currentSlug,
-      title: this.currentTitle,
-      site_identifier: this.siteIdentifier,
-      content: { texts: this.pageTexts, images: this.pageImages }
-    };
     try {
-      const res = await fetch(`${this.config.apiBase}/web_page/save`, {
-        method: "POST",
-        headers: { "Content-Type": "application/json" },
-        body: JSON.stringify(payload)
-      });
-      if (!res.ok) throw new Error(`HTTP ${res.status}`);
+      const sections = this.groupTextsBySection();
+      const requests = Object.entries(sections).map(
+        ([slug, texts]) => fetch(`${this.config.apiBase}/web_page/save`, {
+          method: "POST",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify({
+            slug,
+            title: slug === this.currentSlug ? this.currentTitle : slug.replace("/", ""),
+            site_identifier: this.siteIdentifier,
+            content: { texts, ...slug === this.currentSlug ? { images: this.pageImages } : {} }
+          })
+        })
+      );
+      const results = await Promise.all(requests);
+      if (results.some((r) => !r.ok)) throw new Error("One or more sections failed to save");
       this.isSaving = false;
       this.resetAfterSave();
       this.updateUI();
@@ -1336,19 +1475,22 @@ var XtroedgeCMS = class _XtroedgeCMS {
     }
     this.isPublishing = true;
     this.updateUI();
-    const payload = {
-      slug: this.currentSlug,
-      title: this.currentTitle,
-      site_identifier: this.siteIdentifier,
-      published_content: { texts: this.pageTexts, images: this.pageImages }
-    };
     try {
-      const res = await fetch(`${this.config.apiBase}/web_page/publish`, {
-        method: "POST",
-        headers: { "Content-Type": "application/json" },
-        body: JSON.stringify(payload)
-      });
-      if (!res.ok) throw new Error(`HTTP ${res.status}`);
+      const sections = this.groupTextsBySection();
+      const requests = Object.entries(sections).map(
+        ([slug, texts]) => fetch(`${this.config.apiBase}/web_page/publish`, {
+          method: "POST",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify({
+            slug,
+            title: slug === this.currentSlug ? this.currentTitle : slug.replace("/", ""),
+            site_identifier: this.siteIdentifier,
+            published_content: { texts, ...slug === this.currentSlug ? { images: this.pageImages } : {} }
+          })
+        })
+      );
+      const results = await Promise.all(requests);
+      if (results.some((r) => !r.ok)) throw new Error("One or more sections failed to publish");
       this.isPublishing = false;
       this.resetAfterSave();
       this.updateUI();
@@ -1616,6 +1758,89 @@ var XtroedgeCMS = class _XtroedgeCMS {
     return `${months[d.getMonth()]} ${d.getDate()}, ${h12}:${m} ${ampm}`;
   }
   // ===============================================
+  // LOGIN MODAL
+  // ===============================================
+  showLoginModal() {
+    if (this.loginModalEl) return;
+    const overlay = document.createElement("div");
+    overlay.className = "lcms-login-overlay";
+    overlay.id = "lcms-login-modal";
+    overlay.innerHTML = `
+      <div class="lcms-login-box">
+        <div class="lcms-login-logo">
+          <div class="lcms-login-logo-icon">
+            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"/></svg>
+          </div>
+          <span class="lcms-login-logo-text">XtroEdge CMS</span>
+        </div>
+        <div class="lcms-login-title">Builder Login</div>
+        <div class="lcms-login-sub">Sign in to access edit mode</div>
+        <div class="lcms-login-field">
+          <label class="lcms-login-label">Email or Username</label>
+          <input class="lcms-login-input" id="lcms-login-email" type="text" placeholder="Enter your email or username" autocomplete="username" />
+        </div>
+        <div class="lcms-login-field">
+          <label class="lcms-login-label">Password</label>
+          <input class="lcms-login-input" id="lcms-login-password" type="password" placeholder="Enter your password" autocomplete="current-password" />
+        </div>
+        <button class="lcms-login-btn" id="lcms-login-btn">Sign In</button>
+        <div class="lcms-login-error" id="lcms-login-error"></div>
+      </div>
+    `;
+    document.body.appendChild(overlay);
+    this.loginModalEl = overlay;
+    const btn = overlay.querySelector("#lcms-login-btn");
+    const emailInput = overlay.querySelector("#lcms-login-email");
+    const passInput = overlay.querySelector("#lcms-login-password");
+    const doLogin = () => this.attemptLogin(emailInput.value.trim(), passInput.value);
+    btn.addEventListener("click", doLogin);
+    passInput.addEventListener("keydown", (e) => {
+      if (e.key === "Enter") doLogin();
+    });
+    setTimeout(() => emailInput.focus(), 50);
+  }
+  hideLoginModal() {
+    this.loginModalEl?.remove();
+    this.loginModalEl = null;
+  }
+  async attemptLogin(email, password) {
+    const btn = document.getElementById("lcms-login-btn");
+    const errorEl = document.getElementById("lcms-login-error");
+    if (!email || !password) {
+      errorEl.textContent = "Please enter your email/username and password.";
+      errorEl.classList.add("visible");
+      return;
+    }
+    btn.disabled = true;
+    btn.textContent = "Signing in...";
+    errorEl.classList.remove("visible");
+    try {
+      const loginUrl = this.config.loginUrl || `${this.config.apiBase}/auth/login`;
+      const res = await fetch(loginUrl, {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ email, password })
+      });
+      if (!res.ok) throw new Error(`HTTP ${res.status}`);
+      const data = await res.json();
+      const token = data?.token || data?.authToken || data?.auth_token || data?.data?.token;
+      if (!token) throw new Error("No token in response");
+      localStorage.setItem("builder_token", token);
+      this.hideLoginModal();
+      this.editMode = true;
+      this.pendingEditMode = false;
+      sessionStorage.setItem("builder_edit_mode", "true");
+      this.applyEditMode(true);
+      this.updateUI();
+      this.loadPageContent("draft");
+    } catch {
+      btn.disabled = false;
+      btn.textContent = "Sign In";
+      errorEl.textContent = "Invalid credentials. Please try again.";
+      errorEl.classList.add("visible");
+    }
+  }
+  // ===============================================
   // SITE IDENTIFIER
   // ===============================================
   resolveSiteIdentifier() {