ngx-xtroedge-cms 1.3.2 → 1.3.4

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);
@@ -1691,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">Username</label>
+          <input class="lcms-login-input" id="lcms-login-email" type="text" placeholder="Enter your 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 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({ username: 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() {