Merge pull request #46 from mozilla/ui

Download page and share link UI

frontend/src/download.js

@@ -1,39 +1,52 @@
 const FileReceiver = require('./fileReceiver');
 
+$(document).ready(function() {
+  $('#send-file').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');
+        // let close = document.createElement('button');
-      finished.innerText = 'Your download has finished.';
+        // close.innerText = 'Ok';
-      li.appendChild(finished);
+        // close.addEventListener('click', () => {
-
+        //   document.getElementById('downloaded_files').removeChild(li);
-      let close = document.createElement('button');
+        // });
-      close.innerText = 'Ok';
+        // li.appendChild(close);
-      close.addEventListener('click', () => {
-        document.getElementById('downloaded_files').removeChild(li);
-      });
-      li.appendChild(close);
       }
     });
 
-  fileReceiver.download()
+    fileReceiver
-  .catch((err) => {
+      .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]) => {
@@ -51,3 +64,4 @@ let download = () => {
   };
 
   window.download = download;
+});

frontend/src/fileReceiver.js

@@ -20,9 +20,10 @@ class FileReceiver extends EventEmitter {
         };
 
         xhr.onload = function(e) {
-
           if (xhr.status === 404) {
-            reject(new Error('The file has expired, or has already been deleted.'));
+            reject(
+              new Error('The file has expired, or has already been deleted.')
+            );
             return;
           }
 
@@ -58,8 +59,7 @@ class FileReceiver extends EventEmitter {
         true,
         ['encrypt', 'decrypt']
       )
-    ])
+    ]).then(([fdata, key]) => {
-    .then(([fdata, key]) => {
       let salt = this.salt;
       return Promise.all([
         window.crypto.subtle.decrypt(

frontend/src/upload.js

@@ -1,9 +1,38 @@
 const FileSender = require('./fileSender');
 
+$(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;
+});

public/download.html

@@ -2,14 +2,30 @@
 <html>
 <head>
   <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" id="send-file">
+        Send your own files
+      </div>
+    </div>
+  </div>
 
-  <ul id="downloaded_files">
+  <!-- <ul id="downloaded_files">
-  </ul>
+  </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=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;
+  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;
+}

server/portal_server.js

@@ -1,54 +1,52 @@
-const express = require("express")
+const express = require('express');
-const busboy = require("connect-busboy");
+const busboy = require('connect-busboy');
-const path = require("path");
+const path = require('path');
-const fs = require("fs-extra");
+const fs = require('fs-extra');
-const bodyParser = require("body-parser");
+const bodyParser = require('body-parser');
-const crypto = require("crypto");
+const crypto = require('crypto');
 
-const app = express()
+const app = express();
-const redis = require("redis"),
+const redis = require('redis'),
   client = redis.createClient();
 
-client.on("error", (err) => {
+client.on('error', err => {
   console.log(err);
-})
+});
 
 app.use(busboy());
 app.use(bodyParser.json());
-app.use(express.static(path.join(__dirname, "../public")));
+app.use(express.static(path.join(__dirname, '../public')));
 
-app.get("/download/:id", (req, res) => {
+app.get('/download/:id', (req, res) => {
-  res.sendFile(path.join(__dirname + "/../public/download.html"));
+  res.sendFile(path.join(__dirname + '/../public/download.html'));
 });
 
-app.get("/assets/download/:id", (req, res) => {
+app.get('/assets/download/:id', (req, res) => {
-
   let id = req.params.id;
   if (!validateID(id)) {
     res.send(404);
     return;
   }
 
-  
+  client.hget(id, 'filename', (err, reply) => {
-  client.hget(id, "filename", (err, reply) => { // maybe some expiration logic too
+    // maybe some expiration logic too
     if (!reply) {
       res.sendStatus(404);
     } else {
-      res.setHeader("Content-Disposition", "attachment; filename=" + reply);
+      res.setHeader('Content-Disposition', 'attachment; filename=' + reply);
-      res.setHeader("Content-Type", "application/octet-stream");
+      res.setHeader('Content-Type', 'application/octet-stream');
 
-      res.download(__dirname + "/../static/" + id, reply, (err) => {
+      res.download(__dirname + '/../static/' + id, reply, err => {
         if (!err) {
           client.del(id);
-          fs.unlinkSync(__dirname + "/../static/" + id);
+          fs.unlinkSync(__dirname + '/../static/' + id);
         }
       });
     }
-  })
+  });
-  
 });
 
-app.post("/delete/:id", (req, res) => {
+app.post('/delete/:id', (req, res) => {
   let id = req.params.id;
 
   if (!validateID(id)) {
@@ -62,19 +60,18 @@ app.post("/delete/:id", (req, res) => {
     res.sendStatus(404);
   }
 
-  client.hget(id, "delete", (err, reply) => {
+  client.hget(id, 'delete', (err, reply) => {
     if (!reply) {
       res.sendStatus(404);
     } else {
       client.del(id);
-      fs.unlinkSync(__dirname + "/../static/" + id);
+      fs.unlinkSync(__dirname + '/../static/' + id);
       res.sendStatus(200);
     }
-  })
+  });
 });
 
-app.post("/upload/:id", (req, res, next) => {
+app.post('/upload/:id', (req, res, next) => {
-    
   if (!validateID(req.params.id)) {
     res.send(404);
     return;
@@ -82,17 +79,17 @@ app.post("/upload/:id", (req, res, next) => {
 
   let fstream;
   req.pipe(req.busboy);
-    req.busboy.on("file", (fieldname, file, filename) => {
+  req.busboy.on('file', (fieldname, file, filename) => {
-        console.log("Uploading: " + filename);
+    console.log('Uploading: ' + filename);
 
     //Path where image will be uploaded
-        fstream = fs.createWriteStream(__dirname + "/../static/" + req.params.id);
+    fstream = fs.createWriteStream(__dirname + '/../static/' + req.params.id);
     file.pipe(fstream);
-        fstream.on("close", () => {
+    fstream.on('close', () => {
       let id = req.params.id;
       let uuid = crypto.randomBytes(10).toString('hex');
 
-            client.hmset([id, "filename", filename, "delete", uuid]);
+      client.hmset([id, 'filename', filename, 'delete', uuid]);
 
       // delete the file off the server in 24 hours
       // setTimeout(() => {
@@ -100,16 +97,16 @@ app.post("/upload/:id", (req, res, next) => {
       // }, 86400000);
 
       client.expire(id, 86400000);
-            console.log("Upload Finished of " + filename);      
+      console.log('Upload Finished of ' + filename);
       res.send(uuid);
     });
   });
 });
 
 app.listen(3000, () => {
-  console.log("Portal app listening on port 3000!")
+  console.log('Portal app listening on port 3000!');
-})
+});
 
-let validateID = (route_id) => {
+let validateID = route_id => {
   return route_id.match(/^[0-9a-fA-F]{32}$/) !== null;
-}
+};