add download page and share link ui

frontend/src/download.js

@@ -1,53 +1,64 @@
 const FileReceiver = require('./fileReceiver');
 
-let download = () => {
+$(document).ready(function(){
-  const fileReceiver = new FileReceiver();
+  $('.send-new').click(()=>{
-
+    window.location.replace(`${window.location.origin}`);
-  let li = document.createElement('li');
-  let name = document.createElement('p');
-  li.appendChild(name);
-  let progress = document.createElement('p');
-  li.appendChild(progress);
-
-  document.getElementById('downloaded_files').appendChild(li);
-
-  fileReceiver.on('progress', percentComplete => {
-    progress.innerText = `Progress: ${percentComplete}%`;
-
-    if (percentComplete === 100) {
-      fileReceiver.removeAllListeners('progress');
-
-      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 download = () => {
+    const fileReceiver = new FileReceiver();
 
-  fileReceiver.download()
+    let li = document.createElement('li');
-  .catch((err) => {
+    let name = document.createElement('p');
-    console.log('The file has expired, or has already been deleted.');
+    let progress = document.createElement('p');
-    document.getElementById('downloaded_files').removeChild(li);
+    let btn = $('#download-btn');
-    return;
-  })
-  .then(([decrypted, fname]) => {
-    name.innerText = fname;
-    let dataView = new DataView(decrypted);
-    let blob = new Blob([dataView]);
-    let downloadUrl = URL.createObjectURL(blob);
 
-    let a = document.createElement('a');
+    // li.appendChild(name);
-    a.href = downloadUrl;
+    // li.appendChild(progress);
-    a.download = fname;
-    document.body.appendChild(a);
-    a.click();
-  });
-};
 
-window.download = download;
+    //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 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);
+      return;
+    })
+    .then(([decrypted, fname]) => {
+      name.innerText = fname;
+      let dataView = new DataView(decrypted);
+      let blob = new Blob([dataView]);
+      let downloadUrl = URL.createObjectURL(blob);
+
+      let a = document.createElement('a');
+      a.href = downloadUrl;
+      a.download = fname;
+      document.body.appendChild(a);
+      a.click();
+    });
+  };
+
+  window.download = download;
+});

frontend/src/upload.js

@@ -1,50 +1,87 @@
 const FileSender = require('./fileSender');
 
-let onChange = event => {
+$(document).ready(function(){
-  const file = event.target.files[0];
+  let copyBtn = $('#copy-btn');
+  copyBtn.attr("disabled", false);
+  copyBtn.html("Copy");
+  $('#page-one').show();
+  $('#file-list').hide();
+  $('#upload-progress').hide();
+  $('#share-link').hide();
 
-  let fileList = document.getElementById('uploaded-files');
+  copyBtn.click(()=>{
-  let row = document.createElement('tr');
+    console.log("copied");
-  let name = document.createElement('td');
+    var aux = document.createElement("input");
-  let link = document.createElement('td');
+    aux.setAttribute("value", $('#link').attr("value"));
-  let expiry = document.createElement('td');
+    document.body.appendChild(aux);
-
+    aux.select();
-  let cellText = document.createTextNode(file.name);
+    document.execCommand("copy");
-
+    document.body.removeChild(aux);
-  name.appendChild(cellText);
+    copyBtn.attr("disabled", true);
-
+    copyBtn.html("Copied!");
-  let progress = document.createElement('p');
-
-  row.appendChild(name);
-  row.appendChild(link);
-  row.appendChild(expiry);
-  fileList.appendChild(row);
-
-  const fileSender = new FileSender(file);
-  fileSender.on('progress', percentComplete => {
-    progress.innerText = `Progress: ${percentComplete}%`;
   });
-  fileSender.upload().then(info => {
+  $('.send-new').click(()=>{
-    const url = `${window.location
+    $('#page-one').show();
-      .origin}/download/${info.fileId}/#${info.secretKey}`;
+    $('#file-list').show();
-    link.innerHTML = url;
+    $('#upload-progress').hide();
-    localStorage.setItem(info.fileId, info.deleteToken);
+    $('#share-link').hide();
-    let del = document.createElement('td');
+    copyBtn.attr("disabled", false);
-    let btn = document.createElement('button');
+    copyBtn.html("Copy");
-    btn.innerHTML = 'x';
+  });
-    btn.classList.add('delete-btn');
+
-    btn.addEventListener('click', () => {
+  let onChange = event => {
-      FileSender.delete(
+    const file = event.target.files[0];
-        info.fileId,
+
-        localStorage.getItem(info.fileId)
+    let fileList = $('#uploaded-files');
-      ).then(() => {
+    let row = document.createElement('tr');
-        fileList.removeChild(row);
+    let name = document.createElement('td');
-        localStorage.removeItem(info.fileId);
+    let link = document.createElement('td');
-      });
+    let expiry = document.createElement('td');
+
+    let cellText = document.createTextNode(file.name);
+
+    name.appendChild(cellText);
+
+    let progress = document.createElement('p');
+
+    row.appendChild(name);
+    row.appendChild(link);
+    row.appendChild(expiry);
+    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}%`;
     });
-    del.appendChild(btn);
+    fileSender.upload().then(info => {
-    row.appendChild(del);
+      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', (e) => {
+          FileSender.delete(
+            info.fileId,
+            localStorage.getItem(info.fileId)
+          ).then(() => {
+            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>
+  <title>Download your file</title>
-<script type="text/javascript" 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" />
 </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 id="downloaded_files">
-  </ul>
+  </ul> -->
 
 </body>
-</html> 
+</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=18%>Expires in</th>
-          <th width=5%>Delete</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     ***/
-
+html {
-/**   page-one    **/
-body {
   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;
+  min-height: 447px;
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  margin: auto;
   background-color: white;
   border-radius: 5px;
 }
 
 .title {
   font-size: 14px;
-  width: 50%;
+  width: 80%;
-  margin: 50px auto ;
+  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;
+}