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;
 
@@ -57,7 +59,7 @@ export function UploadCollectionScene(user, password, collection) {
 
         function upload_start() {
             try {
-            if(!read_form()){
+                if (!read_form()) {
                     return false;
                 }
                 uploadfile_form.classList.add("hidden");
@@ -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;
@@ -83,32 +85,32 @@ export function UploadCollectionScene(user, password, collection) {
                     template.parentNode.insertBefore(node, template);
                 }
                 upload_next();
-        } catch(err) {
+            } catch (err) {
                 console.error(err);
             }
             return false;
         }
 
-    function upload_next(){
+        function upload_next() {
-        try{
+            try {
                 if (files.length === results.length) {
                     pending_html.classList.add("hidden");
                     close_btn.classList.remove("hidden");
                     return;
                 } else {
                     let file = files[results.length];
-                if(files.length > 1 || href.length == 0){
+                    if (files.length > 1 || href.length == 0) {
                         href = random_uuid();
                     }
                     let upload_href = collection.href + href + "/";
-                upload_req = upload_collection(user, password, upload_href, file, function(result) {
+                    upload_req = upload_collection(user, password, upload_href, file, function (result) {
                         upload_req = null;
                         results.push(result);
                         updateFileStatus(results.length - 1);
                         upload_next();
                     });
                 }
-        }catch(err){
+            } catch (err) {
                 console.error(err);
             }
         }
@@ -116,7 +118,7 @@ export function UploadCollectionScene(user, password, collection) {
         function onclose() {
             try {
                 pop_scene(scene_index - 1);
-        } catch(err) {
+            } catch (err) {
                 console.error(err);
             }
             return false;
@@ -146,13 +148,13 @@ export function UploadCollectionScene(user, password, collection) {
         function read_form() {
             cleanHREFinput(href_form);
             let newhreftxtvalue = href_form.value.trim().toLowerCase();
-        if(!isValidHREF(newhreftxtvalue)){
+            if (!isValidHREF(newhreftxtvalue)) {
                 alert("You must enter a valid HREF");
                 return false;
             }
             href = newhreftxtvalue;
 
-        if(uploadfile_form.files.length == 0){
+            if (uploadfile_form.files.length == 0) {
                 alert("You must select at least one file to upload");
                 return false;
             }
@@ -162,12 +164,12 @@ export function UploadCollectionScene(user, password, collection) {
 
         function onfileschange() {
             files = uploadfile_form.files;
-        if(files.length > 1){
+            if (files.length > 1) {
                 hreflimitmsg_html.classList.remove("hidden");
                 href_form.classList.add("hidden");
                 href_label.classList.add("hidden");
                 href_form.value = random_uuid(); // dummy, will be replaced on upload
-        }else{
+            } else {
                 hreflimitmsg_html.classList.add("hidden");
                 href_form.classList.remove("hidden");
                 href_label.classList.remove("hidden");
@@ -176,13 +178,13 @@ export function UploadCollectionScene(user, password, collection) {
             return false;
         }
 
-    this.show = function() {
+        this.show = function () {
             scene_index = scene_stack.length - 1;
             html_scene.classList.remove("hidden");
             close_btn.onclick = onclose;
         };
 
-    this.hide = function() {
+        this.hide = function () {
             html_scene.classList.add("hidden");
             close_btn.classList.remove("hidden");
             upload_btn.classList.remove("hidden");
@@ -196,19 +198,20 @@ export function UploadCollectionScene(user, password, collection) {
             upload_btn.onclick = null;
             href_form.value = "";
             uploadfile_form.value = "";
-        if(nodes == null){
+            if (nodes == null) {
                 return;
             }
-        nodes.forEach(function(node) {
+            nodes.forEach(function (node) {
                 node.parentNode.removeChild(node);
             });
             nodes = null;
         };
-    this.release = function() {
+        this.release = function () {
             scene_index = null;
             if (upload_req !== null) {
                 upload_req.abort();
                 upload_req = null;
             }
         };
+    }
 }

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 {HTMLInputElement} href_form A valid Input element or an onchange Event of an Input element.
- * @param a A valid Input element or an onchange Event of an Input element.
  */
-export function cleanHREFinput(a) {
+export function cleanHREFinput(href_form) {
-    let href_form = a;
-    if (a.target) {
-        href_form = a.target;
-    }
     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 {string} href String of the proposed HREF.
- * @param href String of the porposed 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 {number} bytes Number of bytes.
- * @param bytes Number of bytes.
- *
  * @return Formatted string.
  */
-export function bytesToHumanReadable(bytes, dp=1) {
+export function bytesToHumanReadable(bytes) {
-    let isNumber = !isNaN(parseFloat(bytes)) && !isNaN(bytes - 0);
+    if (isNaN(bytes - 0)) {
-    if(!isNumber){
         return "";
     }
-    var i = bytes == 0 ? 0 : Math.floor(Math.log(bytes) / Math.log(1024));
+    const units = ['b', 'kb', 'mb', 'gb', 'tb'];
-    return (bytes / Math.pow(1024, i)).toFixed(dp) * 1 + ' ' + ['b', 'kb', 'mb', 'gb', 'tb'][i];
+    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];
 }