Added file sharing feature

6 files changed, 67 insertions, 7 deletions

diff --git a/src/main/resources/css/files.css b/src/main/resources/css/files.css
index 3ceb173..c7302bf 100644
--- a/src/main/resources/css/files.css
+++ b/src/main/resources/css/files.css
@@ -45,11 +45,15 @@ colgroup col:nth-child(2) {
 }
 
 colgroup col:nth-child(3) {
-    width: 30%;
+    width: 25%;
 }
 
 colgroup col:nth-child(4) {
-    width: 15%;
+    width: 10%;
+}
+
+colgroup col:nth-child(5) {
+    width: 10%;
 }
 
 .drop {
@@ -70,3 +74,16 @@ colgroup col:nth-child(4) {
     transform: scale(1.3);
     color: red;
 }
+
+.share {
+    font-size: 20px;
+    background-color: inherit;
+    border: 0;
+    z-index: 100;
+    cursor: pointer;
+}
+
+.share:hover {
+    transform: scale(1.3);
+    color: dodgerblue;
+}
diff --git a/src/main/resources/fonts/ionicons .eot b/src/main/resources/fonts/ionicons .eot
new file mode 100644
index 0000000..671df91
--- /dev/null
+++ b/src/main/resources/fonts/ionicons .eot
diff --git a/src/main/resources/js/files.js b/src/main/resources/js/files.js
index 8b8bd87..f776165 100644
--- a/src/main/resources/js/files.js
+++ b/src/main/resources/js/files.js
@@ -33,7 +33,8 @@ drop.addEventListener('drop', e => {
         row.insertCell(0).innerHTML = file.name;
         row.insertCell(1).innerHTML = bytesToSize(file.size);
         row.insertCell(2).innerHTML = `${date.getMonth() + 1}/${date.getDate()}/${date.getFullYear()} ${date.getHours()}:${date.getMinutes()}:${date.getSeconds()}`;
-        row.insertCell(3).innerHTML = "<td><button class='delete'><i class='icon ion-md-trash'></i></button></td>";
+        row.insertCell(3).innerHTML = "<td><button class='share'><i class='icon ion-md-share'></i></button></td>";
+        row.insertCell(4).innerHTML = "<td><button class='delete'><i class='icon ion-md-trash'></i></button></td>";
 
         setListeners();
 
@@ -128,6 +129,34 @@ function setListeners() {
             parent.remove();
         })
     });
+
+    // share button
+    document.querySelectorAll(".share").forEach(element => {
+        element.addEventListener("click", e => {
+            e.stopPropagation();
+            const request = new XMLHttpRequest();
+            const parent = e.target.closest("tr");
+            const fileName = parent.getAttribute("data-href") || parent.getAttribute("data-path");
+
+            request.open("POST", `/share/${path}/${fileName}`);
+            request.onload = () => {
+                if (request.readyState === 4) {
+                    if (request.status === 200) {
+                        const input = document.createElement('input');
+                        input.setAttribute('value', request.responseText);
+                        document.body.appendChild(input);
+                        input.select();
+                        document.execCommand('copy');
+                        document.body.removeChild(input);
+                        alert("Copied url to clipboard!")
+                    } else {
+                        alert("Something went wrong.");
+                    }
+                }
+            };
+            request.send();
+        })
+    });
 }
 
 setListeners();
diff --git a/src/main/resources/js/fileview.js b/src/main/resources/js/fileview.js
index ace7884..d78c342 100644
--- a/src/main/resources/js/fileview.js
+++ b/src/main/resources/js/fileview.js
@@ -1,6 +1,7 @@
 const preview = document.getElementById("preview");
 const content = document.getElementById("content");
-const body = document.getElementsByTagName("body")[0];
+const html = document.getElementsByTagName("html")[0];
+const body = document.body;
 
 // buttons
 const raw = document.getElementById("raw");
@@ -23,12 +24,14 @@ if (extension === "md" || extension === "html") {
 
     raw.addEventListener("click", () => {
         if (preview.style.display === "block") {
+            html.style.overflow = "visible";
             body.style.overflow = "visible";
             raw.innerText = "Show preview";
             preview.style.display = "none";
             content.style.display = "block";
             settings.style.display = "block";
         } else {
+            html.style.overflow = "hidden";
             body.style.overflow = "hidden";
             raw.innerText = "Show raw";
             preview.style.display = "block";
diff --git a/src/main/resources/views/files.rocker.html b/src/main/resources/views/files.rocker.html
index acbe812..0e42891 100644
--- a/src/main/resources/views/files.rocker.html
+++ b/src/main/resources/views/files.rocker.html
@@ -35,6 +35,7 @@
             <th data-asc="true">Name</th>
             <th data-asc="true">Size</th>
             <th data-asc="true">Last modified</th>
+            <th data-asc="true">Share</th>
             <th data-asc="true">Delete</th>
         </tr>
         <tr data-href="../">
@@ -42,6 +43,7 @@
             <td></td>
             <td></td>
             <td></td>
+            <td></td>
         </tr>
         </thead>
 
@@ -56,6 +58,9 @@
             <td data-size="@fileArray[4]">@fileArray[1]</td>
             <td data-date="@fileArray[5]">@fileArray[2]</td>
             <td>
+                <button class="share"><i class="icon ion-md-share"></i></button>
+            </td>
+            <td>
                 <button class="delete"><i class="icon ion-md-trash"></i></button>
             </td>
         </tr>
diff --git a/src/main/resources/views/index.rocker.html b/src/main/resources/views/index.rocker.html
index 4f5d32b..a0b4035 100644
--- a/src/main/resources/views/index.rocker.html
+++ b/src/main/resources/views/index.rocker.html
@@ -4,10 +4,16 @@
 <h1>Welcome to Kloud <i>@username</i>!</h1>
 
 @if(username.length() > 0) {
-<button><a href="/logout/">Logout</a></button>
+<a href="/logout">
+    <button>Logout</button>
+</a>
 } else {
-<button><a href="/login/">Login</a></button>
+<a href="/login">
+    <button>Login</button>
+</a>
 }
 
-<button><a href="/files/">Files</a></button>
+<a href="/files/">
+    <button>Files</button>
+</a>
 }