@luckydye/calendar 1.1.1 → 1.1.3

package/src/CalDAVConfig.ts

@@ -0,0 +1,1025 @@
+import { css, html, LitElement } from "lit";
+import type { CalendarSource } from "./CalendarIntegration.js";
+import { authenticateWithGoogle } from "./GoogleCalendarSource.js";
+import { InhouseBookingSource } from "./InhouseBookingSource.js";
+import { CalDAVSource as CalDAVSourceClass } from "./CalDAVSource.js";
+
+interface CalDAVSourceConfig extends CalendarSource {
+  type: "caldav";
+  credentials: {
+    serverUrl: string;
+    username: string;
+    password: string;
+  };
+  locked?: boolean;
+}
+
+interface ICalSource extends CalendarSource {
+  type: "ical";
+  credentials: {
+    url: string;
+  };
+  locked?: boolean;
+}
+
+interface GoogleSource extends CalendarSource {
+  type: "google";
+  credentials: {
+    accessToken: string;
+    refreshToken?: string;
+    tokenExpiry?: string;
+    calendarId?: string;
+  };
+  locked?: boolean;
+}
+
+interface InhouseSource extends CalendarSource {
+  type: "inhouse";
+  credentials: {
+    sessionCookie: string;
+    employeeId: string;
+    unitId?: string;
+  };
+  locked?: boolean;
+}
+
+type ConfigurableSource = CalDAVSourceConfig | ICalSource | GoogleSource | InhouseSource;
+
+export class CalDAVConfigElement extends LitElement {
+  static styles = css`
+    :host {
+      display: block;
+      font-family: -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
+      color: var(--text-primary, rgba(255, 255, 255, 0.9));
+    }
+
+    .container {
+      background: var(--bg-elevated, rgba(30, 30, 30, 0.95));
+      border: 1px solid var(--grid-color, rgba(255, 255, 255, 0.1));
+      border-radius: var(--border-radius-lg, 8px);
+      padding: 16px;
+      box-sizing: border-box;
+      min-width: 400px;
+      max-width: 500px;
+      height: 100%;
+    }
+
+    .header {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      margin-bottom: 16px;
+      padding-bottom: 12px;
+      border-bottom: 1px solid var(--grid-color, rgba(255, 255, 255, 0.1));
+    }
+
+    .title {
+      font-size: 16px;
+      font-weight: 600;
+      color: var(--text-primary, rgba(255, 255, 255, 0.9));
+    }
+
+    .close-btn {
+      background: none;
+      border: none;
+      color: var(--text-muted, rgba(255, 255, 255, 0.5));
+      font-size: 20px;
+      cursor: pointer;
+      padding: 4px;
+      line-height: 1;
+    }
+
+    .close-btn:hover {
+      color: var(--text-primary, rgba(255, 255, 255, 0.9));
+    }
+
+    .sources-list {
+      display: flex;
+      flex-direction: column;
+      gap: 12px;
+      margin-bottom: 16px;
+      overflow-y: auto;
+      max-height: calc(100% - 120px);
+    }
+
+    .source-item {
+      flex: none;
+      background: var(--bg-item, rgba(255, 255, 255, 0.05));
+      border: 1px solid var(--grid-color, rgba(255, 255, 255, 0.1));
+      border-radius: var(--border-radius, 6px);
+      padding: 12px;
+      overflow: hidden;
+    }
+
+    .source-header {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      margin-bottom: 8px;
+    }
+
+    .source-color {
+      width: 12px;
+      height: 12px;
+      border-radius: var(--border-radius-sm, 2px);
+      flex-shrink: 0;
+    }
+
+    .source-name {
+      flex: 1;
+      font-weight: 500;
+      color: var(--text-primary, rgba(255, 255, 255, 0.9));
+      font-size: 14px;
+    }
+
+    .source-enabled {
+      cursor: pointer;
+    }
+
+    .source-locked {
+      cursor: pointer;
+      margin-left: 8px;
+    }
+
+    .source-actions {
+      display: flex;
+      gap: 8px;
+    }
+
+    .icon-btn {
+      background: none;
+      border: none;
+      color: var(--text-muted, rgba(255, 255, 255, 0.5));
+      cursor: pointer;
+      padding: 4px;
+      font-size: 14px;
+      line-height: 1;
+    }
+
+    .icon-btn:hover {
+      color: var(--text-primary, rgba(255, 255, 255, 0.9));
+    }
+
+    .source-url {
+      font-size: 12px;
+      color: var(--text-muted, rgba(255, 255, 255, 0.4));
+    }
+
+    .empty-state {
+      text-align: center;
+      padding: 24px;
+      color: var(--text-muted, rgba(255, 255, 255, 0.4));
+      font-size: 14px;
+    }
+
+    .add-btn {
+      width: 100%;
+      padding: 10px;
+      background: var(--bg-button-hover, rgba(255, 255, 255, 0.1));
+      border: 1px dashed var(--grid-color-hover, rgba(255, 255, 255, 0.3));
+      border-radius: var(--border-radius, 6px);
+      color: var(--text-secondary, rgba(255, 255, 255, 0.7));
+      cursor: pointer;
+      font-size: 14px;
+      transition: all 0.15s;
+    }
+
+    .add-btn:hover {
+      background: var(--bg-item-hover, rgba(255, 255, 255, 0.15));
+      border-color: var(--grid-color-strong, rgba(255, 255, 255, 0.5));
+      color: var(--text-primary, rgba(255, 255, 255, 0.9));
+    }
+
+    .form {
+      display: flex;
+      flex-direction: column;
+      gap: 12px;
+    }
+
+    .form-group {
+      display: flex;
+      flex-direction: column;
+      gap: 4px;
+    }
+
+    .form-label {
+      font-size: 12px;
+      color: var(--text-muted, rgba(255, 255, 255, 0.5));
+      text-transform: uppercase;
+      letter-spacing: 0.5px;
+    }
+
+    .form-input {
+      background: var(--bg-input, rgba(0, 0, 0, 0.3));
+      border: 1px solid var(--grid-color, rgba(255, 255, 255, 0.1));
+      border-radius: var(--border-radius-sm, 4px);
+      padding: 8px 12px;
+      color: var(--text-primary, rgba(255, 255, 255, 0.9));
+      font-size: 14px;
+      outline: none;
+    }
+
+    .form-input:focus {
+      border-color: var(--grid-color-strong, rgba(255, 255, 255, 0.3));
+      background: var(--bg-input-focus, rgba(0, 0, 0, 0.5));
+    }
+
+    .color-picker {
+      display: flex;
+      gap: 8px;
+      flex-wrap: wrap;
+    }
+
+    .color-option {
+      width: 28px;
+      height: 28px;
+      border-radius: var(--border-radius-sm, 4px);
+      cursor: pointer;
+      border: 2px solid transparent;
+      transition: transform 0.15s;
+    }
+
+    .color-option:hover {
+      transform: scale(1.1);
+    }
+
+    .color-option.selected {
+      border-color: var(--text-primary, rgba(255, 255, 255, 0.8));
+    }
+
+    .form-actions {
+      display: flex;
+      gap: 8px;
+      justify-content: flex-end;
+      margin-top: 8px;
+    }
+
+    .btn {
+      padding: 8px 16px;
+      border-radius: var(--border-radius-sm, 4px);
+      font-size: 13px;
+      cursor: pointer;
+      transition: all 0.15s;
+    }
+
+    .btn-primary {
+      background: var(--accent-primary, rgba(100, 150, 255, 0.8));
+      border: none;
+      color: var(--text-inverse, white);
+    }
+
+    .btn-primary:hover {
+      background: var(--accent-primary, rgba(100, 150, 255, 1));
+    }
+
+    .btn-secondary {
+      background: transparent;
+      border: 1px solid var(--grid-color-hover, rgba(255, 255, 255, 0.2));
+      color: var(--text-secondary, rgba(255, 255, 255, 0.7));
+    }
+
+    .btn-secondary:hover {
+      border-color: var(--grid-color-strong, rgba(255, 255, 255, 0.4));
+      color: var(--text-primary, rgba(255, 255, 255, 0.9));
+    }
+
+    .sync-status {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      margin-top: 12px;
+      padding-top: 12px;
+      border-top: 1px solid var(--grid-color, rgba(255, 255, 255, 0.1));
+      font-size: 12px;
+      color: var(--text-muted, rgba(255, 255, 255, 0.5));
+    }
+
+    .sync-spinner {
+      width: 14px;
+      height: 14px;
+      border: 2px solid var(--grid-color, rgba(255, 255, 255, 0.2));
+      border-top-color: var(--text-primary, rgba(255, 255, 255, 0.8));
+      border-radius: 50%;
+      animation: spin 1s linear infinite;
+    }
+
+    @keyframes spin {
+      to { transform: rotate(360deg); }
+    }
+
+    .sync-success {
+      color: var(--accent-success, #7cb342);
+    }
+
+    .sync-error {
+      color: var(--accent-error, #e53935);
+    }
+
+    .google-auth-section {
+      display: flex;
+      flex-direction: column;
+      gap: 12px;
+      padding: 16px;
+      background: var(--bg-item, rgba(255, 255, 255, 0.05));
+      border: 1px solid var(--grid-color, rgba(255, 255, 255, 0.1));
+      border-radius: var(--border-radius, 6px);
+    }
+
+    .google-login-btn {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      gap: 10px;
+      padding: 12px 16px;
+      background: white;
+      border: 1px solid #dadce0;
+      border-radius: 4px;
+      color: #3c4043;
+      font-family: "Google Sans", Roboto, Arial, sans-serif;
+      font-size: 14px;
+      font-weight: 500;
+      cursor: pointer;
+      transition: box-shadow 0.15s;
+    }
+
+    .google-login-btn:hover {
+      box-shadow: 0 1px 2px 0 rgba(60, 64, 67, 0.3), 0 1px 3px 1px rgba(60, 64, 67, 0.15);
+    }
+
+    .google-login-btn:disabled {
+      opacity: 0.6;
+      cursor: not-allowed;
+    }
+
+    .google-logo {
+      width: 18px;
+      height: 18px;
+    }
+
+    .auth-status {
+      font-size: 13px;
+      color: var(--text-muted, rgba(255, 255, 255, 0.5));
+    }
+
+    .auth-status.authenticated {
+      color: var(--accent-success, #7cb342);
+    }
+
+    .auth-status.error {
+      color: var(--accent-error, #e53935);
+    }
+
+    .client-id-input {
+      font-size: 12px;
+    }
+  `;
+
+  sources: ConfigurableSource[] = [];
+  isAdding = false;
+  editingId: string | null = null;
+  isGoogleAuthenticating = false;
+  googleAuthError: string | null = null;
+
+  private formData: Partial<ConfigurableSource> = {};
+
+  static get properties() {
+    return {
+      sources: { type: Array },
+      isAdding: { type: Boolean },
+      editingId: { type: String },
+      isGoogleAuthenticating: { type: Boolean },
+      googleAuthError: { type: String },
+    };
+  }
+
+  constructor() {
+    super();
+    this.loadSources();
+
+    // Check for OAuth callback (authorization code flow)
+    if (typeof window !== 'undefined' && window.location.search) {
+      const params = new URLSearchParams(window.location.search);
+      const code = params.get('code');
+      const error = params.get('error');
+      const state = params.get('state');
+
+      if (code || error) {
+        // Send the result to the opener window
+        if (window.opener) {
+          window.opener.postMessage({
+            type: 'google-oauth-callback',
+            code: code,
+            error: error,
+            receivedState: state,
+          }, window.location.origin);
+          window.close();
+        }
+      }
+    }
+  }
+
+  connectedCallback() {
+    super.connectedCallback();
+    this.loadSources();
+  }
+
+  loadSources() {
+    const saved = localStorage.getItem("caldav-sources");
+    if (saved) {
+      try {
+        this.sources = JSON.parse(saved);
+      } catch {
+        this.sources = [];
+      }
+    }
+
+  }
+
+  saveSources() {
+    localStorage.setItem("caldav-sources", JSON.stringify(this.sources));
+    this.dispatchEvent(new CustomEvent("sources-changed", {
+      detail: { sources: this.sources },
+      bubbles: true,
+    }));
+    this.requestUpdate();
+  }
+
+  addSource() {
+    this.isAdding = true;
+    this.editingId = null;
+    this.formData = {
+      type: "caldav",
+      color: "#FF6E68",
+      enabled: true,
+    };
+    this.requestUpdate();
+  }
+
+  editSource(source: ConfigurableSource) {
+    this.isAdding = false;
+    this.editingId = source.id;
+    this.formData = { ...source };
+    this.requestUpdate();
+  }
+
+  deleteSource(id: string) {
+    this.sources = this.sources.filter((s) => s.id !== id);
+    this.saveSources();
+  }
+
+  toggleEnabled(source: ConfigurableSource) {
+    source.enabled = !source.enabled;
+    this.saveSources();
+  }
+
+  toggleLocked(source: ConfigurableSource) {
+    source.locked = !source.locked;
+    this.saveSources();
+  }
+
+  saveForm() {
+    if (!this.formData.name?.trim()) {
+      alert('Please enter a calendar name');
+      return;
+    }
+
+    if (!this.formData.type) {
+      alert('Please select a calendar type');
+      return;
+    }
+
+    let source: ConfigurableSource;
+
+    if (this.formData.type === "caldav") {
+      if (
+        !this.formData.credentials?.serverUrl ||
+        !this.formData.credentials?.username ||
+        !this.formData.credentials?.password
+      ) {
+        return;
+      }
+
+      source = {
+        id: this.editingId || crypto.randomUUID(),
+        name: this.formData.name,
+        type: "caldav",
+        credentials: {
+          serverUrl: this.formData.credentials.serverUrl,
+          username: this.formData.credentials.username,
+          password: this.formData.credentials.password,
+        },
+        color: this.formData.color || "#FF6E68",
+        enabled: this.formData.enabled ?? true,
+        locked: this.formData.locked ?? false,
+      } as CalDAVSourceConfig;
+    } else if (this.formData.type === "ical") {
+      if (!this.formData.credentials?.url) {
+        return;
+      }
+
+      source = {
+        id: this.editingId || crypto.randomUUID(),
+        name: this.formData.name,
+        type: "ical",
+        credentials: {
+          url: this.formData.credentials.url,
+        },
+        color: this.formData.color || "#FF6E68",
+        enabled: this.formData.enabled ?? true,
+        locked: this.formData.locked ?? false,
+      } as ICalSource;
+    } else if (this.formData.type === "google") {
+      if (!this.formData.credentials?.accessToken) {
+        alert('Please authenticate with Google before adding the calendar');
+        return;
+      }
+
+      source = {
+        id: this.editingId || crypto.randomUUID(),
+        name: this.formData.name,
+        type: "google",
+        credentials: {
+          accessToken: this.formData.credentials.accessToken,
+          refreshToken: this.formData.credentials.refreshToken,
+          tokenExpiry: this.formData.credentials.tokenExpiry,
+          calendarId: this.formData.credentials.calendarId || "primary",
+        },
+        color: this.formData.color || "#4285F4",
+        enabled: this.formData.enabled ?? true,
+        locked: this.formData.locked ?? false,
+      } as GoogleSource;
+    } else if (this.formData.type === "inhouse") {
+      if (!this.formData.credentials?.sessionCookie || !this.formData.credentials?.employeeId) {
+        alert('Please enter session cookie and employee ID');
+        return;
+      }
+
+      source = {
+        id: this.editingId || crypto.randomUUID(),
+        name: this.formData.name,
+        type: "inhouse",
+        credentials: {
+          sessionCookie: this.formData.credentials.sessionCookie,
+          employeeId: this.formData.credentials.employeeId,
+          unitId: this.formData.credentials.unitId,
+        },
+        color: this.formData.color || "#FF6E68",
+        enabled: this.formData.enabled ?? true,
+        locked: this.formData.locked ?? false,
+      } as InhouseSource;
+    } else {
+      return;
+    }
+
+    if (this.editingId) {
+      const index = this.sources.findIndex((s) => s.id === this.editingId);
+      if (index >= 0) {
+        this.sources[index] = source;
+      }
+    } else {
+      this.sources.push(source);
+    }
+
+    this.isAdding = false;
+    this.editingId = null;
+    this.formData = {};
+    this.googleAuthError = null;
+    this.saveSources();
+    this.requestUpdate();
+  }
+
+  cancelForm() {
+    this.isAdding = false;
+    this.editingId = null;
+    this.formData = {};
+    this.googleAuthError = null;
+    this.isGoogleAuthenticating = false;
+    this.requestUpdate();
+  }
+
+  updateForm(field: string, value: string | boolean) {
+    if (field === "serverUrl" || field === "username" || field === "password" || field === "url" ||
+        field === "accessToken" || field === "refreshToken" || field === "tokenExpiry" || field === "calendarId" ||
+        field === "sessionCookie" || field === "employeeId" || field === "unitId") {
+      this.formData = {
+        ...this.formData,
+        credentials: {
+          ...this.formData.credentials,
+          [field]: value,
+        } as ConfigurableSource["credentials"],
+      };
+    } else {
+      this.formData = { ...this.formData, [field]: value };
+    }
+    this.requestUpdate();
+  }
+
+  async signInWithGoogle() {
+    this.isGoogleAuthenticating = true;
+    this.googleAuthError = null;
+    this.requestUpdate();
+
+    try {
+      // Load Google OAuth credentials from public directory
+      const credentialsResponse = await fetch('/credentials_google.json');
+      if (!credentialsResponse.ok) {
+        throw new Error('Google OAuth credentials file not found. Please add credentials_google.json to the public directory.');
+      }
+
+      const credentials = await credentialsResponse.json();
+      const clientId = credentials.installed?.client_id || credentials.web?.client_id;
+      const clientSecret = credentials.installed?.client_secret || credentials.web?.client_secret;
+
+      if (!clientId || !clientSecret) {
+        throw new Error('Invalid credentials file format. Expected client_id and client_secret.');
+      }
+
+      const tokens = await authenticateWithGoogle(clientId, clientSecret);
+
+      // Fetch the list of calendars from Google
+      const calendarListResponse = await fetch(
+        'https://www.googleapis.com/calendar/v3/users/me/calendarList',
+        {
+          headers: {
+            Authorization: `Bearer ${tokens.accessToken}`,
+          },
+        }
+      );
+
+      if (!calendarListResponse.ok) {
+        throw new Error('Failed to fetch calendar list from Google');
+      }
+
+      const calendarList = await calendarListResponse.json();
+
+      // Create a source for each calendar
+      for (const calendar of calendarList.items || []) {
+        const newSource: GoogleSource = {
+          id: crypto.randomUUID(),
+          name: calendar.summary || 'Untitled Calendar',
+          type: 'google',
+          credentials: {
+            accessToken: tokens.accessToken,
+            refreshToken: tokens.refreshToken,
+            tokenExpiry: tokens.expiry,
+            calendarId: calendar.id,
+          },
+          color: calendar.backgroundColor || '#4285F4',
+          enabled: true,
+        };
+
+        this.sources.push(newSource);
+      }
+
+      this.saveSources();
+      this.isAdding = false;
+      this.formData = {};
+      this.isGoogleAuthenticating = false;
+      this.requestUpdate();
+    } catch (error) {
+      this.isGoogleAuthenticating = false;
+      this.googleAuthError = error instanceof Error ? error.message : "Authentication failed";
+      this.requestUpdate();
+    }
+  }
+
+  close() {
+    this.dispatchEvent(new CustomEvent("close", { bubbles: true }));
+  }
+
+  render() {
+    const colors = [
+      "#FF6E68",
+      "#FFB800",
+      "#83D754",
+      "#0095FD",
+      "#9FC6E7",
+      "#888082",
+      "#E91E63",
+      "#9C27B0",
+      "#673AB7",
+      "#3F51B5",
+      "#2196F3",
+      "#00BCD4",
+      "#009688",
+      "#4CAF50",
+      "#8BC34A",
+      "#CDDC39",
+      "#FFEB3B",
+      "#FFC107",
+      "#FF9800",
+      "#FF5722",
+      "#795548",
+    ];
+
+    return html`
+      <div class="container">
+        <div class="header">
+          <span class="title">Calendar Sources</span>
+          <button class="close-btn" @click=${this.close}>×</button>
+        </div>
+
+        ${this.isAdding || this.editingId
+          ? this.renderForm(colors)
+          : this.renderSourcesList()}
+      </div>
+    `;
+  }
+
+  renderSourcesList() {
+    if (this.sources.length === 0) {
+      return html`
+        <div class="empty-state">
+          No calendar sources configured
+        </div>
+        <button class="add-btn" @click=${this.addSource}>
+          + Add Calendar Source
+        </button>
+      `;
+    }
+    
+    console.log(this.sources);
+
+    return html`
+      <div class="sources-list">
+        ${this.sources.map(
+          (source) => {
+            let urlDisplay: string;
+            if (source.type === "caldav") {
+              urlDisplay = (source.credentials as CalDAVSourceConfig["credentials"]).serverUrl;
+            } else if (source.type === "ical") {
+              urlDisplay = (source.credentials as ICalSource["credentials"]).url;
+            } else if (source.type === "google") {
+              urlDisplay = (source.credentials as GoogleSource["credentials"]).calendarId || "primary";
+            } else if (source.type === "inhouse") {
+              urlDisplay = `Employee: ${(source.credentials as InhouseSource["credentials"]).employeeId}`;
+            } else {
+              urlDisplay = "Unknown source";
+            }
+
+            return html`
+              <div class="source-item">
+                <div class="source-header">
+                  <div
+                    class="source-color"
+                    style="background: ${source.color}"
+                  ></div>
+                  <span class="source-name">${source.name}</span>
+                  <input
+                    type="checkbox"
+                    class="source-enabled"
+                    .checked=${source.enabled}
+                    @change=${() => this.toggleEnabled(source)}
+                    title="${source.enabled ? "Disable" : "Enable"} sync"
+                  />
+                  <input
+                    type="checkbox"
+                    class="source-locked"
+                    .checked=${source.locked}
+                    @change=${() => this.toggleLocked(source)}
+                    title="${source.locked ? "Unlock (allow editing)" : "Lock (read-only)"}"
+                  />
+                  <div class="source-actions">
+                    <button
+                      class="icon-btn"
+                      @click=${() => this.editSource(source)}
+                      title="Edit"
+                    >
+                      ✎
+                    </button>
+                    <button
+                      class="icon-btn"
+                      @click=${() => this.deleteSource(source.id)}
+                      title="Delete"
+                    >
+                      🗑
+                    </button>
+                  </div>
+                </div>
+                <div class="source-url">${source.type.toUpperCase()}: ${urlDisplay || "No URL"}</div>
+              </div>
+            `;
+          }
+        )}
+      </div>
+      <button class="add-btn" @click=${this.addSource}>
+        + Add Calendar Source
+      </button>
+    `;
+  }
+
+  renderForm(colors: string[]) {
+    const isEditing = this.editingId !== null;
+    const sourceType = this.formData.type || "caldav";
+
+    return html`
+      <div class="form">
+        <div class="form-group">
+          <label class="form-label">Type</label>
+          <select
+            class="form-input"
+            .value=${sourceType}
+            @change=${(e: Event) => {
+              const type = (e.target as HTMLSelectElement).value;
+              this.updateForm("type", type);
+              // Set default color based on type
+              if (type === "google" && !this.formData.color) {
+                this.updateForm("color", "#4285F4");
+              } else if (type === "caldav" && !this.formData.color) {
+                this.updateForm("color", "#FF6E68");
+              }
+            }}
+            ?disabled=${isEditing}
+          >
+            <option value="caldav">CalDAV (with credentials)</option>
+            <option value="ical">iCal URL</option>
+            <option value="google">Google Calendar</option>
+            <option value="inhouse">Inhouse Booking System</option>
+          </select>
+        </div>
+
+        <div class="form-group">
+          <label class="form-label">Name</label>
+          <input
+            class="form-input"
+            type="text"
+            placeholder="My Calendar"
+            .value=${this.formData.name || ""}
+            @input=${(e: Event) =>
+              this.updateForm("name", (e.target as HTMLInputElement).value)}
+          />
+        </div>
+
+        ${sourceType === "caldav"
+          ? html`
+              <div class="form-group">
+                <label class="form-label">Server URL</label>
+                <input
+                  class="form-input"
+                  type="text"
+                  placeholder="https://mail.example.com/caldav/users/username/"
+                  .value=${this.formData.credentials?.serverUrl || ""}
+                  @input=${(e: Event) =>
+                    this.updateForm("serverUrl", (e.target as HTMLInputElement).value)}
+                />
+              </div>
+
+              <div class="form-group">
+                <label class="form-label">Username</label>
+                <input
+                  class="form-input"
+                  type="text"
+                  .value=${this.formData.credentials?.username || ""}
+                  @input=${(e: Event) =>
+                    this.updateForm("username", (e.target as HTMLInputElement).value)}
+                />
+              </div>
+
+              <div class="form-group">
+                <label class="form-label">Password</label>
+                <input
+                  class="form-input"
+                  type="password"
+                  .value=${this.formData.credentials?.password || ""}
+                  @input=${(e: Event) =>
+                    this.updateForm("password", (e.target as HTMLInputElement).value)}
+                />
+              </div>
+            `
+          : sourceType === "ical"
+            ? html`
+                <div class="form-group">
+                  <label class="form-label">iCal URL</label>
+                  <input
+                    class="form-input"
+                    type="text"
+                    placeholder="https://example.com/calendar.ics"
+                    .value=${this.formData.credentials?.url || ""}
+                    @input=${(e: Event) =>
+                      this.updateForm("url", (e.target as HTMLInputElement).value)}
+                  />
+                </div>
+              `
+            : sourceType === "google"
+              ? html`
+                <div class="google-auth-section">
+                  ${this.formData.credentials?.accessToken
+                    ? html`
+                        <div class="auth-status authenticated">
+                          ✓ Authenticated with Google
+                        </div>
+                      `
+                    : html`
+                        <button
+                          class="google-login-btn"
+                          @click=${this.signInWithGoogle}
+                          ?disabled=${this.isGoogleAuthenticating}
+                        >
+                          ${this.isGoogleAuthenticating
+                            ? html`<span>Signing in...</span>`
+                            : html`
+                                <svg class="google-logo" viewBox="0 0 24 24">
+                                  <path fill="#4285F4" d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z"/>
+                                  <path fill="#34A853" d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"/>
+                                  <path fill="#FBBC05" d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z"/>
+                                  <path fill="#EA4335" d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"/>
+                                </svg>
+                                <span>Sign in with Google</span>
+                              `}
+                        </button>
+                      `}
+                  ${this.googleAuthError
+                    ? html`<div class="auth-status error">${this.googleAuthError}</div>`
+                    : null}
+                </div>
+
+                <div class="form-group">
+                  <label class="form-label">Calendar ID (optional)</label>
+                  <input
+                    class="form-input"
+                    type="text"
+                    placeholder="primary"
+                    .value=${this.formData.credentials?.calendarId || ""}
+                    @input=${(e: Event) =>
+                      this.updateForm("calendarId", (e.target as HTMLInputElement).value)}
+                  />
+                </div>
+              `
+            : sourceType === "inhouse"
+              ? html`
+                  <div class="form-group">
+                    <label class="form-label">Session Cookie</label>
+                    <input
+                      class="form-input"
+                      type="password"
+                      placeholder="sessionid=abc123; csrftoken=xyz789"
+                      .value=${this.formData.credentials?.sessionCookie || ""}
+                      @input=${(e: Event) =>
+                        this.updateForm("sessionCookie", (e.target as HTMLInputElement).value)}
+                    />
+                    <small style="color: var(--text-muted, rgba(255, 255, 255, 0.5)); font-size: 11px;">
+                      Copy from browser DevTools after logging in
+                    </small>
+                  </div>
+
+                  <div class="form-group">
+                    <label class="form-label">Employee ID</label>
+                    <input
+                      class="form-input"
+                      type="text"
+                      placeholder="589"
+                      .value=${this.formData.credentials?.employeeId || ""}
+                      @input=${(e: Event) =>
+                        this.updateForm("employeeId", (e.target as HTMLInputElement).value)}
+                    />
+                  </div>
+
+                  <div class="form-group">
+                    <label class="form-label">Unit ID (optional)</label>
+                    <input
+                      class="form-input"
+                      type="text"
+                      placeholder="3"
+                      .value=${this.formData.credentials?.unitId || ""}
+                      @input=${(e: Event) =>
+                        this.updateForm("unitId", (e.target as HTMLInputElement).value)}
+                    />
+                  </div>
+                `
+              : null}
+
+        <div class="form-group">
+          <label class="form-label">Color</label>
+          <div class="color-picker">
+            ${colors.map(
+              (color) => html`
+                <div
+                  class="color-option ${this.formData.color === color
+                    ? "selected"
+                    : ""}"
+                  style="background: ${color}"
+                  @click=${() => this.updateForm("color", color)}
+                ></div>
+              `
+            )}
+          </div>
+        </div>
+
+        <div class="form-actions">
+          <button class="btn btn-secondary" @click=${this.cancelForm}>
+            Cancel
+          </button>
+          <button class="btn btn-primary" @click=${this.saveForm}>
+            ${isEditing ? "Save" : "Add"}
+          </button>
+        </div>
+      </div>
+    `;
+  }
+}
+
+try {
+  customElements.define("caldav-config", CalDAVConfigElement);
+} catch (error) {
+  console.error("Failed to register custom element:", error);
+}