Fixes #29 Link label

static/public/js/uiShare.js

@@ -133,10 +133,8 @@ async function buildTypeDepandentDiv(htmlElement, data) {
     }
 }
 
-async function buildShareItem(data) {
-    const htmlId = `collapseShareItem${data.dbId}`;
-    let container = document.createElement("li");
-    container.className = "accordion-item";
+function buildShareItemHeader(htmlId, data, accordionBody) {
+    let container = document.createDocumentFragment();
     let header = document.createElement("h2");
     header.className = "accordion-header";
     let headerButton = document.createElement("button");
@@ -148,24 +146,43 @@ async function buildShareItem(data) {
     headerButton.ariaExpanded = false;
     headerButton.ariaControls = htmlId;
     let accordionBodyContainer = document.createElement("div");
-    accordionBodyContainer.className = "accordion-collapse collapse";
+    accordionBodyContainer.className = "accordion-collapse collapse row";
     accordionBodyContainer.dataset.bsParent = "#pch-share-container";
     accordionBodyContainer.id = htmlId;
-    let accordionBody = document.createElement("div");
-    accordionBody.className = "accordion-body";
-    let typeDivRow = document.createElement("div");
-    typeDivRow.className = "row";
-    let typeDepandentDiv = document.createElement("div");
-    let grantDiv = document.createElement("div");
+    header.appendChild(headerButton);
+    container.appendChild(header);
+    accordionBodyContainer.appendChild(accordionBody);
+    container.appendChild(accordionBodyContainer);
+    return container;
+}
 
+function buildShareItemRevokeButton(data, container) {
+    let deleteButtonRow = document.createElement("div");
+    let deleteButtonDiv = document.createElement("div");
+    let deleteButton = document.createElement("button");
+    deleteButtonRow.className = "container";
+    deleteButtonDiv.className = "col align-self-end";
+    deleteButton.className = "btn btn-danger";
+    deleteButton.textContent = "Revoke";
+    deleteButtonRow.appendChild(deleteButtonDiv);
+    deleteButtonDiv.appendChild(deleteButton);
+    deleteButton.addEventListener("click", () => {
+        revokeData(data.dbId).then(success => success && container.remove());
+    });
+    return deleteButtonRow;
+}
+
+function buildShareItemLinkSpecific(htmlId, data) {
     if (data.typeId === 3) { // Link type
+        let typeDivRow = document.createDocumentFragment();
         let linkContainer = document.createElement("div");
-        linkContainer.className = "input-group";
+        linkContainer.className = "input-group container";
         let text = document.createElement("span");
         text.className = "input-group-text bi bi-link-45deg";
         linkContainer.appendChild(text);
         let input = document.createElement("input");
-        input.value = `${document.location.origin}/linkLogin?link=${data.typeData}`;
+        const linkHref = `${document.location.origin}/linkLogin?link=${data.typeData}`;
+        input.value = linkHref;
         input.className = "form-control";
         input.type = "text";
         input.disabled = true;
@@ -178,65 +195,84 @@ async function buildShareItem(data) {
         bt.appendChild(btContent);
         linkContainer.appendChild(bt);
         typeDivRow.appendChild(linkContainer);
-        bt.addEventListener("click", () => { navigator.clipboard.writeText(input.value); });
-    }
+        bt.addEventListener("click", () => { navigator.clipboard.writeText(linkHref); });
 
-    {
-        let typeDiv = document.createElement("div");
-        typeDiv.className = "dropdown";
-        typeDiv.id = `pch-share-${data.dbId}-typeDropdown`
-        let button = document.createElement("button");
-        button.className = "btn btn-secondary dropdown-toggle bi";
-        button.classList.add(TYPE_ICON[data.accessToId]);
-        button.textContent = TYPE_TEXT[data.accessToId];
-        button.type = "button";
-        button.setAttribute("data-bs-toggle", "dropdown");
-        button.setAttribute("aria-expanded", false);
-        button.id = `${typeDiv.id}-button`;
-        let dropdownMenu = document.createElement("ul");
-        dropdownMenu.className = "dropdown-menu";
-
-        for (let i =1; i <= TYPE_TEXT.length; ++i) {
-            let li = document.createElement("li");
-            let a = document.createElement("a");
-            a.className = "dropdown-item bi";
-            if (i === data.accessToId)
-                a.classList.add("active");
-            a.href="#";
-            a.classList.add(TYPE_ICON[i]);
-            a.textContent = TYPE_TEXT[i];
-            a.addEventListener("click", async () => {
-                let dbData = await getData();
-                let dataIdx = dbData.findIndex(item => item.dbId === data.dbId);
-                if (dataIdx === -1 || dbData[dataIdx].accessToId === i)
-                    return;
-                dbData[dataIdx].accessToId = i;
-                button.className = "btn btn-secondary dropdown-toggle bi";
-                button.textContent = TYPE_TEXT[data.accessToId];
-                button.classList.add(TYPE_ICON[data.accessToId]);
-                button.setAttribute("aria-expanded", false);
-                dropdownMenu.classList.remove("show");
-                dropdownMenu.querySelectorAll(".active").forEach(i => i.classList.remove("active"));
-                a.classList.add("active");
-                if (dbData[dataIdx].accessToId === 5)
-                    grantDiv.classList.add("hidden");
-                else
-                    grantDiv.classList.remove("hidden");
-                await buildTypeDepandentDiv(typeDepandentDiv, dbData[dataIdx]);
-                await updateData(dbData[dataIdx]);
-            });
-            li.appendChild(a);
-            dropdownMenu.appendChild(li);
-        }
+        linkContainer = document.createElement("div");
+        linkContainer.className = "container";
+        input = document.createElement("input");
+        input.className = "form-control";
+        input.value = data.typeLabel;
+        input.type = "text";
+        input.id = `${htmlId}-linkLabel`;
+        let label = document.createElement("label");
+        label.textContent = "Link label";
+        label.className = "form-label"
+        label.setAttribute("for", input.id);
+        linkContainer.appendChild(label);
+        linkContainer.appendChild(input);
+        input.addEventListener("change", async () => {
+            data.typeLabel = input.value;
+            await updateData(data);
+        });
+        typeDivRow.appendChild(linkContainer);
+        return typeDivRow;
+    }
+}
 
-        typeDiv.appendChild(button);
-        typeDiv.appendChild(dropdownMenu);
-        typeDivRow.appendChild(typeDiv);
-        await buildTypeDepandentDiv(typeDepandentDiv, data);
-        typeDivRow.appendChild(typeDepandentDiv);
+async function buildShareItemType(typeDepandentDiv, grantDiv, data) {
+    let typeDiv = document.createElement("div");
+    typeDiv.className = "dropdown container";
+    typeDiv.id = `pch-share-${data.dbId}-typeDropdown`
+    let button = document.createElement("button");
+    button.className = "btn btn-secondary dropdown-toggle bi";
+    button.classList.add(TYPE_ICON[data.accessToId]);
+    button.textContent = TYPE_TEXT[data.accessToId];
+    button.type = "button";
+    button.setAttribute("data-bs-toggle", "dropdown");
+    button.setAttribute("aria-expanded", false);
+    button.id = `${typeDiv.id}-button`;
+    let dropdownMenu = document.createElement("ul");
+    dropdownMenu.className = "dropdown-menu";
+    for (let i =1; i <= TYPE_TEXT.length; ++i) {
+        let li = document.createElement("li");
+        let a = document.createElement("a");
+        a.className = "dropdown-item bi";
+        if (i === data.accessToId)
+            a.classList.add("active");
+        a.href="#";
+        a.classList.add(TYPE_ICON[i]);
+        a.textContent = TYPE_TEXT[i];
+        a.addEventListener("click", async () => {
+            let dbData = await getData();
+            let dataIdx = dbData.findIndex(item => item.dbId === data.dbId);
+            if (dataIdx === -1 || dbData[dataIdx].accessToId === i)
+                return;
+            dbData[dataIdx].accessToId = i;
+            button.className = "btn btn-secondary dropdown-toggle bi";
+            button.textContent = TYPE_TEXT[data.accessToId];
+            button.classList.add(TYPE_ICON[data.accessToId]);
+            button.setAttribute("aria-expanded", false);
+            dropdownMenu.classList.remove("show");
+            dropdownMenu.querySelectorAll(".active").forEach(i => i.classList.remove("active"));
+            a.classList.add("active");
+            if (dbData[dataIdx].accessToId === 5)
+                grantDiv.classList.add("hidden");
+            else
+                grantDiv.classList.remove("hidden");
+            await buildTypeDepandentDiv(typeDepandentDiv, dbData[dataIdx]);
+            await updateData(dbData[dataIdx]);
+        });
+        li.appendChild(a);
+        dropdownMenu.appendChild(li);
     }
+    typeDiv.appendChild(button);
+    typeDiv.appendChild(dropdownMenu);
+    await buildTypeDepandentDiv(typeDepandentDiv, data);
+    return typeDiv;
+}
 
-    grantDiv.className = "dropdown";
+function buildShareItemGrant(grantDiv, data) {
+    grantDiv.className = "dropdown container";
     if (data.accessToId === 5)
         grantDiv.classList.add("hidden");
     grantDiv.id = `pch-share-${data.dbId}-grantDropdown`;
@@ -279,31 +315,28 @@ async function buildShareItem(data) {
     }
     grantDiv.appendChild(button);
     grantDiv.appendChild(dropdownMenu);
-    typeDivRow.appendChild(grantDiv);
+    return grantDiv;
+}
 
-    let deleteButtonRow = document.createElement("div");
-    let deleteButtonDiv = document.createElement("div");
-    let deleteButton = document.createElement("button");
-    deleteButtonRow.className = "row";
-    deleteButtonDiv.className = "col align-self-end";
-    deleteButton.className = "btn btn-danger";
-    deleteButton.textContent = "Revoke";
-    deleteButtonRow.appendChild(deleteButtonDiv);
-    deleteButtonDiv.appendChild(deleteButton);
-    deleteButton.addEventListener("click", async () => {
-        revokeData(data.dbId).then(success => {
-            if (success) {
-                container.remove();
-            }
-        });
-    });
+async function buildShareItem(data) {
+    const htmlId = `collapseShareItem${data.dbId}`;
+    let container = document.createElement("li");
+    container.className = "accordion-item";
+    let accordionBody = document.createElement("div");
+    accordionBody.className = "accordion-body";
+    let typeDepandentDiv = document.createElement("div");
+    typeDepandentDiv.className = "container";
+    let grantDiv = document.createElement("div");
 
-    header.appendChild(headerButton);
-    container.appendChild(header);
-    accordionBody.appendChild(typeDivRow);
-    accordionBody.appendChild(deleteButtonRow);
-    accordionBodyContainer.appendChild(accordionBody);
-    container.appendChild(accordionBodyContainer);
+    container.appendChild(buildShareItemHeader(htmlId, data, accordionBody));
+    {
+        const div = buildShareItemLinkSpecific(htmlId, data);
+        div && accordionBody.appendChild(div);
+    }
+    accordionBody.appendChild(await buildShareItemType(typeDepandentDiv, grantDiv, data));
+    accordionBody.appendChild(typeDepandentDiv);
+    accordionBody.appendChild(buildShareItemGrant(grantDiv, data));
+    accordionBody.appendChild(buildShareItemRevokeButton(data, container));
     return container;
 }