don't disable copy while setting password. fixes #638

Added experiment for firefox download promo

.dockerignore

@@ -1,7 +1,8 @@
 node_modules
 .git
 .DS_Store
-static
-test
-scripts
+firefox
+assets
 docs
+public
+test

.editorconfig

@@ -0,0 +1,14 @@
+root = true
+
+[*]
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+
+[*.{js,html,yml,json,handlebars}]
+indent_style = space
+indent_size = 2
+
+[*.toml]
+indent_style = space
+indent_size = 4

.eslintignore

@@ -1,2 +1,3 @@
-public/bundle.js
-public/webcrypto-shim.js
+dist
+assets
+firefox

.eslintrc.yml

@@ -19,11 +19,13 @@ rules:
   security/detect-non-literal-fs-filename: off
   security/detect-object-injection: off
 
+  eol-last: [error, always]
   eqeqeq: error
+  no-alert: warn
   no-console: warn
   no-path-concat: error
   no-unused-vars: [error, {argsIgnorePattern: "^_|err|event|next|reject"}]
   no-var: error
   one-var: [error, never]
   prefer-const: error
-  quotes: [error, single]
+  quotes: [error, single, {avoidEscape: true}]

.gitattributes

@@ -0,0 +1,2 @@
+public/locales/* linguist-documentation
+docs/* linguist-documentation

.gitignore

@@ -1,6 +1,2 @@
-.DS_Store
 node_modules
-public/bundle.js
-public/version.json
-static/*
-!static/info.txt
+dist

.nsprc

@@ -0,0 +1,3 @@
+{
+  "exceptions": ["https://nodesecurity.io/advisories/534"]
+}

.prettierignore

@@ -0,0 +1,2 @@
+dist
+assets/*.js

.stylelintrc

@@ -1,6 +1,12 @@
 extends: stylelint-config-standard
 
+plugins:
+  - stylelint-no-unsupported-browser-features
+
 rules:
-  color-hex-case: upper
+  plugin/no-unsupported-browser-features: [true, {severity: warning}]
+
+  color-hex-case: lower
   declaration-colon-newline-after: null
   selector-list-comma-newline-after: null
+  value-list-comma-newline-after: null

CHANGELOG.md

@@ -0,0 +1,218 @@
+## Change Log
+
+### v1.1.1 (2017/08/17 01:29 +00:00)
+- [#516](https://github.com/mozilla/send/pull/516) cache assets (@dannycoates)
+- [#520](https://github.com/mozilla/send/pull/520) fix drag & drop (@dannycoates)
+- [#515](https://github.com/mozilla/send/pull/515) removed jquery from upload.js (@dannycoates)
+- [#514](https://github.com/mozilla/send/pull/514) use async and removed jquery from download.js (@dannycoates)
+- [#513](https://github.com/mozilla/send/pull/513) use svg for progress (@dannycoates)
+- [#510](https://github.com/mozilla/send/pull/510) added precommit hook for format (@dannycoates)
+- [#502](https://github.com/mozilla/send/pull/502) extracted filelist into its own file (@dannycoates)
+- [#428](https://github.com/mozilla/send/pull/428) add twitter and open graph cards (@dannycoates, @johngruen)
+- [#506](https://github.com/mozilla/send/pull/506) 404 page (@varghesethomase)
+- [#508](https://github.com/mozilla/send/pull/508) fixes 478 (@abhinadduri)
+- [#504](https://github.com/mozilla/send/pull/504) fix japanese browse button (@johngruen)
+- [#503](https://github.com/mozilla/send/pull/503) Added editorconfig (@skystar-p)
+- [#499](https://github.com/mozilla/send/pull/499) use import/export in the frontend code (@dannycoates)
+- [#500](https://github.com/mozilla/send/pull/500) fixed build:css on windows (@dannycoates)
+- [#481](https://github.com/mozilla/send/pull/481) Cater for mobile and desktop (@pdehaan, @hubdotcom)
+- [#493](https://github.com/mozilla/send/pull/493) added webpack-dev-middleware (@dannycoates)
+- [#491](https://github.com/mozilla/send/pull/491) added missing exit event cases (@dannycoates)
+- [#492](https://github.com/mozilla/send/pull/492) make the site mostly work when cookies (localStorage) are disabled (@dannycoates)
+- [#490](https://github.com/mozilla/send/pull/490) set the mime type in the download blob (@dannycoates)
+- [#485](https://github.com/mozilla/send/pull/485) added progress to tab title when not in focus (@dannycoates)
+- [#474](https://github.com/mozilla/send/pull/474) Fixing bug #438 by adding role attribute to anchor tags and alt attribute images (@varghesethomase)
+- [#480](https://github.com/mozilla/send/pull/480) Increase font weight to 500 on <button>s and <label>s (@pdehaan)
+- [#419](https://github.com/mozilla/send/pull/419) Add autoprefixer and cssnano support (@pdehaan)
+
+### v1.1.0 (2017/08/08 03:59 +00:00)
+- [#473](https://github.com/mozilla/send/pull/473) Sort contributors alphabetically to prevent churn (@pdehaan)
+- [#472](https://github.com/mozilla/send/pull/472) removed references to checksums in frontend tests (@abhinadduri)
+- [#470](https://github.com/mozilla/send/pull/470) removed the file sha256 hash (@dannycoates)
+- [#469](https://github.com/mozilla/send/pull/469) Increase mimimum node version to 8.2.0 (@ehuggett)
+- [#468](https://github.com/mozilla/send/pull/468) attach delete-file handler only after upload (@dannycoates)
+- [#466](https://github.com/mozilla/send/pull/466) added webpack (@dannycoates)
+- [#427](https://github.com/mozilla/send/pull/427) Extended system font list fixes:#408 (@gautamkrishnar)
+- [#448](https://github.com/mozilla/send/pull/448) Migrate width attribute to CSS (Fixes #436) (@nskins)
+- [#457](https://github.com/mozilla/send/pull/457) factored out progress into progress.js (@dannycoates)
+- [#452](https://github.com/mozilla/send/pull/452) refactored metrics (@dannycoates)
+- [#455](https://github.com/mozilla/send/pull/455) Add a few missing strings from es-CL and tr locales (@pdehaan)
+- [#444](https://github.com/mozilla/send/pull/444) Chain jQuery calls, do not use events alias and store selectors (@Johann-S)
+- [#416](https://github.com/mozilla/send/pull/416) WIP: use webcrypto-liner to support Safari 10 (@dannycoates)
+- [#451](https://github.com/mozilla/send/pull/451) Add rel noopener noreferrer to target='_blank' anchor elements (Fixes #439) (@boopeshmahendran)
+- [#449](https://github.com/mozilla/send/pull/449) Add X-UA-Compatible meta tag (@kenrick95)
+- [#433](https://github.com/mozilla/send/pull/433) Prevent download button from being clicked multiple times (@pdehaan)
+- [#432](https://github.com/mozilla/send/pull/432) Add contributors script (@pdehaan)
+- [#409](https://github.com/mozilla/send/pull/409) Handle copy clipboard disabled (@Johann-S)
+
+### v1.0.4 (2017/08/03 23:05 +00:00)
+- [#418](https://github.com/mozilla/send/pull/418) _blank all footer links (@dannycoates)
+- [#386](https://github.com/mozilla/send/pull/386) fix percentage view on mobile layout (@ariestiyansyah)
+- [#414](https://github.com/mozilla/send/pull/414) Add link to FAQ in unsupported view (@pdehaan)
+- [#415](https://github.com/mozilla/send/pull/415) Only include Fira CSS on /unsupported/* route (@pdehaan)
+- [#412](https://github.com/mozilla/send/pull/412) throw key errors before download begins (@dannycoates)
+- [#404](https://github.com/mozilla/send/pull/404) Use async function instead of promise (#325) (@weihanglo)
+- [#406](https://github.com/mozilla/send/pull/406) Add noscript tag (@pdehaan)
+- [#325](https://github.com/mozilla/send/pull/325) Use async function instead of promise (#325) (@weihanglo)
+- [#325](https://github.com/mozilla/send/pull/325) Use async function instead of promise (#325) (@weihanglo)
+
+### v1.0.3 (2017/08/02 23:59 +00:00)
+- [#402](https://github.com/mozilla/send/pull/402) filter the hash from error reports (@dannycoates)
+- [#400](https://github.com/mozilla/send/pull/400) fix link that breaks download by opening in new tab (@johngruen)
+- [#369](https://github.com/mozilla/send/pull/369) Add ESLint no-alert shame rule (@pdehaan)
+- [#396](https://github.com/mozilla/send/pull/396) add babel-polyfill (@dannycoates)
+- [#394](https://github.com/mozilla/send/pull/394) catch JSON.parse errors of storage metadata (@dannycoates)
+- [#367](https://github.com/mozilla/send/pull/367) Generate production locales using 'compare-locales' (@pdehaan)
+- [#392](https://github.com/mozilla/send/pull/392) Adjust hover behavior on send-logo (#382)
+ Fixes: #382. (@weihanglo)
+- [#382](https://github.com/mozilla/send/pull/382) Adjust hover behavior on send-logo (#382) (@weihanglo)
+- [#382](https://github.com/mozilla/send/pull/382) Adjust hover behavior on send-logo (#382) (@weihanglo)
+- [#380](https://github.com/mozilla/send/pull/380) Add Pontoon URL to README (@pdehaan)
+
+### v1.0.2 (2017/07/31 18:58 +00:00)
+- [#365](https://github.com/mozilla/send/pull/365) revert the IE fix to fix footer on chrome (@dannycoates)
+
+### v1.0.1 (2017/07/31 17:28 +00:00)
+- [#353](https://github.com/mozilla/send/pull/353) redirect ie to /unsupported (@abhinadduri, @dannycoates)
+- [#360](https://github.com/mozilla/send/pull/360) Fix some linting nits (@pdehaan)
+- [#362](https://github.com/mozilla/send/pull/362) Adjusts category of unsupported event (fixes #350). (@chuckharmston)
+- [#355](https://github.com/mozilla/send/pull/355) Make order of uploaded files in list consistent (@pdehaan)
+- [#356](https://github.com/mozilla/send/pull/356) Get rid of console.log statements (@pdehaan)
+- [#358](https://github.com/mozilla/send/pull/358) Fix some missing .title attributes in dev-only locales (@pdehaan)
+- [#354](https://github.com/mozilla/send/pull/354) Remove /en-US/ from cookies link in footer (@pdehaan)
+- [#339](https://github.com/mozilla/send/pull/339) Show error page on firefox v49 and below (@ericawright, @abhinadduri)
+- [#346](https://github.com/mozilla/send/pull/346) Add docs/CODEOWNERS file (@pdehaan)
+- [#345](https://github.com/mozilla/send/pull/345) wrap long file names (@dnarcese)
+- [#344](https://github.com/mozilla/send/pull/344) don't wrap file list headers (@dnarcese)
+- [#327](https://github.com/mozilla/send/pull/327) Modify popup delete dialog (@youwenliang)
+- [#341](https://github.com/mozilla/send/pull/341) center percentage text on all browser versions (@dnarcese)
+- [#340](https://github.com/mozilla/send/pull/340) Remove duplicate entities in localized FTL files (@flodolo)
+- [#337](https://github.com/mozilla/send/pull/337) support v 50 and 51 by not allowing const in loops (@ericawright)
+- [#338](https://github.com/mozilla/send/pull/338) Remove duplicated strings in en-US, fix nn-NO file (@flodolo)
+- [#336](https://github.com/mozilla/send/pull/336) German(de): Fixed missing value for deleteFileButton (#336) (@flodolo)
+- [#334](https://github.com/mozilla/send/pull/334) fix functionality on firefox 50 and 51 (@dnarcese)
+
+### v1.0.0 (2017/07/26 19:08 +00:00)
+- [#323](https://github.com/mozilla/send/pull/323) disable upload/download notifications (@dannycoates)
+- [#322](https://github.com/mozilla/send/pull/322) fix feedback button jump (@dnarcese)
+- [#320](https://github.com/mozilla/send/pull/320) fix German footer (@dnarcese)
+
+### v0.2.2 (2017/07/26 04:50 +00:00)
+- [#314](https://github.com/mozilla/send/pull/314) added L10N_DEV environment variable for making all languages available (@dannycoates)
+- [#313](https://github.com/mozilla/send/pull/313) removing timeout limit for front end tests (@abhinadduri)
+- [#311](https://github.com/mozilla/send/pull/311) expired ids should reject instead of returning null (@dannycoates)
+- [#302](https://github.com/mozilla/send/pull/302) UX Refine WIP (@youwenliang)
+- [#310](https://github.com/mozilla/send/pull/310) if the download card is pressed, the expired card shows up properly (@abhinadduri)
+- [#269](https://github.com/mozilla/send/pull/269) refactored ftl file (@abhinadduri)
+- [#291](https://github.com/mozilla/send/pull/291) added legal page (@dannycoates)
+- [#307](https://github.com/mozilla/send/pull/307) don't show error page on upload cancel (@dnarcese)
+- [#299](https://github.com/mozilla/send/pull/299) use CIRCLE_TAG as version.json version if present (@dannycoates)
+
+### v0.2.1 (2017/07/24 23:34 +00:00)
+- [#296](https://github.com/mozilla/send/pull/296) restyle delete popup (@dnarcese)
+- [#295](https://github.com/mozilla/send/pull/295) renamed environment variables to remove P2P_ prefix (@dannycoates)
+- [#294](https://github.com/mozilla/send/pull/294) dealing with invalid drag and drops (@abhinadduri)
+- [#297](https://github.com/mozilla/send/pull/297) added environment variable for expire time (@dannycoates)
+- [#292](https://github.com/mozilla/send/pull/292) Fixes289 (@abhinadduri)
+- [#288](https://github.com/mozilla/send/pull/288) fix: Don`t allow upload when not on the upload page. (@ericawright)
+- [#285](https://github.com/mozilla/send/pull/285) added messages for processing phases (@dannycoates)
+- [#267](https://github.com/mozilla/send/pull/267) make site responsive and add feedback link (@johngruen)
+- [#286](https://github.com/mozilla/send/pull/286) Update download progress bar color (@pdehaan)
+- [#281](https://github.com/mozilla/send/pull/281) Stop ESLint from linting the /public/ directory (@pdehaan)
+- [#280](https://github.com/mozilla/send/pull/280) created /unsupported page and added gcmCompliant to /download page (@dannycoates)
+- [#279](https://github.com/mozilla/send/pull/279) create separate js bundles for upload/download pages (@dannycoates)
+- [#268](https://github.com/mozilla/send/pull/268) Testpilot ga (@abhinadduri)
+
+### v0.2.0 (2017/07/21 19:27 +00:00)
+- [#266](https://github.com/mozilla/send/pull/266) abort uploads over maxfilesize (@dannycoates)
+- [#264](https://github.com/mozilla/send/pull/264) Remove duplicate custom metric. (@chuckharmston)
+- [#259](https://github.com/mozilla/send/pull/259) add alert when uploading multiple files (@dnarcese)
+- [#262](https://github.com/mozilla/send/pull/262) sync download progress bar with percentage (@dnarcese)
+- [#258](https://github.com/mozilla/send/pull/258) better sync percent with progress bar (@dnarcese)
+- [#257](https://github.com/mozilla/send/pull/257) add a dynamic js script for page config (@dannycoates)
+- [#256](https://github.com/mozilla/send/pull/256) add file size limit message (@dnarcese)
+- [#253](https://github.com/mozilla/send/pull/253) Add favicon.ico version of the Send logo (@pdehaan)
+- [#254](https://github.com/mozilla/send/pull/254) Add nsp check to circle ci (@pdehaan)
+- [#245](https://github.com/mozilla/send/pull/245) Localization (@abhinadduri)
+- [#252](https://github.com/mozilla/send/pull/252) only allow drag and drop on upload page (@dnarcese)
+- [#250](https://github.com/mozilla/send/pull/250) make footer not overlap (@dnarcese)
+- [#251](https://github.com/mozilla/send/pull/251) minify all images (@ericawright)
+- [#249](https://github.com/mozilla/send/pull/249) change how the file upload box expands (@dnarcese)
+- [#246](https://github.com/mozilla/send/pull/246) remove P2P references.  Fixes #224 (@clouserw)
+- [#242](https://github.com/mozilla/send/pull/242) Make only icons clickable in file list (@dnarcese)
+- [#236](https://github.com/mozilla/send/pull/236) add FAQ. Fixes #186 (@clouserw)
+- [#235](https://github.com/mozilla/send/pull/235) allow send another file link to open in new tab (@dnarcese)
+- [#234](https://github.com/mozilla/send/pull/234) fix download svg (@dnarcese)
+- [#232](https://github.com/mozilla/send/pull/232) escape filename in the ui (@dannycoates)
+- [#226](https://github.com/mozilla/send/pull/226) added functionality to cancel uploads (@abhinadduri)
+- [#231](https://github.com/mozilla/send/pull/231) move head and html tags to main template (@dnarcese)
+- [#228](https://github.com/mozilla/send/pull/228) add send logo (@dnarcese)
+- [#229](https://github.com/mozilla/send/pull/229) change learn more and github links (@dnarcese)
+- [#201](https://github.com/mozilla/send/pull/201) Adds metrics documentation (closes #5). (@chuckharmston)
+- [#223](https://github.com/mozilla/send/pull/223) change size of send another file links (@dnarcese)
+- [#222](https://github.com/mozilla/send/pull/222) add footer (@dnarcese)
+- [#197](https://github.com/mozilla/send/pull/197) fixes issues 195 and 192 (@abhinadduri)
+- [#204](https://github.com/mozilla/send/pull/204) added HSTS header (@dannycoates)
+- [#193](https://github.com/mozilla/send/pull/193) Frontend tests (@abhinadduri)
+- [#191](https://github.com/mozilla/send/pull/191) New ui! (@dnarcese)
+
+### v0.1.4 (2017/07/12 18:21 +00:00)
+- [#189](https://github.com/mozilla/send/pull/189) Add CSP directives (@dannycoates)
+- [#188](https://github.com/mozilla/send/pull/188) fixes delete button error (@abhinadduri)
+- [#185](https://github.com/mozilla/send/pull/185) added loading, hashing, and encrypting events for uploader; decryptin… (@abhinadduri)
+- [#183](https://github.com/mozilla/send/pull/183) rename to 'Send' (@dannycoates)
+- [#184](https://github.com/mozilla/send/pull/184) Server tests (@abhinadduri)
+- [#178](https://github.com/mozilla/send/pull/178) fixed issues in branch title (@abhinadduri)
+- [#177](https://github.com/mozilla/send/pull/177) Gcm compliance (@abhinadduri)
+- [#106](https://github.com/mozilla/send/pull/106) Gcm (@abhinadduri, @dannycoates)
+- [#168](https://github.com/mozilla/send/pull/168) Show error page if upload fails (@dnarcese)
+- [#148](https://github.com/mozilla/send/pull/148) WIP: Add basic contribute.json (@pdehaan)
+- [#162](https://github.com/mozilla/send/pull/162) Fix dev server URL in README.md file (@pdehaan)
+- [#167](https://github.com/mozilla/send/pull/167) build docker image with new name (@relud)
+- [#164](https://github.com/mozilla/send/pull/164) Add word wraps to table (@dnarcese)
+- [#149](https://github.com/mozilla/send/pull/149) Add robots.txt (@pdehaan)
+- [#161](https://github.com/mozilla/send/pull/161) Hide table header on empty list (@dnarcese)
+- [#154](https://github.com/mozilla/send/pull/154) Remove expired uploads (@dnarcese)
+- [#146](https://github.com/mozilla/send/pull/146) Update README with some more details (@pdehaan)
+
+### v0.1.2 (2017/06/24 03:38 +00:00)
+- [#138](https://github.com/mozilla/send/pull/138) remove notLocalHost (@dannycoates)
+
+### v0.1.0 (2017/06/24 01:24 +00:00)
+- [#137](https://github.com/mozilla/send/pull/137) refactored docker build (@dannycoates)
+- [#132](https://github.com/mozilla/send/pull/132) Add /__version__ route (@pdehaan)
+- [#135](https://github.com/mozilla/send/pull/135) make dockerfile more dockerflowy (@dannycoates)
+- [#134](https://github.com/mozilla/send/pull/134) Load previous uploads (@dannycoates, @dnarcese)
+- [#131](https://github.com/mozilla/send/pull/131) added __heartbeat__ (@dannycoates)
+- [#133](https://github.com/mozilla/send/pull/133) Add LICENSE file (@pdehaan)
+- [#130](https://github.com/mozilla/send/pull/130) added sentry to server code (@abhinadduri)
+- [#124](https://github.com/mozilla/send/pull/124) Remove unused [dev]dependencies (@pdehaan)
+- [#119](https://github.com/mozilla/send/pull/119) Move cross-env to a dep (@pdehaan)
+- [#123](https://github.com/mozilla/send/pull/123) removed bitly integration (@abhinadduri)
+- [#122](https://github.com/mozilla/send/pull/122) fix docker build (@dannycoates)
+- [#121](https://github.com/mozilla/send/pull/121) added docker service to circle.yml (@dannycoates)
+- [#120](https://github.com/mozilla/send/pull/120) added sentry (@abhinadduri)
+- [#118](https://github.com/mozilla/send/pull/118) change docker image name and add builds for tags (@relud)
+- [#116](https://github.com/mozilla/send/pull/116) add /__lbheartbeat__ endpoint (@relud)
+- [#79](https://github.com/mozilla/send/pull/79) Optimize/minimize bundle.js for production (@pdehaan)
+- [#104](https://github.com/mozilla/send/pull/104) Fix a bunch of ESLint and HTMLLint errors (@pdehaan)
+- [#105](https://github.com/mozilla/send/pull/105) Progress bars (@dnarcese)
+- [#111](https://github.com/mozilla/send/pull/111) added in anonmyized ip google analytics (@abhinadduri)
+- [#110](https://github.com/mozilla/send/pull/110) added notifications (@abhinadduri)
+- [#103](https://github.com/mozilla/send/pull/103) added Dockerfile (@dannycoates)
+- [#100](https://github.com/mozilla/send/pull/100) Added Helmet Middleware (@abhinadduri)
+- [#99](https://github.com/mozilla/send/pull/99) Testing (@abhinadduri)
+- [#77](https://github.com/mozilla/send/pull/77) Fix the linter errors (@pdehaan)
+- [#54](https://github.com/mozilla/send/pull/54) Adding basic ESLint config (@pdehaan)
+- [#71](https://github.com/mozilla/send/pull/71) Drag & drop (@dnarcese)
+- [#72](https://github.com/mozilla/send/pull/72) Logging (@abhinadduri, @dannycoates)
+- [#45](https://github.com/mozilla/send/pull/45) S3 integration (@abhinadduri, @dannycoates)
+- [#46](https://github.com/mozilla/send/pull/46) Download page and share link UI (@dnarcese)
+- [#41](https://github.com/mozilla/send/pull/41) Added upload page and file list UI (@dnarcese)
+- [#40](https://github.com/mozilla/send/pull/40) Tweak the package.json file (@pdehaan)
+- [#43](https://github.com/mozilla/send/pull/43) added return (@abhinadduri)
+- [#42](https://github.com/mozilla/send/pull/42) changed to handle 404 during download, also removing progress listene… (@abhinadduri)
+- [#39](https://github.com/mozilla/send/pull/39) Refactor riff (@abhinadduri, @dannycoates)
+- [#36](https://github.com/mozilla/send/pull/36) added prettier for js formatting (@dannycoates)
+- [#28](https://github.com/mozilla/send/pull/28) Added a UI for the uploader end, made stylistic changes, implemented deleting (@abhinadduri)
+- [#25](https://github.com/mozilla/send/pull/25) Changed naming for some pages, no longer stores files by name on server (@abhinadduri)

CONTRIBUTORS

@@ -0,0 +1,92 @@
+Abhinav Adduri
+Alexander Slovesnik
+Amin Mahmudian
+Andreas Pettersson
+Arash Mousavi
+Balázs Meskó
+Belayet Hossain
+Bjørn I
+Boopesh Mahendran
+Chuck Harmston
+Cláudio Esperança
+Cynthia Pereira
+Daniel Thorn
+Daniela Arcese
+Danny Coates
+Emin Mastizada
+Enol
+Erica
+Erica Wright
+Fjoerfoks
+Francesco Lodolo
+Francesco Lodolo [:flod]
+Gautam krishna.R
+Håvar Henriksen
+Jae Hyeon Park
+Jakub Rychlý
+Jamie
+Jim Spentzos
+Johann-S
+John Gruen
+Jon Vadillo
+Jordi Serratosa
+Juraj Cigáň
+Kohei Yoshino
+Lan Glad
+Luna Jernberg
+Marcelo Poli
+Marco Aurélio
+Mark Liang
+Matjaž Horvat
+Maykon Chagas
+Michael Köhler
+Michael Wolf
+Michal Stanke
+Michal Vašíček
+Moḥend Belqasem
+Nicholas Skinsacos
+Peter deHaan
+Pierre Neter
+Pin-guang Chen
+Rhoslyn Prys
+Rizky Ariestiyansyah
+Roberto Alvarado
+Rodrigo
+Rok Žerdin
+Sahithi
+Sairam Raavi
+Sandro
+Schieck :)
+Selim Şumlu
+Slimane Amiri
+Théo Chevalier
+Tomáš Zelina
+Ton
+Tymur Faradzhev
+Varghese Thomas
+Victor Bychek
+Weihang Lo
+Wil Clouser
+YFdyh000
+You-Wen Liang (Mark)
+alex_mayorga
+ariestiyansyah
+avelper
+dgadelha
+ehuggett
+eljuno
+erdem cobanoglu
+gautamkrishnar
+goofy
+hi
+jesferman1993
+josotrix
+kenrick95
+manxmensch
+ravmn
+reza.habibi2008
+siparon
+skystar-p
+xcffl
+Μιχάλης
+Марко Костић (Marko Kostić)

Dockerfile

@@ -1,5 +1,6 @@
 FROM node:8-alpine
 
+RUN apk add --no-cache git
 RUN addgroup -S -g 10001 app && adduser -S -D -G app -u 10001 app
 COPY . /app
 RUN chown -R app /app
@@ -11,4 +12,4 @@ RUN npm install --production && npm cache clean --force
 ENV PORT=1443
 EXPOSE $PORT
 
-CMD ["npm", "start"]
+CMD ["npm", "run", "prod"]

README.md

@@ -1,40 +1,84 @@
 # Firefox Send
 
-[![CircleCI](https://circleci.com/gh/mozilla/send.svg?style=svg)](https://circleci.com/gh/mozilla/send)
+[![CircleCI](https://img.shields.io/circleci/project/github/mozilla/send.svg)](https://circleci.com/gh/mozilla/send)
+[![Available on Test Pilot](https://img.shields.io/badge/available_on-Test_Pilot-0996F8.svg)](https://testpilot.firefox.com/experiments/send)
+
+**Docs:** [Docker](docs/docker.md), [Metrics](docs/metrics.md)
+
+---
+
+## Table of Contents
+
+* [What it does](#what-it-does)
+* [Requirements](#requirements)
+* [Development](#development)
+* [Commands](#commands)
+* [Configuration](#configuration)
+* [Localization](#localization)
+* [Contributing](#contributing)
+* [Testing](#testing)
+* [License](#license)
+
+---
 
 ## What it does
 
-A P2P file sharing experiment which allows you to send encrypted files to other users.
+A file sharing experiment which allows you to send encrypted files to other users.
+
+---
 
 ## Requirements
 
-- [Node.js 8+](https://nodejs.org/)
-- [Redis server](https://redis.io/)
+- [Node.js 8.2+](https://nodejs.org/)
+- [Redis server](https://redis.io/) (optional for development)
+- [AWS S3](https://aws.amazon.com/s3/) or compatible service. (optional)
 
-**NOTE:** To run the project, make sure you have a Redis server running locally:
+---
+
+## Development
+
+To start an ephemeral development server run:
 
 ```sh
-$ redis-server /usr/local/etc/redis.conf
+npm install
+npm start
 ```
 
-## How to use it
+Then browse to http://localhost:8080
+
+---
+
+## Commands
 
 | Command          | Description |
 |------------------|-------------|
-| `npm run dev`    | Builds and starts the web server locally for development.
 | `npm run format` | Formats the frontend and server code using **prettier**.
 | `npm run lint`   | Lints the CSS and JavaScript code.
-| `npm start`      | Starts the Express web server.
 | `npm test`       | Runs the suite of mocha tests.
+| `npm start`      | Runs the server in development configuration.
+| `npm run build`  | Builds the production assets.
+| `npm run prod`   | Runs the server in production configuration.
+
+---
+
+## Configuration
+
+The server is configured with environment variables. See [server/config.js](server/config.js) for all options and [docs/docker.md](docs/docker.md) for examples.
+
+---
 
 ## Localization
 
-_Coming soon_ (see [#57](https://github.com/mozilla/send/issues/57))
+Firefox Send localization is managed via [Pontoon](https://pontoon.mozilla.org/projects/test-pilot-firefox-send/), not direct pull requests to the repository. If you want to fix a typo, add a new language, or simply know more about localization, please get in touch with the [existing localization team](https://pontoon.mozilla.org/teams/) for your language, or Mozilla’s [l10n-drivers](https://wiki.mozilla.org/L10n:Mozilla_Team#Mozilla_Corporation) for guidance.
+
+---
 
 ## Contributing
 
 Pull requests are always welcome! Feel free to check out the list of ["good first bugs"](https://github.com/mozilla/send/issues?q=is%3Aopen+is%3Aissue+label%3A%22good+first+bug%22).
 
+---
+
 ## Testing
 
 | ENVIRONMENT | URL
@@ -43,6 +87,10 @@ Pull requests are always welcome! Feel free to check out the list of ["good firs
 | Stage       | <https://send.stage.mozaws.net/>
 | Development | <https://send.dev.mozaws.net/>
 
+---
+
 ## License
 
 [Mozilla Public License Version 2.0](LICENSE)
+
+---

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/experiments.js

@@ -0,0 +1,69 @@
+import hash from 'string-hash';
+
+const experiments = {
+  'SyI-hI7gT9agiH-f3f0BYg': {
+    id: 'SyI-hI7gT9agiH-f3f0BYg',
+    run: function(variant, state, emitter) {
+      state.promo = variant === 1 ? 'body' : 'header';
+      emitter.emit('render');
+    },
+    eligible: function() {
+      return (
+        !/firefox/i.test(navigator.userAgent) &&
+        document.querySelector('html').lang === 'en-US'
+      );
+    },
+    variant: function(state) {
+      return this.luckyNumber(state) > 0.5 ? 1 : 0;
+    },
+    luckyNumber: function(state) {
+      return luckyNumber(
+        `${this.id}:${state.storage.get('testpilot_ga__cid')}`
+      );
+    }
+  }
+};
+
+//Returns a number between 0 and 1
+// eslint-disable-next-line no-unused-vars
+function luckyNumber(str) {
+  return hash(str) / 0xffffffff;
+}
+
+function checkExperiments(state, emitter) {
+  const all = Object.keys(experiments);
+  const id = all.find(id => experiments[id].eligible(state));
+  if (id) {
+    const variant = experiments[id].variant(state);
+    state.storage.enroll(id, variant);
+    experiments[id].run(variant, state, emitter);
+  }
+}
+
+export default function initialize(state, emitter) {
+  emitter.on('DOMContentLoaded', () => {
+    const xp = experiments[state.query.x];
+    if (xp) {
+      xp.run(+state.query.v, state, emitter);
+    }
+  });
+
+  if (!state.storage.get('testpilot_ga__cid')) {
+    // first ever visit. check again after cid is assigned.
+    emitter.on('DOMContentLoaded', () => {
+      checkExperiments(state, emitter);
+    });
+  } else {
+    const enrolled = state.storage.enrolled.filter(([id, variant]) => {
+      const xp = experiments[id];
+      if (xp) {
+        xp.run(variant, state, emitter);
+      }
+      return !!xp;
+    });
+    // single experiment per session for now
+    if (enrolled.length === 0) {
+      checkExperiments(state, emitter);
+    }
+  }
+}

app/fileManager.js

@@ -0,0 +1,249 @@
+/* global EXPIRE_SECONDS */
+import FileSender from './fileSender';
+import FileReceiver from './fileReceiver';
+import { copyToClipboard, delay, fadeOut, percent } 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;
+  let updateTitle = false;
+
+  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();
+    }
+  }
+
+  function updateProgress() {
+    if (updateTitle) {
+      emitter.emit('DOMTitleChange', percent(state.transfer.progressRatio));
+    }
+    render();
+  }
+
+  emitter.on('DOMContentLoaded', () => {
+    document.addEventListener('blur', () => (updateTitle = true));
+    document.addEventListener('focus', () => {
+      updateTitle = false;
+      emitter.emit('DOMTitleChange', 'Firefox Send');
+    });
+    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', updateProgress);
+    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 });
+      document.getElementById('cancel-upload').hidden = 'hidden';
+      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) {
+      console.error(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('pushState', '/error');
+    }
+  });
+
+  emitter.on('password', async ({ password, file }) => {
+    try {
+      await FileSender.setPassword(password, file);
+      metrics.addedPassword({ size: file.size });
+      file.password = password;
+      state.storage.writeFiles();
+    } catch (e) {
+      console.error(e);
+    }
+    render();
+  });
+
+  emitter.on('preview', async () => {
+    const file = state.fileInfo;
+    const url = `/api/download/${file.id}`;
+    const receiver = new FileReceiver(url, file);
+    receiver.on('progress', updateProgress);
+    receiver.on('decrypting', render);
+    state.transfer = receiver;
+    try {
+      await receiver.getMetadata(file.nonce);
+    } catch (e) {
+      if (e.message === '401') {
+        file.password = null;
+        if (!file.pwd) {
+          return emitter.emit('pushState', '/404');
+        }
+      }
+    }
+    render();
+  });
+
+  emitter.on('download', async file => {
+    state.transfer.on('progress', render);
+    state.transfer.on('decrypting', render);
+    const links = openLinksInNewTab();
+    const size = file.size;
+    try {
+      const start = Date.now();
+      metrics.startedDownload({ size: file.size, ttl: file.ttl });
+      const f = await state.transfer.download(file.nonce);
+      const time = Date.now() - start;
+      const speed = size / (time / 1000);
+      await delay(1000);
+      await fadeOut('download-progress');
+      saveFile(f);
+      state.storage.totalDownloads += 1;
+      state.transfer = null;
+      metrics.completedDownload({ size, time, speed });
+      emitter.emit('pushState', '/completed');
+    } catch (err) {
+      console.error(err);
+      // TODO cancelled download
+      const location = err.message === 'notfound' ? '/404' : '/error';
+      if (location === '/error') {
+        state.raven.captureException(err);
+        metrics.stoppedDownload({ size, err });
+      }
+      emitter.emit('pushState', 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,252 @@
+import Nanobus from 'nanobus';
+import { arrayToB64, b64ToArray, bytes } from './utils';
+
+export default class FileReceiver extends Nanobus {
+  constructor(url, file) {
+    super('FileReceiver');
+    this.secretKeyPromise = window.crypto.subtle.importKey(
+      'raw',
+      b64ToArray(file.key),
+      'HKDF',
+      false,
+      ['deriveKey']
+    );
+    this.encryptKeyPromise = this.secretKeyPromise.then(sk => {
+      const encoder = new TextEncoder();
+      return window.crypto.subtle.deriveKey(
+        {
+          name: 'HKDF',
+          salt: new Uint8Array(),
+          info: encoder.encode('encryption'),
+          hash: 'SHA-256'
+        },
+        sk,
+        {
+          name: 'AES-GCM',
+          length: 128
+        },
+        false,
+        ['decrypt']
+      );
+    });
+    if (file.pwd) {
+      const encoder = new TextEncoder();
+      console.log(file.password + file.url);
+      this.authKeyPromise = window.crypto.subtle
+        .importKey(
+          'raw',
+          encoder.encode(file.password),
+          { name: 'PBKDF2' },
+          false,
+          ['deriveKey']
+        )
+        .then(pwdKey =>
+          window.crypto.subtle.deriveKey(
+            {
+              name: 'PBKDF2',
+              salt: encoder.encode(file.url),
+              iterations: 100,
+              hash: 'SHA-256'
+            },
+            pwdKey,
+            {
+              name: 'HMAC',
+              hash: 'SHA-256'
+            },
+            true,
+            ['sign']
+          )
+        );
+    } else {
+      this.authKeyPromise = this.secretKeyPromise.then(sk => {
+        const encoder = new TextEncoder();
+        return window.crypto.subtle.deriveKey(
+          {
+            name: 'HKDF',
+            salt: new Uint8Array(),
+            info: encoder.encode('authentication'),
+            hash: 'SHA-256'
+          },
+          sk,
+          {
+            name: 'HMAC',
+            hash: { name: 'SHA-256' }
+          },
+          false,
+          ['sign']
+        );
+      });
+    }
+    this.metaKeyPromise = this.secretKeyPromise.then(sk => {
+      const encoder = new TextEncoder();
+      return window.crypto.subtle.deriveKey(
+        {
+          name: 'HKDF',
+          salt: new Uint8Array(),
+          info: encoder.encode('metadata'),
+          hash: 'SHA-256'
+        },
+        sk,
+        {
+          name: 'AES-GCM',
+          length: 128
+        },
+        false,
+        ['decrypt']
+      );
+    });
+    this.file = file;
+    this.url = url;
+    this.msg = 'fileSizeProgress';
+    this.state = 'initialized';
+    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
+  }
+
+  fetchMetadata(sig) {
+    return new Promise((resolve, reject) => {
+      const xhr = new XMLHttpRequest();
+      xhr.onreadystatechange = () => {
+        if (xhr.readyState === XMLHttpRequest.DONE) {
+          const nonce = xhr.getResponseHeader('WWW-Authenticate').split(' ')[1];
+          this.file.nonce = nonce;
+          if (xhr.status === 200) {
+            return resolve(xhr.response);
+          }
+          reject(new Error(xhr.status));
+        }
+      };
+      xhr.onerror = () => reject(new Error(0));
+      xhr.ontimeout = () => reject(new Error(0));
+      xhr.open('get', `/api/metadata/${this.file.id}`);
+      xhr.setRequestHeader('Authorization', `send-v1 ${arrayToB64(sig)}`);
+      xhr.responseType = 'json';
+      xhr.timeout = 2000;
+      xhr.send();
+    });
+  }
+
+  async getMetadata(nonce) {
+    try {
+      const authKey = await this.authKeyPromise;
+      const sig = await window.crypto.subtle.sign(
+        {
+          name: 'HMAC'
+        },
+        authKey,
+        b64ToArray(nonce)
+      );
+      const data = await this.fetchMetadata(new Uint8Array(sig));
+      const metaKey = await this.metaKeyPromise;
+      const json = await window.crypto.subtle.decrypt(
+        {
+          name: 'AES-GCM',
+          iv: new Uint8Array(12),
+          tagLength: 128
+        },
+        metaKey,
+        b64ToArray(data.metadata)
+      );
+      const decoder = new TextDecoder();
+      const meta = JSON.parse(decoder.decode(json));
+      this.file.name = meta.name;
+      this.file.type = meta.type;
+      this.file.iv = meta.iv;
+      this.file.size = data.size;
+      this.file.ttl = data.ttl;
+      this.state = 'ready';
+    } catch (e) {
+      this.state = 'invalid';
+      throw e;
+    }
+  }
+
+  downloadFile(sig) {
+    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 = event => {
+        if (xhr.status === 404) {
+          reject(new Error('notfound'));
+          return;
+        }
+
+        if (xhr.status !== 200) {
+          return reject(new Error(xhr.status));
+        }
+
+        const blob = new Blob([xhr.response]);
+        const fileReader = new FileReader();
+        fileReader.onload = function() {
+          resolve(this.result);
+        };
+
+        fileReader.readAsArrayBuffer(blob);
+      };
+
+      xhr.open('get', this.url);
+      xhr.setRequestHeader('Authorization', `send-v1 ${arrayToB64(sig)}`);
+      xhr.responseType = 'blob';
+      xhr.send();
+    });
+  }
+
+  async download(nonce) {
+    this.state = 'downloading';
+    this.emit('progress', this.progress);
+    try {
+      const encryptKey = await this.encryptKeyPromise;
+      const authKey = await this.authKeyPromise;
+      const sig = await window.crypto.subtle.sign(
+        {
+          name: 'HMAC'
+        },
+        authKey,
+        b64ToArray(nonce)
+      );
+      const ciphertext = await this.downloadFile(new Uint8Array(sig));
+      this.msg = 'decryptingFile';
+      this.emit('decrypting');
+      const plaintext = await window.crypto.subtle.decrypt(
+        {
+          name: 'AES-GCM',
+          iv: b64ToArray(this.file.iv),
+          tagLength: 128
+        },
+        encryptKey,
+        ciphertext
+      );
+      this.msg = 'downloadFinish';
+      this.state = 'complete';
+      return {
+        plaintext,
+        name: decodeURIComponent(this.file.name),
+        type: this.file.type
+      };
+    } catch (e) {
+      this.state = 'invalid';
+      throw e;
+    }
+  }
+}

app/fileSender.js

@@ -0,0 +1,291 @@
+import Nanobus from 'nanobus';
+import { arrayToB64, b64ToArray, 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.rawSecret = window.crypto.getRandomValues(new Uint8Array(16));
+    this.secretKey = window.crypto.subtle.importKey(
+      'raw',
+      this.rawSecret,
+      'HKDF',
+      false,
+      ['deriveKey']
+    );
+  }
+
+  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, metadata, rawAuth) {
+    return new Promise((resolve, reject) => {
+      const dataView = new DataView(encrypted);
+      const blob = new Blob([dataView], { type: 'application/octet-stream' });
+      const fd = new FormData();
+      fd.append('data', blob);
+
+      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) {
+            const nonce = xhr
+              .getResponseHeader('WWW-Authenticate')
+              .split(' ')[1];
+            this.progress = [1, 1];
+            this.msg = 'notifyUploadDone';
+            const responseObj = JSON.parse(xhr.responseText);
+            return resolve({
+              url: responseObj.url,
+              id: responseObj.id,
+              secretKey: arrayToB64(this.rawSecret),
+              deleteToken: responseObj.delete,
+              nonce
+            });
+          }
+          this.msg = 'errorPageHeader';
+          reject(new Error(xhr.status));
+        }
+      };
+
+      xhr.open('post', '/api/upload', true);
+      xhr.setRequestHeader(
+        'X-File-Metadata',
+        arrayToB64(new Uint8Array(metadata))
+      );
+      xhr.setRequestHeader('Authorization', `send-v1 ${arrayToB64(rawAuth)}`);
+      xhr.send(fd);
+      this.msg = 'fileSizeProgress';
+    });
+  }
+
+  async upload() {
+    const encoder = new TextEncoder();
+    const secretKey = await this.secretKey;
+    const encryptKey = await window.crypto.subtle.deriveKey(
+      {
+        name: 'HKDF',
+        salt: new Uint8Array(),
+        info: encoder.encode('encryption'),
+        hash: 'SHA-256'
+      },
+      secretKey,
+      {
+        name: 'AES-GCM',
+        length: 128
+      },
+      false,
+      ['encrypt']
+    );
+    const authKey = await window.crypto.subtle.deriveKey(
+      {
+        name: 'HKDF',
+        salt: new Uint8Array(),
+        info: encoder.encode('authentication'),
+        hash: 'SHA-256'
+      },
+      secretKey,
+      {
+        name: 'HMAC',
+        hash: 'SHA-256'
+      },
+      true,
+      ['sign']
+    );
+    const metaKey = await window.crypto.subtle.deriveKey(
+      {
+        name: 'HKDF',
+        salt: new Uint8Array(),
+        info: encoder.encode('metadata'),
+        hash: 'SHA-256'
+      },
+      secretKey,
+      {
+        name: 'AES-GCM',
+        length: 128
+      },
+      false,
+      ['encrypt']
+    );
+    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
+      },
+      encryptKey,
+      plaintext
+    );
+    const metadata = await window.crypto.subtle.encrypt(
+      {
+        name: 'AES-GCM',
+        iv: new Uint8Array(12),
+        tagLength: 128
+      },
+      metaKey,
+      encoder.encode(
+        JSON.stringify({
+          iv: arrayToB64(this.iv),
+          name: this.file.name,
+          type: this.file.type || 'application/octet-stream'
+        })
+      )
+    );
+    const rawAuth = await window.crypto.subtle.exportKey('raw', authKey);
+    if (this.cancelled) {
+      throw new Error(0);
+    }
+    return this.uploadFile(encrypted, metadata, new Uint8Array(rawAuth));
+  }
+
+  static async setPassword(password, file) {
+    const encoder = new TextEncoder();
+    const secretKey = await window.crypto.subtle.importKey(
+      'raw',
+      b64ToArray(file.secretKey),
+      'HKDF',
+      false,
+      ['deriveKey']
+    );
+    const authKey = await window.crypto.subtle.deriveKey(
+      {
+        name: 'HKDF',
+        salt: new Uint8Array(),
+        info: encoder.encode('authentication'),
+        hash: 'SHA-256'
+      },
+      secretKey,
+      {
+        name: 'HMAC',
+        hash: 'SHA-256'
+      },
+      true,
+      ['sign']
+    );
+    const sig = await window.crypto.subtle.sign(
+      {
+        name: 'HMAC'
+      },
+      authKey,
+      b64ToArray(file.nonce)
+    );
+    const pwdKey = await window.crypto.subtle.importKey(
+      'raw',
+      encoder.encode(password),
+      { name: 'PBKDF2' },
+      false,
+      ['deriveKey']
+    );
+    const newAuthKey = await window.crypto.subtle.deriveKey(
+      {
+        name: 'PBKDF2',
+        salt: encoder.encode(file.url),
+        iterations: 100,
+        hash: 'SHA-256'
+      },
+      pwdKey,
+      {
+        name: 'HMAC',
+        hash: 'SHA-256'
+      },
+      true,
+      ['sign']
+    );
+    const rawAuth = await window.crypto.subtle.exportKey('raw', newAuthKey);
+    return new Promise((resolve, reject) => {
+      const xhr = new XMLHttpRequest();
+      xhr.onreadystatechange = () => {
+        if (xhr.readyState === XMLHttpRequest.DONE) {
+          if (xhr.status === 200) {
+            return resolve(xhr.response);
+          }
+          if (xhr.status === 401) {
+            const nonce = xhr
+              .getResponseHeader('WWW-Authenticate')
+              .split(' ')[1];
+            file.nonce = nonce;
+          }
+          reject(new Error(xhr.status));
+        }
+      };
+      xhr.onerror = () => reject(new Error(0));
+      xhr.ontimeout = () => reject(new Error(0));
+      xhr.open('post', `/api/password/${file.id}`);
+      xhr.setRequestHeader(
+        'Authorization',
+        `send-v1 ${arrayToB64(new Uint8Array(sig))}`
+      );
+      xhr.setRequestHeader('Content-Type', 'application/json');
+      xhr.responseType = 'json';
+      xhr.timeout = 2000;
+      xhr.send(JSON.stringify({ auth: arrayToB64(new Uint8Array(rawAuth)) }));
+    });
+  }
+}

app/main.js

@@ -0,0 +1,50 @@
+import app from './routes';
+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 experiments from './experiments';
+import Raven from 'raven-js';
+
+if (navigator.doNotTrack !== '1' && window.RAVEN_CONFIG) {
+  Raven.config(window.SENTRY_ID, window.RAVEN_CONFIG).install();
+}
+
+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 () => {
+    let reason = null;
+    if (
+      /firefox/i.test(navigator.userAgent) &&
+      parseInt(navigator.userAgent.match(/firefox\/*([^\n\r]*)\./i)[1], 10) <=
+        49
+    ) {
+      reason = 'outdated';
+    }
+    if (/edge\/\d+/i.test(navigator.userAgent)) {
+      reason = 'edge';
+    }
+    const ok = await canHasSend(assets.get('cryptofill.js'));
+    if (!ok) {
+      reason = /firefox/i.test(navigator.userAgent) ? 'outdated' : 'gcm';
+    }
+    if (reason) {
+      setTimeout(() => emitter.emit('replaceState', `/unsupported/${reason}`));
+    }
+  });
+});
+
+app.use(metrics);
+app.use(fileManager);
+app.use(dragManager);
+app.use(experiments);
+
+app.mount('body');

app/metrics.js

@@ -0,0 +1,283 @@
+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;
+let experiment = null;
+
+export default function initialize(state, emitter) {
+  appState = state;
+  emitter.on('DOMContentLoaded', () => {
+    // addExitHandlers();
+    experiment = storage.enrolled[0];
+    sendEvent(category(), 'visit', {
+      cm5: storage.totalUploads,
+      cm6: storage.files.length,
+      cm7: storage.totalDownloads
+    });
+    //TODO restart handlers... somewhere
+  });
+  emitter.on('exit', evt => {
+    exitEvent(evt);
+  });
+}
+
+function category() {
+  switch (appState.route) {
+    case '/':
+    case '/share/:id':
+      return 'sender';
+    case '/download/:id/:key':
+    case '/download/:id':
+    case '/completed':
+      return 'recipient';
+    default:
+      return 'other';
+  }
+}
+
+function sendEvent() {
+  const args = Array.from(arguments);
+  if (experiment && args[2]) {
+    args[2].xid = experiment[0];
+    args[2].xvar = experiment[1];
+  }
+  return (
+    hasLocalStorage && analytics.sendEvent.apply(analytics, args).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';
+    case 'https://www.mozilla.org/firefox/new/?utm_campaign=send-acquisition&utm_medium=referral&utm_source=send.firefox.com':
+      return 'promo';
+    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 addedPassword(params) {
+  return sendEvent('sender', 'password-added', {
+    cm1: params.size,
+    cm5: storage.totalUploads,
+    cm6: storage.files.length,
+    cm7: storage.totalDownloads
+  });
+}
+
+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)
+  });
+}
+
+// eslint-disable-next-line no-unused-vars
+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,
+  addedPassword,
+  restart,
+  unsupported
+};

app/routes/download.js

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

app/routes/home.js

@@ -0,0 +1,10 @@
+const welcome = require('../templates/welcome');
+const upload = require('../templates/upload');
+
+module.exports = function(state, emit) {
+  if (state.transfer && state.transfer.iv) {
+    //TODO relying on 'iv' is gross
+    return upload(state, emit);
+  }
+  return welcome(state, emit);
+};

app/routes/index.js

@@ -0,0 +1,43 @@
+const choo = require('choo');
+const html = require('choo/html');
+const download = require('./download');
+const header = require('../templates/header');
+const footer = require('../templates/footer');
+const fxPromo = require('../templates/fxPromo');
+
+const app = choo();
+
+function body(template) {
+  return function(state, emit) {
+    const b = html`<body>
+      ${state.promo === 'header' ? fxPromo(state, emit) : ''}
+      ${header(state)}
+      <div class="all">
+        <noscript>
+          <h2>Firefox Send requires JavaScript</h2>
+          <p><a href="https://github.com/mozilla/send/blob/master/docs/faq.md#why-does-firefox-send-require-javascript">Why does Firefox Send require JavaScript?</a></p>
+          <p>Please enable JavaScript and try again.</p>
+        </noscript>
+        ${template(state, emit)}
+      </div>
+      ${footer(state)}
+    </body>`;
+    if (state.layout) {
+      return state.layout(state, b);
+    }
+    return b;
+  };
+}
+
+app.route('/', body(require('./home')));
+app.route('/share/:id', body(require('../templates/share')));
+app.route('/download/:id', body(download));
+app.route('/download/:id/:key', body(download));
+app.route('/completed', body(require('../templates/completed')));
+app.route('/unsupported/:reason', body(require('../templates/unsupported')));
+app.route('/legal', body(require('../templates/legal')));
+app.route('/error', body(require('../templates/error')));
+app.route('/blank', body(require('../templates/blank')));
+app.route('*', body(require('../templates/notFound')));
+
+module.exports = app;

app/storage.js

@@ -0,0 +1,119 @@
+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 {
+          const f = JSON.parse(this.engine.getItem(k));
+          if (!f.id) {
+            f.id = f.fileId;
+          }
+          fs.push(f);
+        } 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 enrolled() {
+    return JSON.parse(this.engine.getItem('experiments') || '[]');
+  }
+
+  enroll(id, variant) {
+    const enrolled = this.enrolled;
+    // eslint-disable-next-line no-unused-vars
+    if (!enrolled.find(([i, v]) => i === id)) {
+      enrolled.push([id, variant]);
+      this.engine.setItem('experiments', JSON.stringify(enrolled));
+    }
+  }
+
+  get files() {
+    return this._files;
+  }
+
+  getFileById(id) {
+    return this._files.find(f => f.id === id);
+  }
+
+  get(id) {
+    return this.engine.getItem(id);
+  }
+
+  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));
+  }
+
+  writeFiles() {
+    this._files.forEach(f => this.engine.setItem(f.id, JSON.stringify(f)));
+  }
+}
+
+export default new Storage();

app/templates/blank.js

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

app/templates/completed.js

@@ -0,0 +1,35 @@
+const html = require('choo/html');
+const progress = require('./progress');
+const { fadeOut } = require('../utils');
+const fxPromo = require('./fxPromo');
+
+module.exports = function(state, emit) {
+  const div = html`
+  <div id="page-one">
+  <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>
+  ${state.promo === 'body' ? fxPromo(state, emit) : ''}
+  </div>
+  `;
+
+  async function sendNew(e) {
+    e.preventDefault();
+    await fadeOut('download');
+    emit('pushState', '/');
+  }
+
+  return div;
+};

app/templates/download.js

@@ -0,0 +1,32 @@
+const html = require('choo/html');
+const progress = require('./progress');
+const { bytes } = require('../utils');
+const fxPromo = require('./fxPromo');
+
+module.exports = function(state, emit) {
+  const transfer = state.transfer;
+  const div = html`
+  <div id="page-one">
+  <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>
+    ${state.promo === 'body' ? fxPromo(state, emit) : ''}
+  </div>
+  `;
+
+  return div;
+};

app/templates/downloadPassword.js

@@ -0,0 +1,56 @@
+const html = require('choo/html');
+
+module.exports = function(state, emit) {
+  const fileInfo = state.fileInfo;
+  const label =
+    fileInfo.password === null
+      ? html`
+          <label class="red"
+            for="unlock-input">${state.translate('passwordTryAgain')}</label>`
+      : html`
+          <label for="unlock-input">
+            ${state.translate('unlockInputLabel')}
+          </label>`;
+  const div = html`
+    <div class="enterPassword">
+      ${label}
+      <form id="unlock" onsubmit=${checkPassword} data-no-csrf>
+        <input id="unlock-input"
+          class="unlock-input input-no-btn"
+          maxlength="64"
+          autocomplete="off"
+          placeholder="${state.translate('unlockInputPlaceholder')}"
+          oninput=${inputChanged}
+          type="password"/>
+        <input type="submit"
+          id="unlock-btn"
+          class="btn btn-hidden"
+          value="${state.translate('unlockButtonLabel')}"/>
+      </form>
+    </div>`;
+
+  function inputChanged() {
+    const input = document.getElementById('unlock-input');
+    const btn = document.getElementById('unlock-btn');
+    if (input.value.length > 0) {
+      btn.classList.remove('btn-hidden');
+      input.classList.remove('input-no-btn');
+    } else {
+      btn.classList.add('btn-hidden');
+      input.classList.add('input-no-btn');
+    }
+  }
+
+  function checkPassword(event) {
+    event.preventDefault();
+    const password = document.getElementById('unlock-input').value;
+    if (password.length > 0) {
+      document.getElementById('unlock-btn').disabled = true;
+      state.fileInfo.url = window.location.href;
+      state.fileInfo.password = password;
+      emit('preview');
+    }
+  }
+
+  return div;
+};

app/templates/error.js

@@ -0,0 +1,10 @@
+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" 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 class="overflow-col" title="${file.name}">${file.name}</td>
+    <td class="center-col">
+      <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 class="center-col">
+      <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,32 @@
+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" class="center-col">${state.translate(
+            'copyFileList'
+          )}</th>
+          <th id="expiry-file-list">${state.translate('expiryFileList')}</th>
+          <th id="delete-file-list" class="center-col">${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/footer.js

@@ -0,0 +1,31 @@
+const html = require('choo/html');
+const assets = require('../../common/assets');
+
+module.exports = function(state) {
+  return html`<div class="footer">
+    <div class="legal-links">
+      <a href="https://www.mozilla.org" role="presentation"><img class="mozilla-logo" src="${assets.get(
+        'mozilla-logo.svg'
+      )}" alt="mozilla"/></a>
+      <a href="https://www.mozilla.org/about/legal">${state.translate(
+        'footerLinkLegal'
+      )}</a>
+      <a href="https://testpilot.firefox.com/about">${state.translate(
+        'footerLinkAbout'
+      )}</a>
+      <a href="/legal">${state.translate('footerLinkPrivacy')}</a>
+      <a href="/legal">${state.translate('footerLinkTerms')}</a>
+      <a href="https://www.mozilla.org/privacy/websites/#cookies">${state.translate(
+        'footerLinkCookies'
+      )}</a>
+    </div>
+    <div class="social-links">
+      <a href="https://github.com/mozilla/send" role="presentation"><img class="github" src="${assets.get(
+        'github-icon.svg'
+      )}" alt="github"/></a>
+      <a href="https://twitter.com/FxTestPilot" role="presentation"><img class="twitter" src="${assets.get(
+        'twitter-icon.svg'
+      )}" alt="twitter"/></a>
+    </div>
+  </div>`;
+};

app/templates/fxPromo.js

@@ -0,0 +1,44 @@
+const html = require('choo/html');
+const assets = require('../../common/assets');
+
+// function replaceLinks(str, urls) {
+//   let i = -1;
+//   const s = str.replace(/<a>([^<]+)<\/a>/g, (m, v) => {
+//     i++;
+//     return `<a class="link" href="${urls[i]}">${v}</a>`;
+//   });
+//   return [`<span>${s}</span>`];
+// }
+
+module.exports = function(state, emit) {
+  // function close() {
+  //   document.querySelector('.banner').remove();
+  // }
+
+  function clicked(evt) {
+    emit('exit', evt);
+  }
+
+  return html`
+    <div class="banner">
+      <div>
+        <img
+        src="${assets.get('firefox_logo-only.svg')}"
+        class="firefox-logo-small"
+        alt="Firefox"/>
+        <span>Send is brought to you by the all-new Firefox.
+        <a
+          class="link"
+          href="https://www.mozilla.org/firefox/new/?utm_campaign=send-acquisition&utm_medium=referral&utm_source=send.firefox.com"
+          onclick=${clicked}
+          >Download Firefox now ≫</a></span>
+      </div>
+    </div>`;
+};
+
+/*
+<img
+  src="${assets.get('close-16.svg')}"
+  class="icon-delete"
+  onclick=${close}>
+*/

app/templates/header.js

@@ -0,0 +1,21 @@
+const html = require('choo/html');
+const assets = require('../../common/assets');
+
+module.exports = function(state) {
+  return html`<header class="header">
+  <div class="send-logo">
+    <a href="/">
+      <img src="${assets.get(
+        'send_logo.svg'
+      )}" alt="Send"/><h1 class="site-title">Send</h1>
+    </a>
+    <div class="site-subtitle">
+      <a href="https://testpilot.firefox.com">Firefox Test Pilot</a>
+      <div>${state.translate('siteSubtitle')}</div>
+    </div>
+  </div>
+  <a href="https://qsurvey.mozilla.com/s3/txp-firefox-send" rel="noreferrer noopener" class="feedback" target="_blank">${state.translate(
+    'siteFeedback'
+  )}</a>
+</header>`;
+};

app/templates/legal.js

@@ -0,0 +1,34 @@
+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>
+  `;
+  return div;
+};

app/templates/notFound.js

@@ -0,0 +1,21 @@
+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">
+      </div>
+      <div class="expired-description">${state.translate(
+        'uploadPageExplainer'
+      )}</div>
+      <a class="send-new" href="/" data-state="notfound">${state.translate(
+        'sendYourFilesLink'
+      )}</a>
+    </div>
+  </div>`;
+  return div;
+};

app/templates/preview.js

@@ -0,0 +1,74 @@
+const html = require('choo/html');
+const assets = require('../../common/assets');
+const notFound = require('./notFound');
+const downloadPassword = require('./downloadPassword');
+const { bytes } = require('../utils');
+const fxPromo = require('./fxPromo');
+
+function getFileFromDOM() {
+  const el = document.getElementById('dl-file');
+  if (!el) {
+    return null;
+  }
+  return {
+    nonce: el.getAttribute('data-nonce'),
+    pwd: !!+el.getAttribute('data-requires-password')
+  };
+}
+
+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 = fileInfo.size
+    ? state.translate('downloadFileSize', { size: bytes(fileInfo.size) })
+    : '';
+  let action = html`
+  <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>`;
+  if (fileInfo.pwd && !fileInfo.password) {
+    action = downloadPassword(state, emit);
+  } else if (!state.transfer) {
+    emit('preview');
+  }
+  const title = fileInfo.name
+    ? state.translate('downloadFileName', { filename: fileInfo.name })
+    : state.translate('downloadFileTitle');
+  const div = html`
+  <div id="page-one">
+    <div id="download">
+      <div id="download-page-one">
+        <div class="title">
+          <span id="dl-file"
+            data-nonce="${fileInfo.nonce}"
+            data-requires-password="${fileInfo.pwd}">${title}</span>
+        <span id="dl-filesize">${' ' + size}</span>
+        </div>
+        <div class="description">${state.translate('downloadMessage')}</div>
+        ${action}
+      </div>
+      <a class="send-new" href="/">${state.translate('sendYourFilesLink')}</a>
+    </div>
+    ${state.promo === 'body' ? fxPromo(state, emit) : ''}
+  </div>
+  `;
+
+  function download(event) {
+    event.preventDefault();
+    emit('download', fileInfo);
+  }
+  return div;
+};

app/templates/progress.js

@@ -0,0 +1,29 @@
+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,90 @@
+const html = require('choo/html');
+const assets = require('../../common/assets');
+const notFound = require('./notFound');
+const uploadPassword = require('./uploadPassword');
+const { allowedCopy, delay, fadeOut } = require('../utils');
+
+function passwordComplete(state, password) {
+  const el = html([
+    `<div class="selectPassword">${state.translate('passwordResult', {
+      password: '<pre></pre>'
+    })}</div>`
+  ]);
+  el.lastElementChild.textContent = password;
+  return el;
+}
+
+module.exports = function(state, emit) {
+  const file = state.storage.getFileById(state.params.id);
+  if (!file) {
+    return notFound(state, emit);
+  }
+
+  file.password = file.password || '';
+
+  const passwordSection = file.password
+    ? passwordComplete(state, file.password)
+    : uploadPassword(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"
+          title="${state.translate('copyUrlFormButton')}"
+          onclick=${copyLink}>${state.translate('copyUrlFormButton')}</button>
+      </div>
+      ${passwordSection}
+      <button id="delete-file"
+        class="btn"
+        title="${state.translate('deleteFileButton')}"
+        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 input = document.getElementById('link');
+      input.disabled = true;
+      const copyBtn = document.getElementById('copy-btn');
+      copyBtn.disabled = true;
+      copyBtn.classList.add('success');
+      copyBtn.replaceChild(
+        html`<img src="${assets.get('check-16.svg')}" class="icon-check">`,
+        copyBtn.firstChild
+      );
+      await delay(2000);
+      input.disabled = false;
+      if (!copyBtn.parentNode.classList.contains('wait-password')) {
+        copyBtn.disabled = false;
+      }
+      copyBtn.classList.remove('success');
+      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,46 @@
+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>`;
+  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" title="${state.translate(
+        'uploadingPageCancel'
+      )}" 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/uploadPassword.js

@@ -0,0 +1,65 @@
+const html = require('choo/html');
+
+module.exports = function(state, emit) {
+  const file = state.storage.getFileById(state.params.id);
+  const div = html`
+  <div class="selectPassword">
+    <div id="addPasswordWrapper">
+      <input id="addPassword" type="checkbox" autocomplete="off" onchange=${
+        togglePasswordInput
+      }/>
+      <label for="addPassword">
+        ${state.translate('requirePasswordCheckbox')}</label>
+    </div>
+    <form class="setPassword hidden" onsubmit=${setPassword} data-no-csrf>
+      <input id="unlock-input"
+        class="unlock-input input-no-btn"
+        maxlength="64"
+        autocomplete="off"
+        placeholder="${state.translate('unlockInputPlaceholder')}"
+        oninput=${inputChanged}/>
+      <input type="submit"
+        id="unlock-btn"
+        class="btn btn-hidden"
+        value="${state.translate('addPasswordButton')}"/>
+    </form>
+  </div>`;
+
+  function inputChanged() {
+    const input = document.getElementById('unlock-input');
+    const btn = document.getElementById('unlock-btn');
+    if (input.value.length > 0) {
+      btn.classList.remove('btn-hidden');
+      input.classList.remove('input-no-btn');
+    } else {
+      btn.classList.add('btn-hidden');
+      input.classList.add('input-no-btn');
+    }
+  }
+
+  function togglePasswordInput(e) {
+    const unlockInput = document.getElementById('unlock-input');
+    const boxChecked = e.target.checked;
+    document
+      .querySelector('.setPassword')
+      .classList.toggle('hidden', !boxChecked);
+    if (boxChecked) {
+      unlockInput.focus();
+    } else {
+      unlockInput.value = '';
+    }
+    inputChanged();
+  }
+
+  function setPassword(event) {
+    event.preventDefault();
+    const password = document.getElementById('unlock-input').value;
+    if (password.length > 0) {
+      document.getElementById('copy').classList.remove('wait-password');
+      document.getElementById('copy-btn').disabled = false;
+      emit('password', { password, file });
+    }
+  }
+
+  return div;
+};

app/templates/welcome.js

@@ -0,0 +1,73 @@
+const html = require('choo/html');
+const assets = require('../../common/assets');
+const fileList = require('./fileList');
+const fxPromo = require('./fxPromo');
+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>
+      <input id="file-upload"
+        type="file"
+        name="fileUploaded"
+        onfocus=${onfocus}
+        onblur=${onblur}
+        onchange=${upload} />
+      <label for="file-upload"
+        id="browse"
+        class="btn browse"
+        title="${state.translate('uploadPageBrowseButton1')}">
+        ${state.translate('uploadPageBrowseButton1')}</label>
+    </div>
+    ${state.promo === 'body' ? fxPromo(state, emit) : ''}
+    ${fileList(state, emit)}
+  </div>
+  `;
+
+  function dragover(event) {
+    const div = document.querySelector('.upload-window');
+    div.classList.add('ondrag');
+  }
+
+  function dragleave(event) {
+    const div = document.querySelector('.upload-window');
+    div.classList.remove('ondrag');
+  }
+
+  function onfocus(event) {
+    event.target.classList.add('has-focus');
+  }
+
+  function onblur(event) {
+    event.target.classList.remove('has-focus');
+  }
+
+  async function upload(event) {
+    event.preventDefault();
+    const target = event.target;
+    const file = target.files[0];
+    if (file.size === 0) {
+      return;
+    }
+    await fadeOut('page-one');
+    emit('upload', { file, type: 'click' });
+  }
+  return div;
+};

app/utils.js

@@ -0,0 +1,166 @@
+const b64 = require('base64-js');
+
+function arrayToB64(array) {
+  return b64
+    .fromByteArray(array)
+    .replace(/\+/g, '-')
+    .replace(/\//g, '_')
+    .replace(/=/g, '');
+}
+
+function b64ToArray(str) {
+  str = (str + '==='.slice((str.length + 3) % 4))
+    .replace(/-/g, '+')
+    .replace(/_/g, '/');
+  return b64.toByteArray(str);
+}
+
+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) {
+  if (num < 1) {
+    return '0B';
+  }
+  const exponent = Math.min(Math.floor(Math.log10(num) / 3), UNITS.length - 1);
+  const n = Number(num / Math.pow(1000, exponent));
+  let nStr = n.toFixed(1);
+  if (LOCALIZE_NUMBERS) {
+    try {
+      const locale = document.querySelector('html').lang;
+      nStr = n.toLocaleString(locale, {
+        minimumFractionDigits: 1,
+        maximumFractionDigits: 1
+      });
+    } catch (e) {
+      // fall through
+    }
+  }
+  return `${nStr}${UNITS[exponent]}`;
+}
+
+function percent(ratio) {
+  if (LOCALIZE_NUMBERS) {
+    try {
+      const locale = document.querySelector('html').lang;
+      return ratio.toLocaleString(locale, { style: 'percent' });
+    } catch (e) {
+      // fall through
+    }
+  }
+  return `${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,
+  arrayToB64,
+  b64ToArray,
+  notify,
+  canHasSend,
+  isFile,
+  ONE_DAY_IN_MS
+};

assets/check-16-blue.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path fill="#0A84FF " d="M6 14a1 1 0 0 1-.707-.293l-3-3a1 1 0 0 1 1.414-1.414l2.157 2.157 6.316-9.023a1 1 0 0 1 1.639 1.146l-7 10a1 1 0 0 1-.732.427A.863.863 0 0 1 6 14z"/></svg>

assets/check-16.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 16 16"><path fill="#fff" d="M6 14a1 1 0 0 1-.707-.293l-3-3a1 1 0 0 1 1.414-1.414l2.157 2.157 6.316-9.023a1 1 0 0 1 1.639 1.146l-7 10a1 1 0 0 1-.732.427A.863.863 0 0 1 6 14z"/></svg>

assets/close-16.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 16 16"><path fill="#4A4A4A" d="M9.414 8l5.293-5.293a1 1 0 0 0-1.414-1.414L8 6.586 2.707 1.293a1 1 0 0 0-1.414 1.414L6.586 8l-5.293 5.293a1 1 0 1 0 1.414 1.414L8 9.414l5.293 5.293a1 1 0 0 0 1.414-1.414z"/></svg>

assets/copy-16.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><path class="icon-copy" fill="#0A8DFF" d="M14.707 8.293l-3-3A1 1 0 0 0 11 5h-1V4a1 1 0 0 0-.293-.707l-3-3A1 1 0 0 0 6 0H3a2 2 0 0 0-2 2v7a2 2 0 0 0 2 2h3v3a2 2 0 0 0 2 2h5a2 2 0 0 0 2-2V9a1 1 0 0 0-.293-.707zM12.586 9H11V7.414zm-5-5H6V2.414zM6 7v2H3V2h2v2.5a.5.5 0 0 0 .5.5H8a2 2 0 0 0-2 2zm2 7V7h2v2.5a.5.5 0 0 0 .5.5H13v4z"/></svg>

assets/feedback.svg

@@ -0,0 +1 @@
+<svg width="15" height="13" viewBox="0 0 15 13" xmlns="http://www.w3.org/2000/svg"><title>Combined Shape</title><path d="M10.274 9.193a5.957 5.957 0 0 1-2.98.778C4.37 9.97 2 7.963 2 5.485 2 3.008 4.37 1 7.294 1c2.924 0 5.294 2.008 5.294 4.485 0 .843-.274 1.632-.751 2.305l.577 2.21-2.14-.807zm-5.983-2.96a.756.756 0 0 0 .763-.748.756.756 0 0 0-.763-.747.756.756 0 0 0-.764.747c0 .413.342.748.764.748zm3.054 0a.756.756 0 0 0 .764-.748.756.756 0 0 0-.764-.747.756.756 0 0 0-.764.747c0 .413.342.748.764.748zm3.054 0a.756.756 0 0 0 .764-.748.756.756 0 0 0-.764-.747.756.756 0 0 0-.763.747c0 .413.342.748.763.748z" fill="#FFF" fill-rule="evenodd"/></svg>

assets/github-icon.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="438.549" height="438.549" viewBox="0 0 438.549 438.549"><path d="M409.132 114.573c-19.608-33.596-46.205-60.194-79.798-79.8-33.598-19.607-70.277-29.408-110.063-29.408-39.781 0-76.472 9.804-110.063 29.408-33.596 19.605-60.192 46.204-79.8 79.8C9.803 148.168 0 184.854 0 224.63c0 47.78 13.94 90.745 41.827 128.906 27.884 38.164 63.906 64.572 108.063 79.227 5.14.954 8.945.283 11.419-1.996 2.475-2.282 3.711-5.14 3.711-8.562 0-.571-.049-5.708-.144-15.417a2549.81 2549.81 0 0 1-.144-25.406l-6.567 1.136c-4.187.767-9.469 1.092-15.846 1-6.374-.089-12.991-.757-19.842-1.999-6.854-1.231-13.229-4.086-19.13-8.559-5.898-4.473-10.085-10.328-12.56-17.556l-2.855-6.57c-1.903-4.374-4.899-9.233-8.992-14.559-4.093-5.331-8.232-8.945-12.419-10.848l-1.999-1.431c-1.332-.951-2.568-2.098-3.711-3.429-1.142-1.331-1.997-2.663-2.568-3.997-.572-1.335-.098-2.43 1.427-3.289 1.525-.859 4.281-1.276 8.28-1.276l5.708.853c3.807.763 8.516 3.042 14.133 6.851 5.614 3.806 10.229 8.754 13.846 14.842 4.38 7.806 9.657 13.754 15.846 17.847 6.184 4.093 12.419 6.136 18.699 6.136 6.28 0 11.704-.476 16.274-1.423 4.565-.952 8.848-2.383 12.847-4.285 1.713-12.758 6.377-22.559 13.988-29.41-10.848-1.14-20.601-2.857-29.264-5.14-8.658-2.286-17.605-5.996-26.835-11.14-9.235-5.137-16.896-11.516-22.985-19.126-6.09-7.614-11.088-17.61-14.987-29.979-3.901-12.374-5.852-26.648-5.852-42.826 0-23.035 7.52-42.637 22.557-58.817-7.044-17.318-6.379-36.732 1.997-58.24 5.52-1.715 13.706-.428 24.554 3.853 10.85 4.283 18.794 7.952 23.84 10.994 5.046 3.041 9.089 5.618 12.135 7.708 17.705-4.947 35.976-7.421 54.818-7.421s37.117 2.474 54.823 7.421l10.849-6.849c7.419-4.57 16.18-8.758 26.262-12.565 10.088-3.805 17.802-4.853 23.134-3.138 8.562 21.509 9.325 40.922 2.279 58.24 15.036 16.18 22.559 35.787 22.559 58.817 0 16.178-1.958 30.497-5.853 42.966-3.9 12.471-8.941 22.457-15.125 29.979-6.191 7.521-13.901 13.85-23.131 18.986-9.232 5.14-18.182 8.85-26.84 11.136-8.662 2.286-18.415 4.004-29.263 5.146 9.894 8.562 14.842 22.077 14.842 40.539v60.237c0 3.422 1.19 6.279 3.572 8.562 2.379 2.279 6.136 2.95 11.276 1.995 44.163-14.653 80.185-41.062 108.068-79.226 27.88-38.161 41.825-81.126 41.825-128.906-.01-39.771-9.818-76.454-29.414-110.049z"/></svg>

assets/mozilla-logo.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 578.55 185.54"><path d="M503.5 117.21c0 4.92 2.37 8.82 9 8.82 7.8 0 16.11-5.6 16.61-18.31a80.86 80.86 0 0 0-11-1c-7.83-.01-14.61 2.19-14.61 10.49z"/><path d="M0 0v185.54h578.55V0zm163.78 139.93h-32V96.87c0-13.22-4.41-18.31-13.05-18.31-10.51 0-14.75 7.46-14.75 18.14v26.64h10.12v16.61h-32V96.87c0-13.22-4.4-18.31-13.05-18.31-10.51 0-14.75 7.46-14.75 18.14v26.64h14.54v16.61H22.22v-16.61h10.17V80.09h-11V63.48h32.87V75c4.58-8.13 12.55-13.05 23.22-13.05 11 0 21.19 5.26 24.92 16.45 4.24-10.17 12.88-16.45 24.92-16.45 13.73 0 26.28 8.31 26.28 26.45v34.94h10.17zm48.65 1.69c-23.56 0-39.84-14.41-39.84-38.82 0-22.38 13.56-40.86 41-40.86s40.86 18.48 40.86 39.84c.02 24.42-17.61 39.85-42.02 39.85zm121.72-1.69h-66.8l-2.2-11.53 42-48.32h-23.9l-3.39 11.87-15.77-1.69 2.71-26.79H334L335.69 75l-42.4 48.34H318l3.56-11.87 17.29 1.69zm41.36 0h-22.89v-27.46h22.89zm0-49h-22.89V63.48h22.89zm12 49L420.6 23.34h21.53l-33.06 116.59zm44.42 0L465 23.34h21.53l-33.04 116.59zm113.92 1.69c-10.17 0-15.76-5.94-16.78-15.26-4.41 7.8-12.21 15.26-24.58 15.26-11 0-23.56-5.94-23.56-21.87 0-18.82 18.14-23.22 35.6-23.22a100.23 100.23 0 0 1 12.55.68v-2.54c0-7.8-.17-17.12-12.55-17.12-4.58 0-8.14.34-11.7 2.2L502 90.6l-17.46-1.87 3.39-19.83c13.39-5.43 20.17-7 32.72-7 16.45 0 30.35 8.48 30.35 25.94v33.23c0 4.41 1.69 5.94 5.26 5.94a11.5 11.5 0 0 0 3.22-.51l.17 11.53a29.57 29.57 0 0 1-13.77 3.6z"/><path d="M213.27 78.73c-11.19 0-18.14 8.3-18.14 22.72 0 13.22 6.1 23.39 18 23.39 11.36 0 18.82-9.15 18.82-23.73-.03-15.43-8.33-22.38-18.68-22.38z"/></svg>

assets/send_logo.svg

@@ -0,0 +1 @@
+<svg width="30" height="27" viewBox="0 0 30 27" xmlns="http://www.w3.org/2000/svg"><title>send logo</title><g stroke="#3E3D40" fill="none" fill-rule="evenodd" transform="translate(-0.231,0.11948695)"><path d="M22.364 19.989l-2.153-2.103a2.046 2.046 0 0 0-2.665-.151l3.402 3.323a.531.531 0 0 1 0 .766l-2.466 2.408a.563.563 0 0 1-.784 0l-3.398-3.32a1.932 1.932 0 0 0 .188 2.564l2.153 2.103c.788.77 2.066.77 2.855 0l2.868-2.802a1.94 1.94 0 0 0 0-2.788M8.77 14.745a.534.534 0 0 0 0 .766l3.399 3.32a2.05 2.05 0 0 1-2.625-.184l-2.153-2.102a1.94 1.94 0 0 1 0-2.79l2.869-2.801a2.052 2.052 0 0 1 2.854 0l2.153 2.103c.73.713.775 1.83.154 2.603l-3.401-3.323a.565.565 0 0 0-.784 0L8.77 14.745zm9.464 5.682a.777.777 0 0 1 0 1.118.822.822 0 0 1-1.144 0l-5.6-5.47a.777.777 0 0 1 0-1.118.822.822 0 0 1 1.144 0l5.6 5.47z" stroke-width=".618" fill="#3E3D40"/><path d="M6.065 20.606c-2.913-1.586-3.988-3.656-3.988-6.468 0-2.81 2.265-6.425 5.786-6.289.1.004.55-.006.649 0 .895-3.27 2.508-6.353 6.898-6.353 4.557 0 7.336 3.716 6.75 7.785.08-.005 1.232.17 1.31.186 3.096.644 4.915 3.275 4.915 5.18 0 1.905-.107 3.029-2.023 4.947" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"/></g></svg>

assets/twitter-icon.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 612 612"><path d="M612 116.258a250.714 250.714 0 0 1-72.088 19.772c25.929-15.527 45.777-40.155 55.184-69.411-24.322 14.379-51.169 24.82-79.775 30.48-22.907-24.437-55.49-39.658-91.63-39.658-69.334 0-125.551 56.217-125.551 125.513 0 9.828 1.109 19.427 3.251 28.606-104.326-5.24-196.835-55.223-258.75-131.174-10.823 18.51-16.98 40.078-16.98 63.101 0 43.559 22.181 81.993 55.835 104.479a125.556 125.556 0 0 1-56.867-15.756v1.568c0 60.806 43.291 111.554 100.693 123.104-10.517 2.83-21.607 4.398-33.08 4.398-8.107 0-15.947-.803-23.634-2.333 15.985 49.907 62.336 86.199 117.253 87.194-42.947 33.654-97.099 53.655-155.916 53.655-10.134 0-20.116-.612-29.944-1.721 55.567 35.681 121.536 56.485 192.438 56.485 230.948 0 357.188-191.291 357.188-357.188l-.421-16.253c24.666-17.593 46.005-39.697 62.794-64.861z" fill="#010002"/></svg>

assets/upload.svg

@@ -0,0 +1 @@
+<svg width="57" height="57" viewBox="0 0 57 57" xmlns="http://www.w3.org/2000/svg"><title>upload</title><g transform="translate(1 1)" stroke-width="2" stroke="#7FC9FD" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"><path d="M18 24l10-9 10 9M28 39.545V15"/><circle cx="27.5" cy="27.5" r="27.5"/></g></svg>

browserconfig.xml

@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="utf-8"?>
+<browserconfig>
+  <msapplication>
+    <tile>
+      <square70x70logo src=“favicon-76.png”/>
+      <square150x150logo src="favicon-228.png"/>
+      <TileColor>#0297F8</TileColor>
+    </tile>
+  </msapplication>
+</browserconfig> 

browserslist

@@ -0,0 +1,5 @@
+last 2 chrome versions
+last 2 firefox versions
+firefox esr
+ie >= 9
+safari >= 9

build/fluent_loader.js

@@ -0,0 +1,38 @@
+const { MessageContext } = require('fluent');
+
+function toJSON(map) {
+  return JSON.stringify(Array.from(map));
+}
+
+module.exports = function(source) {
+  const localeExp = this.options.locale || /([^/]+)\/[^/]+\.ftl$/;
+  const result = localeExp.exec(this.resourcePath);
+  const locale = result && result[1];
+  // pre-parse the ftl
+  const context = new MessageContext(locale);
+  context.addMessages(source);
+  if (!locale) {
+    throw new Error(`couldn't find locale in: ${this.resourcePath}`);
+  }
+  return `
+module.exports = \`
+if (typeof window === 'undefined') {
+  var fluent = require('fluent');
+}
+var ctx = new fluent.MessageContext('${locale}', {useIsolating: false});
+ctx._messages = new Map(${toJSON(context._messages)});
+function translate(id, data) {
+  var msg = ctx.getMessage(id);
+  if (typeof(msg) !== 'string' && !msg.val && msg.attrs) {
+    msg = msg.attrs.title || msg.attrs.alt
+  }
+  return ctx.format(msg, data);
+}
+if (typeof window === 'undefined') {
+  module.exports = translate;
+}
+else {
+  window.translate = translate;
+}
+\``;
+};

build/generate_asset_map.js

@@ -0,0 +1,19 @@
+const fs = require('fs');
+const path = require('path');
+
+function kv(f) {
+  return `"${f}": require('../assets/${f}')`;
+}
+
+module.exports = function() {
+  const files = fs.readdirSync(path.join(__dirname, '..', 'assets'));
+  const code = `module.exports = {
+    "package.json": require('../package.json'),
+    ${files.map(kv).join(',\n')}
+  };`;
+  return {
+    code,
+    dependencies: files.map(f => require.resolve('../assets/' + f)),
+    cacheable: false
+  };
+};

build/generate_l10n_map.js

@@ -0,0 +1,22 @@
+const fs = require('fs');
+const path = require('path');
+
+function kv(d) {
+  return `"${d}": require('../public/locales/${d}/send.ftl')`;
+}
+
+module.exports = function() {
+  const dirs = fs.readdirSync(path.join(__dirname, '..', 'public', 'locales'));
+  const code = `
+  module.exports = {
+    translate: function (id, data) { return window.translate(id, data) },
+    ${dirs.map(kv).join(',\n')}
+  };`;
+  return {
+    code,
+    dependencies: dirs.map(d =>
+      require.resolve(`../public/locales/${d}/send.ftl`)
+    ),
+    cacheable: false
+  };
+};

build/package_json_loader.js

@@ -0,0 +1,11 @@
+const commit = require('git-rev-sync').short();
+
+module.exports = function(source) {
+  const pkg = JSON.parse(source);
+  const version = {
+    commit,
+    source: pkg.homepage,
+    version: process.env.CIRCLE_TAG || `v${pkg.version}`
+  };
+  return `module.exports = '${JSON.stringify(version)}'`;
+};

circle.yml

@@ -4,12 +4,18 @@ machine:
   services:
     - docker
     - redis
+  environment:
+    PATH: "/home/ubuntu/send/firefox:$PATH"
+
+dependencies:
+  pre:
+    - npm i -g get-firefox geckodriver nsp
+    - get-firefox --platform linux --extract --target /home/ubuntu/send
 
 deployment:
   latest:
     branch: master
     commands:
-    - npm run predocker
     - docker login -e $DOCKER_EMAIL -u $DOCKER_USER -p $DOCKER_PASS
     - docker build -t mozilla/send:latest .
     - docker push mozilla/send:latest
@@ -17,12 +23,13 @@ deployment:
     tag: /.*/
     owner: mozilla
     commands:
-    - npm run predocker
     - docker login -e $DOCKER_EMAIL -u $DOCKER_USER -p $DOCKER_PASS
     - docker build -t mozilla/send:$CIRCLE_TAG .
     - docker push mozilla/send:$CIRCLE_TAG
 
 test:
   override:
+    - npm run build
     - npm run lint
     - npm test
+    - nsp check

common/assets.js

@@ -0,0 +1,32 @@
+const genmap = require('../build/generate_asset_map');
+const isServer = typeof genmap === 'function';
+const prefix = isServer ? '/' : '';
+let manifest = {};
+try {
+  //eslint-disable-next-line node/no-missing-require
+  manifest = require('../dist/manifest.json');
+} catch (e) {
+  // use middleware
+}
+
+const assets = isServer ? manifest : genmap;
+
+function getAsset(name) {
+  return prefix + assets[name];
+}
+
+const instance = {
+  get: getAsset,
+  setMiddleware: function(middleware) {
+    if (middleware) {
+      instance.get = function getAssetWithMiddleware(name) {
+        const f = middleware.fileSystem.readFileSync(
+          middleware.getFilenameFromUrl('/manifest.json')
+        );
+        return prefix + JSON.parse(f)[name];
+      };
+    }
+  }
+};
+
+module.exports = instance;

common/locales.js

@@ -0,0 +1,51 @@
+const gen = require('../build/generate_l10n_map');
+
+const isServer = typeof gen === 'function';
+const prefix = isServer ? '/' : '';
+let manifest = {};
+try {
+  //eslint-disable-next-line node/no-missing-require
+  manifest = require('../dist/manifest.json');
+} catch (e) {
+  // use middleware
+}
+
+const locales = isServer ? manifest : gen;
+
+function getLocale(name) {
+  return prefix + locales[`public/locales/${name}/send.ftl`];
+}
+
+function serverTranslator(name) {
+  return require(`../dist/${locales[`public/locales/${name}/send.ftl`]}`);
+}
+
+function browserTranslator() {
+  return locales.translate;
+}
+
+const translator = isServer ? serverTranslator : browserTranslator;
+
+const instance = {
+  get: getLocale,
+  getTranslator: translator,
+  setMiddleware: function(middleware) {
+    if (middleware) {
+      const _eval = require('require-from-string');
+      instance.get = function getLocaleWithMiddleware(name) {
+        const f = middleware.fileSystem.readFileSync(
+          middleware.getFilenameFromUrl('/manifest.json')
+        );
+        return prefix + JSON.parse(f)[`public/locales/${name}/send.ftl`];
+      };
+      instance.getTranslator = function(name) {
+        const f = middleware.fileSystem.readFileSync(
+          middleware.getFilenameFromUrl(instance.get(name))
+        );
+        return _eval(f.toString());
+      };
+    }
+  }
+};
+
+module.exports = instance;

docker-compose.yml

@@ -7,6 +7,7 @@ services:
     ports:
       - "1443:1443"
     environment:
-      - P2P_REDIS_HOST=redis
+      - REDIS_HOST=redis
+      - NODE_ENV=production
   redis:
     image: redis:alpine

docs/CODEOWNERS

@@ -0,0 +1,2 @@
+# flod as main contact for string changes
+public/locales/en-US/*.ftl @flodolo

docs/docker.md

@@ -1,14 +1,35 @@
+## Setup
+
+Before building the Docker image, you must build the production assets:
+
+```sh
+npm run build
+```
+
+Then you can run either `docker build` or `docker-compose up`.
+
+
 ## Environment variables:
 
 | Name             | Description
 |------------------|-------------|
 | `PORT`           | Port the server will listen on (defaults to 1443).
-| `P2P_S3_BUCKET`  | The S3 bucket name.
-| `P2P_REDIS_HOST` | Host name of the Redis server.
+| `S3_BUCKET`  | The S3 bucket name.
+| `REDIS_HOST` | Host name of the Redis server.
+| `GOOGLE_ANALYTICS_ID` | Google Analytics ID
+| `SENTRY_CLIENT` | Sentry Client ID
+| `SENTRY_DSN` | Sentry DSN
+| `MAX_FILE_SIZE` | in bytes (defaults to 2147483648)
 | `NODE_ENV`       | "production"
 
 ## Example:
 
 ```sh
-$ docker run --net=host -e 'NODE_ENV=production' -e 'P2P_S3_BUCKET=testpilot-p2p-dev' -e 'P2P_REDIS_HOST=dyf9s2r4vo3.bolxr4.0001.usw2.cache.amazonaws.com' mozilla/send:latest
+$ docker run --net=host -e 'NODE_ENV=production' \
+  -e 'S3_BUCKET=testpilot-p2p-dev' \
+  -e 'REDIS_HOST=dyf9s2r4vo3.bolxr4.0001.usw2.cache.amazonaws.com' \
+  -e 'GOOGLE_ANALYTICS_ID=UA-35433268-78' \
+  -e 'SENTRY_CLIENT=https://51e23d7263e348a7a3b90a5357c61cb2@sentry.prod.mozaws.net/168' \
+  -e 'SENTRY_DSN=https://51e23d7263e348a7a3b90a5357c61cb2:65e23d7263e348a7a3b90a5357c61c44@sentry.prod.mozaws.net/168' \
+  mozilla/send:latest
 ```

docs/faq.md

@@ -0,0 +1,43 @@
+## How big of a file can I transfer with Firefox Send?
+
+There is a 2GB file size limit built in to Send, however, in practice you may
+be unable to send files that large.  Send encrypts and decrypts the files in
+the browser which is great for security but will tax your system resources.  In
+particular you can expect to see your memory usage go up by at least the size
+of the file when the transfer is processing.  You can see [the results of some
+testing](https://github.com/mozilla/send/issues/170#issuecomment-314107793).
+For the most reliable operation on common computers, it’s probably best to stay
+under a few hundred megabytes.
+
+## Why is my browser not supported?
+
+We’re using the [Web Cryptography JavaScript API with the AES-GCM
+algorithm](https://www.w3.org/TR/WebCryptoAPI/#aes-gcm) for our encryption.
+Many browsers support this standard and should work fine, but some have not
+implemented it yet (mobile browsers lag behind on this, in
+particular).
+
+## Why does Firefox Send require JavaScript?
+
+Firefox Send uses JavaScript to:
+
+- Encrypt and decrypt files locally on the client instead of the server.
+- Render the user interface.
+- Manage translations on the website into [various different languages](https://github.com/mozilla/send#localization).
+- Collect data to help us improve Send in accordance with our [Terms & Privacy](https://send.firefox.com/legal).
+
+Since Send is an open source project, you can see all of the cool ways we use JavaScript by [examining our code](https://github.com/mozilla/send/).
+
+## How long are files available for?
+
+Files are available to be downloaded for 24 hours, after which they are removed
+from the server.  They are also removed immediately after a download completes.
+
+## Can a file be downloaded more than once?
+
+Not currently, but we're considering multiple download support in a future
+release.
+
+
+*Disclaimer: Send is an experiment and under active development.  The answers
+here may change as we get feedback from you and the project matures.*

docs/metrics.md

@@ -0,0 +1,144 @@
+# Send Metrics
+The metrics collection and analysis plan for Send, a forthcoming Test Pilot experiment.
+
+## Analysis
+Data collected by Send will be used to answer the following high-level questions:
+
+- Do users send files?
+	- How often? How many?
+	- What is the retention?
+	- What is the distribution of senders?
+- How do recipients interact with promotional UI elements?
+	- Are file recipients converted to file senders?
+	- Are non-Firefox users converted to Firefox users?
+- Where does it go wrong?
+	- How often are there errors in uploading or downloading files?
+	- What types of errors to users commonly see?
+	- At what point do errors affect retention?
+
+## Collection
+Data will be collected with Google Analytics and follow [Test Pilot standards](https://github.com/mozilla/testpilot/blob/master/docs/experiments/ga.md) for reporting.
+
+### Custom Metrics
+- `cm1` - the size of the file, in bytes.
+- `cm2` - the amount of time it took to complete the file transfer, in milliseconds. Only include if the file completed transferring (ref: `cd2`).
+- `cm3` - the rate of the file transfer, in bytes per second. This is computed by dividing `cm1` by `cm2`, not by monitoring transfer speeds. Only include if the file completed transferring (ref: `cd2`).
+- `cm4` - the amount of time until the file will expire, in milliseconds.
+- `cm5` - the number of files the user has ever uploaded.
+- `cm6` - the number of unexpired files the user has uploaded.
+- `cm7` - the number of files the user has ever downloaded.
+
+### Custom Dimensions
+- `cd1` - the method by which the user initiated an upload. One of `drag`, `click`.
+- `cd2` - the reason that the file transfer stopped. One of `completed`, `errored`, `cancelled`.
+- `cd3` - the destination of a link click. One of `experiment-page`, `download-firefox`, `twitter`, `github`, `cookies`, `terms`, `privacy`, `about`, `legal`, `mozilla`.
+- `cd4` - the location from which the user copied the URL to an upload file. One of `success-screen`, `upload-list`.
+- `cd5` - the referring location. One of `completed-download`, `errored-download`, `cancelled-download`, `completed-upload`, `errored-upload`, `cancelled-upload`, `testpilot`, `external`.
+- `cd6` - identifying information about an error. Exclude if there is no error involved. **TODO:** enumerate a list of possibilities.
+
+### Events
+
+_NB:_ due to how files are being tracked, there are no events indicating file expiry. This carries some risk: most notably, we can only derive expiration rates by looking at download rates, which is prone to skew if there are problems in data collection.
+
+#### `upload-started`
+Triggered whenever a user begins uploading a file. Includes:
+
+- `ec` - `sender`
+- `ea` - `upload-started`
+- `cm1`
+- `cm5`
+- `cm6`
+- `cm7`
+- `cd1`
+- `cd5`
+
+#### `upload-stopped`
+Triggered whenever a user stops uploading a file. Includes:
+
+- `ec` - `sender`
+- `ea` - `upload-stopped`
+- `cm1`
+- `cm2`
+- `cm3`
+- `cm5`
+- `cm6`
+- `cm7`
+- `cd1`
+- `cd2`
+- `cd6`
+
+#### `password-added`
+Triggered whenever a password is added to a file. Includes:
+
+- `cm1`
+- `cm5`
+- `cm6`
+- `cm7`
+
+#### `download-started`
+Triggered whenever a user begins downloading a file. Includes:
+
+- `ec` - `recipient`
+- `ea` - `download-started`
+- `cm1`
+- `cm4`
+- `cm5`
+- `cm6`
+- `cm7`
+
+#### `download-stopped`
+Triggered whenever a user stops downloading a file.
+
+- `ec` - `recipient`
+- `ea` - `download-stopped`
+- `cm1`
+- `cm2` (if possible and applicable)
+- `cm3` (if possible and applicable)
+- `cm5`
+- `cm6`
+- `cm7`
+- `cd2`
+- `cd6`
+
+#### `exited`
+Fired whenever a user follows a link external to Send.
+
+- `ec` - `recipient`, `sender`, or `other`, as applicable.
+- `ea` - `exited`
+- `cd3`
+
+#### `upload-deleted`
+Fired whenever a user deletes a file they’ve uploaded.
+
+- `ec` - `sender`
+- `ea` - `upload-deleted`
+- `cm1`
+- `cm2`
+- `cm3`
+- `cm4`
+- `cm5`
+- `cm6`
+- `cm7`
+- `cd1`
+- `cd4`
+
+#### `copied`
+Fired whenever a user copies the URL of an upload file.
+
+- `ec` - `sender`
+- `ea` - `copied`
+- `cd4`
+
+#### `restarted`
+Fired whenever the user interrupts any part of funnel to return to the start of it (e.g. with a “send another file” or “send your own files” link).
+
+- `ec` - `recipient`, `sender`, or `other`, as applicable.
+- `ea` - `restarted`
+- `cd2`
+
+#### `unsupported`
+Fired whenever a user is presented a message saying that their browser is unsupported due to missing crypto APIs.
+
+- `ec` - `recipient` or `sender`, as applicable.
+- `ea` - `unsupported`
+- `cd6`

frontend/src/.eslintrc.yml

@@ -1,3 +0,0 @@
-env:
-  browser: true
-  jquery: true

frontend/src/download.js

@@ -1,89 +0,0 @@
-const FileReceiver = require('./fileReceiver');
-const { notify } = require('./utils');
-const $ = require('jquery');
-
-const Raven = window.Raven;
-
-$(document).ready(function() {
-  $('#download-progress').hide();
-  $('#send-file').click(() => {
-    window.location.replace(`${window.location.origin}`);
-  });
-  $('#download-btn').click(download);
-  function download() {
-    const fileReceiver = new FileReceiver();
-    const name = document.createElement('p');
-    const $btn = $('#download-btn');
-
-    fileReceiver.on('progress', percentComplete => {
-      $('#download-page-one').hide();
-      $('.send-new').hide();
-      $('#download-progress').show();
-      // update progress bar
-      document
-        .querySelector('#progress-bar')
-        .style.setProperty('--progress', percentComplete + '%');
-      $('#progress-text').html(`${percentComplete}%`);
-      //on complete
-      if (percentComplete === 100) {
-        fileReceiver.removeAllListeners('progress');
-        $('#download-text').html('Download complete!');
-        $('.send-new').show();
-        $btn.text('Download complete!');
-        $btn.attr('disabled', 'true');
-        notify('Your download has finished.');
-      }
-    });
-
-    fileReceiver.on('decrypting', isStillDecrypting => {
-      // The file is being decrypted
-      if (isStillDecrypting) {
-        console.log('Decrypting');
-      } else {
-        console.log('Done decrypting');
-      }
-    });
-
-    fileReceiver.on('hashing', isStillHashing => {
-      // The file is being hashed to make sure a malicious user hasn't tampered with it
-      if (isStillHashing) {
-        console.log('Checking file integrity');
-      } else {
-        console.log('Integrity check done');
-      }
-    });
-
-    fileReceiver
-      .download()
-      .catch(() => {
-        $('.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.');
-        return;
-      })
-      .then(([decrypted, fname]) => {
-        name.innerText = fname;
-        const dataView = new DataView(decrypted);
-        const blob = new Blob([dataView]);
-        const downloadUrl = URL.createObjectURL(blob);
-
-        const a = document.createElement('a');
-        a.href = downloadUrl;
-        if (window.navigator.msSaveBlob) {
-          // if we are in microsoft edge or IE
-          window.navigator.msSaveBlob(blob, fname);
-          return;
-        }
-        a.download = fname;
-        document.body.appendChild(a);
-        a.click();
-      })
-      .catch(err => {
-        Raven.captureException(err);
-        return Promise.reject(err);
-      });
-  }
-});

frontend/src/fileReceiver.js

@@ -1,121 +0,0 @@
-const EventEmitter = require('events');
-const { hexToArray } = require('./utils');
-
-class FileReceiver extends EventEmitter {
-  constructor() {
-    super();
-  }
-
-  download() {
-    return Promise.all([
-      new Promise((resolve, reject) => {
-        const xhr = new XMLHttpRequest();
-
-        xhr.onprogress = event => {
-          if (event.lengthComputable && event.target.status !== 404) {
-            const percentComplete = Math.floor(
-              event.loaded / event.total * 100
-            );
-            this.emit('progress', percentComplete);
-          }
-        };
-
-        xhr.onload = function(event) {
-          if (xhr.status === 404) {
-            reject(
-              new Error('The file has expired, or has already been deleted.')
-            );
-            return;
-          }
-
-          const blob = new Blob([this.response]);
-          const fileReader = new FileReader();
-          fileReader.onload = function() {
-            const meta = JSON.parse(xhr.getResponseHeader('X-File-Metadata'));
-            resolve({
-              data: this.result,
-              aad: meta.aad,
-              filename: meta.filename,
-              iv: meta.id
-            });
-          };
-
-          fileReader.readAsArrayBuffer(blob);
-        };
-
-        xhr.open('get', '/assets' + location.pathname.slice(0, -1), true);
-        xhr.responseType = 'blob';
-        xhr.send();
-      }),
-      window.crypto.subtle.importKey(
-        'jwk',
-        {
-          kty: 'oct',
-          k: location.hash.slice(1),
-          alg: 'A128GCM',
-          ext: true
-        },
-        {
-          name: 'AES-GCM'
-        },
-        true,
-        ['encrypt', 'decrypt']
-      )
-    ])
-      .then(([fdata, key]) => {
-        this.emit('decrypting', true);
-        return Promise.all([
-          window.crypto.subtle
-            .decrypt(
-              {
-                name: 'AES-GCM',
-                iv: hexToArray(fdata.iv),
-                additionalData: hexToArray(fdata.aad)
-              },
-              key,
-              fdata.data
-            )
-            .then(decrypted => {
-              this.emit('decrypting', false);
-              return new Promise((resolve, reject) => {
-                resolve(decrypted);
-              });
-            }),
-          new Promise((resolve, reject) => {
-            resolve(fdata.filename);
-          }),
-          new Promise((resolve, reject) => {
-            resolve(hexToArray(fdata.aad));
-          })
-        ]);
-      })
-      .then(([decrypted, fname, proposedHash]) => {
-        this.emit('hashing', true);
-        return window.crypto.subtle
-          .digest('SHA-256', decrypted)
-          .then(calculatedHash => {
-            this.emit('hashing', false);
-            const integrity =
-              new Uint8Array(calculatedHash).toString() ===
-              proposedHash.toString();
-            if (!integrity) {
-              return new Promise((resolve, reject) => {
-                console.log('This file has been tampered with.');
-                reject();
-              });
-            }
-
-            return Promise.all([
-              new Promise((resolve, reject) => {
-                resolve(decrypted);
-              }),
-              new Promise((resolve, reject) => {
-                resolve(fname);
-              })
-            ]);
-          });
-      });
-  }
-}
-
-module.exports = FileReceiver;

frontend/src/fileSender.js

@@ -1,147 +0,0 @@
-const EventEmitter = require('events');
-const { arrayToHex } = require('./utils');
-
-const Raven = window.Raven;
-
-class FileSender extends EventEmitter {
-  constructor(file) {
-    super();
-    this.file = file;
-    this.iv = window.crypto.getRandomValues(new Uint8Array(12));
-  }
-
-  static delete(fileId, token) {
-    return new Promise((resolve, reject) => {
-      if (!fileId || !token) {
-        return reject();
-      }
-      const xhr = new XMLHttpRequest();
-      xhr.open('post', '/delete/' + fileId, true);
-      xhr.setRequestHeader('Content-Type', 'application/json');
-
-      xhr.onreadystatechange = () => {
-        if (xhr.readyState === XMLHttpRequest.DONE) {
-          resolve();
-        }
-
-        if (xhr.status === 200) {
-          console.log('The file was successfully deleted.');
-        } else {
-          console.log('The file has expired, or has already been deleted.');
-        }
-      };
-
-      xhr.send(JSON.stringify({ delete_token: token }));
-    });
-  }
-
-  upload() {
-    const self = this;
-    self.emit('loading', true);
-    return Promise.all([
-      window.crypto.subtle
-        .generateKey(
-          {
-            name: 'AES-GCM',
-            length: 128
-          },
-          true,
-          ['encrypt', 'decrypt']
-        )
-        .catch(err =>
-          console.log('There was an error generating a crypto key')
-        ),
-      new Promise((resolve, reject) => {
-        const reader = new FileReader();
-        reader.readAsArrayBuffer(this.file);
-        reader.onload = function(event) {
-          self.emit('loading', false);
-          self.emit('hashing', true);
-          const plaintext = new Uint8Array(this.result);
-          window.crypto.subtle.digest('SHA-256', plaintext).then(hash => {
-            self.emit('hashing', false);
-            self.emit('encrypting', true);
-            resolve({ plaintext: plaintext, hash: new Uint8Array(hash) });
-          });
-        };
-        reader.onerror = function(err) {
-          reject(err);
-        };
-      })
-    ])
-      .then(([secretKey, file]) => {
-        return Promise.all([
-          window.crypto.subtle
-            .encrypt(
-              {
-                name: 'AES-GCM',
-                iv: this.iv,
-                additionalData: file.hash,
-                tagLength: 128
-              },
-              secretKey,
-              file.plaintext
-            )
-            .then(encrypted => {
-              self.emit('encrypting', false);
-              return new Promise((resolve, reject) => {
-                resolve(encrypted);
-              });
-            }),
-          window.crypto.subtle.exportKey('jwk', secretKey),
-          new Promise((resolve, reject) => {
-            resolve(file.hash);
-          })
-        ]);
-      })
-      .then(([encrypted, keydata, hash]) => {
-        return new Promise((resolve, reject) => {
-          const file = this.file;
-          const fileId = 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 = new XMLHttpRequest();
-
-          xhr.upload.addEventListener('progress', e => {
-            if (e.lengthComputable) {
-              const percentComplete = Math.floor(e.loaded / e.total * 100);
-              self.emit('progress', percentComplete);
-            }
-          });
-
-          xhr.onreadystatechange = () => {
-            if (xhr.readyState === XMLHttpRequest.DONE) {
-              // uuid field and url field
-              const responseObj = JSON.parse(xhr.responseText);
-              resolve({
-                url: responseObj.url,
-                fileId: responseObj.id,
-                secretKey: keydata.k,
-                deleteToken: responseObj.delete
-              });
-            }
-          };
-
-          xhr.open('post', '/upload', true);
-          xhr.setRequestHeader(
-            'X-File-Metadata',
-            JSON.stringify({
-              aad: arrayToHex(hash),
-              id: fileId,
-              filename: file.name
-            })
-          );
-          xhr.send(fd);
-        });
-      })
-      .catch(err => {
-        Raven.captureException(err);
-        return Promise.reject(err);
-      });
-  }
-}
-
-module.exports = FileSender;

frontend/src/main.js

@@ -1,5 +0,0 @@
-window.Raven = require('raven-js');
-window.Raven.config(window.dsn).install();
-window.dsn = undefined;
-require('./upload');
-require('./download');

frontend/src/upload.js

@@ -1,292 +0,0 @@
-const FileSender = require('./fileSender');
-const { notify, gcmCompliant } = require('./utils');
-const $ = require('jquery');
-
-const Raven = window.Raven;
-
-$(document).ready(function() {
-  gcmCompliant().catch(err => {
-    $('#page-one').hide();
-    $('#compliance-error').show();
-  });
-
-  $('#file-upload').change(onUpload);
-  $('#page-one').on('dragover', allowDrop).on('drop', onUpload);
-  // reset copy button
-  const $copyBtn = $('#copy-btn');
-  $copyBtn.attr('disabled', false);
-  $copyBtn.html('Copy');
-
-  $('#page-one').show();
-  $('#file-list').show();
-  $('#upload-progress').hide();
-  $('#share-link').hide();
-  $('#upload-error').hide();
-  $('#compliance-error').hide();
-
-  if (localStorage.length === 0) {
-    toggleHeader();
-  } else {
-    for (let i = 0; i < localStorage.length; i++) {
-      const id = localStorage.key(i);
-      //check if file exists before adding to list
-      checkExistence(id, true);
-    }
-  }
-
-  // copy link to clipboard
-  $copyBtn.click(() => {
-    const aux = document.createElement('input');
-    aux.setAttribute('value', $('#link').attr('value'));
-    document.body.appendChild(aux);
-    aux.select();
-    document.execCommand('copy');
-    document.body.removeChild(aux);
-    //disable button for 3s
-    $copyBtn.attr('disabled', true);
-    $copyBtn.html('Copied!');
-    window.setTimeout(() => {
-      $copyBtn.attr('disabled', false);
-      $copyBtn.html('Copy');
-    }, 3000);
-  });
-
-  // link back to home page
-  $('.send-new').click(() => {
-    $('#page-one').show();
-    $('#file-list').show();
-    $('#upload-progress').hide();
-    $('#share-link').hide();
-    $('#upload-error').hide();
-    $copyBtn.attr('disabled', false);
-    $copyBtn.html('Copy');
-  });
-
-  // on file upload by browse or drag & drop
-  function onUpload(event) {
-    event.preventDefault();
-    let file = '';
-    if (event.type === 'drop') {
-      file = event.originalEvent.dataTransfer.files[0];
-    } else {
-      file = event.target.files[0];
-    }
-    const expiration = 24 * 60 * 60 * 1000; //will eventually come from a field
-
-    const fileSender = new FileSender(file);
-    fileSender.on('progress', percentComplete => {
-      $('#page-one').hide();
-      $('#file-list').hide();
-      $('#upload-progress').show();
-      $('#upload-error').hide();
-      $('#upload-filename').innerHTML += file.name;
-      // update progress bar
-      document
-        .querySelector('#progress-bar')
-        .style.setProperty('--progress', percentComplete + '%');
-      $('#progress-text').html(`${percentComplete}%`);
-    });
-
-    fileSender.on('loading', isStillLoading => {
-      // The file is loading into Firefox at this stage
-      if (isStillLoading) {
-        console.log('Processing');
-      } else {
-        console.log('Finished processing');
-      }
-    });
-
-    fileSender.on('hashing', isStillHashing => {
-      // The file is being hashed
-      if (isStillHashing) {
-        console.log('Hashing');
-      } else {
-        console.log('Finished hashing');
-      }
-    });
-
-    fileSender.on('encrypting', isStillEncrypting => {
-      // The file is being encrypted
-      if (isStillEncrypting) {
-        console.log('Encrypting');
-      } else {
-        console.log('Finished encrypting');
-      }
-    });
-
-    fileSender
-      .upload()
-      .then(info => {
-        const url = info.url.trim() + `#${info.secretKey}`.trim();
-        $('#link').attr('value', url);
-        const fileData = {
-          name: file.name,
-          fileId: info.fileId,
-          url: info.url,
-          secretKey: info.secretKey,
-          deleteToken: info.deleteToken,
-          creationDate: new Date(),
-          expiry: expiration
-        };
-        localStorage.setItem(info.fileId, JSON.stringify(fileData));
-
-        $('#page-one').hide();
-        $('#file-list').hide();
-        $('#upload-progress').hide();
-        $('#share-link').show();
-        $('#upload-error').hide();
-
-        populateFileList(JSON.stringify(fileData));
-        notify('Your upload has finished.');
-      })
-      .catch(err => {
-        Raven.captureException(err);
-        console.log(err);
-        $('#page-one').hide();
-        $('#upload-error').show();
-      });
-  }
-
-  function allowDrop(ev) {
-    ev.preventDefault();
-  }
-
-  function checkExistence(id, populate) {
-    const xhr = new XMLHttpRequest();
-    xhr.onreadystatechange = () => {
-      if (xhr.readyState === XMLHttpRequest.DONE) {
-        if (xhr.status === 200) {
-          if (populate) {
-            populateFileList(localStorage.getItem(id));
-          }
-        } else if (xhr.status === 404) {
-          localStorage.removeItem(id);
-        }
-      }
-    };
-    xhr.open('get', '/exists/' + id, true);
-    xhr.send();
-  }
-
-  //update file table with current files in localStorage
-  function populateFileList(file) {
-    try {
-      file = JSON.parse(file);
-    } catch (e) {
-      return;
-    }
-
-    const row = document.createElement('tr');
-    const name = document.createElement('td');
-    const link = document.createElement('td');
-    const expiry = document.createElement('td');
-    const del = document.createElement('td');
-    del.setAttribute('align', 'center');
-    const btn = document.createElement('button');
-    const popupDiv = document.createElement('div');
-    const $popupText = $('<span>', { class: 'popuptext' });
-    const cellText = document.createTextNode(file.name);
-
-    name.appendChild(cellText);
-
-    // create delete button
-    btn.innerHTML = 'x';
-    btn.classList.add('delete-btn');
-
-    link.innerHTML = file.url.trim() + `#${file.secretKey}`.trim();
-
-    file.creationDate = new Date(file.creationDate);
-
-    const future = new Date();
-    future.setTime(file.creationDate.getTime() + file.expiry);
-
-    let countdown = 0;
-    countdown = future.getTime() - new Date().getTime();
-    let minutes = Math.floor(countdown / 1000 / 60);
-    let hours = Math.floor(minutes / 60);
-    let seconds = Math.floor(countdown / 1000 % 60);
-
-    poll();
-
-    function poll() {
-      countdown = future.getTime() - new Date().getTime();
-      minutes = Math.floor(countdown / 1000 / 60);
-      hours = Math.floor(minutes / 60);
-      seconds = Math.floor(countdown / 1000 % 60);
-      let t;
-
-      if (hours > 1) {
-        expiry.innerHTML = hours + 'h';
-        t = window.setTimeout(() => {
-          poll();
-        }, 3600000);
-      } else if (hours === 1) {
-        expiry.innerHTML = hours + 'h';
-        t = window.setTimeout(() => {
-          poll();
-        }, 60000);
-      } else if (hours === 0) {
-        expiry.innerHTML = minutes + 'm' + seconds + 's';
-        t = window.setTimeout(() => {
-          poll();
-        }, 1000);
-      }
-      //remove from list when expired
-      if (countdown <= 0) {
-        localStorage.removeItem(file.fileId);
-        $(expiry).parents('tr').remove();
-        window.clearTimeout(t);
-      }
-    }
-
-    // create popup
-    popupDiv.classList.add('popup');
-    $popupText.html(
-      '<span class="del-file">Delete</span><span class="nvm" > Nevermind</span>'
-    );
-
-    // delete file
-    $popupText.find('.del-file').click(e => {
-      FileSender.delete(file.fileId, file.deleteToken).then(() => {
-        $(e.target).parents('tr').remove();
-        localStorage.removeItem(file.fileId);
-        toggleHeader();
-      });
-    });
-
-    // add data cells to table row
-    row.appendChild(name);
-    row.appendChild(link);
-    row.appendChild(expiry);
-    popupDiv.appendChild(btn);
-    $(popupDiv).append($popupText);
-    del.appendChild(popupDiv);
-    row.appendChild(del);
-
-    // show popup
-    del.addEventListener('click', toggleShow);
-    // hide popup
-    $popupText.find('.nvm').click(function(e) {
-      e.stopPropagation();
-      toggleShow();
-    });
-    $popupText.click(function(e) {
-      e.stopPropagation();
-    });
-
-    $('tbody').append(row); //add row to table
-
-    function toggleShow() {
-      $popupText.toggleClass('show');
-    }
-    toggleHeader();
-  }
-  function toggleHeader() {
-    //hide table header if empty list
-    if (document.querySelector('tbody').childNodes.length === 1) {
-      $('#file-list').hide();
-    } else {
-      $('#file-list').show();
-    }
-  }
-});

frontend/src/utils.js

@@ -1,78 +0,0 @@
-function arrayToHex(iv) {
-  let hexStr = '';
-  for (const i in iv) {
-    if (iv[i] < 16) {
-      hexStr += '0' + iv[i].toString(16);
-    } else {
-      hexStr += iv[i].toString(16);
-    }
-  }
-  window.hexStr = hexStr;
-  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) {
-  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 gcmCompliant() {
-  try {
-    return window.crypto.subtle
-      .generateKey(
-        {
-          name: 'AES-GCM',
-          length: 128
-        },
-        true,
-        ['encrypt', 'decrypt']
-      )
-      .then(key => {
-        return window.crypto.subtle
-          .encrypt(
-            {
-              name: 'AES-GCM',
-              iv: window.crypto.getRandomValues(new Uint8Array(12)),
-              additionalData: window.crypto.getRandomValues(new Uint8Array(6)),
-              tagLength: 128
-            },
-            key,
-            new ArrayBuffer(8)
-          )
-          .then(() => {
-            return Promise.resolve();
-          })
-          .catch(err => {
-            return Promise.reject();
-          });
-      })
-      .catch(err => {
-        return Promise.reject();
-      });
-  } catch (err) {
-    return Promise.reject();
-  }
-}
-
-module.exports = {
-  arrayToHex,
-  hexToArray,
-  notify,
-  gcmCompliant
-};

l10n.toml

@@ -0,0 +1,12 @@
+# This Source Code Form is subject to the terms of the Mozilla Public
+# License, v. 2.0. If a copy of the MPL was not distributed with this
+# file, You can obtain one at http://mozilla.org/MPL/2.0/.
+
+basepath = "."
+
+[env]
+    l = "{l10n_base}/public/locales/{locale}/"
+
+[[paths]]
+    reference = "public/locales/en-US/**"
+    l10n = "{l}**"

package.json

@@ -1,57 +1,157 @@
 {
   "name": "firefox-send",
   "description": "File Sharing Experiment",
-  "version": "0.1.2",
+  "version": "2.0.0",
   "author": "Mozilla (https://mozilla.org)",
-  "dependencies": {
-    "aws-sdk": "^2.62.0",
-    "body-parser": "^1.17.2",
-    "bytes": "^2.5.0",
-    "connect-busboy": "0.0.2",
-    "convict": "^3.0.0",
-    "cross-env": "^5.0.1",
-    "express": "^4.15.3",
-    "express-handlebars": "^3.0.0",
-    "helmet": "^3.6.1",
-    "jquery": "^3.2.1",
-    "mozlog": "^2.1.1",
-    "raven": "^2.1.0",
-    "raven-js": "^3.16.0",
-    "redis": "^2.7.1",
-    "supertest": "^3.0.0",
-    "uglify-es": "3.0.19"
-  },
-  "devDependencies": {
-    "browserify": "^14.4.0",
-    "eslint": "^4.0.0",
-    "eslint-plugin-mocha": "^4.11.0",
-    "eslint-plugin-node": "^5.0.0",
-    "eslint-plugin-security": "^1.4.0",
-    "git-rev-sync": "^1.9.1",
-    "mocha": "^3.4.2",
-    "npm-run-all": "^4.0.2",
-    "prettier": "^1.4.4",
-    "proxyquire": "^1.8.0",
-    "sinon": "^2.3.5",
-    "stylelint": "^7.11.0",
-    "stylelint-config-standard": "^16.0.0",
-    "watchify": "^3.9.0"
-  },
-  "engines": {
-    "node": ">=8.0.0"
-  },
+  "repository": "mozilla/send",
   "homepage": "https://github.com/mozilla/send/",
   "license": "MPL-2.0",
-  "repository": "mozilla/send",
+  "private": true,
   "scripts": {
-    "predocker": "browserify frontend/src/main.js | uglifyjs > public/bundle.js && npm run version",
-    "dev": "npm run version && watchify frontend/src/main.js -o public/bundle.js -d | node server/server",
-    "format": "prettier '{frontend/src/,scripts/,server/,test/}*.js' 'public/*.css' --single-quote --write",
+    "precommit": "lint-staged",
+    "clean": "rimraf dist",
+    "build": "npm run clean && webpack -p",
     "lint": "npm-run-all lint:*",
-    "lint:css": "stylelint 'public/*.css'",
+    "lint:css": "stylelint 'assets/*.css'",
     "lint:js": "eslint .",
-    "start": "node server/server",
-    "test": "mocha test/unit && mocha test/server",
-    "version": "node scripts/version"
-  }
+    "lint-locales": "node scripts/lint-locales",
+    "lint-locales:dev": "npm run lint-locales",
+    "lint-locales:prod": "npm run lint-locales -- --production",
+    "format": "prettier '**/*.js' 'assets/*.css' --single-quote --write",
+    "get-prod-locales": "node scripts/get-prod-locales",
+    "get-prod-locales:write": "npm run get-prod-locales -- --write",
+    "changelog": "github-changes -o mozilla -r send --only-pulls --use-commit-body --no-merges",
+    "contributors": "git shortlog -s | awk -F\\t '{print $2}' > CONTRIBUTORS",
+    "release": "npm-run-all contributors changelog",
+    "test": "mocha test/unit",
+    "start": "cross-env NODE_ENV=development webpack-dev-server",
+    "prod": "node server/prod.js"
+  },
+  "lint-staged": {
+    "*.js": [
+      "prettier --single-quote --write",
+      "eslint",
+      "git add"
+    ],
+    "*.css": [
+      "prettier --single-quote --write",
+      "stylelint",
+      "git add"
+    ]
+  },
+  "engines": {
+    "node": ">=8.2.0"
+  },
+  "devDependencies": {
+    "autoprefixer": "^7.1.6",
+    "babel-core": "^6.26.0",
+    "babel-loader": "^7.1.2",
+    "babel-plugin-yo-yoify": "^1.0.1",
+    "babel-polyfill": "^6.26.0",
+    "babel-preset-env": "^1.6.1",
+    "babel-preset-es2015": "^6.24.1",
+    "babel-preset-stage-2": "^6.24.1",
+    "base64-js": "^1.2.1",
+    "copy-webpack-plugin": "^4.2.0",
+    "cross-env": "^5.1.1",
+    "css-loader": "^0.28.7",
+    "css-mqpacker": "^6.0.1",
+    "cssnano": "^3.10.0",
+    "eslint": "^4.10.0",
+    "eslint-plugin-mocha": "^4.11.0",
+    "eslint-plugin-node": "^5.2.1",
+    "eslint-plugin-security": "^1.4.0",
+    "expose-loader": "^0.7.3",
+    "extract-loader": "^1.0.1",
+    "file-loader": "^1.1.5",
+    "git-rev-sync": "^1.9.1",
+    "github-changes": "^1.1.1",
+    "html-loader": "^0.5.1",
+    "husky": "^0.14.3",
+    "lint-staged": "^4.3.0",
+    "mocha": "^3.5.3",
+    "nanobus": "^4.3.0",
+    "npm-run-all": "^4.1.2",
+    "postcss-loader": "^2.0.8",
+    "prettier": "^1.8.2",
+    "proxyquire": "^1.8.0",
+    "raven-js": "^3.19.1",
+    "redis-mock": "^0.20.0",
+    "require-from-string": "^2.0.1",
+    "rimraf": "^2.6.2",
+    "selenium-webdriver": "^3.6.0",
+    "sinon": "^4.1.2",
+    "string-hash": "^1.1.3",
+    "stylelint-config-standard": "^17.0.0",
+    "stylelint-no-unsupported-browser-features": "^1.0.1",
+    "supertest": "^3.0.0",
+    "testpilot-ga": "^0.3.0",
+    "val-loader": "^1.0.2",
+    "webpack": "^3.8.1",
+    "webpack-dev-server": "2.9.1",
+    "webpack-manifest-plugin": "^1.3.2",
+    "webpack-unassert-loader": "^1.2.0"
+  },
+  "dependencies": {
+    "aws-sdk": "^2.149.0",
+    "body-parser": "^1.18.2",
+    "choo": "^6.5.1",
+    "cldr-core": "^32.0.0",
+    "connect-busboy": "0.0.2",
+    "convict": "^4.0.1",
+    "express": "^4.16.2",
+    "fluent": "^0.4.1",
+    "fluent-langneg": "^0.1.0",
+    "helmet": "^3.9.0",
+    "mkdirp": "^0.5.1",
+    "mozlog": "^2.1.1",
+    "raven": "^2.2.1",
+    "redis": "^2.8.0"
+  },
+  "availableLanguages": [
+    "en-US",
+    "ast",
+    "az",
+    "bs",
+    "ca",
+    "cak",
+    "cs",
+    "cy",
+    "de",
+    "dsb",
+    "el",
+    "es-AR",
+    "es-CL",
+    "es-ES",
+    "es-MX",
+    "et",
+    "fa",
+    "fr",
+    "fy-NL",
+    "hsb",
+    "hu",
+    "id",
+    "it",
+    "ja",
+    "ka",
+    "kab",
+    "ko",
+    "ms",
+    "nb-NO",
+    "nl",
+    "nn-NO",
+    "pt-BR",
+    "pt-PT",
+    "ru",
+    "sk",
+    "sl",
+    "sr",
+    "sv-SE",
+    "tl",
+    "tr",
+    "uk",
+    "vi",
+    "zh-CN",
+    "zh-TW"
+  ]
 }

postcss.config.js

@@ -0,0 +1,15 @@
+const autoprefixer = require('autoprefixer');
+const cssnano = require('cssnano');
+const mqpacker = require('css-mqpacker');
+
+const config = require('./server/config');
+
+const options = {
+  plugins: [autoprefixer, mqpacker, cssnano]
+};
+
+if (config.env === 'development') {
+  options.map = { inline: true };
+}
+
+module.exports = options;