a few changes to make A/B testing easier

app/.eslintrc.yml

@@ -0,0 +1,9 @@
+env:
+  browser: true
+  node: true
+
+parserOptions:
+  sourceType: module
+
+rules:
+  node/no-unsupported-features: off

app/dragManager.js

@@ -0,0 +1,24 @@
+export default function(state, emitter) {
+  emitter.on('DOMContentLoaded', () => {
+    document.body.addEventListener('dragover', event => {
+      if (state.route === '/') {
+        event.preventDefault();
+      }
+    });
+    document.body.addEventListener('drop', event => {
+      if (state.route === '/' && !state.transfer) {
+        event.preventDefault();
+        document.querySelector('.upload-window').classList.remove('ondrag');
+        const target = event.dataTransfer;
+        if (target.files.length === 0) {
+          return;
+        }
+        if (target.files.length > 1 || target.files[0].size === 0) {
+          return alert(state.translate('uploadPageMultipleFilesAlert'));
+        }
+        const file = target.files[0];
+        emitter.emit('upload', { file, type: 'drop' });
+      }
+    });
+  });
+}

app/fileManager.js

@@ -0,0 +1,202 @@
+/* global EXPIRE_SECONDS */
+import FileSender from './fileSender';
+import FileReceiver from './fileReceiver';
+import { copyToClipboard, delay, fadeOut } from './utils';
+import * as metrics from './metrics';
+
+function saveFile(file) {
+  const dataView = new DataView(file.plaintext);
+  const blob = new Blob([dataView], { type: file.type });
+  const downloadUrl = URL.createObjectURL(blob);
+
+  if (window.navigator.msSaveBlob) {
+    return window.navigator.msSaveBlob(blob, file.name);
+  }
+  const a = document.createElement('a');
+  a.href = downloadUrl;
+  a.download = file.name;
+  document.body.appendChild(a);
+  a.click();
+  URL.revokeObjectURL(downloadUrl);
+}
+
+function openLinksInNewTab(links, should = true) {
+  links = links || Array.from(document.querySelectorAll('a:not([target])'));
+  if (should) {
+    links.forEach(l => {
+      l.setAttribute('target', '_blank');
+      l.setAttribute('rel', 'noopener noreferrer');
+    });
+  } else {
+    links.forEach(l => {
+      l.removeAttribute('target');
+      l.removeAttribute('rel');
+    });
+  }
+  return links;
+}
+
+function exists(id) {
+  return new Promise((resolve, reject) => {
+    const xhr = new XMLHttpRequest();
+    xhr.onreadystatechange = () => {
+      if (xhr.readyState === XMLHttpRequest.HEADERS_RECEIVED) {
+        resolve(xhr.status === 200);
+      }
+    };
+    xhr.onerror = () => resolve(false);
+    xhr.ontimeout = () => resolve(false);
+    xhr.open('get', '/api/exists/' + id);
+    xhr.timeout = 2000;
+    xhr.send();
+  });
+}
+
+export default function(state, emitter) {
+  let lastRender = 0;
+
+  function render() {
+    emitter.emit('render');
+  }
+
+  async function checkFiles() {
+    const files = state.storage.files;
+    let rerender = false;
+    for (const file of files) {
+      const ok = await exists(file.id);
+      if (!ok) {
+        state.storage.remove(file.id);
+        rerender = true;
+      }
+    }
+    if (rerender) {
+      render();
+    }
+  }
+
+  emitter.on('DOMContentLoaded', checkFiles);
+
+  emitter.on('navigate', checkFiles);
+
+  emitter.on('render', () => {
+    lastRender = Date.now();
+  });
+
+  emitter.on('delete', async ({ file, location }) => {
+    try {
+      metrics.deletedUpload({
+        size: file.size,
+        time: file.time,
+        speed: file.speed,
+        type: file.type,
+        ttl: file.expiresAt - Date.now(),
+        location
+      });
+      state.storage.remove(file.id);
+      await FileSender.delete(file.id, file.deleteToken);
+    } catch (e) {
+      state.raven.captureException(e);
+    }
+    state.fileInfo = null;
+  });
+
+  emitter.on('cancel', () => {
+    state.transfer.cancel();
+  });
+
+  emitter.on('upload', async ({ file, type }) => {
+    const size = file.size;
+    const sender = new FileSender(file);
+    sender.on('progress', render);
+    sender.on('encrypting', render);
+    state.transfer = sender;
+    render();
+    const links = openLinksInNewTab();
+    await delay(200);
+    try {
+      const start = Date.now();
+      metrics.startedUpload({ size, type });
+      const info = await sender.upload();
+      const time = Date.now() - start;
+      const speed = size / (time / 1000);
+      metrics.completedUpload({ size, time, speed, type });
+      await delay(1000);
+      await fadeOut('upload-progress');
+      info.name = file.name;
+      info.size = size;
+      info.type = type;
+      info.time = time;
+      info.speed = speed;
+      info.createdAt = Date.now();
+      info.url = `${info.url}#${info.secretKey}`;
+      info.expiresAt = Date.now() + EXPIRE_SECONDS * 1000;
+      state.fileInfo = info;
+      state.storage.addFile(state.fileInfo);
+      openLinksInNewTab(links, false);
+      state.transfer = null;
+      state.storage.totalUploads += 1;
+      emitter.emit('pushState', `/share/${info.id}`);
+    } catch (err) {
+      state.transfer = null;
+      if (err.message === '0') {
+        //cancelled. do nothing
+        metrics.cancelledUpload({ size, type });
+        return render();
+      }
+      state.raven.captureException(err);
+      metrics.stoppedUpload({ size, type, err });
+      emitter.emit('replaceState', '/error');
+    }
+  });
+
+  emitter.on('download', async file => {
+    const size = file.size;
+    const url = `/api/download/${file.id}`;
+    const receiver = new FileReceiver(url, file.key);
+    receiver.on('progress', render);
+    receiver.on('decrypting', render);
+    state.transfer = receiver;
+    const links = openLinksInNewTab();
+    render();
+    try {
+      const start = Date.now();
+      metrics.startedDownload({ size: file.size, ttl: file.ttl });
+      const f = await receiver.download();
+      const time = Date.now() - start;
+      const speed = size / (time / 1000);
+      await delay(1000);
+      await fadeOut('download-progress');
+      saveFile(f);
+      state.storage.totalDownloads += 1;
+      metrics.completedDownload({ size, time, speed });
+      emitter.emit('pushState', '/completed');
+    } catch (err) {
+      // TODO cancelled download
+      const location = err.message === 'notfound' ? '/404' : '/error';
+      if (location === '/error') {
+        state.raven.captureException(err);
+        metrics.stoppedDownload({ size, err });
+      }
+      emitter.emit('replaceState', location);
+    } finally {
+      state.transfer = null;
+      openLinksInNewTab(links, false);
+    }
+  });
+
+  emitter.on('copy', ({ url, location }) => {
+    copyToClipboard(url);
+    metrics.copiedLink({ location });
+  });
+
+  setInterval(() => {
+    // poll for rerendering the file list countdown timers
+    if (
+      state.route === '/' &&
+      state.storage.files.length > 0 &&
+      Date.now() - lastRender > 30000
+    ) {
+      render();
+    }
+  }, 60000);
+}

app/fileReceiver.js

@@ -0,0 +1,100 @@
+import Nanobus from 'nanobus';
+import { hexToArray, bytes } from './utils';
+
+export default class FileReceiver extends Nanobus {
+  constructor(url, k) {
+    super('FileReceiver');
+    this.key = window.crypto.subtle.importKey(
+      'jwk',
+      {
+        k,
+        kty: 'oct',
+        alg: 'A128GCM',
+        ext: true
+      },
+      {
+        name: 'AES-GCM'
+      },
+      false,
+      ['decrypt']
+    );
+    this.url = url;
+    this.msg = 'fileSizeProgress';
+    this.progress = [0, 1];
+  }
+
+  get progressRatio() {
+    return this.progress[0] / this.progress[1];
+  }
+
+  get sizes() {
+    return {
+      partialSize: bytes(this.progress[0]),
+      totalSize: bytes(this.progress[1])
+    };
+  }
+
+  cancel() {
+    // TODO
+  }
+
+  downloadFile() {
+    return new Promise((resolve, reject) => {
+      const xhr = new XMLHttpRequest();
+
+      xhr.onprogress = event => {
+        if (event.lengthComputable && event.target.status !== 404) {
+          this.progress = [event.loaded, event.total];
+          this.emit('progress', this.progress);
+        }
+      };
+
+      xhr.onload = function(event) {
+        if (xhr.status === 404) {
+          reject(new Error('notfound'));
+          return;
+        }
+
+        const blob = new Blob([this.response]);
+        const meta = JSON.parse(xhr.getResponseHeader('X-File-Metadata'));
+        const fileReader = new FileReader();
+        fileReader.onload = function() {
+          resolve({
+            data: this.result,
+            name: meta.filename,
+            type: meta.mimeType,
+            iv: meta.id
+          });
+        };
+
+        fileReader.readAsArrayBuffer(blob);
+      };
+
+      xhr.open('get', this.url);
+      xhr.responseType = 'blob';
+      xhr.send();
+    });
+  }
+
+  async download() {
+    const key = await this.key;
+    const file = await this.downloadFile();
+    this.msg = 'decryptingFile';
+    this.emit('decrypting');
+    const plaintext = await window.crypto.subtle.decrypt(
+      {
+        name: 'AES-GCM',
+        iv: hexToArray(file.iv),
+        tagLength: 128
+      },
+      key,
+      file.data
+    );
+    this.msg = 'downloadFinish';
+    return {
+      plaintext,
+      name: decodeURIComponent(file.name),
+      type: file.type
+    };
+  }
+}

app/fileSender.js

@@ -0,0 +1,146 @@
+import Nanobus from 'nanobus';
+import { arrayToHex, bytes } from './utils';
+
+export default class FileSender extends Nanobus {
+  constructor(file) {
+    super('FileSender');
+    this.file = file;
+    this.msg = 'importingFile';
+    this.progress = [0, 1];
+    this.cancelled = false;
+    this.iv = window.crypto.getRandomValues(new Uint8Array(12));
+    this.uploadXHR = new XMLHttpRequest();
+    this.key = window.crypto.subtle.generateKey(
+      {
+        name: 'AES-GCM',
+        length: 128
+      },
+      true,
+      ['encrypt']
+    );
+  }
+
+  static delete(id, token) {
+    return new Promise((resolve, reject) => {
+      if (!id || !token) {
+        return reject();
+      }
+      const xhr = new XMLHttpRequest();
+      xhr.open('POST', `/api/delete/${id}`);
+      xhr.setRequestHeader('Content-Type', 'application/json');
+
+      xhr.onreadystatechange = () => {
+        if (xhr.readyState === XMLHttpRequest.DONE) {
+          resolve();
+        }
+      };
+
+      xhr.send(JSON.stringify({ delete_token: token }));
+    });
+  }
+
+  get progressRatio() {
+    return this.progress[0] / this.progress[1];
+  }
+
+  get sizes() {
+    return {
+      partialSize: bytes(this.progress[0]),
+      totalSize: bytes(this.progress[1])
+    };
+  }
+
+  cancel() {
+    this.cancelled = true;
+    if (this.msg === 'fileSizeProgress') {
+      this.uploadXHR.abort();
+    }
+  }
+
+  readFile() {
+    return new Promise((resolve, reject) => {
+      const reader = new FileReader();
+      reader.readAsArrayBuffer(this.file);
+      reader.onload = function(event) {
+        const plaintext = new Uint8Array(this.result);
+        resolve(plaintext);
+      };
+      reader.onerror = function(err) {
+        reject(err);
+      };
+    });
+  }
+
+  uploadFile(encrypted, keydata) {
+    return new Promise((resolve, reject) => {
+      const file = this.file;
+      const id = arrayToHex(this.iv);
+      const dataView = new DataView(encrypted);
+      const blob = new Blob([dataView], { type: file.type });
+      const fd = new FormData();
+      fd.append('data', blob, file.name);
+
+      const xhr = this.uploadXHR;
+
+      xhr.upload.addEventListener('progress', e => {
+        if (e.lengthComputable) {
+          this.progress = [e.loaded, e.total];
+          this.emit('progress', this.progress);
+        }
+      });
+
+      xhr.onreadystatechange = () => {
+        if (xhr.readyState === XMLHttpRequest.DONE) {
+          if (xhr.status === 200) {
+            this.progress = [1, 1];
+            this.msg = 'notifyUploadDone';
+            const responseObj = JSON.parse(xhr.responseText);
+            return resolve({
+              url: responseObj.url,
+              id: responseObj.id,
+              secretKey: keydata.k,
+              deleteToken: responseObj.delete
+            });
+          }
+          this.msg = 'errorPageHeader';
+          reject(new Error(xhr.status));
+        }
+      };
+
+      xhr.open('post', '/api/upload', true);
+      xhr.setRequestHeader(
+        'X-File-Metadata',
+        JSON.stringify({
+          id: id,
+          filename: encodeURIComponent(file.name)
+        })
+      );
+      xhr.send(fd);
+      this.msg = 'fileSizeProgress';
+    });
+  }
+
+  async upload() {
+    const key = await this.key;
+    const plaintext = await this.readFile();
+    if (this.cancelled) {
+      throw new Error(0);
+    }
+    this.msg = 'encryptingFile';
+    this.emit('encrypting');
+    const encrypted = await window.crypto.subtle.encrypt(
+      {
+        name: 'AES-GCM',
+        iv: this.iv,
+        tagLength: 128
+      },
+      key,
+      plaintext
+    );
+    if (this.cancelled) {
+      throw new Error(0);
+    }
+    const keydata = await window.crypto.subtle.exportKey('jwk', key);
+    return this.uploadFile(encrypted, keydata);
+  }
+}

app/main.js

@@ -0,0 +1,38 @@
+import app from './routes';
+import log from 'choo-log';
+import locale from '../common/locales';
+import fileManager from './fileManager';
+import dragManager from './dragManager';
+import { canHasSend } from './utils';
+import assets from '../common/assets';
+import storage from './storage';
+import metrics from './metrics';
+import Raven from 'raven-js';
+
+if (navigator.doNotTrack !== '1' && window.RAVEN_CONFIG) {
+  Raven.config(window.SENTRY_ID, window.RAVEN_CONFIG).install();
+}
+
+app.use(log());
+
+app.use((state, emitter) => {
+  // init state
+  state.transfer = null;
+  state.fileInfo = null;
+  state.translate = locale.getTranslator();
+  state.storage = storage;
+  state.raven = Raven;
+  emitter.on('DOMContentLoaded', async () => {
+    const ok = await canHasSend(assets.get('cryptofill.js'));
+    if (!ok) {
+      const reason = /firefox/i.test(navigator.userAgent) ? 'outdated' : 'gcm';
+      emitter.emit('replaceState', `/unsupported/${reason}`);
+    }
+  });
+});
+
+app.use(metrics);
+app.use(fileManager);
+app.use(dragManager);
+
+app.mount('#page-one');

app/metrics.js

@@ -0,0 +1,246 @@
+import testPilotGA from 'testpilot-ga/src/TestPilotGA';
+import storage from './storage';
+
+let hasLocalStorage = false;
+try {
+  hasLocalStorage = typeof localStorage !== 'undefined';
+} catch (e) {
+  // when disabled, any mention of localStorage throws an error
+}
+
+const analytics = new testPilotGA({
+  an: 'Firefox Send',
+  ds: 'web',
+  tid: window.GOOGLE_ANALYTICS_ID
+});
+
+let appState = null;
+
+export default function initialize(state, emitter) {
+  appState = state;
+  emitter.on('DOMContentLoaded', () => {
+    addExitHandlers();
+    //TODO restart handlers... somewhere
+  });
+}
+
+function category() {
+  return appState.route === '/' ? 'sender' : 'recipient';
+}
+
+function sendEvent() {
+  return (
+    hasLocalStorage &&
+    analytics.sendEvent.apply(analytics, arguments).catch(() => 0)
+  );
+}
+
+function urlToMetric(url) {
+  switch (url) {
+    case 'https://www.mozilla.org/':
+      return 'mozilla';
+    case 'https://www.mozilla.org/about/legal':
+      return 'legal';
+    case 'https://testpilot.firefox.com/about':
+      return 'about';
+    case 'https://testpilot.firefox.com/privacy':
+      return 'privacy';
+    case 'https://testpilot.firefox.com/terms':
+      return 'terms';
+    case 'https://www.mozilla.org/privacy/websites/#cookies':
+      return 'cookies';
+    case 'https://github.com/mozilla/send':
+      return 'github';
+    case 'https://twitter.com/FxTestPilot':
+      return 'twitter';
+    case 'https://www.mozilla.org/firefox/new/?scene=2':
+      return 'download-firefox';
+    case 'https://qsurvey.mozilla.com/s3/txp-firefox-send':
+      return 'survey';
+    case 'https://testpilot.firefox.com/':
+    case 'https://testpilot.firefox.com/experiments/send':
+      return 'testpilot';
+    default:
+      return 'other';
+  }
+}
+
+function setReferrer(state) {
+  if (category() === 'sender') {
+    if (state) {
+      storage.referrer = `${state}-upload`;
+    }
+  } else if (category() === 'recipient') {
+    if (state) {
+      storage.referrer = `${state}-download`;
+    }
+  }
+}
+
+function externalReferrer() {
+  if (/^https:\/\/testpilot\.firefox\.com/.test(document.referrer)) {
+    return 'testpilot';
+  }
+  return 'external';
+}
+
+function takeReferrer() {
+  const referrer = storage.referrer || externalReferrer();
+  storage.referrer = null;
+  return referrer;
+}
+
+function startedUpload(params) {
+  return sendEvent('sender', 'upload-started', {
+    cm1: params.size,
+    cm5: storage.totalUploads,
+    cm6: storage.files.length + 1,
+    cm7: storage.totalDownloads,
+    cd1: params.type,
+    cd5: takeReferrer()
+  });
+}
+
+function cancelledUpload(params) {
+  setReferrer('cancelled');
+  return sendEvent('sender', 'upload-stopped', {
+    cm1: params.size,
+    cm5: storage.totalUploads,
+    cm6: storage.files.length,
+    cm7: storage.totalDownloads,
+    cd1: params.type,
+    cd2: 'cancelled'
+  });
+}
+
+function completedUpload(params) {
+  return sendEvent('sender', 'upload-stopped', {
+    cm1: params.size,
+    cm2: params.time,
+    cm3: params.speed,
+    cm5: storage.totalUploads,
+    cm6: storage.files.length,
+    cm7: storage.totalDownloads,
+    cd1: params.type,
+    cd2: 'completed'
+  });
+}
+
+function startedDownload(params) {
+  return sendEvent('recipient', 'download-started', {
+    cm1: params.size,
+    cm4: params.ttl,
+    cm5: storage.totalUploads,
+    cm6: storage.files.length,
+    cm7: storage.totalDownloads
+  });
+}
+
+function stoppedDownload(params) {
+  return sendEvent('recipient', 'download-stopped', {
+    cm1: params.size,
+    cm5: storage.totalUploads,
+    cm6: storage.files.length,
+    cm7: storage.totalDownloads,
+    cd2: 'errored',
+    cd6: params.err
+  });
+}
+
+function cancelledDownload(params) {
+  setReferrer('cancelled');
+  return sendEvent('recipient', 'download-stopped', {
+    cm1: params.size,
+    cm5: storage.totalUploads,
+    cm6: storage.files.length,
+    cm7: storage.totalDownloads,
+    cd2: 'cancelled'
+  });
+}
+
+function stoppedUpload(params) {
+  return sendEvent('sender', 'upload-stopped', {
+    cm1: params.size,
+    cm5: storage.totalUploads,
+    cm6: storage.files.length,
+    cm7: storage.totalDownloads,
+    cd1: params.type,
+    cd2: 'errored',
+    cd6: params.err
+  });
+}
+
+function completedDownload(params) {
+  return sendEvent('recipient', 'download-stopped', {
+    cm1: params.size,
+    cm2: params.time,
+    cm3: params.speed,
+    cm5: storage.totalUploads,
+    cm6: storage.files.length,
+    cm7: storage.totalDownloads,
+    cd2: 'completed'
+  });
+}
+
+function deletedUpload(params) {
+  return sendEvent(category(), 'upload-deleted', {
+    cm1: params.size,
+    cm2: params.time,
+    cm3: params.speed,
+    cm4: params.ttl,
+    cm5: storage.totalUploads,
+    cm6: storage.files.length,
+    cm7: storage.totalDownloads,
+    cd1: params.type,
+    cd4: params.location
+  });
+}
+
+function unsupported(params) {
+  return sendEvent(category(), 'unsupported', {
+    cd6: params.err
+  });
+}
+
+function copiedLink(params) {
+  return sendEvent('sender', 'copied', {
+    cd4: params.location
+  });
+}
+
+function exitEvent(target) {
+  return sendEvent(category(), 'exited', {
+    cd3: urlToMetric(target.currentTarget.href)
+  });
+}
+
+function addExitHandlers() {
+  const links = Array.from(document.querySelectorAll('a'));
+  links.forEach(l => {
+    if (/^http/.test(l.getAttribute('href'))) {
+      l.addEventListener('click', exitEvent);
+    }
+  });
+}
+
+function restart(state) {
+  setReferrer(state);
+  return sendEvent(category(), 'restarted', {
+    cd2: state
+  });
+}
+
+export {
+  copiedLink,
+  startedUpload,
+  cancelledUpload,
+  stoppedUpload,
+  completedUpload,
+  deletedUpload,
+  startedDownload,
+  cancelledDownload,
+  stoppedDownload,
+  completedDownload,
+  restart,
+  unsupported
+};

app/routes/download.js

@@ -0,0 +1,9 @@
+const preview = require('../templates/preview');
+const download = require('../templates/download');
+
+module.exports = function(state, emit) {
+  if (state.transfer) {
+    return download(state, emit);
+  }
+  return preview(state, emit);
+};

app/routes/home.js

@@ -0,0 +1,9 @@
+const welcome = require('../templates/welcome');
+const upload = require('../templates/upload');
+
+module.exports = function(state, emit) {
+  if (state.transfer) {
+    return upload(state, emit);
+  }
+  return welcome(state, emit);
+};

app/routes/index.js

@@ -0,0 +1,17 @@
+const choo = require('choo');
+const download = require('./download');
+
+const app = choo();
+
+app.route('/', require('./home'));
+app.route('/share/:id', require('../templates/share'));
+app.route('/download/:id', download);
+app.route('/download/:id/:key', download);
+app.route('/completed', require('../templates/completed'));
+app.route('/unsupported/:reason', require('../templates/unsupported'));
+app.route('/legal', require('../templates/legal'));
+app.route('/error', require('../templates/error'));
+app.route('/blank', require('../templates/blank'));
+app.route('*', require('../templates/notFound'));
+
+module.exports = app;

app/storage.js

@@ -0,0 +1,99 @@
+import { isFile } from './utils';
+
+class Mem {
+  constructor() {
+    this.items = new Map();
+  }
+
+  get length() {
+    return this.items.size;
+  }
+
+  getItem(key) {
+    return this.items.get(key);
+  }
+
+  setItem(key, value) {
+    return this.items.set(key, value);
+  }
+
+  removeItem(key) {
+    return this.items.delete(key);
+  }
+
+  key(i) {
+    return this.items.keys()[i];
+  }
+}
+
+class Storage {
+  constructor() {
+    try {
+      this.engine = localStorage || new Mem();
+    } catch (e) {
+      this.engine = new Mem();
+    }
+    this._files = this.loadFiles();
+  }
+
+  loadFiles() {
+    const fs = [];
+    for (let i = 0; i < this.engine.length; i++) {
+      const k = this.engine.key(i);
+      if (isFile(k)) {
+        try {
+          fs.push(JSON.parse(this.engine.getItem(k)));
+        } catch (err) {
+          // obviously you're not a golfer
+          this.engine.removeItem(k);
+        }
+      }
+    }
+    return fs.sort((a, b) => a.createdAt - b.createdAt);
+  }
+
+  get totalDownloads() {
+    return Number(this.engine.getItem('totalDownloads'));
+  }
+  set totalDownloads(n) {
+    this.engine.setItem('totalDownloads', n);
+  }
+  get totalUploads() {
+    return Number(this.engine.getItem('totalUploads'));
+  }
+  set totalUploads(n) {
+    this.engine.setItem('totalUploads', n);
+  }
+  get referrer() {
+    return this.engine.getItem('referrer');
+  }
+  set referrer(str) {
+    this.engine.setItem('referrer', str);
+  }
+
+  get files() {
+    return this._files;
+  }
+
+  getFileById(id) {
+    try {
+      return JSON.parse(this.engine.getItem(id));
+    } catch (e) {
+      return null;
+    }
+  }
+
+  remove(property) {
+    if (isFile(property)) {
+      this._files.splice(this._files.findIndex(f => f.id === property), 1);
+    }
+    this.engine.removeItem(property);
+  }
+
+  addFile(file) {
+    this._files.push(file);
+    this.engine.setItem(file.id, JSON.stringify(file));
+  }
+}
+
+export default new Storage();

app/templates/blank.js

@@ -0,0 +1,9 @@
+const html = require('choo/html');
+
+module.exports = function(state) {
+  const div = html`<div id="page-one"></div>`;
+  if (state.layout) {
+    return state.layout(state, div);
+  }
+  return div;
+};

app/templates/completed.js

@@ -0,0 +1,31 @@
+const html = require('choo/html');
+const progress = require('./progress');
+const { fadeOut } = require('../utils');
+
+module.exports = function(state, emit) {
+  const div = html`
+  <div id="download" class="fadeIn">
+    <div id="download-progress">
+      <div id="dl-title" class="title">${state.translate(
+        'downloadFinish'
+      )}</div>
+      <div class="description"></div>
+      ${progress(1)}
+      <div class="upload">
+        <div class="progress-text"></div>
+      </div>
+    </div>
+    <a class="send-new" data-state="completed" href="/" onclick=${sendNew}>${state.translate(
+    'sendYourFilesLink'
+  )}</a>
+  </div>
+  `;
+
+  async function sendNew(e) {
+    e.preventDefault();
+    await fadeOut('download');
+    emit('pushState', '/');
+  }
+
+  return div;
+};

app/templates/download.js

@@ -0,0 +1,28 @@
+const html = require('choo/html');
+const progress = require('./progress');
+const { bytes } = require('../utils');
+
+module.exports = function(state) {
+  const transfer = state.transfer;
+  const div = html`
+  <div id="download-progress" class="fadeIn">
+    <div id="dl-title" class="title">${state.translate(
+      'downloadingPageProgress',
+      {
+        filename: state.fileInfo.name,
+        size: bytes(state.fileInfo.size)
+      }
+    )}</div>
+    <div class="description">${state.translate('downloadingPageMessage')}</div>
+    ${progress(transfer.progressRatio)}
+    <div class="upload">
+      <div class="progress-text">${state.translate(
+        transfer.msg,
+        transfer.sizes
+      )}</div>
+    </div>
+  </div>
+  `;
+
+  return div;
+};

app/templates/error.js

@@ -0,0 +1,12 @@
+const html = require('choo/html');
+const assets = require('../../common/assets');
+
+module.exports = function(state) {
+  return html`
+  <div id="upload-error">
+    <div class="title">${state.translate('errorPageHeader')}</div>
+    <img id="upload-error-img" data-l10n-id="errorAltText" src="${assets.get(
+      'illustration_error.svg'
+    )}"/>
+  </div>`;
+};

app/templates/file.js

@@ -0,0 +1,84 @@
+const html = require('choo/html');
+const assets = require('../../common/assets');
+
+function timeLeft(milliseconds) {
+  const minutes = Math.floor(milliseconds / 1000 / 60);
+  const hours = Math.floor(minutes / 60);
+  const seconds = Math.floor(milliseconds / 1000 % 60);
+  if (hours >= 1) {
+    return `${hours}h ${minutes % 60}m`;
+  } else if (hours === 0) {
+    return `${minutes}m ${seconds}s`;
+  }
+  return null;
+}
+
+module.exports = function(file, state, emit) {
+  const ttl = file.expiresAt - Date.now();
+  const remaining = timeLeft(ttl) || state.translate('linkExpiredAlt');
+  const row = html`
+  <tr id="${file.id}">
+    <td>${file.name}</td>
+    <td>
+      <img onclick=${copyClick} src="${assets.get(
+    'copy-16.svg'
+  )}" class="icon-copy" title="${state.translate('copyUrlHover')}">
+      <span class="text-copied" hidden="true">${state.translate(
+        'copiedUrl'
+      )}</span>
+    </td>
+    <td>${remaining}</td>
+    <td>
+      <img onclick=${showPopup} src="${assets.get(
+    'close-16.svg'
+  )}" class="icon-delete" title="${state.translate('deleteButtonHover')}">
+      <div class="popup">
+        <div class="popuptext" onblur=${cancel} tabindex="-1">
+          <div class="popup-message">${state.translate('deletePopupText')}</div>
+          <div class="popup-action">
+            <span class="popup-no" onclick=${cancel}>${state.translate(
+    'deletePopupCancel'
+  )}</span>
+            <span class="popup-yes" onclick=${deleteFile}>${state.translate(
+    'deletePopupYes'
+  )}</span>
+          </div>
+        </div>
+      </div>
+    </td>
+  </tr>
+  `;
+
+  function copyClick(e) {
+    emit('copy', { url: file.url, location: 'upload-list' });
+    const icon = e.target;
+    const text = e.target.nextSibling;
+    icon.hidden = true;
+    text.hidden = false;
+    setTimeout(() => {
+      icon.hidden = false;
+      text.hidden = true;
+    }, 500);
+  }
+
+  function showPopup() {
+    const tr = document.getElementById(file.id);
+    const popup = tr.querySelector('.popuptext');
+    popup.classList.add('show');
+    popup.focus();
+  }
+
+  function cancel(e) {
+    e.stopPropagation();
+    const tr = document.getElementById(file.id);
+    const popup = tr.querySelector('.popuptext');
+    popup.classList.remove('show');
+  }
+
+  function deleteFile() {
+    emit('delete', { file, location: 'upload-list' });
+    emit('render');
+  }
+
+  return row;
+};

app/templates/fileList.js

@@ -0,0 +1,28 @@
+const html = require('choo/html');
+const file = require('./file');
+
+module.exports = function(state, emit) {
+  let table = '';
+  if (state.storage.files.length) {
+    table = html`
+    <table id="uploaded-files">
+      <thead>
+        <tr>
+          <th id="uploaded-file">${state.translate('uploadedFile')}</th>
+          <th id="copy-file-list">${state.translate('copyFileList')}</th>
+          <th id="expiry-file-list">${state.translate('expiryFileList')}</th>
+          <th id="delete-file-list">${state.translate('deleteFileList')}</th>
+        </tr>
+      </thead>
+      <tbody>
+        ${state.storage.files.map(f => file(f, state, emit))}
+      </tbody>
+    </table>
+    `;
+  }
+  return html`
+  <div id="file-list">
+    ${table}
+  </div>
+  `;
+};

app/templates/legal.js

@@ -0,0 +1,38 @@
+const html = require('choo/html');
+
+function replaceLinks(str, urls) {
+  let i = -1;
+  const s = str.replace(/<a>([^<]+)<\/a>/g, (m, v) => {
+    i++;
+    return `<a href="${urls[i]}">${v}</a>`;
+  });
+  return [`<div class="description">${s}</div>`];
+}
+
+module.exports = function(state) {
+  const div = html`
+    <div id="page-one">
+      <div id="legal">
+        <div class="title">${state.translate('legalHeader')}</div>
+          ${html(
+            replaceLinks(state.translate('legalNoticeTestPilot'), [
+              'https://testpilot.firefox.com/terms',
+              'https://testpilot.firefox.com/privacy',
+              'https://testpilot.firefox.com/experiments/send'
+            ])
+          )}
+          ${html(
+            replaceLinks(state.translate('legalNoticeMozilla'), [
+              'https://www.mozilla.org/privacy/websites/',
+              'https://www.mozilla.org/about/legal/terms/mozilla/'
+            ])
+          )}
+      </div>
+    </div>
+  `;
+
+  if (state.layout) {
+    return state.layout(state, div);
+  }
+  return div;
+};

app/templates/notFound.js

@@ -0,0 +1,27 @@
+const html = require('choo/html');
+const assets = require('../../common/assets');
+
+module.exports = function(state) {
+  const div = html`
+  <div id="page-one">
+    <div id="download">
+      <div class="title">${state.translate('expiredPageHeader')}</div>
+      <div class="share-window">
+        <img src="${assets.get(
+          'illustration_expired.svg'
+        )}" id="expired-img" data-l10n-id="linkExpiredAlt"/>
+      </div>
+      <div class="expired-description">${state.translate(
+        'uploadPageExplainer'
+      )}</div>
+      <a class="send-new" href="/" data-state="notfound">${state.translate(
+        'sendYourFilesLink'
+      )}</a>
+    </div>
+  </div>`;
+
+  if (state.layout) {
+    return state.layout(state, div);
+  }
+  return div;
+};

app/templates/preview.js

@@ -0,0 +1,65 @@
+const html = require('choo/html');
+const assets = require('../../common/assets');
+const notFound = require('./notFound');
+const { bytes } = require('../utils');
+
+function getFileFromDOM() {
+  const el = document.getElementById('dl-file');
+  if (!el) {
+    return null;
+  }
+  const data = el.dataset;
+  return {
+    name: data.name,
+    size: parseInt(data.size, 10),
+    ttl: parseInt(data.ttl, 10)
+  };
+}
+
+module.exports = function(state, emit) {
+  state.fileInfo = state.fileInfo || getFileFromDOM();
+  if (!state.fileInfo) {
+    return notFound(state, emit);
+  }
+  state.fileInfo.id = state.params.id;
+  state.fileInfo.key = state.params.key;
+  const fileInfo = state.fileInfo;
+  const size = bytes(fileInfo.size);
+  const div = html`
+  <div id="page-one">
+    <div id="download">
+      <div id="download-page-one">
+        <div class="title">
+          <span id="dl-file"
+            data-name="${fileInfo.name}"
+            data-size="${fileInfo.size}"
+            data-ttl="${fileInfo.ttl}">${state.translate('downloadFileName', {
+    filename: fileInfo.name
+  })}</span>
+        <span id="dl-filesize">${' ' +
+          state.translate('downloadFileSize', { size })}</span>
+        </div>
+        <div class="description">${state.translate('downloadMessage')}</div>
+        <img src="${assets.get(
+          'illustration_download.svg'
+        )}" id="download-img" alt="${state.translate('downloadAltText')}"/>
+        <div>
+          <button id="download-btn" class="btn" onclick=${download}>${state.translate(
+    'downloadButtonLabel'
+  )}</button>
+        </div>
+      </div>
+      <a class="send-new" href="/">${state.translate('sendYourFilesLink')}</a>
+    </div>
+  </div>
+  `;
+  function download(event) {
+    event.preventDefault();
+    emit('download', fileInfo);
+  }
+
+  if (state.layout) {
+    return state.layout(state, div);
+  }
+  return div;
+};

app/templates/progress.js

@@ -0,0 +1,21 @@
+const html = require('choo/html');
+
+const radius = 73;
+const oRadius = radius + 10;
+const oDiameter = oRadius * 2;
+const circumference = 2 * Math.PI * radius;
+
+module.exports = function(progressRatio) {
+  const dashOffset = (1 - progressRatio) * circumference;
+  const percent = Math.floor(progressRatio * 100);
+  const div = html`
+  <div class="progress-bar">
+    <svg id="progress" width="${oDiameter}" height="${oDiameter}" viewPort="0 0 ${oDiameter} ${oDiameter}" version="1.1">
+      <circle r="${radius}" cx="${oRadius}" cy="${oRadius}" fill="transparent"/>
+      <circle id="bar" r="${radius}" cx="${oRadius}" cy="${oRadius}" fill="transparent" transform="rotate(-90 ${oRadius} ${oRadius})" stroke-dasharray="${circumference}" stroke-dashoffset="${dashOffset}"/>
+      <text class="percentage" text-anchor="middle" x="50%" y="98"><tspan class="percent-number">${percent}</tspan><tspan class="percent-sign">%</tspan></text>
+    </svg>
+  </div>
+  `;
+  return div;
+};

app/templates/share.js

@@ -0,0 +1,61 @@
+const html = require('choo/html');
+const assets = require('../../common/assets');
+const notFound = require('./notFound');
+const { allowedCopy, delay, fadeOut } = require('../utils');
+
+module.exports = function(state, emit) {
+  const file = state.storage.getFileById(state.params.id);
+  if (!file) {
+    return notFound(state, emit);
+  }
+  const div = html`
+  <div id="share-link" class="fadeIn">
+    <div class="title">${state.translate('uploadSuccessTimingHeader')}</div>
+    <div id="share-window">
+      <div id="copy-text">${state.translate('copyUrlFormLabelWithName', {
+        filename: file.name
+      })}</div>
+      <div id="copy">
+        <input id="link" type="url" value="${file.url}" readonly="true"/>
+        <button id="copy-btn" class="btn" onclick=${copyLink}>${state.translate(
+    'copyUrlFormButton'
+  )}</button>
+      </div>
+      <button id="delete-file" class="btn" onclick=${deleteFile}>${state.translate(
+    'deleteFileButton'
+  )}</button>
+      <a class="send-new" data-state="completed" href="/" onclick=${sendNew}>${state.translate(
+    'sendAnotherFileLink'
+  )}</a>
+    </div>
+  </div>
+  `;
+
+  async function sendNew(e) {
+    e.preventDefault();
+    await fadeOut('share-link');
+    emit('pushState', '/');
+  }
+
+  async function copyLink() {
+    if (allowedCopy()) {
+      emit('copy', { url: file.url, location: 'success-screen' });
+      const copyBtn = document.getElementById('copy-btn');
+      copyBtn.disabled = true;
+      copyBtn.replaceChild(
+        html`<img src="${assets.get('check-16.svg')}" class="icon-check">`,
+        copyBtn.firstChild
+      );
+      await delay(2000);
+      copyBtn.disabled = false;
+      copyBtn.textContent = state.translate('copyUrlFormButton');
+    }
+  }
+
+  async function deleteFile() {
+    emit('delete', { file, location: 'success-screen' });
+    await fadeOut('share-link');
+    emit('pushState', '/');
+  }
+  return div;
+};

app/templates/unsupported.js

@@ -0,0 +1,50 @@
+const html = require('choo/html');
+const assets = require('../../common/assets');
+
+module.exports = function(state) {
+  const msg =
+    state.params.reason === 'outdated'
+      ? html`
+    <div id="unsupported-browser">
+      <div class="title">${state.translate('notSupportedHeader')}</div>
+      <div class="description">${state.translate(
+        'notSupportedOutdatedDetail'
+      )}</div>
+      <a id="update-firefox" href="https://support.mozilla.org/kb/update-firefox-latest-version">
+        <img src="${assets.get(
+          'firefox_logo-only.svg'
+        )}" class="firefox-logo" alt="Firefox"/>
+        <div class="unsupported-button-text">${state.translate(
+          'updateFirefox'
+        )}</div>
+      </a>
+      <div class="unsupported-description">${state.translate(
+        'uploadPageExplainer'
+      )}</div>
+    </div>`
+      : html`
+    <div id="unsupported-browser">
+      <div class="title">${state.translate('notSupportedHeader')}</div>
+      <div class="description">${state.translate('notSupportedDetail')}</div>
+      <div class="description"><a href="https://github.com/mozilla/send/blob/master/docs/faq.md#why-is-my-browser-not-supported">${state.translate(
+        'notSupportedLink'
+      )}</a></div>
+      <a id="dl-firefox" href="https://www.mozilla.org/firefox/new/?scene=2">
+        <img src="${assets.get(
+          'firefox_logo-only.svg'
+        )}" class="firefox-logo" alt="Firefox"/>
+        <div class="unsupported-button-text">Firefox<br>
+          <span>${state.translate('downloadFirefoxButtonSub')}</span>
+        </div>
+      </a>
+      <div class="unsupported-description">${state.translate(
+        'uploadPageExplainer'
+      )}</div>
+    </div>`;
+  const div = html`<div id="page-one">${msg}</div>`;
+
+  if (state.layout) {
+    return state.layout(state, div);
+  }
+  return div;
+};

app/templates/upload.js

@@ -0,0 +1,38 @@
+const html = require('choo/html');
+const progress = require('./progress');
+const { bytes } = require('../utils');
+
+module.exports = function(state, emit) {
+  const transfer = state.transfer;
+
+  const div = html`
+  <div id="upload-progress" class="fadeIn">
+    <div class="title" id="upload-filename">${state.translate(
+      'uploadingPageProgress',
+      {
+        filename: transfer.file.name,
+        size: bytes(transfer.file.size)
+      }
+    )}</div>
+    <div class="description"></div>
+    ${progress(transfer.progressRatio)}
+    <div class="upload">
+      <div class="progress-text">${state.translate(
+        transfer.msg,
+        transfer.sizes
+      )}</div>
+      <button id="cancel-upload" onclick=${cancel}>${state.translate(
+    'uploadingPageCancel'
+  )}</button>
+    </div>
+  </div>
+  `;
+
+  function cancel() {
+    const btn = document.getElementById('cancel-upload');
+    btn.disabled = true;
+    btn.textContent = state.translate('uploadCancelNotification');
+    emit('cancel');
+  }
+  return div;
+};

app/templates/welcome.js

@@ -0,0 +1,55 @@
+const html = require('choo/html');
+const assets = require('../../common/assets');
+const fileList = require('./fileList');
+const { fadeOut } = require('../utils');
+
+module.exports = function(state, emit) {
+  const div = html`
+  <div id="page-one" class="fadeIn">
+    <div class="title">${state.translate('uploadPageHeader')}</div>
+    <div class="description">
+      <div>${state.translate('uploadPageExplainer')}</div>
+      <a href="https://testpilot.firefox.com/experiments/send" class="link">${state.translate(
+        'uploadPageLearnMore'
+      )}</a>
+    </div>
+    <div class="upload-window" ondragover=${dragover} ondragleave=${dragleave}>
+      <div id="upload-img"><img src="${assets.get(
+        'upload.svg'
+      )}" title="${state.translate('uploadSvgAlt')}"/></div>
+      <div id="upload-text">${state.translate('uploadPageDropMessage')}</div>
+      <span id="file-size-msg"><em>${state.translate(
+        'uploadPageSizeMessage'
+      )}</em></span>
+      <form method="post" action="upload" enctype="multipart/form-data">
+        <label for="file-upload" id="browse" class="btn">${state.translate(
+          'uploadPageBrowseButton1'
+        )}</label>
+        <input id="file-upload" type="file" name="fileUploaded" onchange=${upload} />
+      </form>
+    </div>
+    ${fileList(state, emit)}
+  </div>
+  `;
+
+  function dragover(event) {
+    event.target.classList.add('ondrag');
+  }
+
+  function dragleave(event) {
+    event.target.classList.remove('ondrag');
+  }
+
+  async function upload(event) {
+    event.preventDefault();
+    const target = event.target;
+    const file = target.files[0];
+    await fadeOut('page-one');
+    emit('upload', { file, type: 'click' });
+  }
+
+  if (state.layout) {
+    return state.layout(state, div);
+  }
+  return div;
+};

app/utils.js

@@ -0,0 +1,156 @@
+function arrayToHex(iv) {
+  let hexStr = '';
+  // eslint-disable-next-line prefer-const
+  for (let i in iv) {
+    if (iv[i] < 16) {
+      hexStr += '0' + iv[i].toString(16);
+    } else {
+      hexStr += iv[i].toString(16);
+    }
+  }
+  return hexStr;
+}
+
+function hexToArray(str) {
+  const iv = new Uint8Array(str.length / 2);
+  for (let i = 0; i < str.length; i += 2) {
+    iv[i / 2] = parseInt(str.charAt(i) + str.charAt(i + 1), 16);
+  }
+
+  return iv;
+}
+
+function notify(str) {
+  return str;
+  /* TODO: enable once we have an opt-in ui element
+  if (!('Notification' in window)) {
+    return;
+  } else if (Notification.permission === 'granted') {
+    new Notification(str);
+  } else if (Notification.permission !== 'denied') {
+    Notification.requestPermission(function(permission) {
+      if (permission === 'granted') new Notification(str);
+    });
+  }
+  */
+}
+
+function loadShim(polyfill) {
+  return new Promise((resolve, reject) => {
+    const shim = document.createElement('script');
+    shim.src = polyfill;
+    shim.addEventListener('load', () => resolve(true));
+    shim.addEventListener('error', () => resolve(false));
+    document.head.appendChild(shim);
+  });
+}
+
+async function canHasSend(polyfill) {
+  try {
+    const key = await window.crypto.subtle.generateKey(
+      {
+        name: 'AES-GCM',
+        length: 128
+      },
+      true,
+      ['encrypt', 'decrypt']
+    );
+
+    await window.crypto.subtle.encrypt(
+      {
+        name: 'AES-GCM',
+        iv: window.crypto.getRandomValues(new Uint8Array(12)),
+        tagLength: 128
+      },
+      key,
+      new ArrayBuffer(8)
+    );
+    return true;
+  } catch (err) {
+    return loadShim(polyfill);
+  }
+}
+
+function isFile(id) {
+  return /^[0-9a-fA-F]{10}$/.test(id);
+}
+
+function copyToClipboard(str) {
+  const aux = document.createElement('input');
+  aux.setAttribute('value', str);
+  aux.contentEditable = true;
+  aux.readOnly = true;
+  document.body.appendChild(aux);
+  if (navigator.userAgent.match(/iphone|ipad|ipod/i)) {
+    const range = document.createRange();
+    range.selectNodeContents(aux);
+    const sel = window.getSelection();
+    sel.removeAllRanges();
+    sel.addRange(range);
+    aux.setSelectionRange(0, str.length);
+  } else {
+    aux.select();
+  }
+  const result = document.execCommand('copy');
+  document.body.removeChild(aux);
+  return result;
+}
+
+const LOCALIZE_NUMBERS = !!(
+  typeof Intl === 'object' &&
+  Intl &&
+  typeof Intl.NumberFormat === 'function' &&
+  typeof navigator === 'object'
+);
+
+const UNITS = ['B', 'kB', 'MB', 'GB'];
+function bytes(num) {
+  const exponent = Math.min(Math.floor(Math.log10(num) / 3), UNITS.length - 1);
+  const n = Number(num / Math.pow(1000, exponent));
+  const nStr = LOCALIZE_NUMBERS
+    ? n.toLocaleString(navigator.languages, {
+        minimumFractionDigits: 1,
+        maximumFractionDigits: 1
+      })
+    : n.toFixed(1);
+  return `${nStr}${UNITS[exponent]}`;
+}
+
+function percent(ratio) {
+  return LOCALIZE_NUMBERS
+    ? ratio.toLocaleString(navigator.languages, { style: 'percent' })
+    : `${Math.floor(ratio * 100)}%`;
+}
+
+function allowedCopy() {
+  const support = !!document.queryCommandSupported;
+  return support ? document.queryCommandSupported('copy') : false;
+}
+
+function delay(delay = 100) {
+  return new Promise(resolve => setTimeout(resolve, delay));
+}
+
+function fadeOut(id) {
+  const classes = document.getElementById(id).classList;
+  classes.remove('fadeIn');
+  classes.add('fadeOut');
+  return delay(300);
+}
+
+const ONE_DAY_IN_MS = 86400000;
+
+module.exports = {
+  fadeOut,
+  delay,
+  allowedCopy,
+  bytes,
+  percent,
+  copyToClipboard,
+  arrayToHex,
+  hexToArray,
+  notify,
+  canHasSend,
+  isFile,
+  ONE_DAY_IN_MS
+};