@leadertechie/personal-site-kit 0.1.0-alpha.5 → 0.1.0-alpha.6

package/dist/chunks/{index-VimKeB5W.js → index-C3wLSCKU.js}

@@ -564,38 +564,151 @@ var __privateGet$3 = (obj, member, getter) => (__accessCheck$3(obj, member, "rea
 var __privateAdd$3 = (obj, member, value) => member.has(obj) ? __typeError$4("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
 var __privateSet$3 = (obj, member, value, setter) => (__accessCheck$3(obj, member, "write to private field"), setter ? setter.call(obj, value) : member.set(obj, value), value);
 var __privateMethod$3 = (obj, member, method) => (__accessCheck$3(obj, member, "access private method"), method);
-var _staticDetails_dec, _activeSection_dec, _statusMessage_dec, _contentList_dec, _isAuthenticated_dec, _apiKey_dec, _a$4, _AdminPortal_decorators, _init$4, _apiKey, _isAuthenticated, _contentList, _statusMessage, _activeSection, _staticDetails;
-console.log("[AdminPortal] Module loading");
-console.log("[AdminPortal] About to define custom element");
+var _loginError_dec, _staticDetails_dec, _activeSection_dec, _statusMessage_dec, _contentList_dec, _isLoading_dec, _isSetup_dec, _isAuthenticated_dec, _a$4, _AdminPortal_decorators, _init$4, _isAuthenticated, _isSetup, _isLoading, _contentList, _statusMessage, _activeSection, _staticDetails, _loginError;
 _AdminPortal_decorators = [customElement("admin-portal")];
-class AdminPortal extends (_a$4 = LitElement, _apiKey_dec = [state()], _isAuthenticated_dec = [state()], _contentList_dec = [state()], _statusMessage_dec = [state()], _activeSection_dec = [state()], _staticDetails_dec = [state()], _a$4) {
+class AdminPortal extends (_a$4 = LitElement, _isAuthenticated_dec = [state()], _isSetup_dec = [state()], _isLoading_dec = [state()], _contentList_dec = [state()], _statusMessage_dec = [state()], _activeSection_dec = [state()], _staticDetails_dec = [state()], _loginError_dec = [state()], _a$4) {
   constructor() {
     super(...arguments);
-    __privateAdd$3(this, _apiKey, __runInitializers$4(_init$4, 8, this, "")), __runInitializers$4(_init$4, 11, this);
-    __privateAdd$3(this, _isAuthenticated, __runInitializers$4(_init$4, 12, this, false)), __runInitializers$4(_init$4, 15, this);
-    __privateAdd$3(this, _contentList, __runInitializers$4(_init$4, 16, this, [])), __runInitializers$4(_init$4, 19, this);
-    __privateAdd$3(this, _statusMessage, __runInitializers$4(_init$4, 20, this, "")), __runInitializers$4(_init$4, 23, this);
-    __privateAdd$3(this, _activeSection, __runInitializers$4(_init$4, 24, this, "profile")), __runInitializers$4(_init$4, 27, this);
-    __privateAdd$3(this, _staticDetails, __runInitializers$4(_init$4, 28, this, {})), __runInitializers$4(_init$4, 31, this);
+    __privateAdd$3(this, _isAuthenticated, __runInitializers$4(_init$4, 8, this, false)), __runInitializers$4(_init$4, 11, this);
+    __privateAdd$3(this, _isSetup, __runInitializers$4(_init$4, 12, this, false)), __runInitializers$4(_init$4, 15, this);
+    __privateAdd$3(this, _isLoading, __runInitializers$4(_init$4, 16, this, true)), __runInitializers$4(_init$4, 19, this);
+    __privateAdd$3(this, _contentList, __runInitializers$4(_init$4, 20, this, [])), __runInitializers$4(_init$4, 23, this);
+    __privateAdd$3(this, _statusMessage, __runInitializers$4(_init$4, 24, this, "")), __runInitializers$4(_init$4, 27, this);
+    __privateAdd$3(this, _activeSection, __runInitializers$4(_init$4, 28, this, "profile")), __runInitializers$4(_init$4, 31, this);
+    __privateAdd$3(this, _staticDetails, __runInitializers$4(_init$4, 32, this, {})), __runInitializers$4(_init$4, 35, this);
+    __privateAdd$3(this, _loginError, __runInitializers$4(_init$4, 36, this, "")), __runInitializers$4(_init$4, 39, this);
   }
   get apiUrl() {
     return window.__VITE_API_URL__ || void 0 || "http://localhost:8787";
   }
-  handleLogin(e2) {
+  async connectedCallback() {
+    super.connectedCallback();
+    await this.checkAuthStatus();
+  }
+  async checkAuthStatus() {
+    try {
+      const res = await fetch(`${this.apiUrl}/auth/status`, {
+        credentials: "include"
+      });
+      if (res.ok) {
+        const status = await res.json();
+        this.isSetup = status.configured;
+        if (status.configured) {
+          await this.tryAutoLogin();
+        } else {
+          this.isLoading = false;
+        }
+      } else {
+        this.isSetup = false;
+        this.isLoading = false;
+      }
+    } catch (e2) {
+      this.isSetup = false;
+      this.isLoading = false;
+    }
+  }
+  async tryAutoLogin() {
+    try {
+      const res = await fetch(`${this.apiUrl}/content`, {
+        credentials: "include"
+      });
+      if (res.ok) {
+        this.contentList = await res.json();
+        this.isAuthenticated = true;
+      }
+    } catch (e2) {
+    }
+    this.isLoading = false;
+  }
+  async handleLogin(e2) {
     e2.preventDefault();
-    const input = this.shadowRoot?.querySelector("#apiKey");
-    if (input.value) {
-      this.apiKey = input.value;
-      this.isAuthenticated = true;
-      this.fetchContent();
+    this.loginError = "";
+    const usernameInput = this.shadowRoot?.querySelector("#username");
+    const passwordInput = this.shadowRoot?.querySelector("#password");
+    if (!usernameInput?.value || !passwordInput?.value) {
+      this.loginError = "Username and password required";
+      return;
+    }
+    try {
+      const res = await fetch(`${this.apiUrl}/auth/login`, {
+        method: "POST",
+        credentials: "include",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({
+          username: usernameInput.value,
+          password: passwordInput.value
+        })
+      });
+      if (res.ok) {
+        this.isAuthenticated = true;
+        await this.fetchContent();
+      } else {
+        const data = await res.json();
+        this.loginError = data.error || "Login failed";
+      }
+    } catch (e22) {
+      this.loginError = "Connection error";
+    }
+  }
+  async handleSetup(e2) {
+    e2.preventDefault();
+    this.loginError = "";
+    const usernameInput = this.shadowRoot?.querySelector("#username");
+    const passwordInput = this.shadowRoot?.querySelector("#password");
+    const confirmInput = this.shadowRoot?.querySelector("#confirmPassword");
+    if (!usernameInput?.value || !passwordInput?.value) {
+      this.loginError = "Username and password required";
+      return;
+    }
+    if (usernameInput.value.length < 3) {
+      this.loginError = "Username must be at least 3 characters";
+      return;
+    }
+    if (passwordInput.value.length < 8) {
+      this.loginError = "Password must be at least 8 characters";
+      return;
+    }
+    if (passwordInput.value !== confirmInput?.value) {
+      this.loginError = "Passwords do not match";
+      return;
+    }
+    try {
+      const res = await fetch(`${this.apiUrl}/auth/setup`, {
+        method: "POST",
+        credentials: "include",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({
+          username: usernameInput.value,
+          password: passwordInput.value
+        })
+      });
+      if (res.ok) {
+        this.isAuthenticated = true;
+        this.isSetup = true;
+        await this.fetchContent();
+      } else {
+        const data = await res.json();
+        this.loginError = data.error || "Setup failed";
+      }
+    } catch (e22) {
+      this.loginError = "Connection error";
     }
   }
+  async handleLogout() {
+    try {
+      await fetch(`${this.apiUrl}/auth/logout`, {
+        method: "POST",
+        credentials: "include"
+      });
+    } catch (e2) {
+    }
+    this.isAuthenticated = false;
+    this.contentList = [];
+  }
   async fetchContent() {
     try {
       const res = await fetch(`${this.apiUrl}/content`, {
-        headers: {
-          "Authorization": `Bearer ${this.apiKey}`
-        }
+        credentials: "include"
       });
       if (res.ok) {
         this.contentList = await res.json();
@@ -608,7 +721,9 @@ class AdminPortal extends (_a$4 = LitElement, _apiKey_dec = [state()], _isAuthen
   }
   async fetchStaticDetails() {
     try {
-      const res = await fetch(`${this.apiUrl}/api/static`);
+      const res = await fetch(`${this.apiUrl}/static`, {
+        credentials: "include"
+      });
       if (res.ok) {
         this.staticDetails = await res.json();
       }
@@ -620,9 +735,7 @@ class AdminPortal extends (_a$4 = LitElement, _apiKey_dec = [state()], _isAuthen
       this.statusMessage = "Uploading...";
       const res = await fetch(`${this.apiUrl}/content/${key}`, {
         method: "PUT",
-        headers: {
-          "Authorization": `Bearer ${this.apiKey}`
-        },
+        credentials: "include",
         body: file
       });
       if (res.ok) {
@@ -640,9 +753,7 @@ class AdminPortal extends (_a$4 = LitElement, _apiKey_dec = [state()], _isAuthen
       this.statusMessage = "Clearing cache...";
       const res = await fetch(`${this.apiUrl}/cache-clear`, {
         method: "POST",
-        headers: {
-          "Authorization": `Bearer ${this.apiKey}`
-        }
+        credentials: "include"
       });
       if (res.ok) {
         this.statusMessage = "Cache cleared!";
@@ -658,9 +769,7 @@ class AdminPortal extends (_a$4 = LitElement, _apiKey_dec = [state()], _isAuthen
     try {
       const res = await fetch(`${this.apiUrl}/content/${key}`, {
         method: "DELETE",
-        headers: {
-          "Authorization": `Bearer ${this.apiKey}`
-        }
+        credentials: "include"
       });
       if (res.ok) {
         this.fetchContent();
@@ -677,6 +786,39 @@ class AdminPortal extends (_a$4 = LitElement, _apiKey_dec = [state()], _isAuthen
   getSectionFiles(prefix) {
     return this.contentList.filter((c2) => c2.key.startsWith(prefix));
   }
+  renderLoginForm() {
+    return html`
+      <div class="container">
+        <div class="login-box">
+          <h2>Admin Setup</h2>
+          <p>Create your admin credentials</p>
+          <form @submit=${this.handleSetup}>
+            <input type="text" id="username" placeholder="Username (3+ chars)" />
+            <input type="password" id="password" placeholder="Password (8+ chars)" />
+            <input type="password" id="confirmPassword" placeholder="Confirm Password" />
+            ${this.loginError ? html`<div class="error-message">${this.loginError}</div>` : ""}
+            <button type="submit" class="btn-primary">Create Account</button>
+          </form>
+        </div>
+      </div>
+    `;
+  }
+  renderLogin() {
+    return html`
+      <div class="container">
+        <div class="login-box">
+          <h2>Admin Login</h2>
+          <p>Enter your credentials</p>
+          <form @submit=${this.handleLogin}>
+            <input type="text" id="username" placeholder="Username" autocomplete="username" />
+            <input type="password" id="password" placeholder="Password" autocomplete="current-password" />
+            ${this.loginError ? html`<div class="error-message">${this.loginError}</div>` : ""}
+            <button type="submit" class="btn-primary">Login</button>
+          </form>
+        </div>
+      </div>
+    `;
+  }
   renderHomeSection() {
     const home = this.getContent("home.md");
     return html`
@@ -875,67 +1017,6 @@ class AdminPortal extends (_a$4 = LitElement, _apiKey_dec = [state()], _isAuthen
       </div>
     `;
   }
-  render() {
-    if (!this.isAuthenticated) {
-      return html`
-        <div class="container">
-          <div class="login-box">
-            <h2>Admin Login</h2>
-            <p>Enter your API key to manage content</p>
-            <form @submit=${this.handleLogin}>
-              <input type="password" id="apiKey" placeholder="API Key" />
-              <button type="submit" class="btn-primary">Login</button>
-            </form>
-          </div>
-        </div>
-      `;
-    }
-    return html`
-      <div class="container">
-        <div class="header">
-          <h1>Content Manager</h1>
-          <button class="btn-secondary" @click=${() => this.handleClearCache()}>Clear Cache</button>
-        </div>
-        
-        <div class="nav-tabs">
-          <button class="nav-tab ${this.activeSection === "home" ? "active" : ""}" 
-            @click=${() => this.activeSection = "home"}>Home</button>
-          <button class="nav-tab ${this.activeSection === "profile" ? "active" : ""}" 
-            @click=${() => this.activeSection = "profile"}>Profile</button>
-          <button class="nav-tab ${this.activeSection === "aboutme" ? "active" : ""}"
-            @click=${() => this.activeSection = "aboutme"}>About Me</button>
-          <button class="nav-tab ${this.activeSection === "blogs" ? "active" : ""}"
-            @click=${() => this.activeSection = "blogs"}>Blogs</button>
-          <button class="nav-tab ${this.activeSection === "stories" ? "active" : ""}"
-            @click=${() => this.activeSection = "stories"}>Stories</button>
-          <button class="nav-tab ${this.activeSection === "images" ? "active" : ""}"
-            @click=${() => this.activeSection = "images"}>Images</button>
-          <button class="nav-tab ${this.activeSection === "logo" ? "active" : ""}"
-            @click=${() => this.activeSection = "logo"}>Logo</button>
-          <button class="nav-tab ${this.activeSection === "static" ? "active" : ""}"
-            @click=${() => {
-      this.activeSection = "static";
-      this.fetchStaticDetails();
-    }}>Site Settings</button>
-        </div>
-
-        ${this.statusMessage ? html`
-          <div class="status-message ${this.statusMessage.includes("successful") || this.statusMessage.includes("cleared") ? "success" : this.statusMessage.includes("failed") || this.statusMessage.includes("Error") ? "error" : ""}">
-            ${this.statusMessage}
-          </div>
-        ` : ""}
-
-        ${this.activeSection === "home" ? this.renderHomeSection() : ""}
-        ${this.activeSection === "profile" ? this.renderProfileSection() : ""}
-        ${this.activeSection === "aboutme" ? this.renderAboutMeSection() : ""}
-        ${this.activeSection === "blogs" ? this.renderBlogsSection() : ""}
-        ${this.activeSection === "stories" ? this.renderStoriesSection() : ""}
-        ${this.activeSection === "images" ? this.renderImagesSection() : ""}
-        ${this.activeSection === "logo" ? this.renderLogoSection() : ""}
-        ${this.activeSection === "static" ? this.renderStaticSection() : ""}
-      </div>
-    `;
-  }
   renderStaticSection() {
     return html`
       <div class="section">
@@ -983,7 +1064,8 @@ class AdminPortal extends (_a$4 = LitElement, _apiKey_dec = [state()], _isAuthen
         const url = `${this.apiUrl}/content/staticdetails.json`;
         const res = await fetch(url, {
           method: "PUT",
-          headers: { "Authorization": `Bearer ${this.apiKey}`, "Content-Type": "application/json" },
+          credentials: "include",
+          headers: { "Content-Type": "application/json" },
           body: JSON.stringify(data)
         });
         if (res.ok) {
@@ -999,20 +1081,81 @@ class AdminPortal extends (_a$4 = LitElement, _apiKey_dec = [state()], _isAuthen
       </div>
     `;
   }
+  render() {
+    if (this.isLoading) {
+      return html`<div class="container"><div class="loading">Loading...</div></div>`;
+    }
+    if (!this.isSetup) {
+      return this.renderLoginForm();
+    }
+    if (!this.isAuthenticated) {
+      return this.renderLogin();
+    }
+    return html`
+      <div class="container">
+        <div class="header">
+          <h1>Content Manager</h1>
+          <button class="btn-secondary" @click=${() => this.handleLogout()}>Logout</button>
+          <button class="btn-secondary" @click=${() => this.handleClearCache()}>Clear Cache</button>
+        </div>
+        
+        <div class="nav-tabs">
+          <button class="nav-tab ${this.activeSection === "home" ? "active" : ""}" 
+            @click=${() => this.activeSection = "home"}>Home</button>
+          <button class="nav-tab ${this.activeSection === "profile" ? "active" : ""}" 
+            @click=${() => this.activeSection = "profile"}>Profile</button>
+          <button class="nav-tab ${this.activeSection === "aboutme" ? "active" : ""}"
+            @click=${() => this.activeSection = "aboutme"}>About Me</button>
+          <button class="nav-tab ${this.activeSection === "blogs" ? "active" : ""}"
+            @click=${() => this.activeSection = "blogs"}>Blogs</button>
+          <button class="nav-tab ${this.activeSection === "stories" ? "active" : ""}"
+            @click=${() => this.activeSection = "stories"}>Stories</button>
+          <button class="nav-tab ${this.activeSection === "images" ? "active" : ""}"
+            @click=${() => this.activeSection = "images"}>Images</button>
+          <button class="nav-tab ${this.activeSection === "logo" ? "active" : ""}"
+            @click=${() => this.activeSection = "logo"}>Logo</button>
+          <button class="nav-tab ${this.activeSection === "static" ? "active" : ""}"
+            @click=${() => {
+      this.activeSection = "static";
+      this.fetchStaticDetails();
+    }}>Site Settings</button>
+        </div>
+
+        ${this.statusMessage ? html`
+          <div class="status-message ${this.statusMessage.includes("successful") || this.statusMessage.includes("cleared") ? "success" : this.statusMessage.includes("failed") || this.statusMessage.includes("Error") ? "error" : ""}">
+            ${this.statusMessage}
+          </div>
+        ` : ""}
+
+        ${this.activeSection === "home" ? this.renderHomeSection() : ""}
+        ${this.activeSection === "profile" ? this.renderProfileSection() : ""}
+        ${this.activeSection === "aboutme" ? this.renderAboutMeSection() : ""}
+        ${this.activeSection === "blogs" ? this.renderBlogsSection() : ""}
+        ${this.activeSection === "stories" ? this.renderStoriesSection() : ""}
+        ${this.activeSection === "images" ? this.renderImagesSection() : ""}
+        ${this.activeSection === "logo" ? this.renderLogoSection() : ""}
+        ${this.activeSection === "static" ? this.renderStaticSection() : ""}
+      </div>
+    `;
+  }
 }
 _init$4 = __decoratorStart$4(_a$4);
-_apiKey = /* @__PURE__ */ new WeakMap();
 _isAuthenticated = /* @__PURE__ */ new WeakMap();
+_isSetup = /* @__PURE__ */ new WeakMap();
+_isLoading = /* @__PURE__ */ new WeakMap();
 _contentList = /* @__PURE__ */ new WeakMap();
 _statusMessage = /* @__PURE__ */ new WeakMap();
 _activeSection = /* @__PURE__ */ new WeakMap();
 _staticDetails = /* @__PURE__ */ new WeakMap();
-__decorateElement$4(_init$4, 4, "apiKey", _apiKey_dec, AdminPortal, _apiKey);
+_loginError = /* @__PURE__ */ new WeakMap();
 __decorateElement$4(_init$4, 4, "isAuthenticated", _isAuthenticated_dec, AdminPortal, _isAuthenticated);
+__decorateElement$4(_init$4, 4, "isSetup", _isSetup_dec, AdminPortal, _isSetup);
+__decorateElement$4(_init$4, 4, "isLoading", _isLoading_dec, AdminPortal, _isLoading);
 __decorateElement$4(_init$4, 4, "contentList", _contentList_dec, AdminPortal, _contentList);
 __decorateElement$4(_init$4, 4, "statusMessage", _statusMessage_dec, AdminPortal, _statusMessage);
 __decorateElement$4(_init$4, 4, "activeSection", _activeSection_dec, AdminPortal, _activeSection);
 __decorateElement$4(_init$4, 4, "staticDetails", _staticDetails_dec, AdminPortal, _staticDetails);
+__decorateElement$4(_init$4, 4, "loginError", _loginError_dec, AdminPortal, _loginError);
 AdminPortal = __decorateElement$4(_init$4, 0, "AdminPortal", _AdminPortal_decorators, AdminPortal);
 AdminPortal.styles = adminStyles;
 __runInitializers$4(_init$4, 1, AdminPortal);

package/dist/index.js

@@ -1,6 +1,6 @@
 import { A, B, M, R, W, c, a, g, b, d, h, e, r, s, v } from "./chunks/website-api-DI3muo2s.js";
 import { WebsitePrerender } from "./prerender.js";
-import { A as A2, B as B2, F, M as M2, a as a2, S } from "./chunks/index-VimKeB5W.js";
+import { A as A2, B as B2, F, M as M2, a as a2, S } from "./chunks/index-C3wLSCKU.js";
 import { R as R2, S as S2, T, W as W2, b as b2, c as c2, g as g2, a as a3, i, r as r2 } from "./chunks/template-MawmknFQ.js";
 export {
   A as AUTH_KV,

package/dist/ui/admin/index.d.ts

@@ -13,14 +13,21 @@ interface StaticDetails {
 }
 export declare class AdminPortal extends LitElement {
     static styles: import('lit').CSSResult;
-    accessor apiKey: string;
     accessor isAuthenticated: boolean;
+    accessor isSetup: boolean;
+    accessor isLoading: boolean;
     accessor contentList: ContentItem[];
     accessor statusMessage: string;
     accessor activeSection: string;
     accessor staticDetails: StaticDetails;
+    accessor loginError: string;
     get apiUrl(): any;
-    handleLogin(e: Event): void;
+    connectedCallback(): Promise<void>;
+    checkAuthStatus(): Promise<void>;
+    tryAutoLogin(): Promise<void>;
+    handleLogin(e: Event): Promise<void>;
+    handleSetup(e: Event): Promise<void>;
+    handleLogout(): Promise<void>;
     fetchContent(): Promise<void>;
     fetchStaticDetails(): Promise<void>;
     handleUpload(key: string, file: File): Promise<void>;
@@ -28,6 +35,8 @@ export declare class AdminPortal extends LitElement {
     handleDelete(key: string): Promise<void>;
     getContent(key: string): ContentItem | undefined;
     getSectionFiles(prefix: string): ContentItem[];
+    renderLoginForm(): import('lit-html').TemplateResult<1>;
+    renderLogin(): import('lit-html').TemplateResult<1>;
     renderHomeSection(): import('lit-html').TemplateResult<1>;
     renderProfileSection(): import('lit-html').TemplateResult<1>;
     renderAboutMeSection(): import('lit-html').TemplateResult<1>;
@@ -35,8 +44,8 @@ export declare class AdminPortal extends LitElement {
     renderStoriesSection(): import('lit-html').TemplateResult<1>;
     renderImagesSection(): import('lit-html').TemplateResult<1>;
     renderLogoSection(): import('lit-html').TemplateResult<1>;
-    render(): import('lit-html').TemplateResult<1>;
     renderStaticSection(): import('lit-html').TemplateResult<1>;
+    render(): import('lit-html').TemplateResult<1>;
 }
 export {};
 //# sourceMappingURL=index.d.ts.map

package/dist/ui/admin/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/ui/admin/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAO5C,UAAU,WAAW;IACnB,GAAG,EAAE,MAAM,CAAC;IACZ,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAED,UAAU,aAAa;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAID,qBACa,WAAY,SAAQ,UAAU;IACzC,MAAM,CAAC,MAAM,0BAAe;IAG5B,QAAQ,CAAC,MAAM,SAAM;IAGrB,QAAQ,CAAC,eAAe,UAAS;IAGjC,QAAQ,CAAC,WAAW,EAAE,WAAW,EAAE,CAAM;IAGzC,QAAQ,CAAC,aAAa,SAAM;IAG5B,QAAQ,CAAC,aAAa,SAAa;IAGnC,QAAQ,CAAC,aAAa,EAAE,aAAa,CAAM;IAE3C,IAAI,MAAM,QAET;IAED,WAAW,CAAC,CAAC,EAAE,KAAK;IAUd,YAAY;IAiBZ,kBAAkB;IAWlB,YAAY,CAAC,GAAG,EAAE,MAAM,EAAE,IAAI,EAAE,IAAI;IAsBpC,gBAAgB;IAoBhB,YAAY,CAAC,GAAG,EAAE,MAAM;IAqB9B,UAAU,CAAC,GAAG,EAAE,MAAM,GAAG,WAAW,GAAG,SAAS;IAIhD,eAAe,CAAC,MAAM,EAAE,MAAM,GAAG,WAAW,EAAE;IAI9C,iBAAiB;IAuBjB,oBAAoB;IAuBpB,oBAAoB;IAuBpB,kBAAkB;IAuClB,oBAAoB;IAuCpB,mBAAmB;IA+BnB,iBAAiB;IA2BjB,MAAM;IA+DN,mBAAmB;CAiEpB"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/ui/admin/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAK5C,UAAU,WAAW;IACnB,GAAG,EAAE,MAAM,CAAC;IACZ,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAED,UAAU,aAAa;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAOD,qBACa,WAAY,SAAQ,UAAU;IACzC,MAAM,CAAC,MAAM,0BAAe;IAG5B,QAAQ,CAAC,eAAe,UAAS;IAGjC,QAAQ,CAAC,OAAO,UAAS;IAGzB,QAAQ,CAAC,SAAS,UAAQ;IAG1B,QAAQ,CAAC,WAAW,EAAE,WAAW,EAAE,CAAM;IAGzC,QAAQ,CAAC,aAAa,SAAM;IAG5B,QAAQ,CAAC,aAAa,SAAa;IAGnC,QAAQ,CAAC,aAAa,EAAE,aAAa,CAAM;IAG3C,QAAQ,CAAC,UAAU,SAAM;IAEzB,IAAI,MAAM,QAET;IAEK,iBAAiB;IAKjB,eAAe;IAwBf,YAAY;IAaZ,WAAW,CAAC,CAAC,EAAE,KAAK;IAmCpB,WAAW,CAAC,CAAC,EAAE,KAAK;IAoDpB,YAAY;IAWZ,YAAY;IAeZ,kBAAkB;IAWlB,YAAY,CAAC,GAAG,EAAE,MAAM,EAAE,IAAI,EAAE,IAAI;IAoBpC,gBAAgB;IAkBhB,YAAY,CAAC,GAAG,EAAE,MAAM;IAmB9B,UAAU,CAAC,GAAG,EAAE,MAAM,GAAG,WAAW,GAAG,SAAS;IAIhD,eAAe,CAAC,MAAM,EAAE,MAAM,GAAG,WAAW,EAAE;IAI9C,eAAe;IAkBf,WAAW;IAiBX,iBAAiB;IAuBjB,oBAAoB;IAuBpB,oBAAoB;IAuBpB,kBAAkB;IAuClB,oBAAoB;IAuCpB,mBAAmB;IA+BnB,iBAAiB;IA2BjB,mBAAmB;IAmEnB,MAAM;CA4DP"}

package/dist/ui.js

@@ -1,4 +1,4 @@
-import { A, B, F, M, a, S } from "./chunks/index-VimKeB5W.js";
+import { A, B, F, M, a, S } from "./chunks/index-C3wLSCKU.js";
 export {
   A as AdminPortal,
   B as BlogViewer,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@leadertechie/personal-site-kit",
-  "version": "0.1.0-alpha.5",
+  "version": "0.1.0-alpha.6",
   "type": "module",
   "description": "A high-performance personal website engine for Cloudflare Workers and R2",
   "repository": {

package/src/ui/admin/index.ts

@@ -3,8 +3,6 @@ import { customElement, state } from 'lit/decorators.js';
 
 import { adminStyles } from './styles';
 
-console.log('[AdminPortal] Module loading');
-
 interface ContentItem {
   key: string;
   size: number;
@@ -19,17 +17,23 @@ interface StaticDetails {
   email?: string;
 }
 
-console.log('[AdminPortal] About to define custom element');
+interface AuthStatus {
+  configured: boolean;
+  username: string | null;
+}
 
 @customElement('admin-portal')
 export class AdminPortal extends LitElement {
   static styles = adminStyles;
 
   @state()
-  accessor apiKey = '';
+  accessor isAuthenticated = false;
 
   @state()
-  accessor isAuthenticated = false;
+  accessor isSetup = false;
+
+  @state()
+  accessor isLoading = true;
 
   @state()
   accessor contentList: ContentItem[] = [];
@@ -43,26 +47,157 @@ export class AdminPortal extends LitElement {
   @state()
   accessor staticDetails: StaticDetails = {};
 
+  @state()
+  accessor loginError = '';
+
   get apiUrl() {
     return (window as any).__VITE_API_URL__ || import.meta.env.VITE_API_URL || 'http://localhost:8787';
   }
 
-  handleLogin(e: Event) {
+  async connectedCallback() {
+    super.connectedCallback();
+    await this.checkAuthStatus();
+  }
+
+  async checkAuthStatus() {
+    try {
+      const res = await fetch(`${this.apiUrl}/auth/status`, {
+        credentials: 'include'
+      });
+      if (res.ok) {
+        const status: AuthStatus = await res.json();
+        this.isSetup = status.configured;
+        
+        if (status.configured) {
+          await this.tryAutoLogin();
+        } else {
+          this.isLoading = false;
+        }
+      } else {
+        this.isSetup = false;
+        this.isLoading = false;
+      }
+    } catch (e) {
+      this.isSetup = false;
+      this.isLoading = false;
+    }
+  }
+
+  async tryAutoLogin() {
+    try {
+      const res = await fetch(`${this.apiUrl}/content`, {
+        credentials: 'include'
+      });
+      if (res.ok) {
+        this.contentList = await res.json();
+        this.isAuthenticated = true;
+      }
+    } catch (e) {}
+    this.isLoading = false;
+  }
+
+  async handleLogin(e: Event) {
+    e.preventDefault();
+    this.loginError = '';
+
+    const usernameInput = this.shadowRoot?.querySelector('#username') as HTMLInputElement;
+    const passwordInput = this.shadowRoot?.querySelector('#password') as HTMLInputElement;
+
+    if (!usernameInput?.value || !passwordInput?.value) {
+      this.loginError = 'Username and password required';
+      return;
+    }
+
+    try {
+      const res = await fetch(`${this.apiUrl}/auth/login`, {
+        method: 'POST',
+        credentials: 'include',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          username: usernameInput.value,
+          password: passwordInput.value
+        })
+      });
+
+      if (res.ok) {
+        this.isAuthenticated = true;
+        await this.fetchContent();
+      } else {
+        const data = await res.json();
+        this.loginError = data.error || 'Login failed';
+      }
+    } catch (e) {
+      this.loginError = 'Connection error';
+    }
+  }
+
+  async handleSetup(e: Event) {
     e.preventDefault();
-    const input = this.shadowRoot?.querySelector('#apiKey') as HTMLInputElement;
-    if (input.value) {
-      this.apiKey = input.value;
-      this.isAuthenticated = true;
-      this.fetchContent();
+    this.loginError = '';
+
+    const usernameInput = this.shadowRoot?.querySelector('#username') as HTMLInputElement;
+    const passwordInput = this.shadowRoot?.querySelector('#password') as HTMLInputElement;
+    const confirmInput = this.shadowRoot?.querySelector('#confirmPassword') as HTMLInputElement;
+
+    if (!usernameInput?.value || !passwordInput?.value) {
+      this.loginError = 'Username and password required';
+      return;
+    }
+
+    if (usernameInput.value.length < 3) {
+      this.loginError = 'Username must be at least 3 characters';
+      return;
     }
+
+    if (passwordInput.value.length < 8) {
+      this.loginError = 'Password must be at least 8 characters';
+      return;
+    }
+
+    if (passwordInput.value !== confirmInput?.value) {
+      this.loginError = 'Passwords do not match';
+      return;
+    }
+
+    try {
+      const res = await fetch(`${this.apiUrl}/auth/setup`, {
+        method: 'POST',
+        credentials: 'include',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          username: usernameInput.value,
+          password: passwordInput.value
+        })
+      });
+
+      if (res.ok) {
+        this.isAuthenticated = true;
+        this.isSetup = true;
+        await this.fetchContent();
+      } else {
+        const data = await res.json();
+        this.loginError = data.error || 'Setup failed';
+      }
+    } catch (e) {
+      this.loginError = 'Connection error';
+    }
+  }
+
+  async handleLogout() {
+    try {
+      await fetch(`${this.apiUrl}/auth/logout`, {
+        method: 'POST',
+        credentials: 'include'
+      });
+    } catch (e) {}
+    this.isAuthenticated = false;
+    this.contentList = [];
   }
 
   async fetchContent() {
     try {
       const res = await fetch(`${this.apiUrl}/content`, {
-        headers: {
-          'Authorization': `Bearer ${this.apiKey}`
-        }
+        credentials: 'include'
       });
       if (res.ok) {
         this.contentList = await res.json();
@@ -76,13 +211,13 @@ export class AdminPortal extends LitElement {
 
   async fetchStaticDetails() {
     try {
-      const res = await fetch(`${this.apiUrl}/api/static`);
+      const res = await fetch(`${this.apiUrl}/static`, {
+        credentials: 'include'
+      });
       if (res.ok) {
         this.staticDetails = await res.json();
       }
-    } catch (e) {
-      // Ignore errors
-    }
+    } catch (e) {}
   }
 
   async handleUpload(key: string, file: File) {
@@ -90,9 +225,7 @@ export class AdminPortal extends LitElement {
       this.statusMessage = 'Uploading...';
       const res = await fetch(`${this.apiUrl}/content/${key}`, {
         method: 'PUT',
-        headers: {
-          'Authorization': `Bearer ${this.apiKey}`
-        },
+        credentials: 'include',
         body: file
       });
 
@@ -112,9 +245,7 @@ export class AdminPortal extends LitElement {
       this.statusMessage = 'Clearing cache...';
       const res = await fetch(`${this.apiUrl}/cache-clear`, {
         method: 'POST',
-        headers: {
-          'Authorization': `Bearer ${this.apiKey}`
-        }
+        credentials: 'include'
       });
 
       if (res.ok) {
@@ -133,9 +264,7 @@ export class AdminPortal extends LitElement {
     try {
       const res = await fetch(`${this.apiUrl}/content/${key}`, {
         method: 'DELETE',
-        headers: {
-          'Authorization': `Bearer ${this.apiKey}`
-        }
+        credentials: 'include'
       });
 
       if (res.ok) {
@@ -156,6 +285,41 @@ export class AdminPortal extends LitElement {
     return this.contentList.filter(c => c.key.startsWith(prefix));
   }
 
+  renderLoginForm() {
+    return html`
+      <div class="container">
+        <div class="login-box">
+          <h2>Admin Setup</h2>
+          <p>Create your admin credentials</p>
+          <form @submit=${this.handleSetup}>
+            <input type="text" id="username" placeholder="Username (3+ chars)" />
+            <input type="password" id="password" placeholder="Password (8+ chars)" />
+            <input type="password" id="confirmPassword" placeholder="Confirm Password" />
+            ${this.loginError ? html`<div class="error-message">${this.loginError}</div>` : ''}
+            <button type="submit" class="btn-primary">Create Account</button>
+          </form>
+        </div>
+      </div>
+    `;
+  }
+
+  renderLogin() {
+    return html`
+      <div class="container">
+        <div class="login-box">
+          <h2>Admin Login</h2>
+          <p>Enter your credentials</p>
+          <form @submit=${this.handleLogin}>
+            <input type="text" id="username" placeholder="Username" autocomplete="username" />
+            <input type="password" id="password" placeholder="Password" autocomplete="current-password" />
+            ${this.loginError ? html`<div class="error-message">${this.loginError}</div>` : ''}
+            <button type="submit" class="btn-primary">Login</button>
+          </form>
+        </div>
+      </div>
+    `;
+  }
+
   renderHomeSection() {
     const home = this.getContent('home.md');
     return html`
@@ -361,69 +525,6 @@ export class AdminPortal extends LitElement {
     `;
   }
 
-  render() {
-    if (!this.isAuthenticated) {
-      return html`
-        <div class="container">
-          <div class="login-box">
-            <h2>Admin Login</h2>
-            <p>Enter your API key to manage content</p>
-            <form @submit=${this.handleLogin}>
-              <input type="password" id="apiKey" placeholder="API Key" />
-              <button type="submit" class="btn-primary">Login</button>
-            </form>
-          </div>
-        </div>
-      `;
-    }
-
-    return html`
-      <div class="container">
-        <div class="header">
-          <h1>Content Manager</h1>
-          <button class="btn-secondary" @click=${() => this.handleClearCache()}>Clear Cache</button>
-        </div>
-        
-        <div class="nav-tabs">
-          <button class="nav-tab ${this.activeSection === 'home' ? 'active' : ''}" 
-            @click=${() => this.activeSection = 'home'}>Home</button>
-          <button class="nav-tab ${this.activeSection === 'profile' ? 'active' : ''}" 
-            @click=${() => this.activeSection = 'profile'}>Profile</button>
-          <button class="nav-tab ${this.activeSection === 'aboutme' ? 'active' : ''}"
-            @click=${() => this.activeSection = 'aboutme'}>About Me</button>
-          <button class="nav-tab ${this.activeSection === 'blogs' ? 'active' : ''}"
-            @click=${() => this.activeSection = 'blogs'}>Blogs</button>
-          <button class="nav-tab ${this.activeSection === 'stories' ? 'active' : ''}"
-            @click=${() => this.activeSection = 'stories'}>Stories</button>
-          <button class="nav-tab ${this.activeSection === 'images' ? 'active' : ''}"
-            @click=${() => this.activeSection = 'images'}>Images</button>
-          <button class="nav-tab ${this.activeSection === 'logo' ? 'active' : ''}"
-            @click=${() => this.activeSection = 'logo'}>Logo</button>
-          <button class="nav-tab ${this.activeSection === 'static' ? 'active' : ''}"
-            @click=${() => { 
-              this.activeSection = 'static'; 
-              this.fetchStaticDetails(); 
-            }}>Site Settings</button>
-        </div>
-
-        ${this.statusMessage ? html`
-          <div class="status-message ${this.statusMessage.includes('successful') || this.statusMessage.includes('cleared') ? 'success' : this.statusMessage.includes('failed') || this.statusMessage.includes('Error') ? 'error' : ''}">
-            ${this.statusMessage}
-          </div>
-        ` : ''}
-
-        ${this.activeSection === 'home' ? this.renderHomeSection() : ''}
-        ${this.activeSection === 'profile' ? this.renderProfileSection() : ''}
-        ${this.activeSection === 'aboutme' ? this.renderAboutMeSection() : ''}
-        ${this.activeSection === 'blogs' ? this.renderBlogsSection() : ''}
-        ${this.activeSection === 'stories' ? this.renderStoriesSection() : ''}
-        ${this.activeSection === 'images' ? this.renderImagesSection() : ''}
-        ${this.activeSection === 'logo' ? this.renderLogoSection() : ''}
-        ${this.activeSection === 'static' ? this.renderStaticSection() : ''}
-      </div>
-    `;
-  }
-
   renderStaticSection() {
     return html`
       <div class="section">
@@ -473,7 +574,8 @@ export class AdminPortal extends LitElement {
             const url = `${this.apiUrl}/content/staticdetails.json`;
             const res = await fetch(url, {
               method: 'PUT',
-              headers: { 'Authorization': `Bearer ${this.apiKey}`, 'Content-Type': 'application/json' },
+              credentials: 'include',
+              headers: { 'Content-Type': 'application/json' },
               body: JSON.stringify(data)
             });
             if (res.ok) {
@@ -489,4 +591,65 @@ export class AdminPortal extends LitElement {
       </div>
     `;
   }
+
+  render() {
+    if (this.isLoading) {
+      return html`<div class="container"><div class="loading">Loading...</div></div>`;
+    }
+
+    if (!this.isSetup) {
+      return this.renderLoginForm();
+    }
+
+    if (!this.isAuthenticated) {
+      return this.renderLogin();
+    }
+
+    return html`
+      <div class="container">
+        <div class="header">
+          <h1>Content Manager</h1>
+          <button class="btn-secondary" @click=${() => this.handleLogout()}>Logout</button>
+          <button class="btn-secondary" @click=${() => this.handleClearCache()}>Clear Cache</button>
+        </div>
+        
+        <div class="nav-tabs">
+          <button class="nav-tab ${this.activeSection === 'home' ? 'active' : ''}" 
+            @click=${() => this.activeSection = 'home'}>Home</button>
+          <button class="nav-tab ${this.activeSection === 'profile' ? 'active' : ''}" 
+            @click=${() => this.activeSection = 'profile'}>Profile</button>
+          <button class="nav-tab ${this.activeSection === 'aboutme' ? 'active' : ''}"
+            @click=${() => this.activeSection = 'aboutme'}>About Me</button>
+          <button class="nav-tab ${this.activeSection === 'blogs' ? 'active' : ''}"
+            @click=${() => this.activeSection = 'blogs'}>Blogs</button>
+          <button class="nav-tab ${this.activeSection === 'stories' ? 'active' : ''}"
+            @click=${() => this.activeSection = 'stories'}>Stories</button>
+          <button class="nav-tab ${this.activeSection === 'images' ? 'active' : ''}"
+            @click=${() => this.activeSection = 'images'}>Images</button>
+          <button class="nav-tab ${this.activeSection === 'logo' ? 'active' : ''}"
+            @click=${() => this.activeSection = 'logo'}>Logo</button>
+          <button class="nav-tab ${this.activeSection === 'static' ? 'active' : ''}"
+            @click=${() => { 
+              this.activeSection = 'static'; 
+              this.fetchStaticDetails(); 
+            }}>Site Settings</button>
+        </div>
+
+        ${this.statusMessage ? html`
+          <div class="status-message ${this.statusMessage.includes('successful') || this.statusMessage.includes('cleared') ? 'success' : this.statusMessage.includes('failed') || this.statusMessage.includes('Error') ? 'error' : ''}">
+            ${this.statusMessage}
+          </div>
+        ` : ''}
+
+        ${this.activeSection === 'home' ? this.renderHomeSection() : ''}
+        ${this.activeSection === 'profile' ? this.renderProfileSection() : ''}
+        ${this.activeSection === 'aboutme' ? this.renderAboutMeSection() : ''}
+        ${this.activeSection === 'blogs' ? this.renderBlogsSection() : ''}
+        ${this.activeSection === 'stories' ? this.renderStoriesSection() : ''}
+        ${this.activeSection === 'images' ? this.renderImagesSection() : ''}
+        ${this.activeSection === 'logo' ? this.renderLogoSection() : ''}
+        ${this.activeSection === 'static' ? this.renderStaticSection() : ''}
+      </div>
+    `;
+  }
 }