add download page and share link ui

frontend/src/download.js

@@ -1,39 +1,49 @@
 const FileReceiver = require('./fileReceiver');
 
-let download = () => {
+$(document).ready(function(){
+  $('.send-new').click(()=>{
+    window.location.replace(`${window.location.origin}`);
+  });
+  let download = () => {
     const fileReceiver = new FileReceiver();
 
     let li = document.createElement('li');
     let name = document.createElement('p');
-  li.appendChild(name);
     let progress = document.createElement('p');
-  li.appendChild(progress);
+    let btn = $('#download-btn');
 
-  document.getElementById('downloaded_files').appendChild(li);
+    // li.appendChild(name);
+    // li.appendChild(progress);
+
+    //document.getElementById('downloaded_files').appendChild(li);
 
     fileReceiver.on('progress', percentComplete => {
       progress.innerText = `Progress: ${percentComplete}%`;
 
       if (percentComplete === 100) {
         fileReceiver.removeAllListeners('progress');
+        btn.text('Download complete!');
+        btn.attr("disabled", "true");
+        // let finished = document.createElement('p');
+        // finished.innerText = 'Your download has finished.';
+        // li.appendChild(finished);
 
-      let finished = document.createElement('p');
-      finished.innerText = 'Your download has finished.';
-      li.appendChild(finished);
-
-      let close = document.createElement('button');
-      close.innerText = 'Ok';
-      close.addEventListener('click', () => {
-        document.getElementById('downloaded_files').removeChild(li);
-      });
-      li.appendChild(close);
+        // let close = document.createElement('button');
+        // close.innerText = 'Ok';
+        // close.addEventListener('click', () => {
+        //   document.getElementById('downloaded_files').removeChild(li);
+        // });
+        // li.appendChild(close);
       }
     });
 
     fileReceiver.download()
     .catch((err) => {
+      $('.title').text('This link has expired or never existed in the first place.');
+      $('#download-btn').hide();
+      $('#expired-img').show();
       console.log('The file has expired, or has already been deleted.');
-    document.getElementById('downloaded_files').removeChild(li);
+      // document.getElementById('downloaded_files').removeChild(li);
       return;
     })
     .then(([decrypted, fname]) => {
@@ -48,6 +58,7 @@ let download = () => {
       document.body.appendChild(a);
       a.click();
     });
-};
+  };
 
-window.download = download;
+  window.download = download;
+});

frontend/src/upload.js

@@ -1,9 +1,38 @@
 const FileSender = require('./fileSender');
 
-let onChange = event => {
+$(document).ready(function(){
+  let copyBtn = $('#copy-btn');
+  copyBtn.attr("disabled", false);
+  copyBtn.html("Copy");
+  $('#page-one').show();
+  $('#file-list').hide();
+  $('#upload-progress').hide();
+  $('#share-link').hide();
+
+  copyBtn.click(()=>{
+    console.log("copied");
+    var aux = document.createElement("input");
+    aux.setAttribute("value", $('#link').attr("value"));
+    document.body.appendChild(aux);
+    aux.select();
+    document.execCommand("copy");
+    document.body.removeChild(aux);
+    copyBtn.attr("disabled", true);
+    copyBtn.html("Copied!");
+  });
+  $('.send-new').click(()=>{
+    $('#page-one').show();
+    $('#file-list').show();
+    $('#upload-progress').hide();
+    $('#share-link').hide();
+    copyBtn.attr("disabled", false);
+    copyBtn.html("Copy");
+  });
+
+  let onChange = event => {
     const file = event.target.files[0];
 
-  let fileList = document.getElementById('uploaded-files');
+    let fileList = $('#uploaded-files');
     let row = document.createElement('tr');
     let name = document.createElement('td');
     let link = document.createElement('td');
@@ -18,33 +47,41 @@ let onChange = event => {
     row.appendChild(name);
     row.appendChild(link);
     row.appendChild(expiry);
-  fileList.appendChild(row);
+    fileList.append(row);
 
     const fileSender = new FileSender(file);
     fileSender.on('progress', percentComplete => {
+      $('#page-one').hide();
+      $('#file-list').hide();
+      $('#upload-progress').show();
+      $('#upload-filename').innerHTML += file.name;
       progress.innerText = `Progress: ${percentComplete}%`;
     });
     fileSender.upload().then(info => {
       const url = `${window.location
         .origin}/download/${info.fileId}/#${info.secretKey}`;
+        $('#link').attr("value", url);
         link.innerHTML = url;
         localStorage.setItem(info.fileId, info.deleteToken);
         let del = document.createElement('td');
         let btn = document.createElement('button');
         btn.innerHTML = 'x';
         btn.classList.add('delete-btn');
-    btn.addEventListener('click', () => {
+        btn.addEventListener('click', (e) => {
           FileSender.delete(
             info.fileId,
             localStorage.getItem(info.fileId)
           ).then(() => {
-        fileList.removeChild(row);
+            e.target.parentNode.parentNode.remove();
             localStorage.removeItem(info.fileId);
           });
         });
         del.appendChild(btn);
         row.appendChild(del);
+        $('#upload-progress').hide();
+        $('#share-link').show();
       });
-};
+    };
 
-window.onChange = onChange;
+    window.onChange = onChange;
+  });

public/download.html

@@ -1,15 +1,31 @@
 <!DOCTYPE html>
 <html>
 <head>
-<title>Download your file</title>
-<script type="text/javascript" src="/bundle.js"></script>
+  <title>Download your file</title>
+  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
+  <script src="/bundle.js"></script>
+  <link rel="stylesheet" href="https://code.cdn.mozilla.net/fonts/fira.css">
+  <link rel="stylesheet" type="text/css" href="/main.css" />
 </head>
 <body>
 
-  <button onclick="download()">DOWNLOAD</button>
+  <div class="main-window">
+    <div id="download">
+      <div class="title">
+        Your friend is sending you a file:
+      </div>
+      <div class="share-window">
+        <button id="download-btn" onclick="download()">Download File</button>
+        <img id="expired-img" src="/resources/link_expired.png"/>
+      </div>
+      <div class="send-new">
+        Send your own files
+      </div>
+    </div>
+  </div>
 
-  <ul id="downloaded_files">
-  </ul>
+  <!-- <ul id="downloaded_files">
+  </ul> -->
 
 </body>
 </html>

public/index.html

@@ -2,9 +2,10 @@
 <html>
 <head>
   <title>Firefox Fileshare</title>
-  <script src="bundle.js"></script>
+  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
+  <script src="/bundle.js"></script>
   <link rel="stylesheet" href="https://code.cdn.mozilla.net/fonts/fira.css">
-  <link rel="stylesheet" type="text/css" href="main.css" />
+  <link rel="stylesheet" type="text/css" href="/main.css" />
 </head>
 <body>
 
@@ -14,7 +15,7 @@
         Share your files quickly, privately and securely.
       </div>
       <div class="upload-window">
-        <div id="upload-img"><img src="resources/upload.svg"/></div>
+        <div id="upload-img"><img src="/resources/upload.svg"/></div>
         <div>
           DRAG &amp; DROP
         </div>
@@ -24,7 +25,7 @@
           </div>
           <div id="browse">
             <form method="post" action="upload" enctype="multipart/form-data">
-              <label for="file-upload" class="file-upload">browse.</label>
+              <label for="file-upload" class="file-upload">browse</label>
               <input id="file-upload" type="file" onchange="onChange(event)" name="fileUploaded" />
             </form>
           </div>
@@ -37,12 +38,47 @@
         <tr>
           <th width=30%>File</th>
           <th width=45%>Copy URL</th>
-          <th width=20%>Expires in</th>
-          <th width=5%>Delete</th>
+          <th width=18%>Expires in</th>
+          <th width=7%>Delete</th>
         </tr>
+        <div data-role="popup" id="popupArrow" data-arrow="true">
       </table>
     </div>
 
+    <div id="upload-progress">
+      <div class="title" id="upload-filename">
+        Uploading
       </div>
+      <div class="upload-window">
+        <div id="upload-img"><img src="/resources/upload.svg"/></div>
+        <div class="upload">
+          <!-- progress bar here -->
+        </div>
+      </div>
+    </div>
+
+    <div id="share-link">
+      <div class="title">
+        Copy the link below to share your file!
+      </div>
+      <div class="share-window">
+        <img src="/resources/share.png"/>
+        <div id="share-window-r">
+          <div id="copy">
+            <input id="link" type="url" value="" readonly/>
+            <button id="copy-btn">Copy</button>
+          </div>
+          <div>
+            This link expires after one download
+          </div>
+        </div>
+      </div>
+      <div class="send-new">
+        Send another file
+      </div>
+    </div>
+
+  </div>
+
 </body>
 </html>

public/main.css

@@ -1,32 +1,35 @@
 /***     index.html     ***/
-
-/**   page-one    **/
-body {
+html {
   background: url('resources/background.png');
   font-family: 'Fira Sans';
   font-weight: 300;
   font-style: normal;
-  background-size: cover;
+  background-size: contain;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  align-content: center;
+  flex-direction: column;
+}
+input, select, textarea, button {
+  font-family:inherit;
 }
 
+/**   page-one    **/
 .main-window {
   border: 1px solid;
   width: 606px;
-  height: 447px;
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  margin: auto;
+  min-height: 447px;
   background-color: white;
   border-radius: 5px;
 }
 
 .title {
   font-size: 14px;
-  width: 50%;
-  margin: 50px auto ;
+  width: 80%;
+  margin: 50px auto;
+  text-align: center;
 }
 
 .upload-window {
@@ -44,7 +47,7 @@ body {
 
 #browse {
   float: right;
-  color: blue;
+  color: #2D7EFF;
 }
 
 #browse-text {
@@ -96,12 +99,6 @@ td {
   width: 472px;
   margin: 10px auto ;
   table-layout: fixed;
-  overflow-y: scroll;
-}
-
-#file-list {
-  overflow-y: scroll;
-  height: 90px;
 }
 
 .delete-btn {
@@ -110,3 +107,93 @@ td {
   background: none;
   cursor: pointer;
 }
+
+/**   upload-progress   **/
+
+
+/**   share-link    **/
+.share-window {
+  width: 50%;
+  margin: 0 auto;
+  width: 470px;
+  height: 250px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+#share-window-r {
+  width: 50%;
+  margin: 0 auto;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+}
+
+#share-window-r>div {
+  font-size: 12px;
+  padding-bottom: 10px;
+}
+
+#copy {
+  display: flex;
+  flex-wrap: nowrap;
+}
+
+#link {
+  width: 216px;
+  height: 41px;
+  border: 1px solid #979797;
+}
+
+#copy-btn {
+  width: 60px;
+  height: 45px;
+  background: #337FEB;
+  border: 1px solid #979797;
+  color: white;
+  cursor: pointer;
+}
+
+#copy-btn:disabled {
+  background: #47B04B;
+  cursor: auto;
+}
+
+.send-new {
+  font-size: 14px;
+  margin: auto;
+  width: 80%;
+  text-align: center;
+  color: #2D7EFF;
+  cursor: pointer;
+}
+
+/**   download.html **/
+#download-btn {
+  font-size: 18px;
+  color: white;
+  width: 214px;
+  height: 87px;
+  margin: 50px auto;
+  text-align: center;
+  background: #337FEB;
+  border: 1px solid #3EA050;
+  border-radius: 6px;
+  font-weight: 300;
+  cursor: pointer;
+}
+
+#download-btn:disabled {
+  background: #47B04B;
+  cursor: auto;
+}
+
+#download {
+  text-align: center;
+}
+
+#expired-img {
+  display: none;
+}