Allow only valid hrefs in newShare for map

radicale/web/internal_data/CreateEditCollectionScene.js

@@ -23,18 +23,19 @@ import { create_collection, edit_collection } from "./api.js";
 import { COLOR_RE } from "./constants.js";
 import { Collection, CollectionType } from "./models.js";
 import { Scene, pop_scene, push_scene, scene_stack } from "./scene_manager.js";
-import { cleanHREFinput, isValidHREF, random_hex, random_uuid } from "./utils.js";
+import { cleanHREFinput, isValidHREF, onCleanHREFinput, random_hex, random_uuid } from "./utils.js";
 
 /**
- * @constructor
  * @implements {Scene}
+ */
+export class CreateEditCollectionScene {
+    /**
      * @param {string} user
      * @param {string} password
      * @param {Collection} collection if it's a principal collection, a new
      *                                collection will be created inside of it.
      *                                Otherwise the collection will be edited.
      */
-export class CreateEditCollectionScene {
     constructor(user, password, collection) {
         let edit = collection.type !== CollectionType.PRINCIPAL;
         let html_scene = document.getElementById(edit ? "editcollectionscene" : "createcollectionscene");
@@ -69,7 +70,7 @@ export class CreateEditCollectionScene {
         let color = edit && collection.color ? collection.color : "#" + random_hex(6);
 
         if (!edit) {
-            href_form.addEventListener("keydown", cleanHREFinput);
+            href_form.addEventListener("input", onCleanHREFinput);
         }
 
         function remove_invalid_types() {

radicale/web/internal_data/NewShareScene.js

@@ -20,6 +20,7 @@
 
 import { add_share_by_map, add_share_by_token } from "./api.js";
 import { Scene, pop_scene, scene_stack } from "./scene_manager.js";
+import { onCleanHREFinput } from "./utils.js";
 
 /**
  * @implements {Scene}
@@ -45,6 +46,8 @@ export class NewShareScene {
         /** @type {HTMLInputElement} */ let properties_input = html_scene.querySelector("[data-name=properties]");
         /** @type {HTMLElement} */ let cancel_btn = html_scene.querySelector("[data-name=cancel]");
 
+        sharehref_input.addEventListener("input", onCleanHREFinput);
+
         /** @type {?number} */ let scene_index = null;
 
         function oncancel() {

radicale/web/internal_data/UploadCollectionScene.js

@@ -20,17 +20,19 @@
 
 import { Scene, pop_scene, scene_stack } from "./scene_manager.js";
 import { Collection } from "./models.js";
-import { cleanHREFinput, isValidHREF, random_uuid } from "./utils.js";
+import { cleanHREFinput, isValidHREF, onCleanHREFinput, random_uuid } from "./utils.js";
 import { upload_collection } from "./api.js";
 
 /**
- * @constructor
  * @implements {Scene}
+ */
+export class UploadCollectionScene {
+    /**
      * @param {string} user
      * @param {string} password
      * @param {Collection} collection parent collection
      */
-export function UploadCollectionScene(user, password, collection) {
+    constructor(user, password, collection) {
         /** @type {HTMLElement} */ let html_scene = document.getElementById("uploadcollectionscene");
         /** @type {HTMLElement} */ let template = html_scene.querySelector("[data-name=filetemplate]");
         /** @type {HTMLElement} */ let upload_btn = html_scene.querySelector("[data-name=submit]");
@@ -43,7 +45,7 @@ export function UploadCollectionScene(user, password, collection) {
         /** @type {HTMLElement} */ let pending_html = html_scene.querySelector("[data-name=pending]");
 
         let files = uploadfile_form.files;
-    href_form.addEventListener("keydown", cleanHREFinput);
+        href_form.addEventListener("input", onCleanHREFinput);
         upload_btn.onclick = upload_start;
         uploadfile_form.onchange = onfileschange;
 
@@ -73,7 +75,7 @@ export function UploadCollectionScene(user, password, collection) {
                 nodes = [];
                 for (let i = 0; i < files.length; i++) {
                     let file = files[i];
-                /** @type {HTMLElement} */ let node = template.cloneNode(true);
+                    let node = /** @type {HTMLElement} */ (template.cloneNode(true));
                     node.classList.remove("hidden");
                     let name_form = node.querySelector("[data-name=name]");
                     name_form.textContent = file.name;
@@ -212,3 +214,4 @@ export function UploadCollectionScene(user, password, collection) {
             }
         };
     }
+}

radicale/web/internal_data/utils.js

@@ -47,19 +47,18 @@ export function random_uuid() {
 export function random_hex(length) {
     let bytes = new Uint8Array(Math.ceil(length / 2));
     window.crypto.getRandomValues(bytes);
-    return bytes.reduce((s, b) => s + b.toString(16).padStart(2, "0"), "").substring(0, length);
+    // Fallback for compatibility with older browsers which may not have padStart
+    return bytes.reduce((s, b) => {
+        let hex = b.toString(16);
+        return s + (String.prototype["padStart"] ? hex["padStart"](2, "0") : ("0" + hex).slice(-2));
+    }, "").substring(0, length);
 }
 
 /**
  * Removed invalid HREF characters for a collection HREF.
- *
- * @param a A valid Input element or an onchange Event of an Input element.
+ * @param {HTMLInputElement} href_form A valid Input element or an onchange Event of an Input element.
  */
-export function cleanHREFinput(a) {
-    let href_form = a;
-    if (a.target) {
-        href_form = a.target;
-    }
+export function cleanHREFinput(href_form) {
     let currentTxtVal = href_form.value.trim().toLowerCase();
     //Clean the HREF to remove not permitted chars
     currentTxtVal = currentTxtVal.replace(/(?![0-9a-z\-\_\.])./g, '');
@@ -68,11 +67,19 @@ export function cleanHREFinput(a) {
     href_form.value = currentTxtVal;
 }
 
+/**
+ * Event listener for cleaning HREF input.
+ * @param {Event} event
+ */
+export function onCleanHREFinput(event) {
+    if (event.target instanceof HTMLInputElement) {
+        cleanHREFinput(event.target);
+    }
+}
+
 /**
  * Checks if a proposed HREF for a collection has a valid format and syntax.
- *
- * @param href String of the porposed HREF.
- *
+ * @param {string} href String of the proposed HREF.
  * @return Boolean results if the HREF is valid.
  */
 export function isValidHREF(href) {
@@ -88,16 +95,15 @@ export function isValidHREF(href) {
 
 /**
  * Format bytes to human-readable text.
- *
- * @param bytes Number of bytes.
- *
+ * @param {number} bytes Number of bytes.
  * @return Formatted string.
  */
-export function bytesToHumanReadable(bytes, dp=1) {
-    let isNumber = !isNaN(parseFloat(bytes)) && !isNaN(bytes - 0);
-    if(!isNumber){
+export function bytesToHumanReadable(bytes) {
+    if (isNaN(bytes - 0)) {
         return "";
     }
-    var i = bytes == 0 ? 0 : Math.floor(Math.log(bytes) / Math.log(1024));
-    return (bytes / Math.pow(1024, i)).toFixed(dp) * 1 + ' ' + ['b', 'kb', 'mb', 'gb', 'tb'][i];
+    const units = ['b', 'kb', 'mb', 'gb', 'tb'];
+    let i = bytes == 0 ? 0 : Math.floor(Math.log(bytes) / Math.log(1024));
+    i = Math.min(i, units.length - 1);
+    return (bytes / Math.pow(1024, i)) + ' ' + units[i];
 }