From 1230e2924321512953253cc8fc0b738b640c102c Mon Sep 17 00:00:00 2001
From: Lennart <18233294+lennart-k@users.noreply.github.com>
Date: Thu, 11 Dec 2025 20:17:04 +0100
Subject: [PATCH] frontend: tiny improvement to import forms

---
 .../js-components/lib/import-addressbook-form.ts     | 12 +++++++-----
 .../js-components/lib/import-calendar-form.ts        | 12 +++++++-----
 .../public/assets/js/import-addressbook-form.mjs     | 12 +++++++-----
 .../public/assets/js/import-calendar-form.mjs        | 12 +++++++-----
 crates/frontend/public/assets/style.css              |  1 +
 5 files changed, 29 insertions(+), 20 deletions(-)

diff --git a/crates/frontend/js-components/lib/import-addressbook-form.ts b/crates/frontend/js-components/lib/import-addressbook-form.ts
index a7f34a3..e08f883 100644
--- a/crates/frontend/js-components/lib/import-addressbook-form.ts
+++ b/crates/frontend/js-components/lib/import-addressbook-form.ts
@@ -32,23 +32,25 @@ export class ImportAddressbookForm extends LitElement {
         <form @submit=${this.submit} ${ref(this.form)}>
           <label>
             principal (for group addressbook)
-            <select name="principal" value=${this.user} @change=${e => this.principal = e.target.value}>
-              <option value=${this.user}>${this.user}</option>
+            <select name="principal" required .value=${this.user} @change=${e => this.principal = e.target.value}>
+              <option .value=${this.user}>${this.user}</option>
               ${window.rusticalUser.memberships.map(membership => html`
-                <option value=${membership}>${membership}</option>
+                <option .value=${membership}>${membership}</option>
               `)}
             </select>
           </label>
           <br>
           <label>
             id
-            <input type="text" name="id" value=${this.addressbook_id} @change=${e => this.addressbook_id = e.target.value} />
+            <input type="text" required .value=${this.addressbook_id} @change=${e => this.addressbook_id = e.target.value} />
           </label>
           <br>
           <label>
             file
-            <input type="file" accept="text/vcard" name="file" @change=${e => this.file = e.target.files[0]} />
+            <input type="file" accept="text/vcard" required @change=${e => this.file = e.target.files[0]} />
           </label>
+          <br>
+          <br>
           <button type="submit">Import</button>
           <button type="submit" @click=${event => { event.preventDefault(); this.dialog.value.close(); this.form.value.reset() }} class="cancel">Cancel</button>
       </form>
diff --git a/crates/frontend/js-components/lib/import-calendar-form.ts b/crates/frontend/js-components/lib/import-calendar-form.ts
index 9beec6c..e4add7f 100644
--- a/crates/frontend/js-components/lib/import-calendar-form.ts
+++ b/crates/frontend/js-components/lib/import-calendar-form.ts
@@ -32,23 +32,25 @@ export class ImportCalendarForm extends LitElement {
         <form @submit=${this.submit} ${ref(this.form)}>
           <label>
             principal (for group calendars)
-            <select name="principal" value=${this.user} @change=${e => this.principal = e.target.value}>
-              <option value=${this.user}>${this.user}</option>
+            <select name="principal" required .value=${this.user} @change=${e => this.principal = e.target.value}>
+              <option .value=${this.user}>${this.user}</option>
               ${window.rusticalUser.memberships.map(membership => html`
-                <option value=${membership}>${membership}</option>
+                <option .value=${membership}>${membership}</option>
               `)}
             </select>
           </label>
           <br>
           <label>
             id
-            <input type="text" name="id" value=${this.cal_id} @change=${e => this.cal_id = e.target.value} />
+            <input type="text" required .value=${this.cal_id} @change=${e => this.cal_id = e.target.value} />
           </label>
           <br>
           <label>
             file
-            <input type="file" accept="text/calendar" name="file" @change=${e => this.file = e.target.files[0]} />
+            <input type="file" required accept="text/calendar" @change=${e => this.file = e.target.files[0]} />
           </label>
+          <br>
+          <br>
           <button type="submit">Import</button>
           <button type="submit" @click=${event => { event.preventDefault(); this.dialog.value.close(); this.form.value.reset() }} class="cancel">Cancel</button>
       </form>
diff --git a/crates/frontend/public/assets/js/import-addressbook-form.mjs b/crates/frontend/public/assets/js/import-addressbook-form.mjs
index 4cd4adf..00d9e27 100644
--- a/crates/frontend/public/assets/js/import-addressbook-form.mjs
+++ b/crates/frontend/public/assets/js/import-addressbook-form.mjs
@@ -30,23 +30,25 @@ let ImportAddressbookForm = class extends i {
         <form @submit=${this.submit} ${n(this.form)}>
           <label>
             principal (for group addressbook)
-            <select name="principal" value=${this.user} @change=${(e2) => this.principal = e2.target.value}>
-              <option value=${this.user}>${this.user}</option>
+            <select name="principal" required .value=${this.user} @change=${(e2) => this.principal = e2.target.value}>
+              <option .value=${this.user}>${this.user}</option>
               ${window.rusticalUser.memberships.map((membership) => x`
-                <option value=${membership}>${membership}</option>
+                <option .value=${membership}>${membership}</option>
               `)}
             </select>
           </label>
           <br>
           <label>
             id
-            <input type="text" name="id" value=${this.addressbook_id} @change=${(e2) => this.addressbook_id = e2.target.value} />
+            <input type="text" required .value=${this.addressbook_id} @change=${(e2) => this.addressbook_id = e2.target.value} />
           </label>
           <br>
           <label>
             file
-            <input type="file" accept="text/vcard" name="file" @change=${(e2) => this.file = e2.target.files[0]} />
+            <input type="file" accept="text/vcard" required @change=${(e2) => this.file = e2.target.files[0]} />
           </label>
+          <br>
+          <br>
           <button type="submit">Import</button>
           <button type="submit" @click=${(event) => {
       event.preventDefault();
diff --git a/crates/frontend/public/assets/js/import-calendar-form.mjs b/crates/frontend/public/assets/js/import-calendar-form.mjs
index 9a86406..559c25f 100644
--- a/crates/frontend/public/assets/js/import-calendar-form.mjs
+++ b/crates/frontend/public/assets/js/import-calendar-form.mjs
@@ -30,23 +30,25 @@ let ImportCalendarForm = class extends i {
         <form @submit=${this.submit} ${n(this.form)}>
           <label>
             principal (for group calendars)
-            <select name="principal" value=${this.user} @change=${(e2) => this.principal = e2.target.value}>
-              <option value=${this.user}>${this.user}</option>
+            <select name="principal" required .value=${this.user} @change=${(e2) => this.principal = e2.target.value}>
+              <option .value=${this.user}>${this.user}</option>
               ${window.rusticalUser.memberships.map((membership) => x`
-                <option value=${membership}>${membership}</option>
+                <option .value=${membership}>${membership}</option>
               `)}
             </select>
           </label>
           <br>
           <label>
             id
-            <input type="text" name="id" value=${this.cal_id} @change=${(e2) => this.cal_id = e2.target.value} />
+            <input type="text" required .value=${this.cal_id} @change=${(e2) => this.cal_id = e2.target.value} />
           </label>
           <br>
           <label>
             file
-            <input type="file" accept="text/calendar" name="file" @change=${(e2) => this.file = e2.target.files[0]} />
+            <input type="file" required accept="text/calendar" @change=${(e2) => this.file = e2.target.files[0]} />
           </label>
+          <br>
+          <br>
           <button type="submit">Import</button>
           <button type="submit" @click=${(event) => {
       event.preventDefault();
diff --git a/crates/frontend/public/assets/style.css b/crates/frontend/public/assets/style.css
index 41f1f3b..9d956c0 100644
--- a/crates/frontend/public/assets/style.css
+++ b/crates/frontend/public/assets/style.css
@@ -341,6 +341,7 @@ form {
   input[type="url"],
   input[type="password"],
   input[type="color"],
+  input[type="file"],
   textarea,
   select {
     width: 100%;