frontend: Introduce Web Components for forms

crates/frontend/js-components/lib/create-addressbook-form.ts

@@ -0,0 +1,87 @@
+import { html, LitElement } from "lit";
+import { customElement, property } from "lit/decorators.js";
+import { createClient } from "webdav";
+
+@customElement("create-addressbook-form")
+export class CreateAddressbookForm extends LitElement {
+  constructor() {
+    super()
+
+  }
+
+  protected override createRenderRoot() {
+    return this
+  }
+
+  client = createClient("/carddav")
+
+  @property()
+  user: String = ''
+  @property()
+  id: String = ''
+  @property()
+  displayname: String = ''
+  @property()
+  description: String = ''
+
+
+  override render() {
+    return html`
+      <section>
+        <h3>Create calendar</h3>
+        <form @submit=${this.submit}>
+          <label>
+            id
+            <input type="text" name="id" @change=${e => this.id = e.target.value} />
+          </label>
+          <br>
+          <label>
+            Displayname
+            <input type="text" name="displayname" value=${this.displayname} @change=${e => this.displayname = e.target.value} />
+          </label>
+          <br>
+          <label>
+            Description
+            <input type="text" name="description" @change=${e => this.description = e.target.value} />
+          </label>
+          <br>
+          <button type="submit">Create</button>
+        </form>
+      </section>
+    `
+  }
+
+  async submit(e: SubmitEvent) {
+    console.log(this.displayname)
+    e.preventDefault()
+    if (!this.id) {
+      alert("Empty id")
+      return
+    }
+    if (!this.displayname) {
+      alert("Empty displayname")
+      return
+    }
+    // TODO: Escape user input: There's not really a security risk here but would be nicer
+    await this.client.createDirectory(`/principal/${this.user}/${this.id}`, {
+      data: `
+      <mkcol xmlns="DAV:" xmlns:CARD="urn:ietf:params:xml:ns:carddav">
+        <set>
+          <prop>
+            <displayname>${this.displayname}</displayname>
+            ${this.description ? `<CARD:addressbook-description>${this.description}</CARD:addressbook-description>` : ''}
+          </prop>
+        </set>
+      </mkcol>
+      `
+    })
+    window.location.reload()
+    return null
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'create-addressbook-form': CreateAddressbookForm
+  }
+}

crates/frontend/js-components/lib/create-calendar-form.ts

@@ -0,0 +1,118 @@
+import { html, LitElement } from "lit";
+import { customElement, property } from "lit/decorators.js";
+import { createClient } from "webdav";
+
+@customElement("create-calendar-form")
+export class CreateCalendarForm extends LitElement {
+  constructor() {
+    super()
+
+  }
+
+  protected override createRenderRoot() {
+    return this
+  }
+
+  client = createClient("/caldav")
+
+  @property()
+  user: String = ''
+  @property()
+  id: String = ''
+  @property()
+  displayname: String = ''
+  @property()
+  description: String = ''
+  @property()
+  color: String = ''
+  @property()
+  subscriptionUrl: String = ''
+  @property()
+  components: Set<"VEVENT" | "VTODO" | "VJOURNAL"> = new Set()
+
+
+  override render() {
+    return html`
+      <section>
+        <h3>Create calendar</h3>
+        <form @submit=${this.submit}>
+          <label>
+            id
+            <input type="text" name="id" @change=${e => this.id = e.target.value} />
+          </label>
+          <br>
+          <label>
+            Displayname
+            <input type="text" name="displayname" value=${this.displayname} @change=${e => this.displayname = e.target.value} />
+          </label>
+          <br>
+          <label>
+            Description
+            <input type="text" name="description" @change=${e => this.description = e.target.value} />
+          </label>
+          <br>
+          <label>
+            Color
+            <input type="color" name="color"  @change=${e => this.color = e.target.value} />
+          </label>
+          <br>
+          <label>
+            Subscription URL
+            <input type="text" name="subscription_url" @change=${e => this.subscriptionUrl = e.target.value}  />
+          </label>
+          <br>
+          ${["VEVENT", "VTODO", "VJOURNAL"].map(comp => html`
+            <label>
+              Support ${comp}
+              <input type="checkbox" value=${comp} @change=${e => e.target.checked ? this.components.add(e.target.value) : this.components.delete(e.target.value)} />
+            </label>
+          `)}
+          <br>
+          <button type="submit">Create</button>
+        </form>
+      </section>
+    `
+  }
+
+  async submit(e: SubmitEvent) {
+    console.log(this.displayname)
+    e.preventDefault()
+    if (!this.id) {
+      alert("Empty id")
+      return
+    }
+    if (!this.displayname) {
+      alert("Empty displayname")
+      return
+    }
+    if (!this.components.size) {
+      alert("No calendar components selected")
+      return
+    }
+    await this.client.createDirectory(`/principal/${this.user}/${this.id}`, {
+      data: `
+      <mkcol xmlns="DAV:" xmlns:CAL="urn:ietf:params:xml:ns:caldav" xmlns:CS="http://calendarserver.org/ns/" xmlns:ICAL="http://apple.com/ns/ical/">
+        <set>
+          <prop>
+            <displayname>${this.displayname}</displayname>
+            ${this.description ? `<CAL:calendar-description>${this.description}</CAL:calendar-description>` : ''}
+            ${this.color ? `<ICAL:calendar-color>${this.color}</ICAL:calendar-color>` : ''}
+            ${this.subscriptionUrl ? `<CS:source>${this.subscriptionUrl}</CS:source>` : ''}
+            <CAL:supported-calendar-component-set>
+              ${Array.from(this.components.keys()).map(comp => `<CAL:comp name="${comp}" />`).join('\n')}
+            </CAL:supported-calendar-component-set>
+          </prop>
+        </set>
+      </mkcol>
+      `
+    })
+    window.location.reload()
+    return null
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'create-calendar-form': CreateCalendarForm
+  }
+}

crates/frontend/js-components/lib/vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />