UI: Add copy to clipboard button to URL displays

radicale/web/internal_data/css/main.css

@@ -412,6 +412,65 @@ input:focus-visible {
     border-width: 1px !important;
 }
 
+.url-input-wrapper {
+    position: relative;
+    width: 100%;
+    margin-bottom: 0;
+    display: flex;
+    align-items: center;
+    clear: both;
+}
+
+.url-input-wrapper input {
+    flex: 1;
+    min-width: 0;
+    padding-right: 45px !important;
+    box-sizing: border-box;
+    width: 100% !important;
+    margin-bottom: 0 !important;
+}
+
+#collectionsscene article .url-input-wrapper {
+    margin-bottom: 15px;
+}
+
+.copy-btn {
+    flex: none;
+    margin-left: -38px;
+    background: transparent;
+    border: none;
+    color: #2494fe;
+    font-size: 1.25em;
+    cursor: pointer;
+    padding: 0;
+    width: 30px;
+    height: 30px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 4px;
+    transition: background-color 0.2s, color 0.2s, transform 0.1s;
+    line-height: 1;
+    z-index: 2;
+    float: none;
+    margin-bottom: 0;
+    margin-top: 0;
+    margin-right: 8px;
+}
+
+.copy-btn:hover {
+    background-color: #f0f7ff;
+    color: #055fb5;
+}
+
+.copy-btn:active {
+    transform: scale(0.9);
+}
+
+.copy-btn.copied {
+    color: #4e9a06;
+}
+
 input[type=radio],
 input[type=checkbox] {
     width: auto;
@@ -507,21 +566,21 @@ button.inline {
 }
 
 .pill {
-  display: inline-block;
+    display: inline-block;
-  padding: 0.25em 0.6em;
+    padding: 0.25em 0.6em;
-  font-size: 75%;
+    font-size: 75%;
-  font-weight: 700;
+    font-weight: 700;
-  line-height: 1;
+    line-height: 1;
-  text-align: center;
+    text-align: center;
-  white-space: nowrap;
+    white-space: nowrap;
-  vertical-align: baseline;
+    vertical-align: baseline;
-  border-radius: 0.375rem;
+    border-radius: 0.375rem;
-  background-color: #6c757d;
+    background-color: #6c757d;
-  color: #fff;
+    color: #fff;
-  margin: 0 2px;
+    margin: 0 2px;
-  width: 1.4em;
+    width: 1.4em;
 }
 
 .hidden {
     display: none !important;
-}
+}

radicale/web/internal_data/index.html

@@ -83,7 +83,10 @@
           <span data-name="WEBCAL">Webcal</span>
         </small>
         <small data-name="contentcount"></small>
-        <input type="text" data-name="url" value="" readonly="" class="selectall">
+        <div class="url-input-wrapper">
+          <input type="text" data-name="url" value="" readonly="" class="selectall">
+          <button type="button" class="copy-btn" data-name="copy-url" title="copy">⧉</button>
+        </div>
         <p data-name="description">Description</p>
         <ul>
           <li>
@@ -159,7 +162,12 @@
                       class="small_icon" alt="Edit"></button>
                 </td>
                 <td><span class="pill" data-name="rw">rw</span><span class="pill" data-name="ro">ro</span><span data-name="conversion">⟿</span></td>
-                <td><input type="text" data-name="pathortoken" value="" readonly="" class="inline selectall"></td>
+                <td>
+                  <div class="url-input-wrapper">
+                    <input type="text" data-name="pathortoken" value="" readonly="" class="inline selectall">
+                    <button type="button" class="copy-btn" data-name="copy-url" title="copy">⧉</button>
+                  </div>
+                </td>
                 <td>
                   <button type="button" class="red inline" data-name="delete" title="Delete Share"><img src="css/icons/delete.svg"
                       class="small_icon" alt="Delete"></button>
@@ -185,7 +193,12 @@
                       class="small_icon" alt="Edit"></button>
                 </td>
                 <td><span class="pill" data-name="rw">rw</span><span class="pill" data-name="ro">ro</span><span data-name="conversion">⟿</span></td>
-                <td><input type="text" data-name="pathortoken" value="" readonly="" class="inline selectall"></td>
+                <td>
+                  <div class="url-input-wrapper">
+                    <input type="text" data-name="pathortoken" value="" readonly="" class="inline selectall">
+                    <button type="button" class="copy-btn" data-name="copy-url" title="copy">⧉</button>
+                  </div>
+                </td>
                 <td>
                   <button type="button" class="red inline" data-name="delete" title="Delete Share"><img src="css/icons/delete.svg"
                       class="small_icon" alt="Delete"></button>
@@ -223,7 +236,12 @@
         </thead>
         <tbody data-name="incomingsharesbody">
           <tr data-name="incomingsharerowtemplate" class="hidden">
-            <td><input type="text" data-name="pathortoken" value="" readonly="" class="inline selectall"></td>
+            <td>
+              <div class="url-input-wrapper">
+                <input type="text" data-name="pathortoken" value="" readonly="" class="inline selectall">
+                <button type="button" class="copy-btn" data-name="copy-url" title="copy">⧉</button>
+              </div>
+            </td>
             <td data-name="owner"></td>
             <td data-name="permissions"><span class="pill" data-name="rw">rw</span><span class="pill"
                 data-name="ro">ro</span><span data-name="conversion">⟿</span></td>

radicale/web/internal_data/js/scenes/CollectionsScene.js

@@ -168,6 +168,7 @@ export class CollectionsScene {
             /** @type {HTMLElement} */ let edit_btn = get_element(node, "[data-name=edit]");
             /** @type {HTMLElement} */ let share_btn = get_element(node, "[data-name=share]");
             /** @type {HTMLAnchorElement} */ let download_btn = /** @type {HTMLAnchorElement} */ (get_element(node, "[data-name=download]"));
+            /** @type {HTMLButtonElement} */ let copy_btn = /** @type {HTMLButtonElement} */ (get_element(node, "[data-name=copy-url]"));
             if (collection.color) {
                 color_form.style.background = collection.color;
             }
@@ -226,7 +227,7 @@ export class CollectionsScene {
                 contentcount_form.textContent = contentcount_form_txt;
             }
             let href = collection.href;
-            new UrlTextHandler(url_form).setHref(href);
+            new UrlTextHandler(url_form, copy_btn).setHref(href);
             download_btn.href = href;
             download_btn.onclick = (event) => {
                 event.preventDefault();

radicale/web/internal_data/js/scenes/IncomingSharingScene.js

@@ -119,8 +119,9 @@ export class IncomingSharingScene {
             let permissions_td = /** @type {HTMLElement} */ (get_element(node, "[data-name=permissions]"));
             let enabled_cb = /** @type {HTMLInputElement} */ (get_element(node, "[data-name=enabled]"));
             let shown_cb = /** @type {HTMLInputElement} */ (get_element(node, "[data-name=shown]"));
+            let copy_btn = /** @type {HTMLButtonElement} */ (get_element(node, "[data-name=copy-url]"));
 
-            new UrlTextHandler(pathortoken).setHref(share.PathOrToken);
+            new UrlTextHandler(pathortoken, copy_btn).setHref(share.PathOrToken);
             owner_td.textContent = share.Owner;
             displayPermissionsOrConversion(share.Conversion, share.Permissions, permissions_td);
 

radicale/web/internal_data/js/scenes/ShareCollectionScene.js

@@ -181,8 +181,9 @@ function add_share_row_node(user, password, collection, share, template, delete_
   node.classList.remove("hidden");
 
   /** @type {HTMLInputElement} */ let pathortoken_form = /** @type {HTMLInputElement} */ (get_element(node, "[data-name=pathortoken]"));
+  /** @type {HTMLButtonElement} */ let copy_btn = /** @type {HTMLButtonElement} */ (get_element(node, "[data-name=copy-url]"));
   if (pathortoken_form) {
-    new UrlTextHandler(pathortoken_form).setHref(pathortoken);
+    new UrlTextHandler(pathortoken_form, copy_btn).setHref(pathortoken);
   }
 
   let permissions = (share["Permissions"] || "").toLowerCase();

radicale/web/internal_data/js/utils/url_text.js

@@ -1,8 +1,5 @@
 /**
  * This file is part of Radicale Server - Calendar Server
- * Copyright © 2017-2024 Unrud <unrud@outlook.com>
- * Copyright © 2023-2024 Matthew Hana <matthew.hana@gmail.com>
- * Copyright © 2024-2025 Peter Bieringer <pb@bieringer.de>
  * Copyright © 2026-2026 Max Berger <max@berger.name>
  *
  * This program is free software: you can redistribute it and/or modify
@@ -19,6 +16,9 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 
+/**
+ * Utilities for resource URL boxes
+ */
 import { SERVER } from "../constants.js";
 
 /**
@@ -27,12 +27,39 @@ import { SERVER } from "../constants.js";
 export class UrlTextHandler {
     /**
      * @param {HTMLInputElement} element The input element to handle.
+     * @param {HTMLButtonElement} copyButton The button element for copying.
      */
-    constructor(element) {
+    constructor(element, copyButton) {
         this._element = element;
+        this._copyButton = copyButton;
+
         this._element.addEventListener("focusin", () => {
             this._element.setSelectionRange(0, 99999);
         });
+
+        if (this._copyButton) {
+            this._copyButton.onclick = () => this._oncopy();
+        }
+    }
+
+    /**
+     * Copy the current value of the input to the clipboard.
+     */
+    _oncopy() {
+        if (!this._element.value) return;
+
+        navigator.clipboard.writeText(this._element.value).then(() => {
+            if (this._copyButton) {
+                this._copyButton.classList.add("copied");
+                this._copyButton.title = "Copied!";
+                setTimeout(() => {
+                    this._copyButton.classList.remove("copied");
+                    this._copyButton.title = "copy";
+                }, 1500);
+            }
+        }).catch(err => {
+            console.error("Could not copy text: ", err);
+        });
     }
 
     /**
@@ -50,9 +77,7 @@ export class UrlTextHandler {
             this._element.value = href;
         }
 
-        // Scroll the input all the way to the right so that the end of
+        // Needs timeout to work correctly.
-        // the URL (the most important part) is visible.
-        // Use a timeout to ensure that the layout has been calculated.
         setTimeout(() => {
             this._element.scrollLeft = this._element.scrollWidth;
         }, 0);