UI: Unify URL handling, show full URL everywhere

integ_tests/test_sharing_login.py

@@ -19,6 +19,7 @@ Integration tests for sharing (login/logout specific)
 """
 
 import pathlib
+import re
 from typing import Any, Generator
 
 import pytest
@@ -71,7 +72,7 @@ def test_incoming_shares(page: Page, radicale_server: str, permissions: str) ->
         page.locator(
             "tr[data-name='incomingsharerowtemplate']:not(.hidden) input[data-name='pathortoken']"
         )
-    ).to_have_value("mapped")
+    ).to_have_value(re.compile(r".*mapped/"))
 
     # 5. Max enables and shows the share
     # Initially, it's disabled and not shown (security by default)

radicale/web/internal_data/js/main.js

@@ -22,10 +22,7 @@
 import { LoadingScene } from "./scenes/LoadingScene.js";
 import { LoginScene } from "./scenes/LoginScene.js";
 import { push_scene } from "./scenes/scene_manager.js";
-import { setupSelectAll } from "./utils/misc.js";
 
-// Add selection handler for input fields with 'selectall' class.
-setupSelectAll();
 
 // Hide startup loading message
 // This works because the LoadingScene is the one that is already active in index.html,

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

@@ -21,7 +21,6 @@
 
 import { delete_collection } from "../api/api.js";
 import { get_auth_header } from "../api/common.js";
-import { SERVER } from "../constants.js";
 import { Collection, CollectionType } from "../models/collection.js";
 import { collectionsCache } from "../utils/collections_cache.js";
 import { ErrorHandler } from "../utils/error.js";
@@ -30,6 +29,7 @@ import { CreateEditCollectionScene } from "./CreateEditCollectionScene.js";
 import { DeleteConfirmationScene } from "./DeleteConfirmationScene.js";
 import { IncomingSharingScene } from "./IncomingSharingScene.js";
 import { Scene, push_scene } from "./scene_manager.js";
+import { UrlTextHandler } from "../utils/url_text.js";
 import { ShareCollectionScene, maybe_enable_sharing_options } from "./ShareCollectionScene.js";
 import { UploadCollectionScene } from "./UploadCollectionScene.js";
 
@@ -225,8 +225,8 @@ export class CollectionsScene {
                 }
                 contentcount_form.textContent = contentcount_form_txt;
             }
-            let href = SERVER + collection.href;
-            url_form.value = href;
+            let href = collection.href;
+            new UrlTextHandler(url_form).setHref(href);
             download_btn.href = href;
             download_btn.onclick = (event) => {
                 event.preventDefault();

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

@@ -25,6 +25,7 @@ import { ErrorHandler } from "../utils/error.js";
 import { get_element, get_element_by_id } from "../utils/misc.js";
 import { displayPermissionsOrConversion } from "../utils/permissions.js";
 import { Scene, pop_scene } from "./scene_manager.js";
+import { UrlTextHandler } from "../utils/url_text.js";
 
 /**
  * @implements {Scene}
@@ -119,12 +120,7 @@ export class IncomingSharingScene {
             let enabled_cb = /** @type {HTMLInputElement} */ (get_element(node, "[data-name=enabled]"));
             let shown_cb = /** @type {HTMLInputElement} */ (get_element(node, "[data-name=shown]"));
 
-            let displayPath = share.PathOrToken.substring(prefix.length);
-            if (displayPath.endsWith("/")) {
-                displayPath = displayPath.substring(0, displayPath.length - 1);
-            }
-
-            pathortoken.value = displayPath;
+            new UrlTextHandler(pathortoken).setHref(share.PathOrToken);
             owner_td.textContent = share.Owner;
             displayPermissionsOrConversion(share.Conversion, share.Permissions, permissions_td);
 

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

@@ -32,6 +32,7 @@ import { displayPermissionsOrConversion } from "../utils/permissions.js";
 import { CreateEditShareScene } from "./CreateEditShareScene.js";
 import { DeleteConfirmationScene } from "./DeleteConfirmationScene.js";
 import { Scene, pop_scene, push_scene } from "./scene_manager.js";
+import { UrlTextHandler } from "../utils/url_text.js";
 
 /**
  * @implements {Scene}
@@ -181,7 +182,7 @@ function add_share_row_node(user, password, collection, share, template, delete_
 
   /** @type {HTMLInputElement} */ let pathortoken_form = /** @type {HTMLInputElement} */ (get_element(node, "[data-name=pathortoken]"));
   if (pathortoken_form) {
-    pathortoken_form.value = pathortoken;
+    new UrlTextHandler(pathortoken_form).setHref(pathortoken);
   }
 
   let permissions = (share["Permissions"] || "").toLowerCase();

radicale/web/internal_data/js/utils/misc.js

@@ -105,16 +105,6 @@ export function bytesToHumanReadable(bytes) {
     return Math.round((bytes / Math.pow(1024, i)) * 100) / 100 + ' ' + units[i];
 }
 
-/**
- * Add selection handler for input fields with 'selectall' class.
- */
-export function setupSelectAll() {
-    document.addEventListener("focusin", (event) => {
-        if (event.target instanceof HTMLInputElement && event.target.classList.contains("selectall")) {
-            event.target.setSelectionRange(0, 99999);
-        }
-    });
-}
 
 /**
  * Get an element by its ID and throw an error if it's not found.

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

@@ -0,0 +1,60 @@
+/**
+ * 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
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import { SERVER } from "../constants.js";
+
+/**
+ * Handles the display of URLs in input fields.
+ */
+export class UrlTextHandler {
+    /**
+     * @param {HTMLInputElement} element The input element to handle.
+     */
+    constructor(element) {
+        this._element = element;
+        this._element.addEventListener("focusin", () => {
+            this._element.setSelectionRange(0, 99999);
+        });
+    }
+
+    /**
+     * Set the value of the input field to the given href.
+     * If the href is relative, it will be prefixed with the server URL.
+     * @param {string} href The href to set.
+     */
+    setHref(href) {
+        if (href.startsWith("/")) {
+            this._element.value = SERVER + href;
+        } else if (!href.includes("://")) {
+            // Handle cases where the href might not start with a slash
+            this._element.value = SERVER + "/" + href;
+        } else {
+            this._element.value = href;
+        }
+
+        // Scroll the input all the way to the right so that the end of
+        // 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);
+    }
+}