feat(front): handle read-only link sharing

src/css/main.css

@@ -8,6 +8,8 @@ body {
     height: calc(var(--vh, 1vh) * 100);
     width: 100%;
     overflow: hidden;
+    font-family: "Helvetica Neue Light", "HelveticaNeue-Light", "Helvetica Neue", Calibri, Helvetica,
+        Arial, sans-serif;
 }
 
 #whiteboardContainer {
@@ -132,3 +134,33 @@ button {
 .displayNone {
     display: none;
 }
+
+#shareWhiteboardDialog {
+    width: 100vw;
+    height: 100vh;
+    background-color: rgba(1, 1, 1, 0.35);
+    z-index: 10000000000000;
+    position: absolute;
+    top: 0;
+    left: 0;
+}
+
+#shareWhiteboardDialogMessage {
+    background-color: lightgreen;
+    padding: 20px;
+    font-weight: bold;
+}
+
+.shareWhiteboardDialogContent {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-direction: column;
+    width: 100%;
+    height: 100%;
+}
+
+.shareWhiteboardDialogItem {
+    padding: 5px;
+    margin: 5px;
+}

src/index.html

@@ -258,5 +258,29 @@
             <p># msg. sent to server: <i id="messageSentCount">0</i></p>
             <p># msg. received from server: <i id="messageReceivedCount">0</i></p>
         </div>
+
+        <div id="shareWhiteboardDialog" class="displayNone">
+            <div class="shareWhiteboardDialogContent">
+                <button
+                    class="shareWhiteboardDialogItem"
+                    id="shareWhiteboardDialogCopyReadOnlyLink"
+                >
+                    <i class="fa fa-lock"></i>&nbsp;Share read-only link
+                </button>
+                <button
+                    class="shareWhiteboardDialogItem displayNone"
+                    id="shareWhiteboardDialogCopyReadWriteLink"
+                >
+                    <i class="fa fa-lock-open"></i>&nbsp;Share read/write link
+                </button>
+                <button class="shareWhiteboardDialogItem" id="shareWhiteboardDialogGoBack">
+                    <b>Go back to the whiteboard</b>
+                </button>
+                <p
+                    class="shareWhiteboardDialogItem displayNone"
+                    id="shareWhiteboardDialogMessage"
+                ></p>
+            </div>
+        </div>
     </body>
 </html>

src/js/main.js

@@ -433,25 +433,56 @@ function initWhiteboard() {
             $("#myFile").click();
         });
 
-        $("#shareWhiteboardBtn").click(function () {
-            var url = window.location.href;
-            var s = url.indexOf("&username=") !== -1 ? "&username=" : "username="; //Remove username from url
-            var urlSlpit = url.split(s);
-            var urlStart = urlSlpit[0];
-            if (urlSlpit.length > 1) {
-                var endSplit = urlSlpit[1].split("&");
-                endSplit = endSplit.splice(1, 1);
-                urlStart += "&" + endSplit.join("&");
+        $("#shareWhiteboardBtn").click(() => {
+            function urlToClipboard(whiteboardId = null) {
+                const { protocol, host, pathname, search } = window.location;
+                const basePath = `${protocol}//${host}${pathname}`;
+                const getParams = new URLSearchParams(search);
+
+                // Clear ursername from get parameters
+                getParams.delete("username");
+
+                if (whiteboardId) {
+                    // override whiteboardId value in URL
+                    getParams.set("whiteboardid", whiteboardId);
+                }
+
+                const url = `${basePath}?${getParams.toString()}`;
+                $("<textarea/>")
+                    .appendTo("body")
+                    .val(url)
+                    .select()
+                    .each(() => {
+                        document.execCommand("copy");
+                    })
+                    .remove();
             }
-            $("<textarea/>")
-                .appendTo("body")
-                .val(urlStart)
-                .select()
-                .each(function () {
-                    document.execCommand("copy");
-                })
-                .remove();
-            showBasicAlert("Copied Whiteboard-URL to clipboard.", { hideAfter: 2 });
+
+            // UI related
+            // clear message
+            $("#shareWhiteboardDialogMessage").toggleClass("displayNone", true);
+
+            $("#shareWhiteboardDialog").toggleClass("displayNone", false);
+            $("#shareWhiteboardDialogGoBack").click(() => {
+                $("#shareWhiteboardDialog").toggleClass("displayNone", true);
+            });
+
+            $("#shareWhiteboardDialogCopyReadOnlyLink").click(() => {
+                urlToClipboard(ConfigService.correspondingReadOnlyWid);
+
+                $("#shareWhiteboardDialogMessage")
+                    .toggleClass("displayNone", false)
+                    .text("Read-only link copied to clipboard ✓");
+            });
+
+            $("#shareWhiteboardDialogCopyReadWriteLink")
+                .toggleClass("displayNone", ConfigService.isReadOnly)
+                .click(() => {
+                    $("#shareWhiteboardDialogMessage")
+                        .toggleClass("displayNone", false)
+                        .text("Read/write link copied to clipboard ✓");
+                    urlToClipboard();
+                });
         });
 
         $("#displayWhiteboardInfoBtn").click(() => {