Bump version to 3.3.0

Add password preview

See merge request timvisee/send!6

.eslintignore

@@ -4,4 +4,5 @@ firefox
 coverage
 android/app/build
 app/locale.js
-app/capabilities.js
+app/capabilities.js
+app/qrcode.js

README.md

@@ -1,7 +1,57 @@
 # [![Send](./assets/icon.svg)](https://gitlab.com/timvisee/send/) Send
 
-Based on Mozilla's [Firefox Send](https://github.com/mozilla/send),
-with branding removed.
+[![Build status on GitLab CI][gitlab-ci-master-badge]][gitlab-ci-link]
+[![Latest release][release-badge]][release-link]
+[![Docker image][docker-image-badge]][docker-image-link]
+[![Project license][repo-license-badge]](LICENSE)
+
+[docker-image-badge]: https://img.shields.io/badge/docker-latest-blue.svg
+[docker-image-link]: https://gitlab.com/timvisee/send/container_registry/eyJuYW1lIjoidGltdmlzZWUvc2VuZCIsInRhZ3NfcGF0aCI6Ii90aW12aXNlZS9zZW5kL3JlZ2lzdHJ5L3JlcG9zaXRvcnkvMTQxODUwNC90YWdzP2Zvcm1hdD1qc29uIiwiaWQiOjE0MTg1MDQsImNsZWFudXBfcG9saWN5X3N0YXJ0ZWRfYXQiOm51bGx9
+[gitlab-ci-link]: https://gitlab.com/timvisee/send/pipelines
+[gitlab-ci-master-badge]: https://gitlab.com/timvisee/send/badges/master/pipeline.svg
+[release-badge]: https://img.shields.io/github/v/tag/timvisee/send
+[release-link]: https://gitlab.com/timvisee/send/-/
+[repo-license-badge]: https://img.shields.io/github/license/timvisee/send.svg
+
+A fork of Mozilla's [Firefox Send][mozilla-send].
+Mozilla discontinued Send, this fork is a community effort to keep the project
+up-to-date and alive.
+
+- Forked [at][fork-commit] Mozilla's last publicly hosted version
+- _Mozilla_ & _Firefox_ branding [is][remove-branding-pr] removed so you can legally self-host
+- Kept compatible with [`ffsend`][ffsend] (CLI for Send)
+- Dependencies have been updated
+- Mozilla's [changes][mozilla-patches] since the fork have been selectively [merged][mozilla-patches-pr]
+- Mozilla's experimental report feature, download tokens, trust warnings and FxA changes are not included
+
+Find an up-to-date Docker image here: [docs/docker.md](docs/docker.md)
+
+The original project by Mozilla can be found [here][mozilla-send].
+The [`mozilla-master`][branch-mozilla-master] branch holds the `master` branch
+as left by Mozilla.
+The [`send-v3`][branch-send-v3] branch holds the commit tree of Mozilla's last
+publicly hosted version, which this fork is based on.
+The [`send-v4`][branch-send-v4] branch holds the commit tree of Mozilla's last
+experimental version which was still a work in progress (featuring file
+reporting, download tokens, trust warnings and FxA changes), this has
+selectively been merged into this fork.
+Please consider to [donate][donate] to allow me to keep working on this.
+
+Thanks [Mozilla][mozilla] for building this amazing tool!
+
+[branch-mozilla-master]: https://gitlab.com/timvisee/send/-/tree/mozilla-master
+[branch-send-v3]: https://gitlab.com/timvisee/send/-/tree/send-v3
+[branch-send-v4]: https://gitlab.com/timvisee/send/-/tree/send-v4
+[donate]: https://timvisee.com/donate
+[ffsend]: https://github.com/timvisee/ffsend
+[fork-commit]: https://gitlab.com/timvisee/send/-/commit/3e9be676413a6e1baaf6a354c180e91899d10bec
+[mozilla-patches-pr]: https://gitlab.com/timvisee/send/-/merge_requests/3
+[mozilla-patches]: https://gitlab.com/timvisee/send/-/compare/3e9be676413a6e1baaf6a354c180e91899d10bec...mozilla-master
+[mozilla-send]: https://github.com/mozilla/send
+[mozilla]: https://mozilla.org/
+[remove-branding-pr]: https://gitlab.com/timvisee/send/-/merge_requests/2
+
+---
 
 **Docs:** [FAQ](docs/faq.md), [Encryption](docs/encryption.md), [Build](docs/build.md), [Docker](docs/docker.md), [Metrics](docs/metrics.md), [More](docs/)
 
@@ -109,4 +159,6 @@ The android implementation is contained in the `android` directory, and can be v
 
 [Mozilla Public License Version 2.0](LICENSE)
 
+[qrcode.js](https://github.com/kazuhikoarase/qrcode-generator) licensed under MIT
+
 ---

app/controller.js

@@ -1,13 +1,14 @@
-import FileSender from './fileSender';
-import FileReceiver from './fileReceiver';
-import { copyToClipboard, delay, openLinksInNewTab, percent } from './utils';
 import * as metrics from './metrics';
-import { bytes, locale } from './utils';
-import okDialog from './ui/okDialog';
+import FileReceiver from './fileReceiver';
+import FileSender from './fileSender';
 import copyDialog from './ui/copyDialog';
+import faviconProgressbar from './ui/faviconProgressbar';
+import okDialog from './ui/okDialog';
 import shareDialog from './ui/shareDialog';
 import signupDialog from './ui/signupDialog';
 import surveyDialog from './ui/surveyDialog';
+import { bytes, locale } from './utils';
+import { copyToClipboard, delay, openLinksInNewTab, percent } from './utils';
 
 export default function(state, emitter) {
   let lastRender = 0;
@@ -29,6 +30,7 @@ export default function(state, emitter) {
     if (updateTitle) {
       emitter.emit('DOMTitleChange', percent(state.transfer.progressRatio));
     }
+    faviconProgressbar.updateFavicon(state.transfer.progressRatio);
     render();
   }
 
@@ -37,6 +39,7 @@ export default function(state, emitter) {
     document.addEventListener('focus', () => {
       updateTitle = false;
       emitter.emit('DOMTitleChange', 'Send');
+      faviconProgressbar.updateFavicon(0);
     });
     checkFiles();
   });
@@ -83,6 +86,7 @@ export default function(state, emitter) {
 
   emitter.on('cancel', () => {
     state.transfer.cancel();
+    faviconProgressbar.updateFavicon(0);
   });
 
   emitter.on('addFiles', async ({ files }) => {
@@ -161,6 +165,7 @@ export default function(state, emitter) {
       state.storage.totalUploads += 1;
       const duration = Date.now() - start;
       metrics.completedUpload(archive, duration);
+      faviconProgressbar.updateFavicon(0);
 
       state.storage.addFile(ownedFile);
       // TODO integrate password into /upload request
@@ -264,6 +269,7 @@ export default function(state, emitter) {
         duration,
         password_protected: file.requiresPassword
       });
+      faviconProgressbar.updateFavicon(0);
     } catch (err) {
       if (err.message === '0') {
         // download cancelled

app/ui/archiveTile.js

@@ -48,19 +48,36 @@ function password(state) {
           ${state.translate('addPassword')}
         </label>
       </div>
-      <input
-        id="password-input"
-        class="${state.archive.password
-          ? ''
-          : 'invisible'} border rounded focus:border-blue-60 leading-normal my-1 py-1 px-2 h-8 dark:bg-grey-80"
-        autocomplete="off"
-        maxlength="${MAX_LENGTH}"
-        type="password"
-        oninput="${inputChanged}"
-        onfocus="${focused}"
-        placeholder="${state.translate('unlockInputPlaceholder')}"
-        value="${state.archive.password || ''}"
-      />
+      <div class="relative inline-block my-1">
+        <input
+          id="password-input"
+          class="${state.archive.password
+            ? ''
+            : 'invisible'} border rounded focus:border-blue-60 leading-normal py-1 pl-2 pr-8 h-8 dark:bg-grey-80"
+          autocomplete="off"
+          maxlength="${MAX_LENGTH}"
+          type="password"
+          oninput="${inputChanged}"
+          onfocus="${focused}"
+          placeholder="${state.translate('unlockInputPlaceholder')}"
+          value="${state.archive.password || ''}"
+        />
+        <button
+          id="password-preview-button"
+          type="button"
+          class="${state.archive.password
+            ? ''
+            : 'invisible'} absolute top-0 right-0 w-8 h-8"
+          onclick="${onPasswordPreviewButtonclicked}"
+        >
+          <img
+            src="${assets.get('eye.svg')}"
+            width="22"
+            height="22"
+            class="m-auto"
+          />
+        </button>
+      </div>
       <label
         id="password-msg"
         for="password-input"
@@ -69,15 +86,36 @@ function password(state) {
     </div>
   `;
 
+  function onPasswordPreviewButtonclicked(event) {
+    event.preventDefault();
+    const input = document.getElementById('password-input');
+    const eyeIcon = event.currentTarget.querySelector('img');
+
+    if (input.type === 'password') {
+      input.type = 'text';
+      eyeIcon.src = assets.get('eye-off.svg');
+    } else {
+      input.type = 'password';
+      eyeIcon.src = assets.get('eye.svg');
+    }
+
+    input.focus();
+  }
+
   function togglePasswordInput(event) {
     event.stopPropagation();
     const checked = event.target.checked;
     const input = document.getElementById('password-input');
+    const passwordPreviewButton = document.getElementById(
+      'password-preview-button'
+    );
     if (checked) {
       input.classList.remove('invisible');
+      passwordPreviewButton.classList.remove('invisible');
       input.focus();
     } else {
       input.classList.add('invisible');
+      passwordPreviewButton.classList.add('invisible');
       input.value = '';
       document.getElementById('password-msg').textContent = '';
       state.archive.password = null;

app/ui/copyDialog.js

@@ -1,5 +1,6 @@
 const html = require('choo/html');
 const { copyToClipboard } = require('../utils');
+const qr = require('./qr');
 
 module.exports = function(name, url) {
   const dialog = function(state, emit, close) {
@@ -16,13 +17,23 @@ module.exports = function(name, url) {
           ${state.translate('copyLinkDescription')} <br />
           ${name}
         </p>
-        <input
-          type="text"
-          id="share-url"
-          class="w-full my-4 border rounded-lg leading-loose h-12 px-2 py-1 dark:bg-grey-80"
-          value="${url}"
-          readonly="true"
-        />
+        <div class="flex flex-row items-center justify-center w-full">
+          <input
+            type="text"
+            id="share-url"
+            class="block w-full my-4 border rounded-lg leading-loose h-12 px-2 py-1 dark:bg-grey-80"
+            value="${url}"
+            readonly="true"
+          />
+          <button
+            id="qr-btn"
+            class="w-16 m-1 p-1"
+            onclick="${toggleQR}"
+            title="QR code"
+          >
+            ${qr(url)}
+          </button>
+        </div>
         <button
           class="btn rounded-lg w-full flex-shrink-0 focus:outline"
           onclick="${copy}"
@@ -40,6 +51,19 @@ module.exports = function(name, url) {
       </send-copy-dialog>
     `;
 
+    function toggleQR(event) {
+      event.stopPropagation();
+      const shareUrl = document.getElementById('share-url');
+      const qrBtn = document.getElementById('qr-btn');
+      if (shareUrl.classList.contains('hidden')) {
+        shareUrl.classList.replace('hidden', 'block');
+        qrBtn.classList.replace('w-48', 'w-16');
+      } else {
+        shareUrl.classList.replace('block', 'hidden');
+        qrBtn.classList.replace('w-16', 'w-48');
+      }
+    }
+
     function copy(event) {
       event.stopPropagation();
       copyToClipboard(url);

app/ui/faviconProgressbar.js

@@ -0,0 +1,41 @@
+const { platform } = require('../utils');
+const assets = require('../../common/assets');
+
+const size = 32;
+const loaderWidth = 5;
+const loaderColor = '#0090ed';
+
+function drawCircle(canvas, context, color, lineWidth, outerWidth, percent) {
+  canvas.width = canvas.height = outerWidth;
+  context.translate(outerWidth * 0.5, outerWidth * 0.5);
+  context.rotate(-Math.PI * 0.5);
+  const radius = (outerWidth - lineWidth) * 0.5;
+  context.beginPath();
+  context.arc(0, 0, radius, 0, Math.PI * 2 * percent, false);
+  context.strokeStyle = color;
+  context.lineCap = 'square';
+  context.lineWidth = lineWidth;
+  context.stroke();
+}
+
+function drawNewFavicon(progressRatio) {
+  const canvas = document.createElement('canvas');
+  const context = canvas.getContext('2d');
+  drawCircle(canvas, context, '#efefef', loaderWidth, size, 1);
+  drawCircle(canvas, context, loaderColor, loaderWidth, size, progressRatio);
+  return canvas.toDataURL();
+}
+
+module.exports.updateFavicon = function(progressRatio) {
+  if (platform() === 'web') {
+    const link = document.querySelector("link[rel='icon'][sizes='32x32']");
+    const progress = progressRatio * 100;
+    if (progress === 0 || progress === 100) {
+      link.type = 'image/png';
+      link.href = assets.get('favicon-32x32.png');
+      return;
+    }
+
+    link.href = drawNewFavicon(progressRatio);
+  }
+};

app/ui/qr.js

@@ -0,0 +1,10 @@
+const raw = require('choo/html/raw');
+const qrcode = require('../qrcode');
+
+module.exports = function(url) {
+  const gen = qrcode(5, 'L');
+  gen.addData(url);
+  gen.make();
+  const qr = gen.createSvgTag({ scalable: true });
+  return raw(qr);
+};

assets/eye-off.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="#8795a1" d="M256.1 144.8c56.2 0 101.9 45.3 101.9 101.1 0 13.1-2.6 25.5-7.3 37l59.5 59c30.8-25.5 55-58.4 69.9-96-35.3-88.7-122.3-151.6-224.2-151.6-28.5 0-55.8 5.1-81.1 14.1l44 43.7c11.6-4.6 24.1-7.3 37.3-7.3zM52.4 89.7l46.5 46.1 9.4 9.3c-33.9 26-60.4 60.8-76.3 100.8 35.2 88.7 122.2 151.6 224.1 151.6 31.6 0 61.7-6.1 89.2-17l8.6 8.5 59.7 59 25.9-25.7L78.2 64 52.4 89.7zM165 201.4l31.6 31.3c-1 4.2-1.6 8.7-1.6 13.1 0 33.5 27.3 60.6 61.1 60.6 4.5 0 9-.6 13.2-1.6l31.6 31.3c-13.6 6.7-28.7 10.7-44.8 10.7-56.2 0-101.9-45.3-101.9-101.1 0-15.8 4.1-30.7 10.8-44.3zm87.8-15.7l64.2 63.7.4-3.2c0-33.5-27.3-60.6-61.1-60.6l-3.5.1z"/></svg>

assets/eye.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="#8795a1" d="M256 105c-101.8 0-188.4 62.4-224 151 35.6 88.6 122.2 151 224 151s188.4-62.4 224-151c-35.6-88.6-122.2-151-224-151zm0 251.7c-56 0-101.8-45.3-101.8-100.7S200 155.3 256 155.3 357.8 200.6 357.8 256 312 356.7 256 356.7zm0-161.1c-33.6 0-61.1 27.2-61.1 60.4s27.5 60.4 61.1 60.4 61.1-27.2 61.1-60.4-27.5-60.4-61.1-60.4z"/></svg>

docs/encryption.md

@@ -1,6 +1,6 @@
 # File Encryption
 
-Send use 128-bit AES-GCM encryption via the [Web Crypto API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Crypto_API) to encrypt files in the browser before uploading them to the server. The code is in [app/keychain.js](../app/keychain.js).
+Send uses 128-bit AES-GCM encryption via the [Web Crypto API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Crypto_API) to encrypt files in the browser before uploading them to the server. The code is in [app/keychain.js](../app/keychain.js).
 
 ## Steps
 

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "send",
-  "version": "3.2.0",
+  "version": "3.3.0",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
@@ -20,16 +20,16 @@
       "dev": true
     },
     "@babel/core": {
-      "version": "7.12.1",
-      "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.12.1.tgz",
-      "integrity": "sha512-6bGmltqzIJrinwRRdczQsMhruSi9Sqty9Te+/5hudn4Izx/JYRhW1QELpR+CIL0gC/c9A7WroH6FmkDGxmWx3w==",
+      "version": "7.12.3",
+      "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.12.3.tgz",
+      "integrity": "sha512-0qXcZYKZp3/6N2jKYVxZv0aNCsxTSVCiK72DTiTYZAu7sjg73W0/aynWjMbiGd87EQL4WyA8reiJVh92AVla9g==",
       "dev": true,
       "requires": {
         "@babel/code-frame": "^7.10.4",
         "@babel/generator": "^7.12.1",
         "@babel/helper-module-transforms": "^7.12.1",
         "@babel/helpers": "^7.12.1",
-        "@babel/parser": "^7.12.1",
+        "@babel/parser": "^7.12.3",
         "@babel/template": "^7.10.4",
         "@babel/traverse": "^7.12.1",
         "@babel/types": "^7.12.1",
@@ -110,9 +110,9 @@
           }
         },
         "@babel/parser": {
-          "version": "7.12.2",
-          "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.12.2.tgz",
-          "integrity": "sha512-LMN+SqTiZEonUw4hQA0A3zG8DnN0E1F4K107LbDDUnC+0chML1rvWgsHloC9weB4RmZweE0uhFq0eGX7Nr/PBQ==",
+          "version": "7.12.3",
+          "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.12.3.tgz",
+          "integrity": "sha512-kFsOS0IbsuhO5ojF8Hc8z/8vEIOkylVBrjiZUbLTE3XFe0Qi+uu6HjzQixkFaqr0ZPAMZcBVxEwmsnsLPZ2Xsw==",
           "dev": true
         },
         "@babel/template": {
@@ -1356,9 +1356,9 @@
           }
         },
         "@babel/parser": {
-          "version": "7.12.2",
-          "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.12.2.tgz",
-          "integrity": "sha512-LMN+SqTiZEonUw4hQA0A3zG8DnN0E1F4K107LbDDUnC+0chML1rvWgsHloC9weB4RmZweE0uhFq0eGX7Nr/PBQ==",
+          "version": "7.12.3",
+          "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.12.3.tgz",
+          "integrity": "sha512-kFsOS0IbsuhO5ojF8Hc8z/8vEIOkylVBrjiZUbLTE3XFe0Qi+uu6HjzQixkFaqr0ZPAMZcBVxEwmsnsLPZ2Xsw==",
           "dev": true
         },
         "@babel/template": {
@@ -3923,9 +3923,9 @@
       }
     },
     "aws-sdk": {
-      "version": "2.772.0",
-      "resolved": "https://registry.npmjs.org/aws-sdk/-/aws-sdk-2.772.0.tgz",
-      "integrity": "sha512-am1xrqaQhHbZsSbbZ8l0nRzl4dfCG+HGUAsgNGQp3RGwEZX8Eblge4dGPmg3A1ZyCHAzT1VIWxemOOCiyqJC/A==",
+      "version": "2.773.0",
+      "resolved": "https://registry.npmjs.org/aws-sdk/-/aws-sdk-2.773.0.tgz",
+      "integrity": "sha512-bwqEm/x3HMUd/xfcUeTjCQFi904oSNcwl2ZNz3mwAdEIqt3sQ9aE3GYoZQxKXw/XHQlF7hPiKO07GDGmS6x4AQ==",
       "requires": {
         "buffer": "4.9.2",
         "events": "1.1.1",
@@ -7765,9 +7765,9 @@
       }
     },
     "eslint-config-prettier": {
-      "version": "6.12.0",
-      "resolved": "https://registry.npmjs.org/eslint-config-prettier/-/eslint-config-prettier-6.12.0.tgz",
-      "integrity": "sha512-9jWPlFlgNwRUYVoujvWTQ1aMO8o6648r+K7qU7K5Jmkbyqav1fuEZC0COYpGBxyiAJb65Ra9hrmFx19xRGwXWw==",
+      "version": "6.13.0",
+      "resolved": "https://registry.npmjs.org/eslint-config-prettier/-/eslint-config-prettier-6.13.0.tgz",
+      "integrity": "sha512-LcT0i0LSmnzqK2t764pyIt7kKH2AuuqKRTtJTdddWxOiUja9HdG5GXBVF2gmCTvVYWVsTu8J2MhJLVGRh+pj8w==",
       "dev": true,
       "requires": {
         "get-stdin": "^6.0.0"
@@ -18175,9 +18175,9 @@
       }
     },
     "tailwindcss": {
-      "version": "1.9.2",
-      "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-1.9.2.tgz",
-      "integrity": "sha512-D3uKSZZkh4GaKiZWmPEfNrqEmEuYdwaqXOQ7trYSQQFI5laSD9+b2FUUj5g39nk5R1omKp5tBW9wZsfJq+KIVA==",
+      "version": "1.9.4",
+      "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-1.9.4.tgz",
+      "integrity": "sha512-CVeP4J1pDluBM/AF11JPku9Cx+VwQ6MbOcnlobnWVVZnq+xku8sa+XXmYzy/GvE08qD8w+OmpSdN21ZFPoVDRg==",
       "dev": true,
       "requires": {
         "@fullhuman/postcss-purgecss": "^2.1.2",

package.json

@@ -1,7 +1,7 @@
 {
   "name": "send",
   "description": "File Sharing Experiment",
-  "version": "3.2.0",
+  "version": "3.3.0",
   "author": "Mozilla (https://mozilla.org)",
   "contributors": [
     "Tim Visee <3a4fb3964f@sinenomine.email> (https://timvisee.com)"
@@ -64,7 +64,7 @@
     "node": "^12.16.3"
   },
   "devDependencies": {
-    "@babel/core": "^7.12.1",
+    "@babel/core": "^7.12.3",
     "@babel/plugin-proposal-class-properties": "^7.12.1",
     "@babel/plugin-syntax-dynamic-import": "^7.2.0",
     "@babel/preset-env": "^7.12.1",
@@ -85,7 +85,7 @@
     "css-mqpacker": "^7.0.0",
     "cssnano": "^4.1.10",
     "eslint": "^6.6.0",
-    "eslint-config-prettier": "^6.12.0",
+    "eslint-config-prettier": "^6.13.0",
     "eslint-plugin-mocha": "^6.2.1",
     "eslint-plugin-node": "^10.0.0",
     "eslint-plugin-security": "^1.4.0",
@@ -123,7 +123,7 @@
     "stylelint-no-unsupported-browser-features": "^3.0.2",
     "svgo": "^1.3.2",
     "svgo-loader": "^2.2.1",
-    "tailwindcss": "^1.9.2",
+    "tailwindcss": "^1.9.4",
     "val-loader": "^1.1.1",
     "webpack": "4.38.0",
     "webpack-cli": "^3.3.12",
@@ -138,7 +138,7 @@
     "@fluent/langneg": "^0.3.0",
     "@google-cloud/storage": "^5.1.2",
     "@sentry/node": "^5.26.0",
-    "aws-sdk": "^2.772.0",
+    "aws-sdk": "^2.773.0",
     "body-parser": "^1.19.0",
     "choo": "^7.0.0",
     "cldr-core": "^35.1.0",