Bump version to 3.4.3

Update dependencies
Fix incorrect environment variable for config property
2025-12-06 14:10:53 +03:00 · 2021-02-05 02:31:15 +01:00 · 2021-02-05 02:29:19 +01:00 · 2021-02-05 02:24:48 +01:00 · 2021-01-27 13:38:58 +01:00 · 2021-01-27 13:34:26 +01:00
458 changed files with 49897 additions and 6347 deletions
--- a/.circleci/config.yml
+++ b/.circleci/config.yml
@@ -0,0 +1,99 @@
+version: 2.0
+jobs:
+  test:
+    docker:
+      - image: circleci/node:12-browsers
+    steps:
+      - checkout
+      - run: npm ci
+      - run: npm run lint
+      - run: npm test
+      - store_artifacts:
+          path: coverage
+  integration_tests:
+    docker:
+      - image: circleci/node:12-browsers
+    steps:
+      - checkout
+      - run: npm ci
+      - run:
+          name: Run integration test
+          command: ./scripts/bin/run-integration-test-circleci.sh
+  deploy_dev:
+    docker:
+      - image: circleci/node:12
+    steps:
+      - checkout
+      - setup_remote_docker
+      - run: docker login -u $DOCKER_USER -p $DOCKER_PASS
+      - run: docker build -t mozilla/send:latest .
+      - run: docker push mozilla/send:latest
+  deploy_vnext:
+    docker:
+      - image: circleci/node:12
+    steps:
+      - checkout
+      - setup_remote_docker
+      - run: docker login -u $DOCKER_USER -p $DOCKER_PASS
+      - run: docker build -t mozilla/send:vnext .
+      - run: docker push mozilla/send:vnext
+  deploy_stage:
+    docker:
+      - image: circleci/node:12
+    steps:
+      - checkout
+      - setup_remote_docker
+      - run: docker login -u $DOCKER_USER -p $DOCKER_PASS
+      - run: docker build -t mozilla/send:$CIRCLE_TAG .
+      - run: docker push mozilla/send:$CIRCLE_TAG
+workflows:
+  version: 2
+  test_pr:
+    jobs:
+      - test:
+          filters:
+            branches:
+              ignore:
+                - master
+                - vnext
+      - integration_tests:
+          filters:
+            branches:
+              ignore: master
+  build_and_deploy_dev:
+    jobs:
+      - deploy_dev:
+          filters:
+            branches:
+              only: master
+            tags:
+              ignore: /^v.*/
+      - deploy_vnext:
+          filters:
+            branches:
+              only: vnext
+            tags:
+              ignore: /^v.*/
+  build_and_deploy_stage:
+    jobs:
+      - test:
+          filters:
+            branches:
+              ignore: /.*/
+            tags:
+              only: /^v.*/
+      - integration_tests:
+          filters:
+            branches:
+              ignore: /.*/
+            tags:
+              only: /^v.*/
+      - deploy_stage:
+          requires:
+            - test
+            - integration_tests
+          filters:
+            branches:
+              ignore: /.*/
+            tags:
+              only: /^v.*/
--- a/.dockerignore
+++ b/.dockerignore
@@ -1,8 +1,8 @@
-node_modules
-.git
+.circleci
+.nyc_output
+.vscode
 .DS_Store
-static
-test
-scripts
+coverage
 docs
 firefox
+node_modules
--- a/.editorconfig
+++ b/.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
--- a/.eslintignore
+++ b/.eslintignore
@@ -1,3 +1,8 @@
-public
-test/frontend/bundle.js
+dist
+assets
 firefox
+coverage
+android/app/build
+app/locale.js
+app/capabilities.js
+app/qrcode.js
--- a/.eslintrc.yml
+++ b/.eslintrc.yml
@@ -4,6 +4,7 @@ env:

 extends:
  - eslint:recommended
+  - prettier
  - plugin:node/recommended
  - plugin:security/recommended

@@ -14,16 +15,14 @@ plugins:
 root: true

 rules:
+  node/no-deprecated-api: off
+  node/no-unsupported-features/es-syntax: off
+  node/no-unsupported-features/node-builtins: off
  node/no-unpublished-require: off
+  node/no-unpublished-import: off

  security/detect-non-literal-fs-filename: off
  security/detect-object-injection: off

-  eqeqeq: error
-  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, {avoidEscape: true}]
+  require-atomic-updates: warn
--- a/.gitattributes
+++ b/.gitattributes
@@ -0,0 +1,2 @@
+public/locales/* linguist-documentation
+docs/* linguist-documentation
--- a/.gitignore
+++ b/.gitignore
@@ -1,9 +1,15 @@
-.DS_Store
 node_modules
-public/upload.js
-public/download.js
-public/version.json
-public/l20n.min.js
-static/*
-!static/info.txt
-test/frontend/bundle.js
+coverage
+dist
+.idea
+.DS_Store
+.nyc_output
+.tox
+.pytest_cache
+*.iml
+android/app/src/main/assets
+ios/send-ios/assets/ios.js
+ios/send-ios/assets/vendor.js
+ios/send-ios.xcodeproj/project.xcworkspace/xcuserdata/*
+ios/send-ios.xcodeproj/xcuserdata/*
+test/integration/downloads
--- a/.gitlab-ci.yml
+++ b/.gitlab-ci.yml
@@ -0,0 +1,71 @@
+image: "node:12-slim"
+
+stages:
+  - test
+  - artifact
+  - release
+
+before_script:
+  # Install dependencies
+  - apt-get update
+  - apt-get install -y git python3 build-essential libxtst6
+
+  # Prepare Chrome for puppeteer
+  - apt-get install -y wget gnupg
+  - wget -q -O - https://dl-ssl.google.com/linux/linux_signing_key.pub | apt-key add -
+  - sh -c 'echo "deb [arch=amd64] http://dl.google.com/linux/chrome/deb/ stable main" >> /etc/apt/sources.list.d/google.list'
+  - apt-get update
+  - apt-get install -y google-chrome-stable fonts-ipafont-gothic fonts-wqy-zenhei fonts-thai-tlwg fonts-kacst fonts-freefont-ttf libxss1 --no-install-recommends
+
+test:
+  stage: test
+  script:
+    - npm ci
+    - npm run lint
+    - npm test
+
+# Release Docker image artifact for easy testing
+artifact-docker:
+  stage: artifact
+  image: docker:latest
+  services:
+    - docker:dind
+  only:
+    - master
+  before_script: []
+  script:
+    - export IMG_NAME=registry.gitlab.com/timvisee/send:master-$CI_COMMIT_SHA
+
+    # Login in to registry
+    - 'docker login registry.gitlab.com -u $DOCKER_USER -p $DOCKER_PASS'
+
+    # Build and push image, report image name
+    - docker build -t $IMG_NAME .
+    - docker push $IMG_NAME
+    - 'echo Docker image artifact published, available as:'
+    - 'echo "  docker pull $IMG_NAME"'
+
+# Release public Docker image
+release-docker:
+  stage: release
+  image: docker:latest
+  services:
+    - docker:dind
+  only:
+    - /^v(\d+\.)*\d+$/
+  before_script: []
+  script:
+    - export IMG_NAME=registry.gitlab.com/timvisee/send:$CI_COMMIT_REF_NAME
+    - export IMG_NAME_LATEST=registry.gitlab.com/timvisee/send:latest
+
+    # Login in to registry
+    - 'docker login registry.gitlab.com -u $DOCKER_USER -p $DOCKER_PASS'
+
+    # Build and push image, report image name
+    - docker build -t $IMG_NAME .
+    - docker tag $IMG_NAME $IMG_NAME_LATEST
+    - docker push $IMG_NAME
+    - docker push $IMG_NAME_LATEST
+    - 'echo Docker image artifact published, available as:'
+    - 'echo "  docker pull $IMG_NAME_LATEST"'
+    - 'echo "  docker pull $IMG_NAME"'
--- a/.prettierignore
+++ b/.prettierignore
@@ -0,0 +1,4 @@
+dist
+android/app/src/main/assets
+android/app/build
+coverage
--- a/.stylelintrc
+++ b/.stylelintrc
@@ -1,6 +1,13 @@
 extends: stylelint-config-standard

+plugins:
+  - stylelint-no-unsupported-browser-features
+
 rules:
+  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
+  at-rule-no-unknown: null
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -0,0 +1,311 @@
+## Change Log
+
+### v2.5.1 (2018/03/12 19:26 +00:00)
+- [#789](https://github.com/mozilla/send/pull/789) Fixed #775 : Made text not-selectable (@RCMainak)
+
+### v2.5.0 (2018/03/08 19:31 +00:00)
+- [#782](https://github.com/mozilla/send/pull/782) updated docs (@dannycoates)
+- [#781](https://github.com/mozilla/send/pull/781) Don't translate URL-safe chars, b64 is doing it for us (@timvisee)
+- [#779](https://github.com/mozilla/send/pull/779) implemented crypto polyfills for ms edge (@dannycoates)
+
+### v2.4.1 (2018/02/28 17:05 +00:00)
+- [#777](https://github.com/mozilla/send/pull/777) use a separate circle in the progress svg for indefinite progress (@dannycoates)
+
+### v2.4.0 (2018/02/27 01:55 +00:00)
+- [#769](https://github.com/mozilla/send/pull/769) removed unsafe-inline styles via svgo-loader (@dannycoates)
+- [#767](https://github.com/mozilla/send/pull/767) added coverage artifact to circleci (@dannycoates)
+- [#766](https://github.com/mozilla/send/pull/766) Some frontend unit tests [WIP] (@dannycoates)
+- [#761](https://github.com/mozilla/send/pull/761) added maxPasswordLength and passwordError messages (@dannycoates)
+- [#764](https://github.com/mozilla/send/pull/764) added indefinite progress mode (@dannycoates)
+- [#760](https://github.com/mozilla/send/pull/760) refactored css: phase 1 (@dannycoates)
+- [#759](https://github.com/mozilla/send/pull/759) Switch en-US FTL file to new syntax (@flodolo)
+- [#758](https://github.com/mozilla/send/pull/758) refactored server (@dannycoates)
+- [#757](https://github.com/mozilla/send/pull/757) Update to fluent 0.4.3 (@stasm)
+
+### v2.3.0 (2018/02/01 23:27 +00:00)
+- [#536](https://github.com/mozilla/send/pull/536) use redis expire event to delete stored data immediately (@ehuggett)
+- [#744](https://github.com/mozilla/send/pull/744) Gradient experiment (@dannycoates)
+- [#739](https://github.com/mozilla/send/pull/739) added /api/info/:id route (@dannycoates)
+- [#737](https://github.com/mozilla/send/pull/737) big refactor (@dannycoates)
+- [#722](https://github.com/mozilla/send/pull/722) Add localization note to 'Time' and 'Downloads' string (@flodolo)
+- [#721](https://github.com/mozilla/send/pull/721) show download Limits on page; Fixes #661 (@shikhar-scs)
+- [#694](https://github.com/mozilla/send/pull/694) Passwords can now be changed (#687) (@himanish-star)
+- [#702](https://github.com/mozilla/send/pull/702) Restricted the banner from showing on unsupported browsers (@himanish-star)
+- [#701](https://github.com/mozilla/send/pull/701) improved popup for mobile display; Fixes #699 (@shikhar-scs)
+- [#683](https://github.com/mozilla/send/pull/683) API changes to accommodate 3rd party clients (@ehuggett)
+- [#698](https://github.com/mozilla/send/pull/698) Popup for delete button attached (@himanish-star)
+- [#695](https://github.com/mozilla/send/pull/695) Show Warning, Cancel and Redirect on size > 2GB ; fixes #578 (@shikhar-scs)
+- [#684](https://github.com/mozilla/send/pull/684) delete btn popup attached (@himanish-star)
+- [#686](https://github.com/mozilla/send/pull/686) Hide password while Typing and after Entering: Fixes #670 (@shikhar-scs)
+- [#679](https://github.com/mozilla/send/pull/679) changed font to sans sherif: Solves #676 (@shikhar-scs)
+- [#693](https://github.com/mozilla/send/pull/693) README: Fix query link for "good first bugs" (@jspam)
+- [#685](https://github.com/mozilla/send/pull/685) checkbox now has a hover effect: fixes #635 (@himanish-star)
+- [#668](https://github.com/mozilla/send/pull/668) Add possibility to bind to a specific IP address (@TwizzyDizzy)
+- [#682](https://github.com/mozilla/send/pull/682) [Docs] - README.md - minor spelling fixes (@tmm2018)
+- [#672](https://github.com/mozilla/send/pull/672) Use EXPIRE_SECONDS to calculate file ttl for static content (@derektamsen)
+- [#680](https://github.com/mozilla/send/pull/680) adjusted line height of label : fixes #609 (@himanish-star)
+
+### v2.2.2 (2017/12/19 18:06 +00:00)
+- [#667](https://github.com/mozilla/send/pull/667) Make develop the default NODE_ENV (@claudijd)
+
+### v2.2.1 (2017/12/08 18:00 +00:00)
+- [#665](https://github.com/mozilla/send/pull/665) stop drag target from flickering when dragging over children (@ericawright)
+
+### v2.2.0 (2017/12/06 23:57 +00:00)
+- [#654](https://github.com/mozilla/send/pull/654) Multiple download UI (@dannycoates)
+- [#650](https://github.com/mozilla/send/pull/650) #634: overwrite appearance of password submit input (@ovlb)
+- [#649](https://github.com/mozilla/send/pull/649) #609 share interface: align text in input and button (@ovlb)
+
+### v2.1.2 (2017/11/16 19:03 +00:00)
+- [#645](https://github.com/mozilla/send/pull/645) Remove the leak of the password into the console (@laurentj)
+
+### v2.1.0 (2017/11/15 03:07 +00:00)
+- [#641](https://github.com/mozilla/send/pull/641) Added experiment for firefox download promo (@dannycoates)
+- [#640](https://github.com/mozilla/send/pull/640) use fluent-langneg for subtag support (@dannycoates)
+- [#639](https://github.com/mozilla/send/pull/639) wrap number localization in try/catch (@dannycoates)
+
+### v2.0.0 (2017/11/08 05:31 +00:00)
+- [#633](https://github.com/mozilla/send/pull/633) Keyboard navigation/visual feedback regression (@ehuggett)
+- [#632](https://github.com/mozilla/send/pull/632) display the 'add password' button only when the input field isn't empty (@dannycoates)
+- [#626](https://github.com/mozilla/send/pull/626) Partial fix for #623 (@ehuggett)
+- [#624](https://github.com/mozilla/send/pull/624) set a default MIME type in file metadata (@ehuggett)
+- [#612](https://github.com/mozilla/send/pull/612) Password UI nits (@dannycoates, @ericawright)
+- [#617](https://github.com/mozilla/send/pull/617) allow drag and drop if navigating from shared page (@ericawright)
+- [#608](https://github.com/mozilla/send/pull/608) disable copying link when password not completed (@ericawright)
+- [#605](https://github.com/mozilla/send/pull/605) align the "Password" and "Copy to clipboard" fields. (@ericawright)
+- [#582](https://github.com/mozilla/send/pull/582) Add optional password to the download url (@dannycoates)
+
+### v1.2.4 (2017/10/10 17:34 +00:00)
+- [#583](https://github.com/mozilla/send/pull/583) Promote the beefy UI to default (@dannycoates)
+- [#581](https://github.com/mozilla/send/pull/581) introducing ToC to README.md (@tmm2018)
+- [#579](https://github.com/mozilla/send/pull/579) Hide cancel button when upload reaches 100% (@ericawright)
+- [#580](https://github.com/mozilla/send/pull/580) Change Favicon in to look better in a variety of cases (@ericawright)
+- [#571](https://github.com/mozilla/send/pull/571) Centre logo (@ehuggett)
+- [#574](https://github.com/mozilla/send/pull/574) Make upload button focusable (accessibility/tab navigation) (@ehuggett)
+
+### v1.2.0 (2017/09/12 22:42 +00:00)
+- [#559](https://github.com/mozilla/send/pull/559) added first A/B experiment (@dannycoates)
+- [#542](https://github.com/mozilla/send/pull/542) fix docker link typo (@ehuggett)
+- [#541](https://github.com/mozilla/send/pull/541) removed .title and .alt attributes from ftl (@dannycoates)
+- [#537](https://github.com/mozilla/send/pull/537) a few changes to make A/B testing easier (@dannycoates)
+- [#533](https://github.com/mozilla/send/pull/533) minor UI fixes (@youwenliang)
+- [#531](https://github.com/mozilla/send/pull/531) Add CHANGELOG script (@pdehaan)
+- [#535](https://github.com/mozilla/send/pull/535) Fixed minimum NodeJS version in README (@LuFlo)
+- [#528](https://github.com/mozilla/send/pull/528) adding separators to README (@tmm2018)
+
+### 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)
--- a/CODE_OF_CONDUCT.md
+++ b/CODE_OF_CONDUCT.md
@@ -0,0 +1,15 @@
+# Community Participation Guidelines
+
+This repository is governed by Mozilla's code of conduct and etiquette guidelines. 
+For more details, please read the
+[Mozilla Community Participation Guidelines](https://www.mozilla.org/about/governance/policies/participation/). 
+
+## How to Report
+For more information on how to report violations of the Community Participation Guidelines, please read our '[How to Report](https://www.mozilla.org/about/governance/policies/participation/reporting/)' page.
+
+<!--
+## Project Specific Etiquette
+
+In some cases, there will be additional project etiquette i.e.: (https://bugzilla.mozilla.org/page.cgi?id=etiquette.html).
+Please update for your project.
+-->
--- a/331
+++ b/331
@@ -0,0 +1,331 @@
+Abd ar-Rahman Hamidi
+Abdalrahman Hwoij
+Abdulrash6211
+Abdulrasheed Idris
+Abelardo Ayala Rodríguez
+Abhinav Adduri
+Adaobi
+Adnan Kičin
+Adolfo Jayme Barrientos
+Alberto Castro
+Alexander Parada
+Alexander Slovesnik
+Alfredos-Panagiotis Damkalis
+Aman Alam
+Amin Mahmudian
+Ander Elortondo
+Andreas Pettersson
+Anesu Chiodza
+Anika Dorn
+Anish Sheela
+Arash Mousavi
+Artem Polivanchuk
+Ashesh Vidyut
+Ashikur Rahman
+Ashok kumar
+Ayobamiadebayo375
+Balasankar C
+Bald3mar
+Balázs Meskó
+Belayet Hossain
+Benjamin Forehand Jr
+Besnik Bleta
+Björn I
+Bjørn I
+Boopesh Mahendran
+Brahim Essaidi
+Brainlulz
+Breana Gonzales
+CLASSIFIED
+Christian Elbrianno
+Christoph Kührer
+Christopher Ramírez
+Chuck Harmston
+Cloney 173741
+Cláudio Esperança
+Connor Ford
+Cristian Silaghi
+Cynthia Pereira
+Daniel Thorn
+Daniela Arcese
+Danny Coates
+Davide
+Derek Tamsen
+Dhyey Thakore
+Donovan Preston
+Edi Santoso
+Edmund Huggett
+Eduard Bopp
+Elisa X
+Emily
+Emily Hou
+Emin Mastizada
+Enol
+Erica
+Erica Wright
+Fauzan Alfi
+Filip Hruška
+Fjoerfoks
+Francesco Lodolo
+Francesco Lodolo [:flod]
+Frederick Villaluna
+G12r
+Gabriela
+Garysqo
+Gautam krishna.R
+George Raptis
+Georgianizator
+Gery Escalier
+Gisela Solis
+Gonçalo Matos
+Gwenn
+Hampus
+Hmxhmx
+Hrant
+Hugo
+Hugo Abreu
+Hyeonseok Shin
+Håvar Henriksen
+Ian Neal
+ItielMaN
+Jae Hyeon Park
+Jakob Kappel
+Jakub Rychlý
+Jamie
+Jan Schloß
+Jarmo
+Jim Spentzos
+Jiri Grönroos
+Jirka Soukeník
+Jobava
+Joe Becher
+Joe ST
+Joergen
+Johann-S
+John Gruen
+John Zonunmawi Vankal
+Jon Buckley
+Jon Vadillo
+Jonathan Claudius
+Jordi Cuevas
+Jordi Serratosa
+Joseph.maza
+José Manuel
+Juan Esteban Ajsivinac Sián
+Juan Pablo
+Juan Sián
+Julio Gomez
+Juraj Cigáň
+Jwtiyar
+Kerim Kalamujić
+Khaled Hosny
+Kim Ludvigsen
+Kim YoungCheon
+Kim Younggeon
+Kohei Yoshino
+Lan Glad
+Lasse Liehu
+Laurent Jouanneau
+Lobodzets
+LuFlo
+Luis A. Sánchez
+Luis Flores Martínez
+Luiz Carlos de Morais
+Luiz Felipe F M Costa
+Luna Jernberg
+Mahay Alam Khan
+Manuela Silva
+Marcelo Ghelman
+Marcelo Poli
+Marco Aurélio
+Mark Heijl
+Mark Liang
+Mark Liang (You-Wen)
+Marko Andrejić
+Martijn Dekker
+Marwan Mohamad
+Mathieu Lecarme
+Matjaž Horvat
+Maykon Chagas
+Melo46
+Merike Sell
+Michael Köhler
+Michael Peter
+Michael Wolf
+Michal Stanke
+Michal Vašíček
+Miguel
+Mikeyy
+Milo
+Miro Rauhala
+Misael Hernández
+Mozilla Pontoon
+Mozilla-GitHub-Standards
+Mozinet
+Moḥend Belqasem
+Muhend Belkacem
+Muḥend Belqasem
+Myungjae Won
+Netza López
+Nicholas Skinsacos
+Nihad
+Nihad Suljić
+Niksend Mizuhara
+Oscar
+Paulius
+Pedro Burlamaqui Bendahan
+Peter deHaan
+Pierre Neter
+Pin-guang Chen
+Piotr Drąg
+Pontoon
+Quentí
+Quế Tùng
+Rachel Tublitz
+Radu Popescu
+Rhoslyn Prys
+RickieES
+Ricky Rosario
+Rimas Kudelis
+Rizky Ariestiyansyah
+Rob Powell
+Robert
+Roberto Alvarado
+Rodrigo
+Rodrigo Guerra
+Rok Žerdin
+Romi Hardiyanto
+Rongjian Zhang
+Ruba
+Sahithi
+Sairam Raavi
+Sander Lepik
+Sandro
+Sara Todaro
+Sav22999
+Schieck :)
+Selim Şumlu
+Selyan Sliman Amiri
+Selyan Slimane Amiri
+Sidak Singh Aulakh
+Slimane Amiri
+Slimane Selyan AMIRI
+Soumya Himanish Mohapatra
+Staś Małolepszy
+Suriyaa ✌️️
+Tema
+Thomas Dalichow
+Théo Chevalier
+Tiago Morais Morgado
+Tim Visée
+Tomer Cohen
+Tomáš Zelina
+Ton
+Top
+Tymur Faradzhev
+Uccen Marzuq
+Umegbewe
+Varghese Thomas
+Victor Bychek
+Victor Davila
+Victor Ibragimov
+Vimal Raghubir
+Vitaliy Krutko
+Weihang Lo
+Wiktor Furman
+Wil Clouser
+YFdyh000
+Yassine Aït-El-Mouden
+Yongmin H
+You-Wen Liang (Mark)
+Zhenya Tikhonov
+ZiriSut
+aaaaalbert
+abtin
+ada_okeke60
+aefgh39622
+alamanda
+albertdcastro
+alex_mayorga
+ali.malek.71
+ariestiyansyah
+avelper
+biobell2000
+bulut
+chilledfrogs
+clouserw-mozilla-owner
+dependabot[bot]
+dgadelha
+dskmori
+ehuggett
+elenatambriz
+eljuno
+emily-hou1
+erdem cobanoglu
+fcortess
+gautamkrishnar
+gmontagu
+goofy
+hello
+hi
+ivan.pompa
+jackyzy823
+jesferman1993
+jlG
+jnunezf96
+johngruen
+josotrix
+jspam
+julen
+julenx
+kenrick95
+kumincir
+leo.toneff
+m4hdi.pdroid
+mail
+manuel padilla sanchez
+manxmensch
+marigalicer
+marsf
+merianosnikos
+minvs1
+mirzet.omerovic.1992
+mujeebcpy
+okyanusoz
+p.sanroman.bengoetxea
+passionforlife
+paul.trevor
+pyup.io bot
+ravmn
+rcmainak
+reza.habibi2008
+rgpublic
+risger
+robbp
+ruikunai
+savemore99.sm
+sergio
+shamanchic2011
+shikhar-scs
+siparon
+skystar-p
+stripTM
+sugabelly
+tatalmondmush
+tiagomoraismorgado
+timvisee
+victor.gonzalezro
+xcffl
+ybouhamam
+yoshimitsu002
+yusup.ramdani
+zankomhamad
+Μιχάλης
+Марко Костић (Marko Kostić)
+Ратко Вујановић
+صفا الفليج
+వీవెన్
+ജോയ്സ്
+张无忌
+新垣结衣松冈茉优长泽雅美门胁麦上野树里石原里美
+莫非前世那一眼
--- a/62
+++ b/62
@@ -1,15 +1,59 @@
-FROM node:8-alpine
+##
+# Send
+#
+# License https://gitlab.com/timvisee/send/blob/master/LICENSE
+##

-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
+
+# Build project
+FROM node:12 AS builder
+RUN set -x \
+    # Add user
+    && addgroup --gid 10001 app \
+    && adduser --disabled-password \
+        --gecos '' \
+        --gid 10001 \
+        --home /app \
+        --uid 10001 \
+        app
+COPY --chown=app:app . /app
 USER app
 WORKDIR /app
-RUN mkdir static
-RUN npm install --production && npm cache clean --force
+RUN set -x \
+    # Build
+    && PUPPETEER_SKIP_CHROMIUM_DOWNLOAD=true npm ci \
+    && npm run build
+
+
+# Main image
+FROM node:12-slim
+RUN set -x \
+    # Add user
+    && addgroup --gid 10001 app \
+    && adduser --disabled-password \
+        --gecos '' \
+        --gid 10001 \
+        --home /app \
+        --uid 10001 \
+        app
+RUN apt-get update && apt-get -y install \
+    git-core \
+    && rm -rf /var/lib/apt/lists/*
+USER app
+WORKDIR /app
+COPY --chown=app:app package*.json ./
+COPY --chown=app:app app app
+COPY --chown=app:app common common
+COPY --chown=app:app public/locales public/locales
+COPY --chown=app:app server server
+COPY --chown=app:app --from=builder /app/dist dist
+
+RUN npm ci --production && npm cache clean --force
+RUN mkdir -p /app/.config/configstore
+RUN ln -s dist/version.json version.json

 ENV PORT=1443
-EXPOSE $PORT

-CMD ["npm", "start"]
+EXPOSE ${PORT}
+
+CMD ["node", "server/bin/prod.js"]
--- a/README.md
+++ b/README.md
@@ -1,51 +1,173 @@
-# Firefox Send
+# [![Send](./assets/icon.svg)](https://gitlab.com/timvisee/send/) 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)
+[![Build status on GitLab CI][gitlab-ci-master-badge]][gitlab-ci-link]
+[![Latest release][release-badge]][release-link]
+[![Docker image][docker-image-badge]][docker-image-link]
+[![Project license][repo-license-badge]](LICENSE)

-**Docs:** [Docker](docs/docker.md), [Metrics](docs/metrics.md)
+[docker-image-badge]: https://img.shields.io/badge/docker-latest-blue.svg
+[docker-image-link]: https://gitlab.com/timvisee/send/container_registry/eyJuYW1lIjoidGltdmlzZWUvc2VuZCIsInRhZ3NfcGF0aCI6Ii90aW12aXNlZS9zZW5kL3JlZ2lzdHJ5L3JlcG9zaXRvcnkvMTQxODUwNC90YWdzP2Zvcm1hdD1qc29uIiwiaWQiOjE0MTg1MDQsImNsZWFudXBfcG9saWN5X3N0YXJ0ZWRfYXQiOm51bGx9
+[gitlab-ci-link]: https://gitlab.com/timvisee/send/pipelines
+[gitlab-ci-master-badge]: https://gitlab.com/timvisee/send/badges/master/pipeline.svg
+[release-badge]: https://img.shields.io/github/v/tag/timvisee/send
+[release-link]: https://gitlab.com/timvisee/send/-/tags
+[repo-license-badge]: https://img.shields.io/github/license/timvisee/send.svg
+
+A fork of Mozilla's [Firefox Send][mozilla-send].
+Mozilla discontinued Send, this fork is a community effort to keep the project
+up-to-date and alive.
+
+- Forked [at][fork-commit] Mozilla's last publicly hosted version
+- _Mozilla_ & _Firefox_ branding [is][remove-branding-pr] removed so you can legally self-host
+- Kept compatible with [`ffsend`][ffsend] (CLI for Send)
+- Dependencies have been updated
+- Mozilla's [changes][mozilla-patches] since the fork have been selectively [merged][mozilla-patches-pr]
+- Mozilla's experimental report feature, download tokens, trust warnings and FxA changes are not included
+
+Find an up-to-date Docker image here: [docs/docker.md](docs/docker.md)
+
+The original project by Mozilla can be found [here][mozilla-send].
+The [`mozilla-master`][branch-mozilla-master] branch holds the `master` branch
+as left by Mozilla.
+The [`send-v3`][branch-send-v3] branch holds the commit tree of Mozilla's last
+publicly hosted version, which this fork is based on.
+The [`send-v4`][branch-send-v4] branch holds the commit tree of Mozilla's last
+experimental version which was still a work in progress (featuring file
+reporting, download tokens, trust warnings and FxA changes), this has
+selectively been merged into this fork.
+Please consider to [donate][donate] to allow me to keep working on this.
+
+Thanks [Mozilla][mozilla] for building this amazing tool!
+
+[branch-mozilla-master]: https://gitlab.com/timvisee/send/-/tree/mozilla-master
+[branch-send-v3]: https://gitlab.com/timvisee/send/-/tree/send-v3
+[branch-send-v4]: https://gitlab.com/timvisee/send/-/tree/send-v4
+[donate]: https://timvisee.com/donate
+[ffsend]: https://github.com/timvisee/ffsend
+[fork-commit]: https://gitlab.com/timvisee/send/-/commit/3e9be676413a6e1baaf6a354c180e91899d10bec
+[mozilla-patches-pr]: https://gitlab.com/timvisee/send/-/merge_requests/3
+[mozilla-patches]: https://gitlab.com/timvisee/send/-/compare/3e9be676413a6e1baaf6a354c180e91899d10bec...mozilla-master
+[mozilla-send]: https://github.com/mozilla/send
+[mozilla]: https://mozilla.org/
+[remove-branding-pr]: https://gitlab.com/timvisee/send/-/merge_requests/2
+
+---
+
+**Docs:** [FAQ](docs/faq.md), [Encryption](docs/encryption.md), [Build](docs/build.md), [Docker](docs/docker.md), [Metrics](docs/metrics.md), [More](docs/)
+
+---
+
+## Table of Contents
+
+* [What it does](#what-it-does)
+* [Requirements](#requirements)
+* [Development](#development)
+* [Commands](#commands)
+* [Configuration](#configuration)
+* [Localization](#localization)
+* [Contributing](#contributing)
+* [Testing](#testing)
+* [Deployment](#deployment)
+* [Clients](#clients)
+* [License](#license)
+
+---

 ## What it does

 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 12.x](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))
+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.
+
+see also [docs/localization.md](docs/localization.md)
+
+---

 ## 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).
+Pull requests are always welcome! Feel free to check out the list of ["good first issues"](https://github.com/mozilla/send/issues?q=is%3Aopen+is%3Aissue+label%3A%22good+first+issue%22).
+
+---

 ## Testing

 | ENVIRONMENT | URL
 |-------------|-----
 | Production  | <https://send.firefox.com/>
-| Stage       | <https://send.stage.mozaws.net/>
-| Development | <https://send.dev.mozaws.net/>
+| Stage       | <https://stage.send.nonprod.cloudops.mozgcp.net/>
+| Development | <https://send2.dev.lcip.org/>
+
+---
+
+## Deployment
+
+see also [docs/deployment.md](docs/deployment.md)
+
+---
+
+## Clients
+
+- Web: _this repository_
+- Command-line: [`ffsend`](https://github.com/timvisee/ffsend)
+- Android: _see [Android](#android) section_
+
+#### Android
+
+The android implementation is contained in the `android` directory,
+and can be viewed locally for easy testing and editing by running `ANDROID=1 npm
+start` and then visiting <http://localhost:8080>. CSS and image files are
+located in the `android/app/src/main/assets` directory.
+
+---

 ## License

 [Mozilla Public License Version 2.0](LICENSE)
+
+[qrcode.js](https://github.com/kazuhikoarase/qrcode-generator) licensed under MIT
+
+---
--- a/android/.eslintrc.yaml
+++ b/android/.eslintrc.yaml
@@ -0,0 +1,6 @@
+env:
+  browser: true
+
+parserOptions:
+  sourceType: module
+
--- a/android/.gitignore
+++ b/android/.gitignore
@@ -0,0 +1,4 @@
+local.properties
+.gradle
+build
+
--- a/android/README.md
+++ b/android/README.md
@@ -0,0 +1,9 @@
+Readme
+=====
+
+The Send Android app allows you to choose any file from your android device, encrypt it with a password, and get a URL which will allow secure download of the file. By default, this URL will expire after one download or 24 hours.
+
+Building the Send Android app.
+=====
+
+First, install Android Studio. Open the `android` directory in Android Studio, plug in your android phone, and press the run button.
--- a/android/SendAndroid.iml
+++ b/android/SendAndroid.iml
@@ -0,0 +1,19 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<module external.linked.project.id="SendAndroid" external.linked.project.path="$MODULE_DIR$" external.root.project.path="$MODULE_DIR$" external.system.id="GRADLE" type="JAVA_MODULE" version="4">
+  <component name="FacetManager">
+    <facet type="java-gradle" name="Java-Gradle">
+      <configuration>
+        <option name="BUILD_FOLDER_PATH" value="$MODULE_DIR$/build" />
+        <option name="BUILDABLE" value="false" />
+      </configuration>
+    </facet>
+  </component>
+  <component name="NewModuleRootManager" LANGUAGE_LEVEL="JDK_1_7" inherit-compiler-output="true">
+    <exclude-output />
+    <content url="file://$MODULE_DIR$">
+      <excludeFolder url="file://$MODULE_DIR$/.gradle" />
+    </content>
+    <orderEntry type="inheritedJdk" />
+    <orderEntry type="sourceFolder" forTests="false" />
+  </component>
+</module>
--- a/android/android.js
+++ b/android/android.js
@@ -0,0 +1,97 @@
+import 'intl-pluralrules';
+import choo from 'choo';
+import html from 'choo/html';
+import * as Sentry from '@sentry/browser';
+
+import { setApiUrlPrefix, getConstants } from '../app/api';
+import metrics from '../app/metrics';
+//import assets from '../common/assets';
+import Archive from '../app/archive';
+import Header from '../app/ui/header';
+import storage from '../app/storage';
+import controller from '../app/controller';
+import User from './user';
+import intents from './stores/intents';
+import home from './pages/home';
+import upload from './pages/upload';
+import share from './pages/share';
+import preferences from './pages/preferences';
+import error from './pages/error';
+import { getTranslator } from '../app/locale';
+import { setTranslate } from '../app/utils';
+
+import { delay } from '../app/utils';
+
+if (navigator.userAgent === 'Send Android') {
+  setApiUrlPrefix('https://send.firefox.com');
+}
+
+const app = choo();
+//app.use(state);
+app.use(controller);
+app.use(intents);
+
+window.finishLogin = async function(accountInfo) {
+  while (!(app.state && app.state.user)) {
+    await delay();
+  }
+  await app.state.user.finishLogin(accountInfo);
+  await app.state.user.syncFileList();
+  app.emitter.emit('replaceState', '/');
+};
+
+function body(main) {
+  return function(state, emit) {
+    /*
+      Disable the preferences menu for now since it is ugly and isn't
+      relevant to the beta
+    function clickPreferences(event) {
+      event.preventDefault();
+      emit('pushState', '/preferences');
+    }
+
+    const menu = html`<a
+        id="hamburger"
+        class="absolute top-0 right-0 z-50"
+        href="#"
+        onclick="${clickPreferences}"
+      >
+        <img src="${assets.get('preferences.png')}" />
+      </a>`;
+    */
+    return html`
+      <body class="flex flex-col items-center font-sans bg-grey-10 h-screen">
+        ${state.cache(Header, 'header').render()} ${main(state, emit)}
+      </body>
+    `;
+  };
+}
+(async function start() {
+  const translate = await getTranslator('en-US');
+  setTranslate(translate);
+  const { LIMITS, WEB_UI, DEFAULTS } = await getConstants();
+  app.use(state => {
+    state.LIMITS = LIMITS;
+    state.WEB_UI = WEB_UI;
+    state.DEFAULTS = DEFAULTS;
+    state.translate = translate;
+    state.capabilities = {
+      account: true
+    }; //TODO
+    state.archive = new Archive([], DEFAULTS.EXPIRE_SECONDS);
+    state.storage = storage;
+    state.user = new User(storage, LIMITS);
+    state.sentry = Sentry;
+  });
+  app.use(metrics);
+  app.route('/', body(home));
+  app.route('/upload', upload);
+  app.route('/share/:id', share);
+  app.route('/preferences', preferences);
+  app.route('/error', error);
+  //app.route('/debugging', require('./pages/debugging').default);
+  // add /api/filelist
+  app.mount('body');
+})();
+
+window.app = app;
--- a/android/app/.gitignore
+++ b/android/app/.gitignore
@@ -0,0 +1 @@
+/build
--- a/android/app/build.gradle
+++ b/android/app/build.gradle
@@ -0,0 +1,41 @@
+apply plugin: 'com.android.application'
+apply plugin: 'kotlin-android'
+apply plugin: 'kotlin-android-extensions'
+
+android {
+    compileSdkVersion 27
+    defaultConfig {
+        applicationId "org.mozilla.firefoxsend"
+        minSdkVersion 26
+        targetSdkVersion 27
+        versionCode 1
+        versionName "1.0"
+        testInstrumentationRunner "android.support.test.runner.AndroidJUnitRunner"
+    }
+    buildTypes {
+        release {
+            minifyEnabled false
+            proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'
+        }
+    }
+}
+
+dependencies {
+    implementation fileTree(dir: 'libs', include: ['*.jar'])
+    implementation"org.jetbrains.kotlin:kotlin-stdlib-jdk7:$kotlin_version"
+    implementation 'com.android.support:appcompat-v7:27.1.1'
+    implementation 'com.android.support.constraint:constraint-layout:1.1.3'
+    testImplementation 'junit:junit:4.12'
+    androidTestImplementation 'com.android.support.test:runner:1.0.2'
+    androidTestImplementation 'com.android.support.test.espresso:espresso-core:3.0.2'
+    implementation 'com.github.delight-im:Android-AdvancedWebView:v3.0.0'
+    implementation "org.mozilla.components:service-firefox-accounts:$android_components_version"
+}
+
+task generateAndLinkBundle(type: Exec, description: 'Generate the android.js bundle and link it into the assets directory') {
+    commandLine './buildAssets.sh'
+}
+
+tasks.withType(JavaCompile) {
+    compileTask -> compileTask.dependsOn generateAndLinkBundle
+}
--- a/android/app/buildAssets.sh
+++ b/android/app/buildAssets.sh
@@ -0,0 +1,12 @@
+#!/usr/bin/env bash
+if [ -d "../../node_modules" ]
+then
+  echo "node_modules already present."
+else
+  echo "node_modules not present, running npm install."
+  npm install
+fi
+npm run build
+rm -rf src/main/assets
+mkdir -p src/main/assets
+cp -R ../../dist/* src/main/assets
--- a/android/app/proguard-rules.pro
+++ b/android/app/proguard-rules.pro
@@ -0,0 +1,21 @@
+# Add project specific ProGuard rules here.
+# You can control the set of applied configuration files using the
+# proguardFiles setting in build.gradle.
+#
+# For more details, see
+#   http://developer.android.com/guide/developing/tools/proguard.html
+
+# If your project uses WebView with JS, uncomment the following
+# and specify the fully qualified class name to the JavaScript interface
+# class:
+#-keepclassmembers class fqcn.of.javascript.interface.for.webview {
+#   public *;
+#}
+
+# Uncomment this to preserve the line number information for
+# debugging stack traces.
+#-keepattributes SourceFile,LineNumberTable
+
+# If you keep the line number information, uncomment this to
+# hide the original source file name.
+#-renamesourcefileattribute SourceFile
--- a/android/app/src/main/AndroidManifest.xml
+++ b/android/app/src/main/AndroidManifest.xml
@@ -0,0 +1,35 @@
+<?xml version="1.0" encoding="utf-8"?>
+<manifest xmlns:android="http://schemas.android.com/apk/res/android"
+    package="org.mozilla.firefoxsend">
+
+    <uses-permission android:name="android.permission.INTERNET"/>
+    <uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />
+
+    <application
+        android:allowBackup="true"
+        android:icon="@mipmap/ic_launcher"
+        android:label="@string/app_name"
+        android:roundIcon="@mipmap/ic_launcher_round"
+        android:supportsRtl="true"
+        android:theme="@style/AppTheme">
+        <meta-data android:name="android.webkit.WebView.EnableSafeBrowsing" android:value="false" />
+        <activity android:name="org.mozilla.firefoxsend.MainActivity" android:screenOrientation="portrait">
+            <intent-filter>
+                <action android:name="android.intent.action.MAIN" />
+
+                <category android:name="android.intent.category.LAUNCHER" />
+            </intent-filter>
+            <intent-filter>
+                <action android:name="android.intent.action.SEND" />
+                <category android:name="android.intent.category.DEFAULT" />
+                <data android:mimeType="image/*" />
+            </intent-filter>
+            <intent-filter>
+                <action android:name="android.intent.action.SEND" />
+                <category android:name="android.intent.category.DEFAULT" />
+                <data android:mimeType="text/plain" />
+            </intent-filter>
+        </activity>
+    </application>
+
+</manifest>
--- a/android/app/src/main/ic_launcher-web.png
+++ b/android/app/src/main/ic_launcher-web.png
--- a/android/app/src/main/java/org/mozilla/firefoxsend/MainActivity.kt
+++ b/android/app/src/main/java/org/mozilla/firefoxsend/MainActivity.kt
@@ -0,0 +1,226 @@
+package org.mozilla.firefoxsend
+
+import android.annotation.SuppressLint
+import android.content.ComponentName
+import android.content.Intent
+import android.graphics.Bitmap
+import android.net.Uri
+import android.os.Bundle
+import android.support.v7.app.AppCompatActivity
+import android.util.Base64
+import android.util.Log
+import android.view.View
+import android.webkit.*
+import im.delight.android.webview.AdvancedWebView
+import kotlinx.android.synthetic.main.activity_main.*
+import mozilla.components.service.fxa.Config
+import mozilla.components.service.fxa.FirefoxAccount
+import mozilla.components.service.fxa.FxaResult
+import org.json.JSONObject
+
+internal class LoggingWebChromeClient : WebChromeClient() {
+    override fun onConsoleMessage(cm: ConsoleMessage): Boolean {
+        Log.d(TAG, String.format("%s @ %d: %s",
+                cm.message(), cm.lineNumber(), cm.sourceId()))
+        return true
+    }
+
+    companion object {
+        private const val TAG = "CONTENT"
+    }
+}
+
+class WebAppInterface(private val mContext: MainActivity) {
+    @JavascriptInterface
+    fun beginOAuthFlow() {
+        mContext.beginOAuthFlow()
+    }
+
+    @JavascriptInterface
+    fun shareUrl(url: String) {
+        mContext.shareUrl(url)
+    }
+}
+
+class MainActivity : AppCompatActivity(), AdvancedWebView.Listener {
+
+    private var mToShare: String? = null
+    private var mToCall: String? = null
+    private var mAccount: FirefoxAccount? = null
+
+    @SuppressLint("SetJavaScriptEnabled")
+    override fun onCreate(savedInstanceState: Bundle?) {
+        super.onCreate(savedInstanceState)
+        setContentView(R.layout.activity_main)
+
+        WebView.setWebContentsDebuggingEnabled(BuildConfig.DEBUG)
+        webView.apply {
+            setListener(this@MainActivity, this@MainActivity)
+            addJavascriptInterface(WebAppInterface(this@MainActivity), JS_INTERFACE_NAME)
+            setLayerType(View.LAYER_TYPE_HARDWARE, null)
+            webChromeClient = LoggingWebChromeClient()
+
+            settings.apply {
+                userAgentString = "Send Android"
+                allowUniversalAccessFromFileURLs = true
+                javaScriptEnabled = true
+            }
+        }
+
+        val type = intent.type
+        if (Intent.ACTION_SEND == intent.action && type != null) {
+            if (type == "text/plain") {
+                val sharedText = intent.getStringExtra(Intent.EXTRA_TEXT)
+                // Log.d(TAG_INTENT, "text/plain $sharedText")
+                mToShare = "data:text/plain;base64," + Base64.encodeToString(sharedText.toByteArray(), 16).trim()
+            } else if (type.startsWith("image/")) {
+                val imageUri = intent.getParcelableExtra(Intent.EXTRA_STREAM) as Uri
+                // Log.d(TAG_INTENT, "image/ $imageUri")
+                mToShare = "data:text/plain;base64," + Base64.encodeToString(imageUri.path.toByteArray(), 16).trim()
+            }
+        }
+        webView.loadUrl("file:///android_asset/android.html")
+    }
+
+    fun beginOAuthFlow() {
+        Config.release().then { value ->
+            mAccount = FirefoxAccount(value, "20f7931c9054d833", "https://send.firefox.com/fxa/android-redirect.html")
+            mAccount?.beginOAuthFlow(arrayOf("profile", "https://identity.mozilla.com/apps/send"), true)
+                    ?.then { url ->
+                        // Log.d(TAG_CONFIG, "GOT A URL $url")
+                        this@MainActivity.runOnUiThread {
+                            webView.loadUrl(url)
+                        }
+                        FxaResult.fromValue(Unit)
+                    }
+            // Log.d(TAG_CONFIG, "CREATED FIREFOXACCOUNT")
+            FxaResult.fromValue(Unit)
+        }
+    }
+
+    fun shareUrl(url: String) {
+        val shareIntent = Intent().apply {
+            action = Intent.ACTION_SEND
+            type = "text/plain"
+            putExtra(Intent.EXTRA_TEXT, url)
+        }
+
+        val components = arrayOf(ComponentName(applicationContext, MainActivity::class.java))
+        val chooser = Intent.createChooser(shareIntent, "")
+                .putExtra(Intent.EXTRA_EXCLUDE_COMPONENTS, components)
+
+        startActivity(chooser)
+    }
+
+    override fun onResume() {
+        super.onResume()
+        webView.onResume()
+    }
+
+    override fun onPause() {
+        webView.onPause()
+        super.onPause()
+    }
+
+    override fun onDestroy() {
+        webView.onDestroy()
+        super.onDestroy()
+    }
+
+    override fun onActivityResult(requestCode: Int, resultCode: Int, intent: Intent?) {
+        super.onActivityResult(requestCode, resultCode, intent)
+        webView.onActivityResult(requestCode, resultCode, intent)
+    }
+
+    override fun onBackPressed() {
+        if (!webView.onBackPressed()) {
+            return
+        }
+        super.onBackPressed()
+    }
+
+    override fun onPageStarted(url: String, favicon: Bitmap?) {
+        if (url.startsWith("https://send.firefox.com/fxa/android-redirect.html")) {
+            // We load this here so the user doesn't see the android-redirect.html page
+            webView.loadUrl("file:///android_asset/android.html")
+
+            val uri = Uri.parse(url)
+            uri.getQueryParameter("code")?.let { code ->
+                uri.getQueryParameter("state")?.let { state ->
+                    mAccount?.completeOAuthFlow(code, state)?.whenComplete { info ->
+                        mAccount?.getProfile(false)?.then { profile ->
+                            val profileJsonPayload = JSONObject()
+                                    .put("accessToken", info.accessToken)
+                                    .put("keys", info.keys)
+                                    .put("avatar", profile.avatar)
+                                    .put("displayName", profile.displayName)
+                                    .put("email", profile.email)
+                                    .put("uid", profile.uid).toString()
+                            mToCall = "finishLogin($profileJsonPayload)"
+                            this@MainActivity.runOnUiThread {
+                                // Clear the history so that the user can't use the back button to see broken pages
+                                // that were inserted into the history by the login process.
+                                webView.clearHistory()
+
+                                // We also reload this here because we need to make sure onPageFinished runs after mToCall has been set.
+                                // We can't guarantee that onPageFinished wasn't already called at this point.
+                                webView.loadUrl("file:///android_asset/android.html")
+                            }
+                            FxaResult.fromValue(Unit)
+                        }
+                    }
+                }
+            }
+        }
+        if (!url.startsWith("file:///android_asset/") && !url.startsWith("https://accounts.firefox.com/")) {
+            // Don't allow loading anything other than the app in our webview
+            // It should be possible to do this with shouldOverrideUrlLoading
+            // but it didn't seem to be working, so this works as a hack.
+            webView.loadUrl("file:///android_asset/android.html")
+            Log.d(TAG_MAIN, "BAD URL " + url)
+        } else {
+            // Log.d(TAG_MAIN, "onPageStarted " + url)
+        }
+    }
+
+    override fun onPageFinished(url: String) {
+        // Log.d(TAG_MAIN, "onPageFinished")
+        if (mToShare != null) {
+            // Log.d(TAG_INTENT, mToShare)
+
+            webView.postWebMessage(WebMessage(mToShare), Uri.EMPTY)
+            mToShare = null
+        }
+        if (mToCall != null) {
+            this@MainActivity.runOnUiThread {
+                webView.evaluateJavascript(mToCall) {
+                    mToCall = null
+                }
+            }
+        }
+    }
+
+    override fun onPageError(errorCode: Int, description: String, failingUrl: String) {
+        Log.d(TAG_MAIN, "onPageError($errorCode, $description, $failingUrl)")
+    }
+
+    override fun onDownloadRequested(url: String,
+                                     suggestedFilename: String,
+                                     mimeType: String,
+                                     contentLength: Long,
+                                     contentDisposition: String,
+                                     userAgent: String) {
+        // Log.d(TAG_MAIN, "onDownloadRequested")
+    }
+
+    override fun onExternalPageRequest(url: String) {
+        // Log.d(TAG_MAIN, "onExternalPageRequest($url)")
+    }
+
+    companion object {
+        private const val TAG_MAIN = "MAIN"
+        private const val TAG_INTENT = "INTENT"
+        private const val TAG_CONFIG = "CONFIG"
+        private const val JS_INTERFACE_NAME = "Android"
+    }
+}
--- a/android/app/src/main/res/drawable-v24/ic_launcher_foreground.xml
+++ b/android/app/src/main/res/drawable-v24/ic_launcher_foreground.xml
@@ -0,0 +1,97 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+        xmlns:aapt="http://schemas.android.com/aapt"
+        android:width="108dp"
+        android:height="108dp"
+        android:viewportWidth="92.5"
+        android:viewportHeight="92.5">
+    <group android:translateX="27.75"
+            android:translateY="28.25">
+      <path
+          android:pathData="M18.1313,0.0003C8.1363,0.0003 0.0003,7.9743 0.0003,17.7673C0.0003,18.8133 0.8523,19.6643 1.8983,19.6643L16.2333,19.6643L16.2333,29.1093L11.7773,24.6963C11.0413,23.9613 9.8403,23.9613 9.0653,24.6963C8.3293,25.4323 8.3293,26.6323 9.0653,27.4063L16.7753,35.1093C16.8143,35.1483 16.8533,35.1873 16.9303,35.2253L16.9693,35.2253C17.0083,35.2643 17.0463,35.3033 17.0853,35.3033L17.1243,35.3033C17.1633,35.3423 17.2013,35.3423 17.2403,35.3803L17.2793,35.3803C17.3183,35.4193 17.3953,35.4193 17.4343,35.4583C17.4733,35.4963 17.5503,35.4963 17.5893,35.4963C17.6283,35.4963 17.7053,35.5353 17.7443,35.5353L17.7823,35.5353C17.8213,35.5353 17.8603,35.5353 17.9373,35.5743L18.3253,35.5743C18.3643,35.5743 18.4023,35.5743 18.4803,35.5353L18.5193,35.5353C18.5573,35.5353 18.6353,35.4963 18.6743,35.4963C18.7123,35.4963 18.7903,35.4583 18.8293,35.4193C18.8673,35.3803 18.9453,35.3803 18.9843,35.3423C19.0223,35.3033 19.0613,35.3033 19.1003,35.2643L19.1383,35.2643C19.1773,35.2253 19.2163,35.1873 19.2553,35.1873L19.2933,35.1873C19.3323,35.1483 19.3713,35.1093 19.4483,35.0713L27.1583,27.3673C27.8943,26.6323 27.8943,25.4323 27.1583,24.6583C26.4223,23.9223 25.2213,23.9223 24.4463,24.6583L20.0303,29.1093L20.0303,19.7033L34.3643,19.7033C35.4103,19.7033 36.2633,18.8513 36.2633,17.8063C36.2633,7.9743 28.1273,0.0003 18.1313,0.0003ZM3.9133,15.8713C4.8813,9.0963 10.8863,3.8323 18.1313,3.8323C25.3763,3.8323 31.3423,9.0963 32.3113,15.8713L3.9133,15.8713Z"
+          android:fillType="nonZero">
+        <aapt:attr name="android:fillColor">
+          <gradient
+              android:startY="2.9809632"
+              android:startX="25.805717"
+              android:endY="31.687763"
+              android:endX="8.569217"
+              android:type="linear">
+            <item android:offset="0" android:color="#FFFF980E"/>
+            <item android:offset="0.21" android:color="#FFFF7139"/>
+            <item android:offset="0.36" android:color="#FFFF5854"/>
+            <item android:offset="0.46" android:color="#FFFF4F5E"/>
+            <item android:offset="0.69" android:color="#FFFF3750"/>
+            <item android:offset="0.86" android:color="#FFF92261"/>
+            <item android:offset="1" android:color="#FFF5156C"/>
+          </gradient>
+        </aapt:attr>
+      </path>
+      <path
+          android:pathData="M18.1313,0.0003C8.1363,0.0003 0.0003,7.9743 0.0003,17.7673C0.0003,18.8133 0.8523,19.6643 1.8983,19.6643L16.2333,19.6643L16.2333,29.1093L11.7773,24.6963C11.0413,23.9613 9.8403,23.9613 9.0653,24.6963C8.3293,25.4323 8.3293,26.6323 9.0653,27.4063L16.7753,35.1093C16.8143,35.1483 16.8533,35.1873 16.9303,35.2253L16.9693,35.2253C17.0083,35.2643 17.0463,35.3033 17.0853,35.3033L17.1243,35.3033C17.1633,35.3423 17.2013,35.3423 17.2403,35.3803L17.2793,35.3803C17.3183,35.4193 17.3953,35.4193 17.4343,35.4583C17.4733,35.4963 17.5503,35.4963 17.5893,35.4963C17.6283,35.4963 17.7053,35.5353 17.7443,35.5353L17.7823,35.5353C17.8213,35.5353 17.8603,35.5353 17.9373,35.5743L18.3253,35.5743C18.3643,35.5743 18.4023,35.5743 18.4803,35.5353L18.5193,35.5353C18.5573,35.5353 18.6353,35.4963 18.6743,35.4963C18.7123,35.4963 18.7903,35.4583 18.8293,35.4193C18.8673,35.3803 18.9453,35.3803 18.9843,35.3423C19.0223,35.3033 19.0613,35.3033 19.1003,35.2643L19.1383,35.2643C19.1773,35.2253 19.2163,35.1873 19.2553,35.1873L19.2933,35.1873C19.3323,35.1483 19.3713,35.1093 19.4483,35.0713L27.1583,27.3673C27.8943,26.6323 27.8943,25.4323 27.1583,24.6583C26.4223,23.9223 25.2213,23.9223 24.4463,24.6583L20.0303,29.1093L20.0303,19.7033L34.3643,19.7033C35.4103,19.7033 36.2633,18.8513 36.2633,17.8063C36.2633,7.9743 28.1273,0.0003 18.1313,0.0003ZM3.9133,15.8713C4.8813,9.0963 10.8863,3.8323 18.1313,3.8323C25.3763,3.8323 31.3423,9.0963 32.3113,15.8713L3.9133,15.8713Z"
+          android:fillType="nonZero">
+        <aapt:attr name="android:fillColor">
+          <gradient
+              android:startY="2.9809632"
+              android:startX="25.805717"
+              android:endY="31.687763"
+              android:endX="8.569217"
+              android:type="linear">
+            <item android:offset="0" android:color="#CCFFF44F"/>
+            <item android:offset="0.75" android:color="#00FFF44F"/>
+            <item android:offset="1" android:color="#00FFF44F"/>
+          </gradient>
+        </aapt:attr>
+      </path>
+      <path
+          android:pathData="M20.0303,3.9483C26.3833,4.8003 31.4203,9.6773 32.3113,15.8713L23.8653,15.8713C21.7733,15.8713 20.0683,17.5743 20.0683,19.6643L34.3643,19.6643C35.4103,19.6643 36.2633,18.8133 36.2633,17.7673C36.2633,10.9933 31.4593,7.6643 27.3913,5.7673C23.6333,4.0253 20.0303,3.9483 20.0303,3.9483Z">
+        <aapt:attr name="android:fillColor">
+          <gradient
+              android:startY="20.534323"
+              android:startX="22.366518"
+              android:endY="7.772023"
+              android:endX="30.234228"
+              android:type="linear">
+            <item android:offset="0" android:color="#FF3A8EE6"/>
+            <item android:offset="0.24" android:color="#FF5C79F0"/>
+            <item android:offset="0.63" android:color="#FF9059FF"/>
+            <item android:offset="1" android:color="#FFC139E6"/>
+          </gradient>
+        </aapt:attr>
+      </path>
+      <path
+          android:pathData="M32.2333,15.4453C33.5123,16.4903 34.8293,17.4963 36.0693,18.5803C36.1853,18.3483 36.2633,18.0773 36.2633,17.7673C36.2633,10.9933 31.4593,7.6643 27.3913,5.7673C23.6333,4.0253 20.0303,3.9483 20.0303,3.9483C26.2283,4.7613 31.1873,9.4843 32.2333,15.4453Z">
+        <aapt:attr name="android:fillColor">
+          <gradient
+              android:startY="8.195093"
+              android:startX="30.235817"
+              android:endY="12.836453"
+              android:endX="26.934916"
+              android:type="linear">
+            <item android:offset="0" android:color="#7E6E008B"/>
+            <item android:offset="0.5" android:color="#00C846CB"/>
+            <item android:offset="1" android:color="#00C846CB"/>
+          </gradient>
+        </aapt:attr>
+      </path>
+      <path
+          android:pathData="M32.0013,15.8713L23.8653,15.8713C21.7733,15.8713 20.0683,17.5743 20.0683,19.6643L34.3643,19.6643C34.9453,19.6643 35.4883,19.3933 35.8373,18.9673C34.5583,17.9223 33.2793,16.9163 32.0013,15.8713Z">
+        <aapt:attr name="android:fillColor">
+          <gradient
+              android:startY="18.076923"
+              android:startX="31.69962"
+              android:endY="17.594997"
+              android:endX="23.366179"
+              android:type="linear">
+            <item android:offset="0" android:color="#006A2BEA"/>
+            <item android:offset="0.14" android:color="#006A2BEA"/>
+            <item android:offset="0.3" android:color="#15662CE6"/>
+            <item android:offset="0.47" android:color="#2C592FDB"/>
+            <item android:offset="0.64" android:color="#424534C9"/>
+            <item android:offset="0.82" android:color="#59283BAF"/>
+            <item android:offset="0.99" android:color="#7003448D"/>
+            <item android:offset="1" android:color="#7200458B"/>
+          </gradient>
+        </aapt:attr>
+      </path>
+    </group>
+</vector>
--- a/android/app/src/main/res/drawable/ic_launcher_foreground.xml
+++ b/android/app/src/main/res/drawable/ic_launcher_foreground.xml
@@ -0,0 +1,97 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    xmlns:aapt="http://schemas.android.com/aapt"
+    android:width="108dp"
+    android:height="108dp"
+    android:viewportWidth="92.5"
+    android:viewportHeight="92.5">
+  <group android:translateX="27.75"
+      android:translateY="28.25">
+    <path
+        android:pathData="M18.1313,0.0003C8.1363,0.0003 0.0003,7.9743 0.0003,17.7673C0.0003,18.8133 0.8523,19.6643 1.8983,19.6643L16.2333,19.6643L16.2333,29.1093L11.7773,24.6963C11.0413,23.9613 9.8403,23.9613 9.0653,24.6963C8.3293,25.4323 8.3293,26.6323 9.0653,27.4063L16.7753,35.1093C16.8143,35.1483 16.8533,35.1873 16.9303,35.2253L16.9693,35.2253C17.0083,35.2643 17.0463,35.3033 17.0853,35.3033L17.1243,35.3033C17.1633,35.3423 17.2013,35.3423 17.2403,35.3803L17.2793,35.3803C17.3183,35.4193 17.3953,35.4193 17.4343,35.4583C17.4733,35.4963 17.5503,35.4963 17.5893,35.4963C17.6283,35.4963 17.7053,35.5353 17.7443,35.5353L17.7823,35.5353C17.8213,35.5353 17.8603,35.5353 17.9373,35.5743L18.3253,35.5743C18.3643,35.5743 18.4023,35.5743 18.4803,35.5353L18.5193,35.5353C18.5573,35.5353 18.6353,35.4963 18.6743,35.4963C18.7123,35.4963 18.7903,35.4583 18.8293,35.4193C18.8673,35.3803 18.9453,35.3803 18.9843,35.3423C19.0223,35.3033 19.0613,35.3033 19.1003,35.2643L19.1383,35.2643C19.1773,35.2253 19.2163,35.1873 19.2553,35.1873L19.2933,35.1873C19.3323,35.1483 19.3713,35.1093 19.4483,35.0713L27.1583,27.3673C27.8943,26.6323 27.8943,25.4323 27.1583,24.6583C26.4223,23.9223 25.2213,23.9223 24.4463,24.6583L20.0303,29.1093L20.0303,19.7033L34.3643,19.7033C35.4103,19.7033 36.2633,18.8513 36.2633,17.8063C36.2633,7.9743 28.1273,0.0003 18.1313,0.0003ZM3.9133,15.8713C4.8813,9.0963 10.8863,3.8323 18.1313,3.8323C25.3763,3.8323 31.3423,9.0963 32.3113,15.8713L3.9133,15.8713Z"
+        android:fillType="nonZero">
+      <aapt:attr name="android:fillColor">
+        <gradient 
+            android:startY="2.9809632"
+            android:startX="25.805717"
+            android:endY="31.687763"
+            android:endX="8.569217"
+            android:type="linear">
+          <item android:offset="0" android:color="#FFFF980E"/>
+          <item android:offset="0.21" android:color="#FFFF7139"/>
+          <item android:offset="0.36" android:color="#FFFF5854"/>
+          <item android:offset="0.46" android:color="#FFFF4F5E"/>
+          <item android:offset="0.69" android:color="#FFFF3750"/>
+          <item android:offset="0.86" android:color="#FFF92261"/>
+          <item android:offset="1" android:color="#FFF5156C"/>
+        </gradient>
+      </aapt:attr>
+    </path>
+    <path
+        android:pathData="M18.1313,0.0003C8.1363,0.0003 0.0003,7.9743 0.0003,17.7673C0.0003,18.8133 0.8523,19.6643 1.8983,19.6643L16.2333,19.6643L16.2333,29.1093L11.7773,24.6963C11.0413,23.9613 9.8403,23.9613 9.0653,24.6963C8.3293,25.4323 8.3293,26.6323 9.0653,27.4063L16.7753,35.1093C16.8143,35.1483 16.8533,35.1873 16.9303,35.2253L16.9693,35.2253C17.0083,35.2643 17.0463,35.3033 17.0853,35.3033L17.1243,35.3033C17.1633,35.3423 17.2013,35.3423 17.2403,35.3803L17.2793,35.3803C17.3183,35.4193 17.3953,35.4193 17.4343,35.4583C17.4733,35.4963 17.5503,35.4963 17.5893,35.4963C17.6283,35.4963 17.7053,35.5353 17.7443,35.5353L17.7823,35.5353C17.8213,35.5353 17.8603,35.5353 17.9373,35.5743L18.3253,35.5743C18.3643,35.5743 18.4023,35.5743 18.4803,35.5353L18.5193,35.5353C18.5573,35.5353 18.6353,35.4963 18.6743,35.4963C18.7123,35.4963 18.7903,35.4583 18.8293,35.4193C18.8673,35.3803 18.9453,35.3803 18.9843,35.3423C19.0223,35.3033 19.0613,35.3033 19.1003,35.2643L19.1383,35.2643C19.1773,35.2253 19.2163,35.1873 19.2553,35.1873L19.2933,35.1873C19.3323,35.1483 19.3713,35.1093 19.4483,35.0713L27.1583,27.3673C27.8943,26.6323 27.8943,25.4323 27.1583,24.6583C26.4223,23.9223 25.2213,23.9223 24.4463,24.6583L20.0303,29.1093L20.0303,19.7033L34.3643,19.7033C35.4103,19.7033 36.2633,18.8513 36.2633,17.8063C36.2633,7.9743 28.1273,0.0003 18.1313,0.0003ZM3.9133,15.8713C4.8813,9.0963 10.8863,3.8323 18.1313,3.8323C25.3763,3.8323 31.3423,9.0963 32.3113,15.8713L3.9133,15.8713Z"
+        android:fillType="nonZero">
+      <aapt:attr name="android:fillColor">
+        <gradient 
+            android:startY="2.9809632"
+            android:startX="25.805717"
+            android:endY="31.687763"
+            android:endX="8.569217"
+            android:type="linear">
+          <item android:offset="0" android:color="#CCFFF44F"/>
+          <item android:offset="0.75" android:color="#00FFF44F"/>
+          <item android:offset="1" android:color="#00FFF44F"/>
+        </gradient>
+      </aapt:attr>
+    </path>
+    <path
+        android:pathData="M20.0303,3.9483C26.3833,4.8003 31.4203,9.6773 32.3113,15.8713L23.8653,15.8713C21.7733,15.8713 20.0683,17.5743 20.0683,19.6643L34.3643,19.6643C35.4103,19.6643 36.2633,18.8133 36.2633,17.7673C36.2633,10.9933 31.4593,7.6643 27.3913,5.7673C23.6333,4.0253 20.0303,3.9483 20.0303,3.9483Z">
+      <aapt:attr name="android:fillColor">
+        <gradient 
+            android:startY="20.534323"
+            android:startX="22.366518"
+            android:endY="7.772023"
+            android:endX="30.234228"
+            android:type="linear">
+          <item android:offset="0" android:color="#FF3A8EE6"/>
+          <item android:offset="0.24" android:color="#FF5C79F0"/>
+          <item android:offset="0.63" android:color="#FF9059FF"/>
+          <item android:offset="1" android:color="#FFC139E6"/>
+        </gradient>
+      </aapt:attr>
+    </path>
+    <path
+        android:pathData="M32.2333,15.4453C33.5123,16.4903 34.8293,17.4963 36.0693,18.5803C36.1853,18.3483 36.2633,18.0773 36.2633,17.7673C36.2633,10.9933 31.4593,7.6643 27.3913,5.7673C23.6333,4.0253 20.0303,3.9483 20.0303,3.9483C26.2283,4.7613 31.1873,9.4843 32.2333,15.4453Z">
+      <aapt:attr name="android:fillColor">
+        <gradient 
+            android:startY="8.195093"
+            android:startX="30.235817"
+            android:endY="12.836453"
+            android:endX="26.934916"
+            android:type="linear">
+          <item android:offset="0" android:color="#7E6E008B"/>
+          <item android:offset="0.5" android:color="#00C846CB"/>
+          <item android:offset="1" android:color="#00C846CB"/>
+        </gradient>
+      </aapt:attr>
+    </path>
+    <path
+        android:pathData="M32.0013,15.8713L23.8653,15.8713C21.7733,15.8713 20.0683,17.5743 20.0683,19.6643L34.3643,19.6643C34.9453,19.6643 35.4883,19.3933 35.8373,18.9673C34.5583,17.9223 33.2793,16.9163 32.0013,15.8713Z">
+      <aapt:attr name="android:fillColor">
+        <gradient 
+            android:startY="18.076923"
+            android:startX="31.69962"
+            android:endY="17.594997"
+            android:endX="23.366179"
+            android:type="linear">
+          <item android:offset="0" android:color="#006A2BEA"/>
+          <item android:offset="0.14" android:color="#006A2BEA"/>
+          <item android:offset="0.3" android:color="#15662CE6"/>
+          <item android:offset="0.47" android:color="#2C592FDB"/>
+          <item android:offset="0.64" android:color="#424534C9"/>
+          <item android:offset="0.82" android:color="#59283BAF"/>
+          <item android:offset="0.99" android:color="#7003448D"/>
+          <item android:offset="1" android:color="#7200458B"/>
+        </gradient>
+      </aapt:attr>
+    </path>
+  </group>
+</vector>
--- a/android/app/src/main/res/layout/activity_main.xml
+++ b/android/app/src/main/res/layout/activity_main.xml
@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="utf-8"?>
+<im.delight.android.webview.AdvancedWebView xmlns:android="http://schemas.android.com/apk/res/android"
+    xmlns:tools="http://schemas.android.com/tools"
+    android:id="@+id/webView"
+    android:layout_width="match_parent"
+    android:layout_height="match_parent"
+    tools:context=".MainActivity" />
--- a/android/app/src/main/res/mipmap-anydpi-v26/ic_launcher.xml
+++ b/android/app/src/main/res/mipmap-anydpi-v26/ic_launcher.xml
@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="utf-8"?>
+<adaptive-icon xmlns:android="http://schemas.android.com/apk/res/android">
+    <background android:drawable="@color/ic_launcher_background"/>
+    <foreground android:drawable="@drawable/ic_launcher_foreground"/>
+</adaptive-icon>
--- a/android/app/src/main/res/mipmap-anydpi-v26/ic_launcher_round.xml
+++ b/android/app/src/main/res/mipmap-anydpi-v26/ic_launcher_round.xml
@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="utf-8"?>
+<adaptive-icon xmlns:android="http://schemas.android.com/apk/res/android">
+    <background android:drawable="@color/ic_launcher_background"/>
+    <foreground android:drawable="@drawable/ic_launcher_foreground"/>
+</adaptive-icon>
--- a/android/app/src/main/res/mipmap-hdpi/ic_launcher.png
+++ b/android/app/src/main/res/mipmap-hdpi/ic_launcher.png
--- a/android/app/src/main/res/mipmap-hdpi/ic_launcher_round.png
+++ b/android/app/src/main/res/mipmap-hdpi/ic_launcher_round.png
--- a/android/app/src/main/res/mipmap-mdpi/ic_launcher.png
+++ b/android/app/src/main/res/mipmap-mdpi/ic_launcher.png
--- a/android/app/src/main/res/mipmap-mdpi/ic_launcher_round.png
+++ b/android/app/src/main/res/mipmap-mdpi/ic_launcher_round.png
--- a/android/app/src/main/res/mipmap-xhdpi/ic_launcher.png
+++ b/android/app/src/main/res/mipmap-xhdpi/ic_launcher.png
--- a/android/app/src/main/res/mipmap-xhdpi/ic_launcher_round.png
+++ b/android/app/src/main/res/mipmap-xhdpi/ic_launcher_round.png
--- a/android/app/src/main/res/mipmap-xxhdpi/ic_launcher.png
+++ b/android/app/src/main/res/mipmap-xxhdpi/ic_launcher.png
--- a/android/app/src/main/res/mipmap-xxhdpi/ic_launcher_round.png
+++ b/android/app/src/main/res/mipmap-xxhdpi/ic_launcher_round.png
--- a/android/app/src/main/res/mipmap-xxxhdpi/ic_launcher.png
+++ b/android/app/src/main/res/mipmap-xxxhdpi/ic_launcher.png
--- a/android/app/src/main/res/mipmap-xxxhdpi/ic_launcher_round.png
+++ b/android/app/src/main/res/mipmap-xxxhdpi/ic_launcher_round.png
--- a/android/app/src/main/res/values/colors.xml
+++ b/android/app/src/main/res/values/colors.xml
@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="utf-8"?>
+<resources>
+    <color name="colorPrimary">#3F51B5</color>
+    <color name="colorPrimaryDark">#303F9F</color>
+    <color name="colorAccent">#FF4081</color>
+</resources>
--- a/android/app/src/main/res/values/ic_launcher_background.xml
+++ b/android/app/src/main/res/values/ic_launcher_background.xml
@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="utf-8"?>
+<resources>
+    <color name="ic_launcher_background">#220033</color>
+</resources>
--- a/android/app/src/main/res/values/strings.xml
+++ b/android/app/src/main/res/values/strings.xml
@@ -0,0 +1,3 @@
+<resources>
+    <string name="app_name">Send</string>
+</resources>
--- a/android/app/src/main/res/values/styles.xml
+++ b/android/app/src/main/res/values/styles.xml
@@ -0,0 +1,11 @@
+<resources>
+
+    <!-- Base application theme. -->
+    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
+        <!-- Customize your theme here. -->
+        <item name="colorPrimary">@color/colorPrimary</item>
+        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
+        <item name="colorAccent">@color/colorAccent</item>
+    </style>
+
+</resources>
--- a/android/build.gradle
+++ b/android/build.gradle
@@ -0,0 +1,27 @@
+// Top-level build file where you can add configuration options common to all sub-projects/modules.
+
+buildscript {
+    ext.kotlin_version = '1.3.21'
+    ext.android_components_version = '0.26.0'
+    repositories {
+        google()
+        jcenter()
+    }
+    dependencies {
+        classpath 'com.android.tools.build:gradle:3.3.2'
+        classpath "org.jetbrains.kotlin:kotlin-gradle-plugin:1.3.21"
+    }
+}
+
+allprojects {
+    repositories {
+        google()
+        maven { url "https://maven.mozilla.org/maven2" }
+        jcenter()
+        maven { url "https://jitpack.io" }
+    }
+}
+
+task clean(type: Delete) {
+    delete rootProject.buildDir
+}
--- a/android/gradle.properties
+++ b/android/gradle.properties
@@ -0,0 +1,13 @@
+# Project-wide Gradle settings.
+# IDE (e.g. Android Studio) users:
+# Gradle settings configured through the IDE *will override*
+# any settings specified in this file.
+# For more details on how to configure your build environment visit
+# http://www.gradle.org/docs/current/userguide/build_environment.html
+# Specifies the JVM arguments used for the daemon process.
+# The setting is particularly useful for tweaking memory settings.
+org.gradle.jvmargs=-Xmx1536m
+# When configured, Gradle will run in incubating parallel mode.
+# This option should only be used with decoupled projects. More details, visit
+# http://www.gradle.org/docs/current/userguide/multi_project_builds.html#sec:decoupled_projects
+# org.gradle.parallel=true
--- a/android/gradle/wrapper/gradle-wrapper.jar
+++ b/android/gradle/wrapper/gradle-wrapper.jar
--- a/android/gradle/wrapper/gradle-wrapper.properties
+++ b/android/gradle/wrapper/gradle-wrapper.properties
@@ -0,0 +1,6 @@
+#Tue Feb 19 08:34:25 EST 2019
+distributionBase=GRADLE_USER_HOME
+distributionPath=wrapper/dists
+zipStoreBase=GRADLE_USER_HOME
+zipStorePath=wrapper/dists
+distributionUrl=https\://services.gradle.org/distributions/gradle-4.10.1-all.zip
--- a/android/gradlew
+++ b/android/gradlew
@@ -0,0 +1,172 @@
+#!/usr/bin/env sh
+
+##############################################################################
+##
+##  Gradle start up script for UN*X
+##
+##############################################################################
+
+# Attempt to set APP_HOME
+# Resolve links: $0 may be a link
+PRG="$0"
+# Need this for relative symlinks.
+while [ -h "$PRG" ] ; do
+    ls=`ls -ld "$PRG"`
+    link=`expr "$ls" : '.*-> \(.*\)$'`
+    if expr "$link" : '/.*' > /dev/null; then
+        PRG="$link"
+    else
+        PRG=`dirname "$PRG"`"/$link"
+    fi
+done
+SAVED="`pwd`"
+cd "`dirname \"$PRG\"`/" >/dev/null
+APP_HOME="`pwd -P`"
+cd "$SAVED" >/dev/null
+
+APP_NAME="Gradle"
+APP_BASE_NAME=`basename "$0"`
+
+# Add default JVM options here. You can also use JAVA_OPTS and GRADLE_OPTS to pass JVM options to this script.
+DEFAULT_JVM_OPTS=""
+
+# Use the maximum available, or set MAX_FD != -1 to use that value.
+MAX_FD="maximum"
+
+warn () {
+    echo "$*"
+}
+
+die () {
+    echo
+    echo "$*"
+    echo
+    exit 1
+}
+
+# OS specific support (must be 'true' or 'false').
+cygwin=false
+msys=false
+darwin=false
+nonstop=false
+case "`uname`" in
+  CYGWIN* )
+    cygwin=true
+    ;;
+  Darwin* )
+    darwin=true
+    ;;
+  MINGW* )
+    msys=true
+    ;;
+  NONSTOP* )
+    nonstop=true
+    ;;
+esac
+
+CLASSPATH=$APP_HOME/gradle/wrapper/gradle-wrapper.jar
+
+# Determine the Java command to use to start the JVM.
+if [ -n "$JAVA_HOME" ] ; then
+    if [ -x "$JAVA_HOME/jre/sh/java" ] ; then
+        # IBM's JDK on AIX uses strange locations for the executables
+        JAVACMD="$JAVA_HOME/jre/sh/java"
+    else
+        JAVACMD="$JAVA_HOME/bin/java"
+    fi
+    if [ ! -x "$JAVACMD" ] ; then
+        die "ERROR: JAVA_HOME is set to an invalid directory: $JAVA_HOME
+
+Please set the JAVA_HOME variable in your environment to match the
+location of your Java installation."
+    fi
+else
+    JAVACMD="java"
+    which java >/dev/null 2>&1 || die "ERROR: JAVA_HOME is not set and no 'java' command could be found in your PATH.
+
+Please set the JAVA_HOME variable in your environment to match the
+location of your Java installation."
+fi
+
+# Increase the maximum file descriptors if we can.
+if [ "$cygwin" = "false" -a "$darwin" = "false" -a "$nonstop" = "false" ] ; then
+    MAX_FD_LIMIT=`ulimit -H -n`
+    if [ $? -eq 0 ] ; then
+        if [ "$MAX_FD" = "maximum" -o "$MAX_FD" = "max" ] ; then
+            MAX_FD="$MAX_FD_LIMIT"
+        fi
+        ulimit -n $MAX_FD
+        if [ $? -ne 0 ] ; then
+            warn "Could not set maximum file descriptor limit: $MAX_FD"
+        fi
+    else
+        warn "Could not query maximum file descriptor limit: $MAX_FD_LIMIT"
+    fi
+fi
+
+# For Darwin, add options to specify how the application appears in the dock
+if $darwin; then
+    GRADLE_OPTS="$GRADLE_OPTS \"-Xdock:name=$APP_NAME\" \"-Xdock:icon=$APP_HOME/media/gradle.icns\""
+fi
+
+# For Cygwin, switch paths to Windows format before running java
+if $cygwin ; then
+    APP_HOME=`cygpath --path --mixed "$APP_HOME"`
+    CLASSPATH=`cygpath --path --mixed "$CLASSPATH"`
+    JAVACMD=`cygpath --unix "$JAVACMD"`
+
+    # We build the pattern for arguments to be converted via cygpath
+    ROOTDIRSRAW=`find -L / -maxdepth 1 -mindepth 1 -type d 2>/dev/null`
+    SEP=""
+    for dir in $ROOTDIRSRAW ; do
+        ROOTDIRS="$ROOTDIRS$SEP$dir"
+        SEP="|"
+    done
+    OURCYGPATTERN="(^($ROOTDIRS))"
+    # Add a user-defined pattern to the cygpath arguments
+    if [ "$GRADLE_CYGPATTERN" != "" ] ; then
+        OURCYGPATTERN="$OURCYGPATTERN|($GRADLE_CYGPATTERN)"
+    fi
+    # Now convert the arguments - kludge to limit ourselves to /bin/sh
+    i=0
+    for arg in "$@" ; do
+        CHECK=`echo "$arg"|egrep -c "$OURCYGPATTERN" -`
+        CHECK2=`echo "$arg"|egrep -c "^-"`                                 ### Determine if an option
+
+        if [ $CHECK -ne 0 ] && [ $CHECK2 -eq 0 ] ; then                    ### Added a condition
+            eval `echo args$i`=`cygpath --path --ignore --mixed "$arg"`
+        else
+            eval `echo args$i`="\"$arg\""
+        fi
+        i=$((i+1))
+    done
+    case $i in
+        (0) set -- ;;
+        (1) set -- "$args0" ;;
+        (2) set -- "$args0" "$args1" ;;
+        (3) set -- "$args0" "$args1" "$args2" ;;
+        (4) set -- "$args0" "$args1" "$args2" "$args3" ;;
+        (5) set -- "$args0" "$args1" "$args2" "$args3" "$args4" ;;
+        (6) set -- "$args0" "$args1" "$args2" "$args3" "$args4" "$args5" ;;
+        (7) set -- "$args0" "$args1" "$args2" "$args3" "$args4" "$args5" "$args6" ;;
+        (8) set -- "$args0" "$args1" "$args2" "$args3" "$args4" "$args5" "$args6" "$args7" ;;
+        (9) set -- "$args0" "$args1" "$args2" "$args3" "$args4" "$args5" "$args6" "$args7" "$args8" ;;
+    esac
+fi
+
+# Escape application args
+save () {
+    for i do printf %s\\n "$i" | sed "s/'/'\\\\''/g;1s/^/'/;\$s/\$/' \\\\/" ; done
+    echo " "
+}
+APP_ARGS=$(save "$@")
+
+# Collect all arguments for the java command, following the shell quoting and substitution rules
+eval set -- $DEFAULT_JVM_OPTS $JAVA_OPTS $GRADLE_OPTS "\"-Dorg.gradle.appname=$APP_BASE_NAME\"" -classpath "\"$CLASSPATH\"" org.gradle.wrapper.GradleWrapperMain "$APP_ARGS"
+
+# by default we should be in the correct project dir, but when run from Finder on Mac, the cwd is wrong
+if [ "$(uname)" = "Darwin" ] && [ "$HOME" = "$PWD" ]; then
+  cd "$(dirname "$0")"
+fi
+
+exec "$JAVACMD" "$@"
--- a/android/gradlew.bat
+++ b/android/gradlew.bat
@@ -0,0 +1,84 @@
+@if "%DEBUG%" == "" @echo off
+@rem ##########################################################################
+@rem
+@rem  Gradle startup script for Windows
+@rem
+@rem ##########################################################################
+
+@rem Set local scope for the variables with windows NT shell
+if "%OS%"=="Windows_NT" setlocal
+
+set DIRNAME=%~dp0
+if "%DIRNAME%" == "" set DIRNAME=.
+set APP_BASE_NAME=%~n0
+set APP_HOME=%DIRNAME%
+
+@rem Add default JVM options here. You can also use JAVA_OPTS and GRADLE_OPTS to pass JVM options to this script.
+set DEFAULT_JVM_OPTS=
+
+@rem Find java.exe
+if defined JAVA_HOME goto findJavaFromJavaHome
+
+set JAVA_EXE=java.exe
+%JAVA_EXE% -version >NUL 2>&1
+if "%ERRORLEVEL%" == "0" goto init
+
+echo.
+echo ERROR: JAVA_HOME is not set and no 'java' command could be found in your PATH.
+echo.
+echo Please set the JAVA_HOME variable in your environment to match the
+echo location of your Java installation.
+
+goto fail
+
+:findJavaFromJavaHome
+set JAVA_HOME=%JAVA_HOME:"=%
+set JAVA_EXE=%JAVA_HOME%/bin/java.exe
+
+if exist "%JAVA_EXE%" goto init
+
+echo.
+echo ERROR: JAVA_HOME is set to an invalid directory: %JAVA_HOME%
+echo.
+echo Please set the JAVA_HOME variable in your environment to match the
+echo location of your Java installation.
+
+goto fail
+
+:init
+@rem Get command-line arguments, handling Windows variants
+
+if not "%OS%" == "Windows_NT" goto win9xME_args
+
+:win9xME_args
+@rem Slurp the command line arguments.
+set CMD_LINE_ARGS=
+set _SKIP=2
+
+:win9xME_args_slurp
+if "x%~1" == "x" goto execute
+
+set CMD_LINE_ARGS=%*
+
+:execute
+@rem Setup the command line
+
+set CLASSPATH=%APP_HOME%\gradle\wrapper\gradle-wrapper.jar
+
+@rem Execute Gradle
+"%JAVA_EXE%" %DEFAULT_JVM_OPTS% %JAVA_OPTS% %GRADLE_OPTS% "-Dorg.gradle.appname=%APP_BASE_NAME%" -classpath "%CLASSPATH%" org.gradle.wrapper.GradleWrapperMain %CMD_LINE_ARGS%
+
+:end
+@rem End local scope for the variables with windows NT shell
+if "%ERRORLEVEL%"=="0" goto mainEnd
+
+:fail
+rem Set variable GRADLE_EXIT_CONSOLE if you need the _script_ return code instead of
+rem the _cmd.exe /c_ return code!
+if  not "" == "%GRADLE_EXIT_CONSOLE%" exit 1
+exit /b 1
+
+:mainEnd
+if "%OS%"=="Windows_NT" endlocal
+
+:omega
--- a/android/pages/.eslintrc.yaml
+++ b/android/pages/.eslintrc.yaml
@@ -0,0 +1,6 @@
+env:
+  browser: true
+
+parserOptions:
+  sourceType: module
+
--- a/android/pages/error.js
+++ b/android/pages/error.js
@@ -0,0 +1,12 @@
+const html = require('choo/html');
+
+export default function error(_state, _emit) {
+  return html`
+    <body>
+      <div id="white">
+        <h1>Error</h1>
+        <p>Sorry, an error occurred.</p>
+      </div>
+    </body>
+  `;
+}
--- a/android/pages/home.js
+++ b/android/pages/home.js
@@ -0,0 +1,69 @@
+const html = require('choo/html');
+const { list } = require('../../app/utils');
+const archiveTile = require('../../app/ui/archiveTile');
+const modal = require('../../app/ui/modal');
+const intro = require('../../app/ui/intro');
+const assets = require('../../common/assets');
+
+module.exports = function(state, emit) {
+  function onchange(event) {
+    event.preventDefault();
+    const newFiles = Array.from(event.target.files);
+
+    emit('addFiles', { files: newFiles });
+  }
+
+  function onclick() {
+    document.getElementById('file-upload').click();
+  }
+
+  const archives = state.storage.files
+    .filter(archive => !archive.expired)
+    .map(archive => archiveTile(state, emit, archive))
+    .reverse();
+
+  let content = '';
+  let button = html`
+    <div
+      class="bg-blue-50 rounded-full m-4 flex items-center justify-center shadow-lg"
+      style="width: 56px; height: 56px"
+      onclick="${onclick}"
+    >
+      <img src="${assets.get('add.svg')}" />
+    </div>
+  `;
+  if (state.uploading) {
+    content = archiveTile.uploading(state, emit);
+    button = '';
+  } else if (state.archive.numFiles > 0) {
+    content = archiveTile.wip(state, emit);
+    button = '';
+  } else {
+    content =
+      archives.length < 1
+        ? intro(state)
+        : list(archives, 'h-full overflow-y-auto w-full', 'mb-3 w-full');
+  }
+
+  return html`
+    <main class="main">
+      ${state.modal && modal(state, emit)}
+      <section
+        class="h-full w-full p-6 z-10 overflow-hidden md:flex md:flex-row md:rounded-lg md:shadow-big"
+      >
+        ${content}
+      </section>
+      <div class="fixed right-0 bottom-0 z-20">
+        ${button}
+        <input
+          id="file-upload"
+          class="hidden"
+          type="file"
+          multiple
+          onchange="${onchange}"
+          onclick="${e => e.stopPropagation()}"
+        />
+      </div>
+    </main>
+  `;
+};
--- a/android/pages/preferences.js
+++ b/android/pages/preferences.js
@@ -0,0 +1,34 @@
+const html = require('choo/html');
+
+import { setFileProtocolWssUrl, getFileProtocolWssUrl } from '../../app/api';
+
+export default function preferences(state, emit) {
+  const wssURL = getFileProtocolWssUrl();
+
+  function updateWssUrl(event) {
+    state.wssURL = event.target.value;
+    setFileProtocolWssUrl(state.wssURL);
+    emit('render');
+  }
+
+  function clickDone(event) {
+    event.preventDefault();
+    emit('pushState', '/');
+  }
+
+  return html`
+    <body>
+      <div id="white">
+        <div id="preferences">
+          <a onclick="${clickDone}" href="#"> done </a>
+          <dl>
+            <dt>wss url:</dt>
+            <dd>
+              <input type="text" onchange="${updateWssUrl}" value="${wssURL}" />
+            </dd>
+          </dl>
+        </div>
+      </div>
+    </body>
+  `;
+}
--- a/android/pages/share.js
+++ b/android/pages/share.js
@@ -0,0 +1,51 @@
+const html = require('choo/html');
+
+export default function uploadComplete(state, emit) {
+  const file = state.storage.files[state.storage.files.length - 1];
+  function onclick(e) {
+    e.preventDefault();
+    input.select();
+    document.execCommand('copy');
+    input.selectionEnd = input.selectionStart;
+    copyText.textContent = 'Copied!';
+    setTimeout(function() {
+      copyText.textContent = 'Copy link';
+    }, 2000);
+  }
+
+  function uploadFile(event) {
+    event.preventDefault();
+    const target = event.target;
+    const file = target.files[0];
+    if (file.size === 0) {
+      return;
+    }
+
+    emit('pushState', '/upload');
+    emit('addFiles', { files: [file] });
+    emit('upload', {});
+  }
+
+  const input = html`
+    <input id="url" value="${file.url}" readonly="true" />
+  `;
+  const copyText = html`
+    <span>Copy link</span>
+  `;
+  return html`<body>
+  <div id="white">
+    <div class="card">
+      <div>The card contents will be here.</div>
+      <div>Expires after: <span class="expires-after">exp</span></div>
+      ${input}
+      <div id="copy-link" onclick=${onclick}>
+        <img id="copy-image" src=${state.getAsset('copy-link.png')} />
+        ${copyText}
+      </div>
+      <label id="label" for="input">
+        <img src=${state.getAsset('cloud-upload.png')} />
+      </label>
+      <input id="input" name="input" type="file" onchange=${uploadFile} />
+  </div>
+</body>`;
+}
--- a/android/pages/upload.js
+++ b/android/pages/upload.js
@@ -0,0 +1,26 @@
+const html = require('choo/html');
+
+export default function progressBar(state, emit) {
+  let percent = 0;
+  if (state.transfer && state.transfer.progress) {
+    percent = Math.floor(state.transfer.progressRatio * 100);
+  }
+  function onclick(e) {
+    e.preventDefault();
+    if (state.uploading) {
+      emit('cancel');
+    }
+    emit('pushState', '/');
+  }
+  return html`
+    <body>
+      <div id="white">
+        <div class="card">
+          <div>${percent}%</div>
+          <span class="progress" style="width: ${percent}%">.</span>
+          <div class="cancel" onclick="${onclick}">CANCEL</div>
+        </div>
+      </div>
+    </body>
+  `;
+}
--- a/android/settings.gradle
+++ b/android/settings.gradle
@@ -0,0 +1 @@
+include ':app'
--- a/android/stores/intents.js
+++ b/android/stores/intents.js
@@ -0,0 +1,20 @@
+/* eslint-disable no-console */
+
+export default function intentHandler(state, emitter) {
+  window.addEventListener(
+    'message',
+    event => {
+      if (typeof event.data !== 'string' || !event.data.startsWith('data:')) {
+        return;
+      }
+      fetch(event.data)
+        .then(res => res.blob())
+        .then(blob => {
+          emitter.emit('addFiles', { files: [blob] });
+          emitter.emit('upload', {});
+        })
+        .catch(e => console.error('ERROR ' + e + ' ' + e.stack));
+    },
+    false
+  );
+}
--- a/android/stores/state.js
+++ b/android/stores/state.js
@@ -0,0 +1,41 @@
+/* eslint-disable no-console */
+
+import User from '../user';
+import storage from '../../app/storage';
+
+export default function initialState(state, emitter) {
+  const files = [];
+
+  Object.assign(state, {
+    prefix: '/android_asset',
+    user: new User(storage),
+    getAsset(name) {
+      return `${state.prefix}/${name}`;
+    },
+    sentry: {
+      captureException: e => {
+        console.error('ERROR ' + e + ' ' + e.stack);
+      }
+    },
+    storage: {
+      files,
+      remove: function(fileId) {
+        console.log('REMOVE FILEID', fileId);
+      },
+      writeFile: function(file) {
+        console.log('WRITEFILE', file);
+      },
+      addFile: function(file) {
+        console.log('addfile' + JSON.stringify(file));
+        files.push(file);
+        emitter.emit('pushState', `/share/${file.id}`);
+      },
+      totalUploads: 0
+    },
+    transfer: null,
+    uploading: false,
+    settingPassword: false,
+    passwordSetError: null,
+    route: '/'
+  });
+}
--- a/android/user.js
+++ b/android/user.js
@@ -0,0 +1,30 @@
+/* global Android */
+import User from '../app/user';
+import { deriveFileListKey } from '../app/fxa';
+
+export default class AndroidUser extends User {
+  constructor(storage, limits) {
+    super(storage, limits);
+  }
+
+  async login() {
+    Android.beginOAuthFlow();
+  }
+
+  startAuthFlow() {
+    return Promise.resolve();
+  }
+
+  async finishLogin(accountInfo) {
+    const jwks = JSON.parse(accountInfo.keys);
+    const ikm = jwks['https://identity.mozilla.com/apps/send'].k;
+    const profile = {
+      displayName: accountInfo.displayName,
+      email: accountInfo.email,
+      avatar: accountInfo.avatar,
+      access_token: accountInfo.accessToken
+    };
+    profile.fileListKey = await deriveFileListKey(ikm);
+    this.info = profile;
+  }
+}
--- a/app/.eslintrc.yml
+++ b/app/.eslintrc.yml
@@ -0,0 +1,9 @@
+env:
+  browser: true
+  node: true
+
+parserOptions:
+  sourceType: module
+
+rules:
+  node/no-unsupported-features: off
--- a/app/api.js
+++ b/app/api.js
@@ -0,0 +1,443 @@
+import { arrayToB64, b64ToArray, delay } from './utils';
+import { ECE_RECORD_SIZE } from './ece';
+
+let fileProtocolWssUrl = null;
+try {
+  fileProtocolWssUrl = localStorage.getItem('wssURL');
+} catch (e) {
+  // NOOP
+}
+if (!fileProtocolWssUrl) {
+  fileProtocolWssUrl = 'wss://send.firefox.com/api/ws';
+}
+
+export class ConnectionError extends Error {
+  constructor(cancelled, duration, size) {
+    super(cancelled ? '0' : 'connection closed');
+    this.cancelled = cancelled;
+    this.duration = duration;
+    this.size = size;
+  }
+}
+
+export function setFileProtocolWssUrl(url) {
+  localStorage && localStorage.setItem('wssURL', url);
+  fileProtocolWssUrl = url;
+}
+
+export function getFileProtocolWssUrl() {
+  return fileProtocolWssUrl;
+}
+
+let apiUrlPrefix = '';
+export function getApiUrl(path) {
+  return apiUrlPrefix + path;
+}
+
+export function setApiUrlPrefix(prefix) {
+  apiUrlPrefix = prefix;
+}
+
+function post(obj, bearerToken) {
+  const h = {
+    'Content-Type': 'application/json'
+  };
+  if (bearerToken) {
+    h['Authentication'] = `Bearer ${bearerToken}`;
+  }
+  return {
+    method: 'POST',
+    headers: new Headers(h),
+    body: JSON.stringify(obj)
+  };
+}
+
+export function parseNonce(header) {
+  header = header || '';
+  return header.split(' ')[1];
+}
+
+async function fetchWithAuth(url, params, keychain) {
+  const result = {};
+  params = params || {};
+  const h = await keychain.authHeader();
+  params.headers = new Headers({
+    Authorization: h,
+    'Content-Type': 'application/json'
+  });
+  const response = await fetch(url, params);
+  result.response = response;
+  result.ok = response.ok;
+  const nonce = parseNonce(response.headers.get('WWW-Authenticate'));
+  result.shouldRetry = response.status === 401 && nonce !== keychain.nonce;
+  keychain.nonce = nonce;
+  return result;
+}
+
+async function fetchWithAuthAndRetry(url, params, keychain) {
+  const result = await fetchWithAuth(url, params, keychain);
+  if (result.shouldRetry) {
+    return fetchWithAuth(url, params, keychain);
+  }
+  return result;
+}
+
+export async function del(id, owner_token) {
+  const response = await fetch(
+    getApiUrl(`/api/delete/${id}`),
+    post({ owner_token })
+  );
+  return response.ok;
+}
+
+export async function setParams(id, owner_token, bearerToken, params) {
+  const response = await fetch(
+    getApiUrl(`/api/params/${id}`),
+    post(
+      {
+        owner_token,
+        dlimit: params.dlimit
+      },
+      bearerToken
+    )
+  );
+  return response.ok;
+}
+
+export async function fileInfo(id, owner_token) {
+  const response = await fetch(
+    getApiUrl(`/api/info/${id}`),
+    post({ owner_token })
+  );
+
+  if (response.ok) {
+    const obj = await response.json();
+    return obj;
+  }
+
+  throw new Error(response.status);
+}
+
+export async function metadata(id, keychain) {
+  const result = await fetchWithAuthAndRetry(
+    getApiUrl(`/api/metadata/${id}`),
+    { method: 'GET' },
+    keychain
+  );
+  if (result.ok) {
+    const data = await result.response.json();
+    const meta = await keychain.decryptMetadata(b64ToArray(data.metadata));
+    return {
+      size: meta.size,
+      ttl: data.ttl,
+      iv: meta.iv,
+      name: meta.name,
+      type: meta.type,
+      manifest: meta.manifest
+    };
+  }
+  throw new Error(result.response.status);
+}
+
+export async function setPassword(id, owner_token, keychain) {
+  const auth = await keychain.authKeyB64();
+  const response = await fetch(
+    getApiUrl(`/api/password/${id}`),
+    post({ owner_token, auth })
+  );
+  return response.ok;
+}
+
+function asyncInitWebSocket(server) {
+  return new Promise((resolve, reject) => {
+    try {
+      const ws = new WebSocket(server);
+      ws.addEventListener('open', () => resolve(ws), { once: true });
+    } catch (e) {
+      reject(new ConnectionError(false));
+    }
+  });
+}
+
+function listenForResponse(ws, canceller) {
+  return new Promise((resolve, reject) => {
+    function handleClose(event) {
+      // a 'close' event before a 'message' event means the request failed
+      ws.removeEventListener('message', handleMessage);
+      reject(new ConnectionError(canceller.cancelled));
+    }
+    function handleMessage(msg) {
+      ws.removeEventListener('close', handleClose);
+      try {
+        const response = JSON.parse(msg.data);
+        if (response.error) {
+          throw new Error(response.error);
+        } else {
+          resolve(response);
+        }
+      } catch (e) {
+        reject(e);
+      }
+    }
+    ws.addEventListener('message', handleMessage, { once: true });
+    ws.addEventListener('close', handleClose, { once: true });
+  });
+}
+
+async function upload(
+  stream,
+  metadata,
+  verifierB64,
+  timeLimit,
+  dlimit,
+  bearerToken,
+  onprogress,
+  canceller
+) {
+  let size = 0;
+  const start = Date.now();
+  const host = window.location.hostname;
+  const port = window.location.port;
+  const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
+  const endpoint =
+    window.location.protocol === 'file:'
+      ? fileProtocolWssUrl
+      : `${protocol}//${host}${port ? ':' : ''}${port}/api/ws`;
+
+  const ws = await asyncInitWebSocket(endpoint);
+
+  try {
+    const metadataHeader = arrayToB64(new Uint8Array(metadata));
+    const fileMeta = {
+      fileMetadata: metadataHeader,
+      authorization: `send-v1 ${verifierB64}`,
+      bearer: bearerToken,
+      timeLimit,
+      dlimit
+    };
+    const uploadInfoResponse = listenForResponse(ws, canceller);
+    ws.send(JSON.stringify(fileMeta));
+    const uploadInfo = await uploadInfoResponse;
+
+    const completedResponse = listenForResponse(ws, canceller);
+
+    const reader = stream.getReader();
+    let state = await reader.read();
+    while (!state.done) {
+      if (canceller.cancelled) {
+        ws.close();
+      }
+      if (ws.readyState !== WebSocket.OPEN) {
+        break;
+      }
+      const buf = state.value;
+      ws.send(buf);
+      onprogress(size);
+      size += buf.length;
+      state = await reader.read();
+      while (
+        ws.bufferedAmount > ECE_RECORD_SIZE * 2 &&
+        ws.readyState === WebSocket.OPEN &&
+        !canceller.cancelled
+      ) {
+        await delay();
+      }
+    }
+    if (ws.readyState === WebSocket.OPEN) {
+      ws.send(new Uint8Array([0])); //EOF
+    }
+
+    await completedResponse;
+    uploadInfo.duration = Date.now() - start;
+    return uploadInfo;
+  } catch (e) {
+    e.size = size;
+    e.duration = Date.now() - start;
+    throw e;
+  } finally {
+    if (![WebSocket.CLOSED, WebSocket.CLOSING].includes(ws.readyState)) {
+      ws.close();
+    }
+  }
+}
+
+export function uploadWs(
+  encrypted,
+  metadata,
+  verifierB64,
+  timeLimit,
+  dlimit,
+  bearerToken,
+  onprogress
+) {
+  const canceller = { cancelled: false };
+
+  return {
+    cancel: function() {
+      canceller.cancelled = true;
+    },
+
+    result: upload(
+      encrypted,
+      metadata,
+      verifierB64,
+      timeLimit,
+      dlimit,
+      bearerToken,
+      onprogress,
+      canceller
+    )
+  };
+}
+
+////////////////////////
+
+async function downloadS(id, keychain, signal) {
+  const auth = await keychain.authHeader();
+
+  const response = await fetch(getApiUrl(`/api/download/${id}`), {
+    signal: signal,
+    method: 'GET',
+    headers: { Authorization: auth }
+  });
+
+  const authHeader = response.headers.get('WWW-Authenticate');
+  if (authHeader) {
+    keychain.nonce = parseNonce(authHeader);
+  }
+
+  if (response.status !== 200) {
+    throw new Error(response.status);
+  }
+
+  return response.body;
+}
+
+async function tryDownloadStream(id, keychain, signal, tries = 2) {
+  try {
+    const result = await downloadS(id, keychain, signal);
+    return result;
+  } catch (e) {
+    if (e.message === '401' && --tries > 0) {
+      return tryDownloadStream(id, keychain, signal, tries);
+    }
+    if (e.name === 'AbortError') {
+      throw new Error('0');
+    }
+    throw e;
+  }
+}
+
+export function downloadStream(id, keychain) {
+  const controller = new AbortController();
+  function cancel() {
+    controller.abort();
+  }
+  return {
+    cancel,
+    result: tryDownloadStream(id, keychain, controller.signal)
+  };
+}
+
+//////////////////
+
+async function download(id, keychain, onprogress, canceller) {
+  const auth = await keychain.authHeader();
+  const xhr = new XMLHttpRequest();
+  canceller.oncancel = function() {
+    xhr.abort();
+  };
+  return new Promise(function(resolve, reject) {
+    xhr.addEventListener('loadend', function() {
+      canceller.oncancel = function() {};
+      const authHeader = xhr.getResponseHeader('WWW-Authenticate');
+      if (authHeader) {
+        keychain.nonce = parseNonce(authHeader);
+      }
+      if (xhr.status !== 200) {
+        return reject(new Error(xhr.status));
+      }
+
+      const blob = new Blob([xhr.response]);
+      resolve(blob);
+    });
+
+    xhr.addEventListener('progress', function(event) {
+      if (event.target.status === 200) {
+        onprogress(event.loaded);
+      }
+    });
+    xhr.open('get', getApiUrl(`/api/download/blob/${id}`));
+    xhr.setRequestHeader('Authorization', auth);
+    xhr.responseType = 'blob';
+    xhr.send();
+    onprogress(0);
+  });
+}
+
+async function tryDownload(id, keychain, onprogress, canceller, tries = 2) {
+  try {
+    const result = await download(id, keychain, onprogress, canceller);
+    return result;
+  } catch (e) {
+    if (e.message === '401' && --tries > 0) {
+      return tryDownload(id, keychain, onprogress, canceller, tries);
+    }
+    throw e;
+  }
+}
+
+export function downloadFile(id, keychain, onprogress) {
+  const canceller = {
+    oncancel: function() {} // download() sets this
+  };
+  function cancel() {
+    canceller.oncancel();
+  }
+  return {
+    cancel,
+    result: tryDownload(id, keychain, onprogress, canceller)
+  };
+}
+
+export async function getFileList(bearerToken, kid) {
+  const headers = new Headers({ Authorization: `Bearer ${bearerToken}` });
+  const response = await fetch(getApiUrl(`/api/filelist/${kid}`), { headers });
+  if (response.ok) {
+    const encrypted = await response.blob();
+    return encrypted;
+  }
+  throw new Error(response.status);
+}
+
+export async function setFileList(bearerToken, kid, data) {
+  const headers = new Headers({ Authorization: `Bearer ${bearerToken}` });
+  const response = await fetch(getApiUrl(`/api/filelist/${kid}`), {
+    headers,
+    method: 'POST',
+    body: data
+  });
+  return response.ok;
+}
+
+export function sendMetrics(blob) {
+  if (!navigator.sendBeacon) {
+    return;
+  }
+  try {
+    navigator.sendBeacon(getApiUrl('/api/metrics'), blob);
+  } catch (e) {
+    console.error(e);
+  }
+}
+
+export async function getConstants() {
+  const response = await fetch(getApiUrl('/config'));
+
+  if (response.ok) {
+    const obj = await response.json();
+    return obj;
+  }
+
+  throw new Error(response.status);
+}
--- a/app/archive.js
+++ b/app/archive.js
@@ -0,0 +1,83 @@
+import { blobStream, concatStream } from './streams';
+
+function isDupe(newFile, array) {
+  for (const file of array) {
+    if (
+      newFile.name === file.name &&
+      newFile.size === file.size &&
+      newFile.lastModified === file.lastModified
+    ) {
+      return true;
+    }
+  }
+  return false;
+}
+
+export default class Archive {
+  constructor(files = [], defaultTimeLimit = 86400) {
+    this.files = Array.from(files);
+    this.defaultTimeLimit = defaultTimeLimit;
+    this.timeLimit = defaultTimeLimit;
+    this.dlimit = 1;
+    this.password = null;
+  }
+
+  get name() {
+    return this.files.length > 1 ? 'Send-Archive.zip' : this.files[0].name;
+  }
+
+  get type() {
+    return this.files.length > 1 ? 'send-archive' : this.files[0].type;
+  }
+
+  get size() {
+    return this.files.reduce((total, file) => total + file.size, 0);
+  }
+
+  get numFiles() {
+    return this.files.length;
+  }
+
+  get manifest() {
+    return {
+      files: this.files.map(file => ({
+        name: file.name,
+        size: file.size,
+        type: file.type
+      }))
+    };
+  }
+
+  get stream() {
+    return concatStream(this.files.map(file => blobStream(file)));
+  }
+
+  addFiles(files, maxSize, maxFiles) {
+    if (this.files.length + files.length > maxFiles) {
+      throw new Error('tooManyFiles');
+    }
+    const newFiles = files.filter(
+      file => file.size > 0 && !isDupe(file, this.files)
+    );
+    const newSize = newFiles.reduce((total, file) => total + file.size, 0);
+    if (this.size + newSize > maxSize) {
+      throw new Error('fileTooBig');
+    }
+    this.files = this.files.concat(newFiles);
+    return true;
+  }
+
+  remove(file) {
+    const index = this.files.indexOf(file);
+    if (index > -1) {
+      this.files.splice(index, 1);
+    }
+  }
+
+  clear() {
+    this.files = [];
+    this.dlimit = 1;
+    this.timeLimit = this.defaultTimeLimit;
+    this.password = null;
+  }
+}
--- a/app/capabilities.js
+++ b/app/capabilities.js
@@ -0,0 +1,116 @@
+/* global AUTH_CONFIG */
+import { browserName, locale } from './utils';
+
+async function checkCrypto() {
+  try {
+    const key = await crypto.subtle.generateKey(
+      {
+        name: 'AES-GCM',
+        length: 128
+      },
+      true,
+      ['encrypt', 'decrypt']
+    );
+    await crypto.subtle.exportKey('raw', key);
+    await crypto.subtle.encrypt(
+      {
+        name: 'AES-GCM',
+        iv: crypto.getRandomValues(new Uint8Array(12)),
+        tagLength: 128
+      },
+      key,
+      new ArrayBuffer(8)
+    );
+    await crypto.subtle.importKey(
+      'raw',
+      crypto.getRandomValues(new Uint8Array(16)),
+      'PBKDF2',
+      false,
+      ['deriveKey']
+    );
+    await crypto.subtle.importKey(
+      'raw',
+      crypto.getRandomValues(new Uint8Array(16)),
+      'HKDF',
+      false,
+      ['deriveKey']
+    );
+    await crypto.subtle.generateKey(
+      {
+        name: 'ECDH',
+        namedCurve: 'P-256'
+      },
+      true,
+      ['deriveBits']
+    );
+    return true;
+  } catch (err) {
+    try {
+      window.asmCrypto = await import('asmcrypto.js');
+      await import('@dannycoates/webcrypto-liner/build/shim');
+      return true;
+    } catch (e) {
+      return false;
+    }
+  }
+}
+
+function checkStreams() {
+  try {
+    new ReadableStream({
+      pull() {}
+    });
+    return true;
+  } catch (e) {
+    return false;
+  }
+}
+
+async function polyfillStreams() {
+  try {
+    await import('@mattiasbuelens/web-streams-polyfill');
+    return true;
+  } catch (e) {
+    return false;
+  }
+}
+
+export default async function getCapabilities() {
+  const browser = browserName();
+  const isMobile = /mobi|android/i.test(navigator.userAgent);
+  const serviceWorker = 'serviceWorker' in navigator && browser !== 'edge';
+  let crypto = await checkCrypto();
+  const nativeStreams = checkStreams();
+  let polyStreams = false;
+  if (!nativeStreams) {
+    polyStreams = await polyfillStreams();
+  }
+  let account = typeof AUTH_CONFIG !== 'undefined';
+  try {
+    account = account && !!localStorage;
+  } catch (e) {
+    account = false;
+  }
+  const share =
+    isMobile &&
+    typeof navigator.share === 'function' &&
+    locale().startsWith('en'); // en until strings merge
+
+  const standalone =
+    window.matchMedia('(display-mode: standalone)').matches ||
+    navigator.standalone;
+
+  const mobileFirefox = browser === 'firefox' && isMobile;
+
+  return {
+    account,
+    crypto,
+    serviceWorker,
+    streamUpload: nativeStreams || polyStreams,
+    streamDownload:
+      nativeStreams && serviceWorker && browser !== 'safari' && !mobileFirefox,
+    multifile: nativeStreams || polyStreams,
+    share,
+    standalone
+  };
+}
--- a/app/controller.js
+++ b/app/controller.js
@@ -0,0 +1,342 @@
+import * as metrics from './metrics';
+import FileReceiver from './fileReceiver';
+import FileSender from './fileSender';
+import copyDialog from './ui/copyDialog';
+import faviconProgressbar from './ui/faviconProgressbar';
+import okDialog from './ui/okDialog';
+import shareDialog from './ui/shareDialog';
+import signupDialog from './ui/signupDialog';
+import surveyDialog from './ui/surveyDialog';
+import { bytes, locale } from './utils';
+import { copyToClipboard, delay, openLinksInNewTab, percent } from './utils';
+
+export default function(state, emitter) {
+  let lastRender = 0;
+  let updateTitle = false;
+
+  function render() {
+    emitter.emit('render');
+  }
+
+  async function checkFiles() {
+    const changes = await state.user.syncFileList();
+    const rerender = changes.incoming || changes.downloadCount;
+    if (rerender) {
+      render();
+    }
+  }
+
+  function updateProgress() {
+    if (updateTitle) {
+      emitter.emit('DOMTitleChange', percent(state.transfer.progressRatio));
+    }
+    faviconProgressbar.updateFavicon(state.transfer.progressRatio);
+    render();
+  }
+
+  emitter.on('DOMContentLoaded', () => {
+    document.addEventListener('blur', () => (updateTitle = true));
+    document.addEventListener('focus', () => {
+      updateTitle = false;
+      emitter.emit('DOMTitleChange', 'Send');
+      faviconProgressbar.updateFavicon(0);
+    });
+    checkFiles();
+  });
+
+  emitter.on('render', () => {
+    lastRender = Date.now();
+  });
+
+  emitter.on('login', email => {
+    state.user.login(email);
+  });
+
+  emitter.on('logout', async () => {
+    await state.user.logout();
+    metrics.loggedOut({ trigger: 'button' });
+    emitter.emit('pushState', '/');
+  });
+
+  emitter.on('removeUpload', file => {
+    state.archive.remove(file);
+    if (state.archive.numFiles === 0) {
+      state.archive.clear();
+    }
+    render();
+  });
+
+  emitter.on('delete', async ownedFile => {
+    try {
+      metrics.deletedUpload({
+        size: ownedFile.size,
+        time: ownedFile.time,
+        speed: ownedFile.speed,
+        type: ownedFile.type,
+        ttl: ownedFile.expiresAt - Date.now(),
+        location
+      });
+      state.storage.remove(ownedFile.id);
+      await ownedFile.del();
+    } catch (e) {
+      state.sentry.captureException(e);
+    }
+    render();
+  });
+
+  emitter.on('cancel', () => {
+    state.transfer.cancel();
+    faviconProgressbar.updateFavicon(0);
+  });
+
+  emitter.on('addFiles', async ({ files }) => {
+    if (files.length < 1) {
+      return;
+    }
+    const maxSize = state.user.maxSize;
+    try {
+      state.archive.addFiles(
+        files,
+        maxSize,
+        state.LIMITS.MAX_FILES_PER_ARCHIVE
+      );
+    } catch (e) {
+      if (e.message === 'fileTooBig' && maxSize < state.LIMITS.MAX_FILE_SIZE) {
+        return emitter.emit('signup-cta', 'size');
+      }
+      state.modal = okDialog(
+        state.translate(e.message, {
+          size: bytes(maxSize),
+          count: state.LIMITS.MAX_FILES_PER_ARCHIVE
+        })
+      );
+    }
+    render();
+  });
+
+  emitter.on('signup-cta', source => {
+    const query = state.query;
+    state.user.startAuthFlow(source, {
+      campaign: query.utm_campaign,
+      content: query.utm_content,
+      medium: query.utm_medium,
+      source: query.utm_source,
+      term: query.utm_term
+    });
+    state.modal = signupDialog(source);
+    render();
+  });
+
+  emitter.on('authenticate', async (code, oauthState) => {
+    try {
+      await state.user.finishLogin(code, oauthState);
+      await state.user.syncFileList();
+      emitter.emit('replaceState', '/');
+    } catch (e) {
+      emitter.emit('replaceState', '/error');
+      setTimeout(render);
+    }
+  });
+
+  emitter.on('upload', async () => {
+    if (state.storage.files.length >= state.LIMITS.MAX_ARCHIVES_PER_USER) {
+      state.modal = okDialog(
+        state.translate('tooManyArchives', {
+          count: state.LIMITS.MAX_ARCHIVES_PER_USER
+        })
+      );
+      return render();
+    }
+    const archive = state.archive;
+    const sender = new FileSender();
+
+    sender.on('progress', updateProgress);
+    sender.on('encrypting', render);
+    sender.on('complete', render);
+    state.transfer = sender;
+    state.uploading = true;
+    render();
+
+    const links = openLinksInNewTab();
+    await delay(200);
+    const start = Date.now();
+    try {
+      const ownedFile = await sender.upload(archive, state.user.bearerToken);
+      state.storage.totalUploads += 1;
+      const duration = Date.now() - start;
+      metrics.completedUpload(archive, duration);
+      faviconProgressbar.updateFavicon(0);
+
+      state.storage.addFile(ownedFile);
+      // TODO integrate password into /upload request
+      if (archive.password) {
+        emitter.emit('password', {
+          password: archive.password,
+          file: ownedFile
+        });
+      }
+      state.modal = state.capabilities.share
+        ? shareDialog(ownedFile.name, ownedFile.url)
+        : copyDialog(ownedFile.name, ownedFile.url);
+    } catch (err) {
+      if (err.message === '0') {
+        //cancelled. do nothing
+        metrics.cancelledUpload(archive, err.duration);
+        render();
+      } else if (err.message === '401') {
+        const refreshed = await state.user.refresh();
+        if (refreshed) {
+          return emitter.emit('upload');
+        }
+        emitter.emit('pushState', '/error');
+      } else {
+        // eslint-disable-next-line no-console
+        console.error(err);
+        state.sentry.withScope(scope => {
+          scope.setExtra('duration', err.duration);
+          scope.setExtra('size', err.size);
+          state.sentry.captureException(err);
+        });
+        metrics.stoppedUpload(archive, err.duration);
+        emitter.emit('pushState', '/error');
+      }
+    } finally {
+      openLinksInNewTab(links, false);
+      archive.clear();
+      state.uploading = false;
+      state.transfer = null;
+      await state.user.syncFileList();
+      render();
+    }
+  });
+
+  emitter.on('password', async ({ password, file }) => {
+    try {
+      state.settingPassword = true;
+      render();
+      await file.setPassword(password);
+      state.storage.writeFile(file);
+      await delay(1000);
+    } catch (err) {
+      // eslint-disable-next-line no-console
+      console.error(err);
+      state.passwordSetError = err;
+    } finally {
+      state.settingPassword = false;
+    }
+    render();
+  });
+
+  emitter.on('getMetadata', async () => {
+    const file = state.fileInfo;
+
+    const receiver = new FileReceiver(file);
+    try {
+      await receiver.getMetadata();
+      state.transfer = receiver;
+    } catch (e) {
+      if (e.message === '401' || e.message === '404') {
+        file.password = null;
+        if (!file.requiresPassword) {
+          return emitter.emit('pushState', '/404');
+        }
+      } else {
+        console.error(e);
+        return emitter.emit('pushState', '/error');
+      }
+    }
+
+    render();
+  });
+
+  emitter.on('download', async file => {
+    state.transfer.on('progress', updateProgress);
+    state.transfer.on('decrypting', render);
+    state.transfer.on('complete', render);
+    const links = openLinksInNewTab();
+    const size = file.size;
+    const start = Date.now();
+    try {
+      const dl = state.transfer.download({
+        stream: state.capabilities.streamDownload
+      });
+      render();
+      await dl;
+      state.storage.totalDownloads += 1;
+      const duration = Date.now() - start;
+      metrics.completedDownload({
+        size,
+        duration,
+        password_protected: file.requiresPassword
+      });
+      faviconProgressbar.updateFavicon(0);
+    } catch (err) {
+      if (err.message === '0') {
+        // download cancelled
+        state.transfer.reset();
+        render();
+      } else {
+        // eslint-disable-next-line no-console
+        state.transfer = null;
+        const location = err.message === '404' ? '/404' : '/error';
+        if (location === '/error') {
+          state.sentry.withScope(scope => {
+            scope.setExtra('duration', err.duration);
+            scope.setExtra('size', err.size);
+            scope.setExtra('progress', err.progress);
+            state.sentry.captureException(err);
+          });
+          const duration = Date.now() - start;
+          metrics.stoppedDownload({
+            size,
+            duration,
+            password_protected: file.requiresPassword
+          });
+        }
+        emitter.emit('pushState', location);
+      }
+    } finally {
+      openLinksInNewTab(links, false);
+    }
+  });
+
+  emitter.on('copy', ({ url }) => {
+    copyToClipboard(url);
+    // metrics.copiedLink({ location });
+  });
+
+  emitter.on('closeModal', () => {
+    if (
+      state.PREFS.surveyUrl &&
+      ['copy', 'share'].includes(state.modal.type) &&
+      locale().startsWith('en') &&
+      (state.storage.totalUploads > 1 || state.storage.totalDownloads > 0) &&
+      !state.user.surveyed
+    ) {
+      state.user.surveyed = true;
+      state.modal = surveyDialog();
+    } else {
+      state.modal = null;
+    }
+    render();
+  });
+
+  setInterval(() => {
+    // poll for updates of the upload list
+    if (!state.modal && state.route === '/') {
+      checkFiles();
+    }
+  }, 2 * 60 * 1000);
+
+  setInterval(() => {
+    // poll for rerendering the file list countdown timers
+    if (
+      !state.modal &&
+      state.route === '/' &&
+      state.storage.files.length > 0 &&
+      Date.now() - lastRender > 30000
+    ) {
+      render();
+    }
+  }, 60000);
+}
--- a/app/dragManager.js
+++ b/app/dragManager.js
@@ -0,0 +1,22 @@
+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.uploading &&
+        event.dataTransfer &&
+        event.dataTransfer.files
+      ) {
+        event.preventDefault();
+        emitter.emit('addFiles', {
+          files: Array.from(event.dataTransfer.files)
+        });
+      }
+    });
+  });
+}
--- a/app/ece.js
+++ b/app/ece.js
@@ -0,0 +1,310 @@
+import 'buffer';
+import { transformStream } from './streams';
+
+const NONCE_LENGTH = 12;
+const TAG_LENGTH = 16;
+const KEY_LENGTH = 16;
+const MODE_ENCRYPT = 'encrypt';
+const MODE_DECRYPT = 'decrypt';
+export const ECE_RECORD_SIZE = 1024 * 64;
+
+const encoder = new TextEncoder();
+
+function generateSalt(len) {
+  const randSalt = new Uint8Array(len);
+  crypto.getRandomValues(randSalt);
+  return randSalt.buffer;
+}
+
+class ECETransformer {
+  constructor(mode, ikm, rs, salt) {
+    this.mode = mode;
+    this.prevChunk;
+    this.seq = 0;
+    this.firstchunk = true;
+    this.rs = rs;
+    this.ikm = ikm.buffer;
+    this.salt = salt;
+  }
+
+  async generateKey() {
+    const inputKey = await crypto.subtle.importKey(
+      'raw',
+      this.ikm,
+      'HKDF',
+      false,
+      ['deriveKey']
+    );
+
+    return crypto.subtle.deriveKey(
+      {
+        name: 'HKDF',
+        salt: this.salt,
+        info: encoder.encode('Content-Encoding: aes128gcm\0'),
+        hash: 'SHA-256'
+      },
+      inputKey,
+      {
+        name: 'AES-GCM',
+        length: 128
+      },
+      true, // Edge polyfill requires key to be extractable to encrypt :/
+      ['encrypt', 'decrypt']
+    );
+  }
+
+  async generateNonceBase() {
+    const inputKey = await crypto.subtle.importKey(
+      'raw',
+      this.ikm,
+      'HKDF',
+      false,
+      ['deriveKey']
+    );
+
+    const base = await crypto.subtle.exportKey(
+      'raw',
+      await crypto.subtle.deriveKey(
+        {
+          name: 'HKDF',
+          salt: this.salt,
+          info: encoder.encode('Content-Encoding: nonce\0'),
+          hash: 'SHA-256'
+        },
+        inputKey,
+        {
+          name: 'AES-GCM',
+          length: 128
+        },
+        true,
+        ['encrypt', 'decrypt']
+      )
+    );
+
+    return Buffer.from(base.slice(0, NONCE_LENGTH));
+  }
+
+  generateNonce(seq) {
+    if (seq > 0xffffffff) {
+      throw new Error('record sequence number exceeds limit');
+    }
+    const nonce = Buffer.from(this.nonceBase);
+    const m = nonce.readUIntBE(nonce.length - 4, 4);
+    const xor = (m ^ seq) >>> 0; //forces unsigned int xor
+    nonce.writeUIntBE(xor, nonce.length - 4, 4);
+
+    return nonce;
+  }
+
+  pad(data, isLast) {
+    const len = data.length;
+    if (len + TAG_LENGTH >= this.rs) {
+      throw new Error('data too large for record size');
+    }
+
+    if (isLast) {
+      const padding = Buffer.alloc(1);
+      padding.writeUInt8(2, 0);
+      return Buffer.concat([data, padding]);
+    } else {
+      const padding = Buffer.alloc(this.rs - len - TAG_LENGTH);
+      padding.fill(0);
+      padding.writeUInt8(1, 0);
+      return Buffer.concat([data, padding]);
+    }
+  }
+
+  unpad(data, isLast) {
+    for (let i = data.length - 1; i >= 0; i--) {
+      if (data[i]) {
+        if (isLast) {
+          if (data[i] !== 2) {
+            throw new Error('delimiter of final record is not 2');
+          }
+        } else {
+          if (data[i] !== 1) {
+            throw new Error('delimiter of not final record is not 1');
+          }
+        }
+        return data.slice(0, i);
+      }
+    }
+    throw new Error('no delimiter found');
+  }
+
+  createHeader() {
+    const nums = Buffer.alloc(5);
+    nums.writeUIntBE(this.rs, 0, 4);
+    nums.writeUIntBE(0, 4, 1);
+    return Buffer.concat([Buffer.from(this.salt), nums]);
+  }
+
+  readHeader(buffer) {
+    if (buffer.length < 21) {
+      throw new Error('chunk too small for reading header');
+    }
+    const header = {};
+    header.salt = buffer.buffer.slice(0, KEY_LENGTH);
+    header.rs = buffer.readUIntBE(KEY_LENGTH, 4);
+    const idlen = buffer.readUInt8(KEY_LENGTH + 4);
+    header.length = idlen + KEY_LENGTH + 5;
+    return header;
+  }
+
+  async encryptRecord(buffer, seq, isLast) {
+    const nonce = this.generateNonce(seq);
+    const encrypted = await crypto.subtle.encrypt(
+      { name: 'AES-GCM', iv: nonce },
+      this.key,
+      this.pad(buffer, isLast)
+    );
+    return Buffer.from(encrypted);
+  }
+
+  async decryptRecord(buffer, seq, isLast) {
+    const nonce = this.generateNonce(seq);
+    const data = await crypto.subtle.decrypt(
+      {
+        name: 'AES-GCM',
+        iv: nonce,
+        tagLength: 128
+      },
+      this.key,
+      buffer
+    );
+
+    return this.unpad(Buffer.from(data), isLast);
+  }
+
+  async start(controller) {
+    if (this.mode === MODE_ENCRYPT) {
+      this.key = await this.generateKey();
+      this.nonceBase = await this.generateNonceBase();
+      controller.enqueue(this.createHeader());
+    } else if (this.mode !== MODE_DECRYPT) {
+      throw new Error('mode must be either encrypt or decrypt');
+    }
+  }
+
+  async transformPrevChunk(isLast, controller) {
+    if (this.mode === MODE_ENCRYPT) {
+      controller.enqueue(
+        await this.encryptRecord(this.prevChunk, this.seq, isLast)
+      );
+      this.seq++;
+    } else {
+      if (this.seq === 0) {
+        //the first chunk during decryption contains only the header
+        const header = this.readHeader(this.prevChunk);
+        this.salt = header.salt;
+        this.rs = header.rs;
+        this.key = await this.generateKey();
+        this.nonceBase = await this.generateNonceBase();
+      } else {
+        controller.enqueue(
+          await this.decryptRecord(this.prevChunk, this.seq - 1, isLast)
+        );
+      }
+      this.seq++;
+    }
+  }
+
+  async transform(chunk, controller) {
+    if (!this.firstchunk) {
+      await this.transformPrevChunk(false, controller);
+    }
+    this.firstchunk = false;
+    this.prevChunk = Buffer.from(chunk.buffer);
+  }
+
+  async flush(controller) {
+    //console.log('ece stream ends')
+    if (this.prevChunk) {
+      await this.transformPrevChunk(true, controller);
+    }
+  }
+}
+
+class StreamSlicer {
+  constructor(rs, mode) {
+    this.mode = mode;
+    this.rs = rs;
+    this.chunkSize = mode === MODE_ENCRYPT ? rs - 17 : 21;
+    this.partialChunk = new Uint8Array(this.chunkSize); //where partial chunks are saved
+    this.offset = 0;
+  }
+
+  send(buf, controller) {
+    controller.enqueue(buf);
+    if (this.chunkSize === 21 && this.mode === MODE_DECRYPT) {
+      this.chunkSize = this.rs;
+    }
+    this.partialChunk = new Uint8Array(this.chunkSize);
+    this.offset = 0;
+  }
+
+  //reslice input into record sized chunks
+  transform(chunk, controller) {
+    //console.log('Received chunk with %d bytes.', chunk.byteLength)
+    let i = 0;
+
+    if (this.offset > 0) {
+      const len = Math.min(chunk.byteLength, this.chunkSize - this.offset);
+      this.partialChunk.set(chunk.slice(0, len), this.offset);
+      this.offset += len;
+      i += len;
+
+      if (this.offset === this.chunkSize) {
+        this.send(this.partialChunk, controller);
+      }
+    }
+
+    while (i < chunk.byteLength) {
+      const remainingBytes = chunk.byteLength - i;
+      if (remainingBytes >= this.chunkSize) {
+        const record = chunk.slice(i, i + this.chunkSize);
+        i += this.chunkSize;
+        this.send(record, controller);
+      } else {
+        const end = chunk.slice(i, i + remainingBytes);
+        i += end.byteLength;
+        this.partialChunk.set(end);
+        this.offset = end.byteLength;
+      }
+    }
+  }
+
+  flush(controller) {
+    if (this.offset > 0) {
+      controller.enqueue(this.partialChunk.slice(0, this.offset));
+    }
+  }
+}
+
+/*
+input: a ReadableStream containing data to be transformed
+key:  Uint8Array containing key of size KEY_LENGTH
+rs:   int containing record size, optional
+salt: ArrayBuffer containing salt of KEY_LENGTH length, optional
+*/
+export function encryptStream(
+  input,
+  key,
+  rs = ECE_RECORD_SIZE,
+  salt = generateSalt(KEY_LENGTH)
+) {
+  const mode = 'encrypt';
+  const inputStream = transformStream(input, new StreamSlicer(rs, mode));
+  return transformStream(inputStream, new ECETransformer(mode, key, rs, salt));
+}
+
+/*
+input: a ReadableStream containing data to be transformed
+key:  Uint8Array containing key of size KEY_LENGTH
+rs:   int containing record size, optional
+*/
+export function decryptStream(input, key, rs = ECE_RECORD_SIZE) {
+  const mode = 'decrypt';
+  const inputStream = transformStream(input, new StreamSlicer(rs, mode));
+  return transformStream(inputStream, new ECETransformer(mode, key, rs));
+}
--- a/app/experiments.js
+++ b/app/experiments.js
@@ -0,0 +1,52 @@
+import hash from 'string-hash';
+import Account from './ui/account';
+
+const experiments = {
+  signin_button_color: {
+    eligible: function() {
+      return true;
+    },
+    variant: function() {
+      return ['white-blue', 'blue', 'white-violet', 'violet'][
+        Math.floor(Math.random() * 4)
+      ];
+    },
+    run: function(variant, state) {
+      const account = state.cache(Account, 'account');
+      account.buttonClass = variant;
+    }
+  }
+};
+
+//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);
+    }
+  });
+  const enrolled = state.storage.enrolled;
+  // single experiment per session for now
+  const id = Object.keys(enrolled)[0];
+  if (Object.keys(experiments).includes(id)) {
+    experiments[id].run(enrolled[id], state, emitter);
+  } else {
+    checkExperiments(state, emitter);
+  }
+}
--- a/app/fileReceiver.js
+++ b/app/fileReceiver.js
@@ -0,0 +1,256 @@
+import Nanobus from 'nanobus';
+import Keychain from './keychain';
+import { delay, bytes, streamToArrayBuffer } from './utils';
+import { downloadFile, metadata, getApiUrl, reportLink } from './api';
+import { blobStream } from './streams';
+import Zip from './zip';
+
+export default class FileReceiver extends Nanobus {
+  constructor(fileInfo) {
+    super('FileReceiver');
+    this.keychain = new Keychain(fileInfo.secretKey, fileInfo.nonce);
+    if (fileInfo.requiresPassword) {
+      this.keychain.setPassword(fileInfo.password, fileInfo.url);
+    }
+    this.fileInfo = fileInfo;
+    this.reset();
+  }
+
+  get progressRatio() {
+    return this.progress[0] / this.progress[1];
+  }
+
+  get progressIndefinite() {
+    return this.state !== 'downloading';
+  }
+
+  get sizes() {
+    return {
+      partialSize: bytes(this.progress[0]),
+      totalSize: bytes(this.progress[1])
+    };
+  }
+
+  cancel() {
+    if (this.downloadRequest) {
+      this.downloadRequest.cancel();
+    }
+  }
+
+  reset() {
+    this.msg = 'fileSizeProgress';
+    this.state = 'initialized';
+    this.progress = [0, 1];
+  }
+
+  async getMetadata() {
+    const meta = await metadata(this.fileInfo.id, this.keychain);
+    this.fileInfo.name = meta.name;
+    this.fileInfo.type = meta.type;
+    this.fileInfo.iv = meta.iv;
+    this.fileInfo.size = +meta.size;
+    this.fileInfo.manifest = meta.manifest;
+    this.state = 'ready';
+  }
+
+  async reportLink(reason) {
+    await reportLink(this.fileInfo.id, this.keychain, reason);
+  }
+
+  sendMessageToSw(msg) {
+    return new Promise((resolve, reject) => {
+      const channel = new MessageChannel();
+
+      channel.port1.onmessage = function(event) {
+        if (event.data === undefined) {
+          reject('bad response from serviceWorker');
+        } else if (event.data.error !== undefined) {
+          reject(event.data.error);
+        } else {
+          resolve(event.data);
+        }
+      };
+
+      navigator.serviceWorker.controller.postMessage(msg, [channel.port2]);
+    });
+  }
+
+  async downloadBlob(noSave = false) {
+    this.state = 'downloading';
+    this.downloadRequest = await downloadFile(
+      this.fileInfo.id,
+      this.keychain,
+      p => {
+        this.progress = [p, this.fileInfo.size];
+        this.emit('progress');
+      }
+    );
+    try {
+      const ciphertext = await this.downloadRequest.result;
+      this.downloadRequest = null;
+      this.msg = 'decryptingFile';
+      this.state = 'decrypting';
+      this.emit('decrypting');
+      let size = this.fileInfo.size;
+      let plainStream = this.keychain.decryptStream(blobStream(ciphertext));
+      if (this.fileInfo.type === 'send-archive') {
+        const zip = new Zip(this.fileInfo.manifest, plainStream);
+        plainStream = zip.stream;
+        size = zip.size;
+      }
+      const plaintext = await streamToArrayBuffer(plainStream, size);
+      if (!noSave) {
+        await saveFile({
+          plaintext,
+          name: decodeURIComponent(this.fileInfo.name),
+          type: this.fileInfo.type
+        });
+      }
+      this.msg = 'downloadFinish';
+      this.emit('complete');
+      this.state = 'complete';
+    } catch (e) {
+      this.downloadRequest = null;
+      throw e;
+    }
+  }
+
+  async downloadStream(noSave = false) {
+    const start = Date.now();
+    const onprogress = p => {
+      this.progress = [p, this.fileInfo.size];
+      this.emit('progress');
+    };
+
+    this.downloadRequest = {
+      cancel: () => {
+        this.sendMessageToSw({ request: 'cancel', id: this.fileInfo.id });
+      }
+    };
+
+    try {
+      this.state = 'downloading';
+
+      const info = {
+        request: 'init',
+        id: this.fileInfo.id,
+        filename: this.fileInfo.name,
+        type: this.fileInfo.type,
+        manifest: this.fileInfo.manifest,
+        key: this.fileInfo.secretKey,
+        requiresPassword: this.fileInfo.requiresPassword,
+        password: this.fileInfo.password,
+        url: this.fileInfo.url,
+        size: this.fileInfo.size,
+        nonce: this.keychain.nonce,
+        noSave
+      };
+      await this.sendMessageToSw(info);
+
+      onprogress(0);
+
+      if (noSave) {
+        const res = await fetch(getApiUrl(`/api/download/${this.fileInfo.id}`));
+        if (res.status !== 200) {
+          throw new Error(res.status);
+        }
+      } else {
+        const downloadPath = `/api/download/${this.fileInfo.id}`;
+        let downloadUrl = getApiUrl(downloadPath);
+        if (downloadUrl === downloadPath) {
+          downloadUrl = `${location.protocol}//${location.host}${downloadPath}`;
+        }
+        const a = document.createElement('a');
+        a.href = downloadUrl;
+        document.body.appendChild(a);
+        a.click();
+      }
+
+      let prog = 0;
+      let hangs = 0;
+      while (prog < this.fileInfo.size) {
+        const msg = await this.sendMessageToSw({
+          request: 'progress',
+          id: this.fileInfo.id
+        });
+        if (msg.progress === prog) {
+          hangs++;
+        } else {
+          hangs = 0;
+        }
+        if (hangs > 30) {
+          // TODO: On Chrome we don't get a cancel
+          // signal so one is indistinguishable from
+          // a hang. We may be able to detect
+          // which end is hung in the service worker
+          // to improve on this.
+          const e = new Error('hung download');
+          e.duration = Date.now() - start;
+          e.size = this.fileInfo.size;
+          e.progress = prog;
+          throw e;
+        }
+        prog = msg.progress;
+        onprogress(prog);
+        await delay(1000);
+      }
+
+      this.downloadRequest = null;
+      this.msg = 'downloadFinish';
+      this.emit('complete');
+      this.state = 'complete';
+    } catch (e) {
+      this.downloadRequest = null;
+      if (e === 'cancelled' || e.message === '400') {
+        throw new Error(0);
+      }
+      throw e;
+    }
+  }
+
+  download(options) {
+    if (options.stream) {
+      return this.downloadStream(options.noSave);
+    }
+    return this.downloadBlob(options.noSave);
+  }
+}
+
+async function saveFile(file) {
+  return new Promise(function(resolve, reject) {
+    const dataView = new DataView(file.plaintext);
+    const blob = new Blob([dataView], { type: file.type });
+
+    if (navigator.msSaveBlob) {
+      navigator.msSaveBlob(blob, file.name);
+      return resolve();
+    } else if (/iPhone|fxios/i.test(navigator.userAgent)) {
+      // This method is much slower but createObjectURL
+      // is buggy on iOS
+      const reader = new FileReader();
+      reader.addEventListener('loadend', function() {
+        if (reader.error) {
+          return reject(reader.error);
+        }
+        if (reader.result) {
+          const a = document.createElement('a');
+          a.href = reader.result;
+          a.download = file.name;
+          document.body.appendChild(a);
+          a.click();
+        }
+        resolve();
+      });
+      reader.readAsDataURL(blob);
+    } else {
+      const downloadUrl = URL.createObjectURL(blob);
+      const a = document.createElement('a');
+      a.href = downloadUrl;
+      a.download = file.name;
+      document.body.appendChild(a);
+      a.click();
+      URL.revokeObjectURL(downloadUrl);
+      setTimeout(resolve, 100);
+    }
+  });
+}
--- a/app/fileSender.js
+++ b/app/fileSender.js
@@ -0,0 +1,106 @@
+import Nanobus from 'nanobus';
+import OwnedFile from './ownedFile';
+import Keychain from './keychain';
+import { arrayToB64, bytes } from './utils';
+import { uploadWs } from './api';
+import { encryptedSize } from './utils';
+
+export default class FileSender extends Nanobus {
+  constructor() {
+    super('FileSender');
+    this.keychain = new Keychain();
+    this.reset();
+  }
+
+  get progressRatio() {
+    return this.progress[0] / this.progress[1];
+  }
+
+  get progressIndefinite() {
+    return (
+      ['fileSizeProgress', 'notifyUploadEncryptDone'].indexOf(this.msg) === -1
+    );
+  }
+
+  get sizes() {
+    return {
+      partialSize: bytes(this.progress[0]),
+      totalSize: bytes(this.progress[1])
+    };
+  }
+
+  reset() {
+    this.uploadRequest = null;
+    this.msg = 'importingFile';
+    this.progress = [0, 1];
+    this.cancelled = false;
+  }
+
+  cancel() {
+    this.cancelled = true;
+    if (this.uploadRequest) {
+      this.uploadRequest.cancel();
+    }
+  }
+
+  async upload(archive, bearerToken) {
+    if (this.cancelled) {
+      throw new Error(0);
+    }
+    this.msg = 'encryptingFile';
+    this.emit('encrypting');
+    const totalSize = encryptedSize(archive.size);
+    const encStream = await this.keychain.encryptStream(archive.stream);
+    const metadata = await this.keychain.encryptMetadata(archive);
+    const authKeyB64 = await this.keychain.authKeyB64();
+
+    this.uploadRequest = uploadWs(
+      encStream,
+      metadata,
+      authKeyB64,
+      archive.timeLimit,
+      archive.dlimit,
+      bearerToken,
+      p => {
+        this.progress = [p, totalSize];
+        this.emit('progress');
+      }
+    );
+
+    if (this.cancelled) {
+      throw new Error(0);
+    }
+
+    this.msg = 'fileSizeProgress';
+    this.emit('progress'); // HACK to kick MS Edge
+    try {
+      const result = await this.uploadRequest.result;
+      this.msg = 'notifyUploadEncryptDone';
+      this.uploadRequest = null;
+      this.progress = [1, 1];
+      const secretKey = arrayToB64(this.keychain.rawSecret);
+      const ownedFile = new OwnedFile({
+        id: result.id,
+        url: `${result.url}#${secretKey}`,
+        name: archive.name,
+        size: archive.size,
+        manifest: archive.manifest,
+        time: result.duration,
+        speed: archive.size / (result.duration / 1000),
+        createdAt: Date.now(),
+        expiresAt: Date.now() + archive.timeLimit * 1000,
+        secretKey: secretKey,
+        nonce: this.keychain.nonce,
+        ownerToken: result.ownerToken,
+        dlimit: archive.dlimit,
+        timeLimit: archive.timeLimit
+      });
+
+      return ownedFile;
+    } catch (e) {
+      this.msg = 'errorPageHeader';
+      this.uploadRequest = null;
+      throw e;
+    }
+  }
+}
--- a/app/fxa.js
+++ b/app/fxa.js
@@ -0,0 +1,181 @@
+/* global AUTH_CONFIG */
+import { arrayToB64, b64ToArray } from './utils';
+
+const encoder = new TextEncoder();
+const decoder = new TextDecoder();
+
+function getOtherInfo(enc) {
+  const name = encoder.encode(enc);
+  const length = 256;
+  const buffer = new ArrayBuffer(name.length + 16);
+  const dv = new DataView(buffer);
+  const result = new Uint8Array(buffer);
+  let i = 0;
+  dv.setUint32(i, name.length);
+  i += 4;
+  result.set(name, i);
+  i += name.length;
+  dv.setUint32(i, 0);
+  i += 4;
+  dv.setUint32(i, 0);
+  i += 4;
+  dv.setUint32(i, length);
+  return result;
+}
+
+function concat(b1, b2) {
+  const result = new Uint8Array(b1.length + b2.length);
+  result.set(b1, 0);
+  result.set(b2, b1.length);
+  return result;
+}
+
+async function concatKdf(key, enc) {
+  if (key.length !== 32) {
+    throw new Error('unsupported key length');
+  }
+  const otherInfo = getOtherInfo(enc);
+  const buffer = new ArrayBuffer(4 + key.length + otherInfo.length);
+  const dv = new DataView(buffer);
+  const concat = new Uint8Array(buffer);
+  dv.setUint32(0, 1);
+  concat.set(key, 4);
+  concat.set(otherInfo, key.length + 4);
+  const result = await crypto.subtle.digest('SHA-256', concat);
+  return new Uint8Array(result);
+}
+
+export async function prepareScopedBundleKey(storage) {
+  const keys = await crypto.subtle.generateKey(
+    {
+      name: 'ECDH',
+      namedCurve: 'P-256'
+    },
+    true,
+    ['deriveBits']
+  );
+  const privateJwk = await crypto.subtle.exportKey('jwk', keys.privateKey);
+  const publicJwk = await crypto.subtle.exportKey('jwk', keys.publicKey);
+  const kid = await crypto.subtle.digest(
+    'SHA-256',
+    encoder.encode(JSON.stringify(publicJwk))
+  );
+  privateJwk.kid = kid;
+  publicJwk.kid = kid;
+  storage.set('scopedBundlePrivateKey', JSON.stringify(privateJwk));
+  return arrayToB64(encoder.encode(JSON.stringify(publicJwk)));
+}
+
+export async function decryptBundle(storage, bundle) {
+  const privateJwk = JSON.parse(storage.get('scopedBundlePrivateKey'));
+  storage.remove('scopedBundlePrivateKey');
+  const privateKey = await crypto.subtle.importKey(
+    'jwk',
+    privateJwk,
+    {
+      name: 'ECDH',
+      namedCurve: 'P-256'
+    },
+    false,
+    ['deriveBits']
+  );
+  const jweParts = bundle.split('.');
+  if (jweParts.length !== 5) {
+    throw new Error('invalid jwe');
+  }
+  const header = JSON.parse(decoder.decode(b64ToArray(jweParts[0])));
+  const additionalData = encoder.encode(jweParts[0]);
+  const iv = b64ToArray(jweParts[2]);
+  const ciphertext = b64ToArray(jweParts[3]);
+  const tag = b64ToArray(jweParts[4]);
+
+  if (header.alg !== 'ECDH-ES' || header.enc !== 'A256GCM') {
+    throw new Error('unsupported jwe type');
+  }
+
+  const publicKey = await crypto.subtle.importKey(
+    'jwk',
+    header.epk,
+    {
+      name: 'ECDH',
+      namedCurve: 'P-256'
+    },
+    false,
+    []
+  );
+  const sharedBits = await crypto.subtle.deriveBits(
+    {
+      name: 'ECDH',
+      public: publicKey
+    },
+    privateKey,
+    256
+  );
+
+  const rawSharedKey = await concatKdf(new Uint8Array(sharedBits), header.enc);
+  const sharedKey = await crypto.subtle.importKey(
+    'raw',
+    rawSharedKey,
+    {
+      name: 'AES-GCM'
+    },
+    false,
+    ['decrypt']
+  );
+
+  const plaintext = await crypto.subtle.decrypt(
+    {
+      name: 'AES-GCM',
+      iv: iv,
+      additionalData: additionalData,
+      tagLength: tag.length * 8
+    },
+    sharedKey,
+    concat(ciphertext, tag)
+  );
+
+  return JSON.parse(decoder.decode(plaintext));
+}
+
+export async function preparePkce(storage) {
+  const verifier = arrayToB64(crypto.getRandomValues(new Uint8Array(64)));
+  storage.set('pkceVerifier', verifier);
+  const challenge = await crypto.subtle.digest(
+    'SHA-256',
+    encoder.encode(verifier)
+  );
+  return arrayToB64(new Uint8Array(challenge));
+}
+
+export async function deriveFileListKey(ikm) {
+  const baseKey = await crypto.subtle.importKey(
+    'raw',
+    b64ToArray(ikm),
+    { name: 'HKDF' },
+    false,
+    ['deriveKey']
+  );
+  const fileListKey = await crypto.subtle.deriveKey(
+    {
+      name: 'HKDF',
+      salt: new Uint8Array(),
+      info: encoder.encode('fileList'),
+      hash: 'SHA-256'
+    },
+    baseKey,
+    {
+      name: 'AES-GCM',
+      length: 128
+    },
+    true,
+    ['encrypt', 'decrypt']
+  );
+  const rawFileListKey = await crypto.subtle.exportKey('raw', fileListKey);
+  return arrayToB64(new Uint8Array(rawFileListKey));
+}
+
+export async function getFileListKey(storage, bundle) {
+  const jwks = await decryptBundle(storage, bundle);
+  const jwk = jwks[AUTH_CONFIG.key_scope];
+  return deriveFileListKey(jwk.k);
+}
--- a/app/keychain.js
+++ b/app/keychain.js
@@ -0,0 +1,164 @@
+import { arrayToB64, b64ToArray } from './utils';
+import { decryptStream, encryptStream } from './ece.js';
+const encoder = new TextEncoder();
+const decoder = new TextDecoder();
+
+export default class Keychain {
+  constructor(secretKeyB64, nonce) {
+    this._nonce = nonce || 'yRCdyQ1EMSA3mo4rqSkuNQ==';
+    if (secretKeyB64) {
+      this.rawSecret = b64ToArray(secretKeyB64);
+    } else {
+      this.rawSecret = crypto.getRandomValues(new Uint8Array(16));
+    }
+    this.secretKeyPromise = crypto.subtle.importKey(
+      'raw',
+      this.rawSecret,
+      'HKDF',
+      false,
+      ['deriveKey']
+    );
+    this.metaKeyPromise = this.secretKeyPromise.then(function(secretKey) {
+      return crypto.subtle.deriveKey(
+        {
+          name: 'HKDF',
+          salt: new Uint8Array(),
+          info: encoder.encode('metadata'),
+          hash: 'SHA-256'
+        },
+        secretKey,
+        {
+          name: 'AES-GCM',
+          length: 128
+        },
+        false,
+        ['encrypt', 'decrypt']
+      );
+    });
+    this.authKeyPromise = this.secretKeyPromise.then(function(secretKey) {
+      return crypto.subtle.deriveKey(
+        {
+          name: 'HKDF',
+          salt: new Uint8Array(),
+          info: encoder.encode('authentication'),
+          hash: 'SHA-256'
+        },
+        secretKey,
+        {
+          name: 'HMAC',
+          hash: { name: 'SHA-256' }
+        },
+        true,
+        ['sign']
+      );
+    });
+  }
+
+  get nonce() {
+    return this._nonce;
+  }
+
+  set nonce(n) {
+    if (n && n !== this._nonce) {
+      this._nonce = n;
+    }
+  }
+
+  setPassword(password, shareUrl) {
+    this.authKeyPromise = crypto.subtle
+      .importKey('raw', encoder.encode(password), { name: 'PBKDF2' }, false, [
+        'deriveKey'
+      ])
+      .then(passwordKey =>
+        crypto.subtle.deriveKey(
+          {
+            name: 'PBKDF2',
+            salt: encoder.encode(shareUrl),
+            iterations: 100,
+            hash: 'SHA-256'
+          },
+          passwordKey,
+          {
+            name: 'HMAC',
+            hash: 'SHA-256'
+          },
+          true,
+          ['sign']
+        )
+      );
+  }
+
+  setAuthKey(authKeyB64) {
+    this.authKeyPromise = crypto.subtle.importKey(
+      'raw',
+      b64ToArray(authKeyB64),
+      {
+        name: 'HMAC',
+        hash: 'SHA-256'
+      },
+      true,
+      ['sign']
+    );
+  }
+
+  async authKeyB64() {
+    const authKey = await this.authKeyPromise;
+    const rawAuth = await crypto.subtle.exportKey('raw', authKey);
+    return arrayToB64(new Uint8Array(rawAuth));
+  }
+
+  async authHeader() {
+    const authKey = await this.authKeyPromise;
+    const sig = await crypto.subtle.sign(
+      {
+        name: 'HMAC'
+      },
+      authKey,
+      b64ToArray(this.nonce)
+    );
+    return `send-v1 ${arrayToB64(new Uint8Array(sig))}`;
+  }
+
+  async encryptMetadata(metadata) {
+    const metaKey = await this.metaKeyPromise;
+    const ciphertext = await crypto.subtle.encrypt(
+      {
+        name: 'AES-GCM',
+        iv: new Uint8Array(12),
+        tagLength: 128
+      },
+      metaKey,
+      encoder.encode(
+        JSON.stringify({
+          name: metadata.name,
+          size: metadata.size,
+          type: metadata.type || 'application/octet-stream',
+          manifest: metadata.manifest || {}
+        })
+      )
+    );
+    return ciphertext;
+  }
+
+  encryptStream(plainStream) {
+    return encryptStream(plainStream, this.rawSecret);
+  }
+
+  decryptStream(cryptotext) {
+    return decryptStream(cryptotext, this.rawSecret);
+  }
+
+  async decryptMetadata(ciphertext) {
+    const metaKey = await this.metaKeyPromise;
+    const plaintext = await crypto.subtle.decrypt(
+      {
+        name: 'AES-GCM',
+        iv: new Uint8Array(12),
+        tagLength: 128
+      },
+      metaKey,
+      ciphertext
+    );
+    return JSON.parse(decoder.decode(plaintext));
+  }
+}
--- a/app/locale.js
+++ b/app/locale.js
@@ -0,0 +1,26 @@
+import { FluentBundle } from '@fluent/bundle';
+
+function makeBundle(locale, ftl) {
+  const bundle = new FluentBundle(locale, { useIsolating: false });
+  bundle.addMessages(ftl);
+  return bundle;
+}
+
+export async function getTranslator(locale) {
+  const bundles = [];
+  const { default: en } = await import('../public/locales/en-US/send.ftl');
+  if (locale !== 'en-US') {
+    const { default: ftl } = await import(
+      `../public/locales/${locale}/send.ftl`
+    );
+    bundles.push(makeBundle(locale, ftl));
+  }
+  bundles.push(makeBundle('en-US', en));
+  return function(id, data) {
+    for (let bundle of bundles) {
+      if (bundle.hasMessage(id)) {
+        return bundle.format(bundle.getMessage(id), data);
+      }
+    }
+  };
+}
--- a/app/main.css
+++ b/app/main.css
@@ -0,0 +1,409 @@
+@tailwind base;
+
+html {
+  line-height: 1.15;
+}
+
+@tailwind components;
+
+:not(input) {
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
+
+:root {
+  --violet-gradient: linear-gradient(
+    -180deg,
+    rgba(144, 89, 255, 0.8) 0%,
+    rgba(144, 89, 255, 0.4) 100%
+  );
+}
+
+a {
+  color: inherit;
+  text-decoration: none;
+}
+
+a:focus {
+  outline: 1px dotted grey;
+}
+
+body {
+  background-image: url('../assets/bg.svg');
+  background-position: center;
+  background-repeat: no-repeat;
+  background-size: cover;
+  overflow-x: hidden;
+}
+
+.btn {
+  @apply bg-blue-60;
+  @apply text-white;
+  @apply cursor-pointer;
+  @apply py-4;
+  @apply px-6;
+  @apply font-semibold;
+}
+
+.btn:hover {
+  @apply bg-blue-70;
+}
+
+.btn:focus {
+  @apply bg-blue-70;
+}
+
+.checkbox {
+  @apply leading-normal;
+  @apply select-none;
+}
+
+.checkbox > input[type='checkbox'] {
+  @apply absolute;
+  @apply opacity-0;
+}
+
+.checkbox > label {
+  @apply cursor-pointer;
+}
+
+.checkbox > label::before {
+  /* @apply bg-grey-10; */
+  @apply border;
+  @apply rounded-sm;
+
+  content: '';
+  height: 1.5rem;
+  width: 1.5rem;
+  margin-right: 0.5rem;
+  float: left;
+}
+
+.checkbox > label:hover::before {
+  @apply border-blue-50;
+}
+
+.checkbox > input:focus + label::before {
+  @apply border-blue-50;
+}
+
+.checkbox > input:checked + label::before {
+  @apply bg-blue-50;
+  @apply border-blue-50;
+
+  background-image: url('../assets/lock.svg');
+  background-position: center;
+  background-size: 1.25rem;
+  background-repeat: no-repeat;
+}
+
+.checkbox > input:disabled + label {
+  cursor: auto;
+}
+
+.checkbox > input:disabled + label::before {
+  @apply bg-blue-50;
+  @apply border-blue-50;
+
+  background-image: url('../assets/lock.svg');
+  background-position: center;
+  background-size: 1.25rem;
+  background-repeat: no-repeat;
+  cursor: auto;
+}
+
+details {
+  overflow: hidden;
+}
+
+details > summary::-webkit-details-marker {
+  display: none;
+}
+
+details > summary > svg {
+  transition: all 0.25s cubic-bezier(0.07, 0.95, 0, 1);
+}
+
+details[open] {
+  overflow-y: auto;
+}
+
+details[open] > summary > svg {
+  transform: rotate(90deg);
+}
+
+footer li a:hover {
+  text-decoration: underline;
+}
+
+.feedback-link {
+  background-color: #000;
+  background-image: url('../assets/feedback.svg');
+  background-position: 0.125rem 0.25rem;
+  background-repeat: no-repeat;
+  background-size: 1.125rem;
+  color: #fff;
+  display: block;
+  font-size: 0.75rem;
+  line-height: 0.75rem;
+  padding: 0.375rem 0.375rem 0.375rem 1.25rem;
+  text-indent: 0.125rem;
+  white-space: nowrap;
+}
+
+.link-blue {
+  @apply text-blue-60;
+}
+
+.link-blue:hover {
+  @apply text-blue-70;
+}
+
+.link-blue:focus {
+  @apply text-blue-70;
+}
+
+.main-header img {
+  height: 32px;
+  width: auto;
+}
+
+.main {
+  display: flex;
+  position: relative;
+  max-width: 64rem;
+  width: 100%;
+  height: 100%;
+}
+
+.main > section {
+  @apply bg-white;
+}
+
+#password-msg::after {
+  content: '\200b';
+}
+
+progress {
+  @apply bg-grey-30;
+  @apply rounded-sm;
+  @apply w-full;
+  @apply h-1;
+}
+
+progress::-webkit-progress-bar {
+  @apply bg-grey-30;
+  @apply rounded-sm;
+  @apply w-full;
+  @apply h-1;
+}
+
+progress::-webkit-progress-value {
+  /* stylelint-disable */
+  background-image: -webkit-linear-gradient(
+      -45deg,
+      transparent 20%,
+      rgba(255, 255, 255, 0.4) 20%,
+      rgba(255, 255, 255, 0.4) 40%,
+      transparent 40%,
+      transparent 60%,
+      rgba(255, 255, 255, 0.4) 60%,
+      rgba(255, 255, 255, 0.4) 80%,
+      transparent 80%
+    ),
+    -webkit-linear-gradient(left, #0a84ff, #0a84ff);
+  /* stylelint-enable */
+  border-radius: 2px;
+  background-size: 21px 20px, 100% 100%, 100% 100%;
+  -webkit-animation: animate-stripes 1s linear infinite;
+}
+
+progress::-moz-progress-bar {
+  /* stylelint-disable */
+  background-image: -moz-linear-gradient(
+      135deg,
+      transparent 20%,
+      rgba(255, 255, 255, 0.4) 20%,
+      rgba(255, 255, 255, 0.4) 40%,
+      transparent 40%,
+      transparent 60%,
+      rgba(255, 255, 255, 0.4) 60%,
+      rgba(255, 255, 255, 0.4) 80%,
+      transparent 80%
+    ),
+    -moz-linear-gradient(left, #0a84ff, #0a84ff);
+  /* stylelint-enable */
+  border-radius: 2px;
+  background-size: 21px 20px, 100% 100%, 100% 100%;
+  animation: animate-stripes 1s linear infinite;
+}
+
+@-webkit-keyframes animate-stripes {
+  100% {
+    background-position: -21px 0;
+  }
+}
+
+@keyframes animate-stripes {
+  100% {
+    background-position: -21px 0;
+  }
+}
+
+select {
+  background-image: url('../assets/select-arrow.svg');
+  background-position: calc(100% - 0.75rem);
+  background-repeat: no-repeat;
+}
+
+@screen md {
+  .main-header img {
+    height: 48px;
+    width: auto;
+  }
+
+  .main {
+    @apply flex-1;
+    @apply self-center;
+    @apply items-center;
+    @apply m-auto;
+    @apply py-8;
+
+    min-height: 42rem;
+    max-height: 42rem;
+    width: calc(100% - 3rem);
+  }
+}
+
+@screen dark {
+  body {
+    @apply text-grey-10;
+
+    background-image: unset;
+  }
+
+  .btn {
+    @apply bg-blue-40;
+    @apply text-white;
+  }
+
+  .btn:hover {
+    @apply bg-blue-50;
+  }
+
+  .btn:focus {
+    @apply bg-blue-50;
+  }
+
+  .link-blue {
+    @apply text-blue-40;
+  }
+
+  .link-blue:hover {
+    @apply text-blue-50;
+  }
+
+  .link-blue:focus {
+    @apply text-blue-50;
+  }
+
+  .main > section {
+    @apply bg-grey-90;
+  }
+
+  @screen md {
+    .main > section {
+      @apply border;
+      @apply border-grey-80;
+    }
+  }
+}
+
+@tailwind utilities;
+
+@responsive {
+  .shadow-light {
+    box-shadow: 0 0 8px 0 rgba(12, 12, 13, 0.1);
+  }
+
+  .shadow-big {
+    box-shadow: 0 12px 18px 2px rgba(34, 0, 51, 0.04),
+      0 6px 22px 4px rgba(7, 48, 114, 0.12),
+      0 6px 10px -4px rgba(14, 13, 26, 0.12);
+  }
+}
+
+@variants focus {
+  .outline {
+    outline: 1px dotted grey;
+  }
+}
+
+.word-break-all {
+  word-break: break-all;
+  line-break: anywhere;
+}
+
+.signin {
+  backface-visibility: hidden;
+  border-radius: 6px;
+  transition-property: transform, background-color;
+  transition-duration: 250ms;
+  transition-timing-function: cubic-bezier(0.07, 0.95, 0, 1);
+}
+
+.signin:hover,
+.signin:focus {
+  transform: scale(1.0625);
+}
+
+.signin:hover:active {
+  transform: scale(0.9375);
+}
+
+/* begin signin button color experiment */
+
+.white-blue {
+  @apply border-blue-60;
+  @apply border-2;
+  @apply text-blue-60;
+}
+
+.white-blue:hover,
+.white-blue:focus {
+  @apply bg-blue-60;
+  @apply text-white;
+}
+
+.blue {
+  @apply bg-blue-60;
+  @apply text-white;
+}
+
+.white-violet {
+  @apply border-violet;
+  @apply border-2;
+  @apply text-violet;
+}
+
+.white-violet:hover,
+.white-violet:focus {
+  @apply bg-violet;
+  @apply text-white;
+
+  background-image: var(--violet-gradient);
+}
+
+.violet {
+  @apply bg-violet;
+  @apply text-white;
+}
+
+.violet:hover,
+.violet:focus {
+  background-image: var(--violet-gradient);
+}
+
+/* end signin button color experiment */
--- a/app/main.js
+++ b/app/main.js
@@ -0,0 +1,76 @@
+/* global DEFAULTS LIMITS WEB_UI PREFS */
+import 'core-js';
+import 'fast-text-encoding'; // MS Edge support
+import 'intl-pluralrules';
+import choo from 'choo';
+import nanotiming from 'nanotiming';
+import routes from './routes';
+import getCapabilities from './capabilities';
+import controller from './controller';
+import dragManager from './dragManager';
+import pasteManager from './pasteManager';
+import storage from './storage';
+import metrics from './metrics';
+import experiments from './experiments';
+import * as Sentry from '@sentry/browser';
+import './main.css';
+import User from './user';
+import { getTranslator } from './locale';
+import Archive from './archive';
+import { setTranslate, locale } from './utils';
+
+if (navigator.doNotTrack !== '1' && window.SENTRY_CONFIG) {
+  Sentry.init(window.SENTRY_CONFIG);
+}
+
+if (process.env.NODE_ENV === 'production') {
+  nanotiming.disabled = true;
+}
+
+(async function start() {
+  const capabilities = await getCapabilities();
+  if (
+    !capabilities.crypto &&
+    window.location.pathname !== '/unsupported/crypto'
+  ) {
+    return window.location.assign('/unsupported/crypto');
+  }
+  if (capabilities.serviceWorker) {
+    try {
+      await navigator.serviceWorker.register('/serviceWorker.js');
+      await navigator.serviceWorker.ready;
+    } catch (e) {
+      // continue but disable streaming downloads
+      capabilities.streamDownload = false;
+    }
+  }
+
+  const translate = await getTranslator(locale());
+  setTranslate(translate);
+  // eslint-disable-next-line require-atomic-updates
+  window.initialState = {
+    LIMITS,
+    DEFAULTS,
+    WEB_UI,
+    PREFS,
+    archive: new Archive([], DEFAULTS.EXPIRE_SECONDS),
+    capabilities,
+    translate,
+    storage,
+    sentry: Sentry,
+    user: new User(storage, LIMITS, window.AUTH_CONFIG),
+    transfer: null,
+    fileInfo: null,
+    locale: locale()
+  };
+
+  const app = routes(choo({ hash: true }));
+  // eslint-disable-next-line require-atomic-updates
+  window.app = app;
+  app.use(experiments);
+  app.use(metrics);
+  app.use(controller);
+  app.use(dragManager);
+  app.use(pasteManager);
+  app.mount('body');
+})();
--- a/app/metrics.js
+++ b/app/metrics.js
@@ -0,0 +1,186 @@
+import storage from './storage';
+import { platform, locale } from './utils';
+import { sendMetrics } from './api';
+
+let appState = null;
+let experiment = null;
+const HOUR = 1000 * 60 * 60;
+const events = [];
+let session_id = Date.now();
+const lang = locale();
+
+export default function initialize(state, emitter) {
+  appState = state;
+
+  emitter.on('DOMContentLoaded', () => {
+    experiment = storage.enrolled;
+    if (!appState.user.firstAction) {
+      appState.user.firstAction =
+        appState.route === '/' ? 'upload' : 'download';
+    }
+    const query = appState.query;
+    addEvent('client_visit', {
+      entrypoint: appState.route === '/' ? 'upload' : 'download',
+      referrer: document.referrer,
+      utm_campaign: query.utm_campaign,
+      utm_content: query.utm_content,
+      utm_medium: query.utm_medium,
+      utm_source: query.utm_source,
+      utm_term: query.utm_term
+    });
+  });
+  emitter.on('experiment', experimentEvent);
+  window.addEventListener('unload', submitEvents);
+}
+
+function sizeOrder(n) {
+  return Math.floor(Math.log10(n));
+}
+
+function submitEvents() {
+  if (navigator.doNotTrack === '1') {
+    return;
+  }
+  sendMetrics(
+    new Blob(
+      [
+        JSON.stringify({
+          now: Date.now(),
+          session_id,
+          lang,
+          platform: platform(),
+          events
+        })
+      ],
+      { type: 'text/plain' } // see http://crbug.com/490015
+    )
+  );
+  events.splice(0);
+}
+
+async function addEvent(event_type, event_properties) {
+  const user_id = await appState.user.metricId();
+  const device_id = await appState.user.deviceId();
+  const ab_id = Object.keys(experiment)[0];
+  if (ab_id) {
+    event_properties.experiment = ab_id;
+    event_properties.variant = experiment[ab_id];
+  }
+  events.push({
+    device_id,
+    event_properties,
+    event_type,
+    time: Date.now(),
+    user_id,
+    user_properties: {
+      anonymous: !appState.user.loggedIn,
+      first_action: appState.user.firstAction,
+      active_count: storage.files.length
+    }
+  });
+  if (events.length === 25) {
+    submitEvents();
+  }
+}
+
+function cancelledUpload(archive, duration) {
+  return addEvent('client_upload', {
+    download_limit: archive.dlimit,
+    duration: sizeOrder(duration),
+    file_count: archive.numFiles,
+    password_protected: !!archive.password,
+    size: sizeOrder(archive.size),
+    status: 'cancel',
+    time_limit: archive.timeLimit
+  });
+}
+
+function completedUpload(archive, duration) {
+  return addEvent('client_upload', {
+    download_limit: archive.dlimit,
+    duration: sizeOrder(duration),
+    file_count: archive.numFiles,
+    password_protected: !!archive.password,
+    size: sizeOrder(archive.size),
+    status: 'ok',
+    time_limit: archive.timeLimit
+  });
+}
+
+function stoppedUpload(archive, duration = 0) {
+  return addEvent('client_upload', {
+    download_limit: archive.dlimit,
+    duration: sizeOrder(duration),
+    file_count: archive.numFiles,
+    password_protected: !!archive.password,
+    size: sizeOrder(archive.size),
+    status: 'error',
+    time_limit: archive.timeLimit
+  });
+}
+
+function stoppedDownload(params) {
+  return addEvent('client_download', {
+    duration: sizeOrder(params.duration),
+    password_protected: params.password_protected,
+    size: sizeOrder(params.size),
+    status: 'error'
+  });
+}
+
+function completedDownload(params) {
+  return addEvent('client_download', {
+    duration: sizeOrder(params.duration),
+    password_protected: params.password_protected,
+    size: sizeOrder(params.size),
+    status: 'ok'
+  });
+}
+
+function deletedUpload(ownedFile) {
+  return addEvent('client_delete', {
+    age: Math.floor((Date.now() - ownedFile.createdAt) / HOUR),
+    downloaded: ownedFile.dtotal > 0,
+    status: 'ok'
+  });
+}
+
+function experimentEvent(params) {
+  return addEvent('client_experiment', params);
+}
+
+function submittedSignup(params) {
+  return addEvent('client_login', {
+    status: 'ok',
+    trigger: params.trigger
+  });
+}
+
+function canceledSignup(params) {
+  return addEvent('client_login', {
+    status: 'cancel',
+    trigger: params.trigger
+  });
+}
+
+function loggedOut(params) {
+  addEvent('client_logout', {
+    status: 'ok',
+    trigger: params.trigger
+  });
+  // flush events and start new anon session
+  submitEvents();
+  session_id = Date.now();
+}
+
+export {
+  cancelledUpload,
+  stoppedUpload,
+  completedUpload,
+  deletedUpload,
+  stoppedDownload,
+  completedDownload,
+  submittedSignup,
+  canceledSignup,
+  loggedOut
+};
--- a/app/ownedFile.js
+++ b/app/ownedFile.js
@@ -0,0 +1,96 @@
+import Keychain from './keychain';
+import { arrayToB64 } from './utils';
+import { del, fileInfo, setParams, setPassword } from './api';
+
+export default class OwnedFile {
+  constructor(obj) {
+    if (!obj.manifest) {
+      throw new Error('invalid file object');
+    }
+    this.id = obj.id;
+    this.url = obj.url;
+    this.name = obj.name;
+    this.size = obj.size;
+    this.manifest = obj.manifest;
+    this.time = obj.time;
+    this.speed = obj.speed;
+    this.createdAt = obj.createdAt;
+    this.expiresAt = obj.expiresAt;
+    this.ownerToken = obj.ownerToken;
+    this.dlimit = obj.dlimit || 1;
+    this.dtotal = obj.dtotal || 0;
+    this.keychain = new Keychain(obj.secretKey, obj.nonce);
+    this._hasPassword = !!obj.hasPassword;
+    this.timeLimit = obj.timeLimit;
+  }
+
+  get hasPassword() {
+    return !!this._hasPassword;
+  }
+
+  get expired() {
+    return this.dlimit === this.dtotal || Date.now() > this.expiresAt;
+  }
+
+  async setPassword(password) {
+    try {
+      this.password = password;
+      this._hasPassword = true;
+      this.keychain.setPassword(password, this.url);
+      const result = await setPassword(this.id, this.ownerToken, this.keychain);
+      return result;
+    } catch (e) {
+      this.password = null;
+      this._hasPassword = false;
+      throw e;
+    }
+  }
+
+  del() {
+    return del(this.id, this.ownerToken);
+  }
+
+  changeLimit(dlimit, user = {}) {
+    if (this.dlimit !== dlimit) {
+      this.dlimit = dlimit;
+      return setParams(this.id, this.ownerToken, user.bearerToken, { dlimit });
+    }
+    return Promise.resolve(true);
+  }
+
+  async updateDownloadCount() {
+    const oldTotal = this.dtotal;
+    const oldLimit = this.dlimit;
+    try {
+      const result = await fileInfo(this.id, this.ownerToken);
+      this.dtotal = result.dtotal;
+      this.dlimit = result.dlimit;
+    } catch (e) {
+      if (e.message === '404') {
+        this.dtotal = this.dlimit;
+      }
+      // ignore other errors
+    }
+    return oldTotal !== this.dtotal || oldLimit !== this.dlimit;
+  }
+
+  toJSON() {
+    return {
+      id: this.id,
+      url: this.url,
+      name: this.name,
+      size: this.size,
+      manifest: this.manifest,
+      time: this.time,
+      speed: this.speed,
+      createdAt: this.createdAt,
+      expiresAt: this.expiresAt,
+      secretKey: arrayToB64(this.keychain.rawSecret),
+      ownerToken: this.ownerToken,
+      dlimit: this.dlimit,
+      dtotal: this.dtotal,
+      hasPassword: this.hasPassword,
+      timeLimit: this.timeLimit
+    };
+  }
+}
--- a/app/pasteManager.js
+++ b/app/pasteManager.js
@@ -0,0 +1,36 @@
+function getString(item) {
+  return new Promise(resolve => {
+    item.getAsString(resolve);
+  });
+}
+
+export default function(state, emitter) {
+  window.addEventListener('paste', async event => {
+    if (state.route !== '/' || state.uploading) return;
+    if (['password', 'text', 'email'].includes(event.target.type)) return;
+
+    const items = Array.from(event.clipboardData.items);
+    const transferFiles = items.filter(item => item.kind === 'file');
+    const strings = items.filter(item => item.kind === 'string');
+    if (transferFiles.length) {
+      const promises = transferFiles.map(async (f, i) => {
+        const blob = f.getAsFile();
+        if (!blob) {
+          return null;
+        }
+        const name = await getString(strings[i]);
+        const file = new File([blob], name, { type: blob.type });
+        return file;
+      });
+      const files = (await Promise.all(promises)).filter(f => !!f);
+      if (files.length) {
+        emitter.emit('addFiles', { files });
+      }
+    } else if (strings.length) {
+      strings[0].getAsString(s => {
+        const file = new File([s], 'pasted.txt', { type: 'text/plain' });
+        emitter.emit('addFiles', { files: [file] });
+      });
+    }
+  });
+}
--- a/app/qrcode.js
+++ b/app/qrcode.js
--- a/app/readme.md
+++ b/app/readme.md
@@ -0,0 +1,9 @@
+# Application Code
+
+`app/` contains the browser code that gets bundled into `app.[hash].js`. It's got all the logic, crypto, and UI. All of it gets used in the browser, and some of it by the server for server side rendering.
+
+The main entrypoint for the browser is [main.js](./main.js) and on the server [routes.js](./routes.js) is imported by [/server/routes/pages.js](../server/routes/pages.js)
+
+- `pages` contains display logic an markup for pages
+- `routes` contains route definitions and logic
+- `templates` contains ui elements smaller than pages
--- a/app/routes.js
+++ b/app/routes.js
@@ -0,0 +1,21 @@
+const choo = require('choo');
+const download = require('./ui/download');
+const body = require('./ui/body');
+
+module.exports = function(app = choo({ hash: true })) {
+  app.route('/', body(require('./ui/home')));
+  app.route('/download/:id', body(download));
+  app.route('/download/:id/:key', body(download));
+  app.route('/unsupported/:reason', body(require('./ui/unsupported')));
+  app.route('/error', body(require('./ui/error')));
+  app.route('/blank', body(require('./ui/blank')));
+  app.route('/oauth', function(state, emit) {
+    emit('authenticate', state.query.code, state.query.state);
+  });
+  app.route('/login', function(state, emit) {
+    emit('replaceState', '/');
+    setTimeout(() => emit('render'));
+  });
+  app.route('*', body(require('./ui/notFound')));
+  return app;
+};
--- a/app/serviceWorker.js
+++ b/app/serviceWorker.js
@@ -0,0 +1,174 @@
+import assets from '../common/assets';
+import { version } from '../package.json';
+import Keychain from './keychain';
+import { downloadStream } from './api';
+import { transformStream } from './streams';
+import Zip from './zip';
+import contentDisposition from 'content-disposition';
+
+let noSave = false;
+const map = new Map();
+const IMAGES = /.*\.(png|svg|jpg)$/;
+const VERSIONED_ASSET = /\.[A-Fa-f0-9]{8}\.(js|css|png|svg|jpg)(#\w+)?$/;
+const DOWNLOAD_URL = /\/api\/download\/([A-Fa-f0-9]{4,})/;
+const FONT = /\.woff2?$/;
+
+self.addEventListener('install', () => {
+  self.skipWaiting();
+});
+
+self.addEventListener('activate', event => {
+  event.waitUntil(self.clients.claim().then(precache));
+});
+
+async function decryptStream(id) {
+  const file = map.get(id);
+  if (!file) {
+    return new Response(null, { status: 400 });
+  }
+  try {
+    let size = file.size;
+    let type = file.type;
+    const keychain = new Keychain(file.key, file.nonce);
+    if (file.requiresPassword) {
+      keychain.setPassword(file.password, file.url);
+    }
+
+    file.download = downloadStream(id, keychain);
+
+    const body = await file.download.result;
+
+    const decrypted = keychain.decryptStream(body);
+
+    let zipStream = null;
+    if (file.type === 'send-archive') {
+      const zip = new Zip(file.manifest, decrypted);
+      zipStream = zip.stream;
+      type = 'application/zip';
+      size = zip.size;
+    }
+    const responseStream = transformStream(
+      zipStream || decrypted,
+      {
+        transform(chunk, controller) {
+          file.progress += chunk.length;
+          controller.enqueue(chunk);
+        }
+      },
+      function oncancel() {
+        // NOTE: cancel doesn't currently fire on chrome
+        // https://bugs.chromium.org/p/chromium/issues/detail?id=638494
+        file.download.cancel();
+        map.delete(id);
+      }
+    );
+
+    const headers = {
+      'Content-Disposition': contentDisposition(file.filename),
+      'Content-Type': type,
+      'Content-Length': size
+    };
+    return new Response(responseStream, { headers });
+  } catch (e) {
+    if (noSave) {
+      return new Response(null, { status: e.message });
+    }
+
+    return new Response(null, {
+      status: 302,
+      headers: {
+        Location: `/download/${id}/#${file.key}`
+      }
+    });
+  }
+}
+
+async function precache() {
+  try {
+    await cleanCache();
+    const cache = await caches.open(version);
+    const images = assets.match(IMAGES);
+    await cache.addAll(images);
+  } catch (e) {
+    console.error(e);
+    // cache will get populated on demand
+  }
+}
+
+async function cleanCache() {
+  const oldCaches = await caches.keys();
+  for (const c of oldCaches) {
+    if (c !== version) {
+      await caches.delete(c);
+    }
+  }
+}
+
+function cacheable(url) {
+  return VERSIONED_ASSET.test(url) || FONT.test(url);
+}
+
+async function cachedOrFetched(req) {
+  const cache = await caches.open(version);
+  const cached = await cache.match(req);
+  if (cached) {
+    return cached;
+  }
+  const fetched = await fetch(req);
+  if (fetched.ok && cacheable(req.url)) {
+    cache.put(req, fetched.clone());
+  }
+  return fetched;
+}
+
+self.onfetch = event => {
+  const req = event.request;
+  if (req.method !== 'GET') return;
+  const url = new URL(req.url);
+  const dlmatch = DOWNLOAD_URL.exec(url.pathname);
+  if (dlmatch) {
+    event.respondWith(decryptStream(dlmatch[1]));
+  } else if (cacheable(url.pathname)) {
+    event.respondWith(cachedOrFetched(req));
+  }
+};
+
+self.onmessage = event => {
+  if (event.data.request === 'init') {
+    noSave = event.data.noSave;
+    const info = {
+      key: event.data.key,
+      nonce: event.data.nonce,
+      filename: event.data.filename,
+      requiresPassword: event.data.requiresPassword,
+      password: event.data.password,
+      url: event.data.url,
+      type: event.data.type,
+      manifest: event.data.manifest,
+      size: event.data.size,
+      progress: 0
+    };
+    map.set(event.data.id, info);
+
+    event.ports[0].postMessage('file info received');
+  } else if (event.data.request === 'progress') {
+    const file = map.get(event.data.id);
+    if (!file) {
+      event.ports[0].postMessage({ error: 'cancelled' });
+    } else {
+      if (file.progress === file.size) {
+        map.delete(event.data.id);
+      }
+      event.ports[0].postMessage({ progress: file.progress });
+    }
+  } else if (event.data.request === 'cancel') {
+    const file = map.get(event.data.id);
+    if (file) {
+      if (file.download) {
+        file.download.cancel();
+      }
+      map.delete(event.data.id);
+    }
+    event.ports[0].postMessage('download cancelled');
+  }
+};
--- a/app/storage.js
+++ b/app/storage.js
@@ -0,0 +1,185 @@
+import { arrayToB64, isFile } from './utils';
+import OwnedFile from './ownedFile';
+
+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 = new Map();
+    for (let i = 0; i < this.engine.length; i++) {
+      const k = this.engine.key(i);
+      if (isFile(k)) {
+        try {
+          const f = new OwnedFile(JSON.parse(this.engine.getItem(k)));
+          if (!f.id) {
+            f.id = f.fileId;
+          }
+
+          fs.set(f.id, f);
+        } catch (err) {
+          // obviously you're not a golfer
+          this.engine.removeItem(k);
+        }
+      }
+    }
+    return fs;
+  }
+
+  get id() {
+    let id = this.engine.getItem('device_id');
+    if (!id) {
+      id = arrayToB64(crypto.getRandomValues(new Uint8Array(16)));
+      this.engine.setItem('device_id', id);
+    }
+    return id;
+  }
+
+  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('ab_experiments') || '{}');
+  }
+
+  enroll(id, variant) {
+    const enrolled = {};
+    enrolled[id] = variant;
+    this.engine.setItem('ab_experiments', JSON.stringify(enrolled));
+  }
+
+  get files() {
+    return Array.from(this._files.values()).sort(
+      (a, b) => a.createdAt - b.createdAt
+    );
+  }
+
+  get user() {
+    try {
+      return JSON.parse(this.engine.getItem('user'));
+    } catch (e) {
+      return null;
+    }
+  }
+
+  set user(info) {
+    return this.engine.setItem('user', JSON.stringify(info));
+  }
+
+  getFileById(id) {
+    return this._files.get(id);
+  }
+
+  get(id) {
+    return this.engine.getItem(id);
+  }
+
+  set(id, value) {
+    return this.engine.setItem(id, value);
+  }
+
+  remove(property) {
+    if (isFile(property)) {
+      this._files.delete(property);
+    }
+    this.engine.removeItem(property);
+  }
+
+  addFile(file) {
+    this._files.set(file.id, file);
+    this.writeFile(file);
+  }
+
+  writeFile(file) {
+    this.engine.setItem(file.id, JSON.stringify(file));
+  }
+
+  writeFiles() {
+    this._files.forEach(f => this.writeFile(f));
+  }
+
+  clearLocalFiles() {
+    this._files.forEach(f => this.engine.removeItem(f.id));
+    this._files = new Map();
+  }
+
+  async merge(files = []) {
+    let incoming = false;
+    let outgoing = false;
+    let downloadCount = false;
+    for (const f of files) {
+      if (!this.getFileById(f.id)) {
+        this.addFile(new OwnedFile(f));
+        incoming = true;
+      }
+    }
+    const workingFiles = this.files.slice();
+    for (const f of workingFiles) {
+      const cc = await f.updateDownloadCount();
+      if (cc) {
+        await this.writeFile(f);
+      }
+      downloadCount = downloadCount || cc;
+      outgoing = outgoing || f.expired;
+      if (f.expired) {
+        this.remove(f.id);
+      } else if (!files.find(x => x.id === f.id)) {
+        outgoing = true;
+      }
+    }
+    return {
+      incoming,
+      outgoing,
+      downloadCount
+    };
+  }
+}
+
+export default new Storage();
--- a/app/streams.js
+++ b/app/streams.js
@@ -0,0 +1,103 @@
+/* global TransformStream */
+
+export function transformStream(readable, transformer, oncancel) {
+  try {
+    return readable.pipeThrough(new TransformStream(transformer));
+  } catch (e) {
+    const reader = readable.getReader();
+    return new ReadableStream({
+      start(controller) {
+        if (transformer.start) {
+          return transformer.start(controller);
+        }
+      },
+      async pull(controller) {
+        let enqueued = false;
+        const wrappedController = {
+          enqueue(d) {
+            enqueued = true;
+            controller.enqueue(d);
+          }
+        };
+        while (!enqueued) {
+          const data = await reader.read();
+          if (data.done) {
+            if (transformer.flush) {
+              await transformer.flush(controller);
+            }
+            return controller.close();
+          }
+          await transformer.transform(data.value, wrappedController);
+        }
+      },
+      cancel(reason) {
+        readable.cancel(reason);
+        if (oncancel) {
+          oncancel(reason);
+        }
+      }
+    });
+  }
+}
+
+class BlobStreamController {
+  constructor(blob, size) {
+    this.blob = blob;
+    this.index = 0;
+    this.chunkSize = size || 1024 * 64;
+  }
+
+  pull(controller) {
+    return new Promise((resolve, reject) => {
+      const bytesLeft = this.blob.size - this.index;
+      if (bytesLeft <= 0) {
+        controller.close();
+        return resolve();
+      }
+      const size = Math.min(this.chunkSize, bytesLeft);
+      const slice = this.blob.slice(this.index, this.index + size);
+      const reader = new FileReader();
+      reader.onload = () => {
+        controller.enqueue(new Uint8Array(reader.result));
+        resolve();
+      };
+      reader.onerror = reject;
+      reader.readAsArrayBuffer(slice);
+      this.index += size;
+    });
+  }
+}
+
+export function blobStream(blob, size) {
+  return new ReadableStream(new BlobStreamController(blob, size));
+}
+
+class ConcatStreamController {
+  constructor(streams) {
+    this.streams = streams;
+    this.index = 0;
+    this.reader = null;
+    this.nextReader();
+  }
+
+  nextReader() {
+    const next = this.streams[this.index++];
+    this.reader = next && next.getReader();
+  }
+
+  async pull(controller) {
+    if (!this.reader) {
+      return controller.close();
+    }
+    const data = await this.reader.read();
+    if (data.done) {
+      this.nextReader();
+      return this.pull(controller);
+    }
+    controller.enqueue(data.value);
+  }
+}
+
+export function concatStream(streams) {
+  return new ReadableStream(new ConcatStreamController(streams));
+}
--- a/app/ui/account.js
+++ b/app/ui/account.js
@@ -0,0 +1,111 @@
+const html = require('choo/html');
+const Component = require('choo/component');
+
+class Account extends Component {
+  constructor(name, state, emit) {
+    super(name);
+    this.state = state;
+    this.emit = emit;
+    this.enabled = state.capabilities.account;
+    this.local = state.components[name] = {};
+    this.buttonClass = '';
+    this.setLocal();
+  }
+
+  avatarClick(event) {
+    event.preventDefault();
+    const menu = document.getElementById('accountMenu');
+    menu.classList.toggle('invisible');
+    menu.focus();
+  }
+
+  hideMenu(event) {
+    event.stopPropagation();
+    const menu = document.getElementById('accountMenu');
+    menu.classList.add('invisible');
+  }
+
+  login(event) {
+    event.preventDefault();
+    this.emit('signup-cta', 'button');
+  }
+
+  logout(event) {
+    event.preventDefault();
+    this.emit('logout');
+  }
+
+  changed() {
+    return this.local.loggedIn !== this.state.user.loggedIn;
+  }
+
+  setLocal() {
+    const changed = this.changed();
+    if (changed) {
+      this.local.loggedIn = this.state.user.loggedIn;
+    }
+    return changed;
+  }
+
+  update() {
+    return this.setLocal();
+  }
+
+  createElement() {
+    if (!this.enabled) {
+      return html`
+        <send-account></send-account>
+      `;
+    }
+    const user = this.state.user;
+    const translate = this.state.translate;
+    this.setLocal();
+    if (user.loginRequired && !this.local.loggedIn) {
+      return html`
+        <send-account></send-account>
+      `;
+    }
+    if (!this.local.loggedIn) {
+      return html`
+        <send-account>
+          <button
+            class="px-4 py-2 md:px-8 md:py-4 focus:outline signin border-2 link-blue border-blue-60 hover:border-blue-70 dark:border-blue-40 dark:hover:border-blue-50"
+            onclick="${e => this.login(e)}"
+            title="${translate('signInOnlyButton')}"
+          >
+            ${translate('signInOnlyButton')}
+          </button>
+        </send-account>
+      `;
+    }
+    return html`
+      <send-account class="relative h-8">
+        <input
+          type="image"
+          alt="${user.email}"
+          class="w-8 h-8 rounded-full border text-blue-50 md:text-white focus:outline"
+          src="${user.avatar}"
+          onclick="${e => this.avatarClick(e)}"
+        />
+        <ul
+          id="accountMenu"
+          class="invisible absolute top-0 right-0 mt-10 pt-2 pb-2 bg-white shadow-md whitespace-no-wrap outline-none z-50 dark:bg-grey-80"
+          onblur="${e => this.hideMenu(e)}"
+        >
+          <li class="p-2 text-grey-60 dark:text-grey-50">${user.email}</li>
+          <li>
+            <button
+              class="block w-full text-left px-4 py-2 text-grey-80 dark:text-grey-30 hover:bg-blue-50 hover:text-white cursor-pointer focus:outline"
+              onclick="${e => this.logout(e)}"
+              title="${translate('signOut')}"
+            >
+              ${translate('signOut')}
+            </button>
+          </li>
+        </ul>
+      </send-account>
+    `;
+  }
+}
+
+module.exports = Account;
--- a/app/ui/archiveTile.js
+++ b/app/ui/archiveTile.js
@@ -0,0 +1,602 @@
+/* global Android */
+
+const html = require('choo/html');
+const raw = require('choo/html/raw');
+const assets = require('../../common/assets');
+const {
+  bytes,
+  copyToClipboard,
+  list,
+  percent,
+  platform,
+  timeLeft
+} = require('../utils');
+const expiryOptions = require('./expiryOptions');
+
+function expiryInfo(translate, archive) {
+  const l10n = timeLeft(archive.expiresAt - Date.now());
+  return raw(
+    translate('archiveExpiryInfo', {
+      downloadCount: translate('downloadCount', {
+        num: archive.dlimit - archive.dtotal
+      }),
+      timespan: translate(l10n.id, l10n)
+    })
+  );
+}
+
+function password(state) {
+  const MAX_LENGTH = 32;
+
+  return html`
+    <div class="mb-2 px-1">
+      <input
+        id="autocomplete-decoy"
+        class="hidden"
+        type="password"
+        value="lol"
+      />
+      <div class="checkbox inline-block mr-3">
+        <input
+          id="add-password"
+          type="checkbox"
+          ${state.archive.password ? 'checked' : ''}
+          autocomplete="off"
+          onchange="${togglePasswordInput}"
+        />
+        <label for="add-password">
+          ${state.translate('addPassword')}
+        </label>
+      </div>
+      <div class="relative inline-block my-1">
+        <input
+          id="password-input"
+          class="${state.archive.password
+            ? ''
+            : 'invisible'} border rounded focus:border-blue-60 leading-normal my-1 py-1 px-2 h-8 dark:bg-grey-80"
+          autocomplete="off"
+          maxlength="${MAX_LENGTH}"
+          type="password"
+          oninput="${inputChanged}"
+          onfocus="${focused}"
+          placeholder="${state.translate('unlockInputPlaceholder')}"
+          value="${state.archive.password || ''}"
+        />
+        <button
+          id="password-preview-button"
+          type="button"
+          class="${state.archive.password
+            ? ''
+            : 'invisible'} absolute top-0 right-0 w-8 h-8"
+          onclick="${onPasswordPreviewButtonclicked}"
+        >
+          <img
+            src="${assets.get('eye.svg')}"
+            width="22"
+            height="22"
+            class="m-auto mt-2"
+          />
+        </button>
+      </div>
+      <label
+        id="password-msg"
+        for="password-input"
+        class="block text-xs text-grey-70"
+      ></label>
+    </div>
+  `;
+
+  function onPasswordPreviewButtonclicked(event) {
+    event.preventDefault();
+    const input = document.getElementById('password-input');
+    const eyeIcon = event.currentTarget.querySelector('img');
+
+    if (input.type === 'password') {
+      input.type = 'text';
+      eyeIcon.src = assets.get('eye-off.svg');
+    } else {
+      input.type = 'password';
+      eyeIcon.src = assets.get('eye.svg');
+    }
+
+    input.focus();
+  }
+
+  function togglePasswordInput(event) {
+    event.stopPropagation();
+    const checked = event.target.checked;
+    const input = document.getElementById('password-input');
+    const passwordPreviewButton = document.getElementById(
+      'password-preview-button'
+    );
+    if (checked) {
+      input.classList.remove('invisible');
+      passwordPreviewButton.classList.remove('invisible');
+      input.focus();
+    } else {
+      input.classList.add('invisible');
+      passwordPreviewButton.classList.add('invisible');
+      input.value = '';
+      document.getElementById('password-msg').textContent = '';
+      state.archive.password = null;
+    }
+  }
+
+  function inputChanged() {
+    const passwordInput = document.getElementById('password-input');
+    const pwdmsg = document.getElementById('password-msg');
+    const password = passwordInput.value;
+    const length = password.length;
+
+    if (length === MAX_LENGTH) {
+      pwdmsg.textContent = state.translate('maxPasswordLength', {
+        length: MAX_LENGTH
+      });
+    } else {
+      pwdmsg.textContent = '';
+    }
+    state.archive.password = password;
+  }
+
+  function focused(event) {
+    event.preventDefault();
+    const el = document.getElementById('password-input');
+    if (el.placeholder !== state.translate('unlockInputPlaceholder')) {
+      el.placeholder = '';
+    }
+  }
+}
+
+function fileInfo(file, action) {
+  return html`
+    <send-file class="flex flex-row items-center p-3 w-full">
+      <svg class="h-8 w-8 text-white dark:text-grey-90">
+        <use xlink:href="${assets.get('blue_file.svg')}#icon"/>
+      </svg>
+      <p class="ml-4 w-full">
+        <h1 class="text-base font-medium word-break-all">${file.name}</h1>
+        <div class="text-sm font-normal opacity-75 pt-1">${bytes(
+          file.size
+        )}</div>
+      </p>
+      ${action}
+    </send-file>`;
+}
+
+function archiveInfo(archive, action) {
+  return html`
+    <p class="w-full flex items-center">
+      <svg class="h-8 w-6 mr-3 flex-shrink-0 text-white dark:text-grey-90">
+        <use xlink:href="${assets.get('blue_file.svg')}#icon"/>
+      </svg>
+      <p class="flex-grow">
+        <h1 class="text-base font-medium word-break-all">${archive.name}</h1>
+        <div class="text-sm font-normal opacity-75 pt-1">${bytes(
+          archive.size
+        )}</div>
+      </p>
+      ${action}
+    </p>`;
+}
+
+function archiveDetails(translate, archive) {
+  if (archive.manifest.files.length > 1) {
+    return html`
+      <details
+        class="w-full pb-1"
+        ${archive.open ? 'open' : ''}
+        ontoggle="${toggled}"
+      >
+        <summary
+          class="flex items-center link-blue text-sm cursor-pointer outline-none"
+        >
+          <svg
+            class="fill-current w-4 h-4 mr-1"
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox="0 0 20 20"
+          >
+            <path
+              d="M12.95 10.707l.707-.707L8 4.343 6.586 5.757 10.828 10l-4.242 4.243L8 15.657l4.95-4.95z"
+            />
+          </svg>
+          ${translate('fileCount', {
+            num: archive.manifest.files.length
+          })}
+        </summary>
+        ${list(archive.manifest.files.map(f => fileInfo(f)))}
+      </details>
+    `;
+  }
+  function toggled(event) {
+    event.stopPropagation();
+    archive.open = event.target.open;
+  }
+}
+
+module.exports = function(state, emit, archive) {
+  const copyOrShare =
+    state.capabilities.share || platform() === 'android'
+      ? html`
+          <button
+            class="link-blue self-end flex items-start"
+            onclick=${share}
+            title="Share link"
+          >
+            <svg class="h-4 w-4 mr-2">
+              <use xlink:href="${assets.get('share-24.svg')}#icon" />
+            </svg>
+            Share link
+          </button>
+        `
+      : html`
+          <button
+            class="link-blue focus:outline self-end flex items-center"
+            onclick=${copy}
+            title="${state.translate('copyLinkButton')}"
+          >
+            <svg class="h-4 w-4 mr-2">
+              <use xlink:href="${assets.get('copy-16.svg')}#icon" />
+            </svg>
+            ${state.translate('copyLinkButton')}
+          </button>
+        `;
+  const dl =
+    platform() === 'web'
+      ? html`
+          <a
+            class="flex items-baseline link-blue"
+            href="${archive.url}"
+            title="${state.translate('downloadButtonLabel')}"
+            tabindex="0"
+          >
+            <svg class="h-4 w-3 mr-2">
+              <use xlink:href="${assets.get('dl.svg')}#icon" />
+            </svg>
+            ${state.translate('downloadButtonLabel')}
+          </a>
+        `
+      : html`
+          <div></div>
+        `;
+  return html`
+    <send-archive
+      id="archive-${archive.id}"
+      class="flex flex-col items-start rounded shadow-light bg-white p-4 w-full dark:bg-grey-90 dark:border dark:border-grey-70"
+    >
+      ${archiveInfo(
+        archive,
+        html`
+          <input
+            type="image"
+            class="self-start flex-shrink-0 text-white hover:opacity-75 focus:outline"
+            alt="${state.translate('deleteButtonHover')}"
+            title="${state.translate('deleteButtonHover')}"
+            src="${assets.get('close-16.svg')}"
+            onclick=${del}
+          />
+        `
+      )}
+      <div class="text-sm opacity-75 w-full mt-2 mb-2">
+        ${expiryInfo(state.translate, archive)}
+      </div>
+      ${archiveDetails(state.translate, archive)}
+      <hr class="w-full border-t my-4 dark:border-grey-70" />
+      <div class="flex justify-between w-full">
+        ${dl} ${copyOrShare}
+      </div>
+    </send-archive>
+  `;
+
+  function copy(event) {
+    event.stopPropagation();
+    copyToClipboard(archive.url);
+    const text = event.target.lastChild;
+    text.textContent = state.translate('copiedUrl');
+    setTimeout(
+      () => (text.textContent = state.translate('copyLinkButton')),
+      1000
+    );
+  }
+
+  function del(event) {
+    event.stopPropagation();
+    emit('delete', archive);
+  }
+
+  async function share(event) {
+    event.stopPropagation();
+    if (platform() === 'android') {
+      Android.shareUrl(archive.url);
+    } else {
+      try {
+        await navigator.share({
+          title: state.translate('-send-brand'),
+          text: `Download "${archive.name}" with Send: simple, safe file sharing`,
+          //state.translate('shareMessage', { name }),
+          url: archive.url
+        });
+      } catch (e) {
+        // ignore
+      }
+    }
+  }
+};
+
+module.exports.wip = function(state, emit) {
+  return html`
+    <send-upload-area
+      class="flex flex-col bg-white h-full w-full dark:bg-grey-90"
+      id="wip"
+    >
+      ${list(
+        Array.from(state.archive.files)
+          .reverse()
+          .map(f =>
+            fileInfo(f, remove(f, state.translate('deleteButtonHover')))
+          ),
+        'flex-shrink bg-grey-10 rounded-t overflow-y-auto px-6 py-4 md:h-full md:max-h-half-screen dark:bg-black',
+        'bg-white px-2 my-2 shadow-light rounded dark:bg-grey-90 dark:border dark:border-grey-80'
+      )}
+      <div
+        class="flex-shrink-0 flex-grow flex items-end p-4 bg-grey-10 rounded-b mb-1 font-medium dark:bg-grey-90"
+      >
+        <input
+          id="file-upload"
+          class="opacity-0 w-0 h-0 appearance-none absolute overflow-hidden"
+          type="file"
+          multiple
+          onfocus="${focus}"
+          onblur="${blur}"
+          onchange="${add}"
+        />
+        <div
+          for="file-upload"
+          class="flex flex-row items-center justify-between w-full p-2"
+        >
+          <label
+            for="file-upload"
+            class="flex items-center cursor-pointer"
+            title="${state.translate('addFilesButton')}"
+          >
+            <svg class="w-6 h-6 mr-2 link-blue">
+              <use xlink:href="${assets.get('addfiles.svg')}#plus" />
+            </svg>
+            ${state.translate('addFilesButton')}
+          </label>
+          <div class="font-normal text-sm text-grey-70 dark:text-grey-40">
+            ${state.translate('totalSize', {
+              size: bytes(state.archive.size)
+            })}
+          </div>
+        </div>
+      </div>
+      ${expiryOptions(state, emit)} ${password(state, emit)}
+      <button
+        id="upload-btn"
+        class="btn rounded-lg flex-shrink-0 focus:outline"
+        title="${state.translate('uploadButton')}"
+        onclick="${upload}"
+      >
+        ${state.translate('uploadButton')}
+      </button>
+    </send-upload-area>
+  `;
+
+  function focus(event) {
+    event.target.nextElementSibling.firstElementChild.classList.add('outline');
+  }
+
+  function blur(event) {
+    event.target.nextElementSibling.firstElementChild.classList.remove(
+      'outline'
+    );
+  }
+
+  function upload(event) {
+    window.scrollTo(0, 0);
+    event.preventDefault();
+    event.target.disabled = true;
+    if (!state.uploading) {
+      emit('upload');
+    }
+  }
+
+  function add(event) {
+    event.preventDefault();
+    const newFiles = Array.from(event.target.files);
+
+    emit('addFiles', { files: newFiles });
+    setTimeout(() => {
+      document
+        .querySelector('#wip > ul > li:first-child')
+        .scrollIntoView({ block: 'center' });
+    });
+  }
+
+  function remove(file, desc) {
+    return html`
+      <input
+        type="image"
+        class="self-center text-white ml-4 h-4 hover:opacity-75 focus:outline"
+        alt="${desc}"
+        title="${desc}"
+        src="${assets.get('close-16.svg')}"
+        onclick="${del}"
+      />
+    `;
+    function del(event) {
+      event.stopPropagation();
+      emit('removeUpload', file);
+    }
+  }
+};
+
+module.exports.uploading = function(state, emit) {
+  const progress = state.transfer.progressRatio;
+  const progressPercent = percent(progress);
+  const archive = state.archive;
+  return html`
+    <send-upload-area
+      id="${archive.id}"
+      class="flex flex-col items-start rounded shadow-light bg-white p-4 w-full dark:bg-grey-90"
+    >
+      ${archiveInfo(archive)}
+      <div class="text-xs opacity-75 w-full mt-2 mb-2">
+        ${expiryInfo(state.translate, {
+          dlimit: state.archive.dlimit,
+          dtotal: 0,
+          expiresAt: Date.now() + 500 + state.archive.timeLimit * 1000
+        })}
+      </div>
+      <div class="link-blue text-sm font-medium mt-2">
+        ${progressPercent}
+      </div>
+      <progress class="my-3" value="${progress}">${progressPercent}</progress>
+      <button
+        class="link-blue self-end font-medium"
+        onclick=${cancel}
+        title="${state.translate('deletePopupCancel')}"
+      >
+        ${state.translate('deletePopupCancel')}
+      </button>
+    </send-upload-area>
+  `;
+
+  function cancel(event) {
+    event.stopPropagation();
+    event.target.disabled = true;
+    emit('cancel');
+  }
+};
+
+module.exports.empty = function(state, emit) {
+  const upsell =
+    state.user.loggedIn || !state.capabilities.account
+      ? ''
+      : html`
+          <button
+            class="center font-medium text-sm link-blue mt-4 mb-2"
+            onclick="${event => {
+              event.stopPropagation();
+              emit('signup-cta', 'drop');
+            }}"
+          >
+            ${state.translate('signInSizeBump', {
+              size: bytes(state.LIMITS.MAX_FILE_SIZE)
+            })}
+          </button>
+        `;
+  return html`
+    <send-upload-area
+      class="flex flex-col items-center justify-center border-2 border-dashed border-grey-transparent rounded px-6 py-16 h-full w-full dark:border-grey-60"
+      onclick="${e => {
+        if (e.target.tagName !== 'LABEL') {
+          document.getElementById('file-upload').click();
+        }
+      }}"
+    >
+      <svg class="w-10 h-10 link-blue">
+        <use xlink:href="/${assets.get('addfiles.svg')}#plus" />
+      </svg>
+      <div class="pt-6 pb-2 text-center text-lg font-bold tracking-wide">
+        ${state.translate('dragAndDropFiles')}
+      </div>
+      <div class="pb-6 text-center text-base">
+        ${state.translate('orClickWithSize', {
+          size: bytes(state.user.maxSize)
+        })}
+      </div>
+      <input
+        id="file-upload"
+        class="opacity-0 w-0 h-0 appearance-none absolute overflow-hidden"
+        type="file"
+        multiple
+        onfocus="${focus}"
+        onblur="${blur}"
+        onchange="${add}"
+        onclick="${e => e.stopPropagation()}"
+      />
+      <label
+        for="file-upload"
+        role="button"
+        class="btn rounded-lg flex items-center mt-4"
+        title="${state.translate('addFilesButton', {
+          size: bytes(state.user.maxSize)
+        })}"
+      >
+        ${state.translate('addFilesButton')}
+      </label>
+      ${upsell}
+    </send-upload-area>
+  `;
+
+  function focus(event) {
+    event.target.nextElementSibling.classList.add('bg-blue-70', 'outline');
+  }
+
+  function blur(event) {
+    event.target.nextElementSibling.classList.remove('bg-blue-70', 'outline');
+  }
+
+  function add(event) {
+    event.preventDefault();
+    const newFiles = Array.from(event.target.files);
+
+    emit('addFiles', { files: newFiles });
+  }
+};
+
+module.exports.preview = function(state, emit) {
+  const archive = state.fileInfo;
+  if (archive.open === undefined) {
+    archive.open = true;
+  }
+  const single = archive.manifest.files.length === 1;
+  const details = single
+    ? ''
+    : html`
+        <div class="mt-4 h-full md:h-48 overflow-y-auto">
+          ${archiveDetails(state.translate, archive)}
+        </div>
+      `;
+  return html`
+    <send-archive
+      class="flex flex-col max-h-full bg-white p-4 w-full md:w-128 dark:bg-grey-90"
+    >
+      <div class="border rounded py-3 px-6 dark:border-grey-70">
+        ${archiveInfo(archive)} ${details}
+      </div>
+      <button
+        id="download-btn"
+        class="btn rounded-lg mt-4 w-full flex-shrink-0 focus:outline"
+        title="${state.translate('downloadButtonLabel')}"
+        onclick=${download}
+      >
+        ${state.translate('downloadButtonLabel')}
+      </button>
+    </send-archive>
+  `;
+
+  function download(event) {
+    event.preventDefault();
+    event.target.disabled = true;
+    emit('download', archive);
+  }
+};
+
+module.exports.downloading = function(state) {
+  const archive = state.fileInfo;
+  const progress = state.transfer.progressRatio;
+  const progressPercent = percent(progress);
+  return html`
+    <send-archive
+      class="flex flex-col bg-white rounded shadow-light p-4 w-full max-w-sm md:w-128 dark:bg-grey-90"
+    >
+      ${archiveInfo(archive)}
+      <div class="link-blue text-sm font-medium mt-2">
+        ${progressPercent}
+      </div>
+      <progress class="my-3" value="${progress}">${progressPercent}</progress>
+    </send-archive>
+  `;
+};
--- a/app/ui/blank.js
+++ b/app/ui/blank.js
@@ -0,0 +1,14 @@
+const html = require('choo/html');
+
+module.exports = function() {
+  return html`
+    <main class="main">
+      <section
+        class="h-full w-full p-6 md:p-8 md:flex md:flex-row md:rounded-xl md:shadow-big"
+      >
+        <div class="md:mr-6 md:w-1/2 w-full"></div>
+        <div class="md:w-1/2 mt-6 md:mt-0 w-full"></div>
+      </section>
+    </main>
+  `;
+};
--- a/app/ui/body.js
+++ b/app/ui/body.js
@@ -0,0 +1,21 @@
+const html = require('choo/html');
+const Header = require('./header');
+const Footer = require('./footer');
+
+module.exports = function body(main) {
+  return function(state, emit) {
+    const b = html`
+      <body
+        class="flex flex-col items-center font-sans md:h-screen md:bg-grey-10 dark:bg-black"
+      >
+        ${state.cache(Header, 'header').render()} ${main(state, emit)}
+        ${state.cache(Footer, 'footer').render()}
+      </body>
+    `;
+    if (state.layout) {
+      // server side only
+      return state.layout(state, b);
+    }
+    return b;
+  };
+};
--- a/app/ui/copyDialog.js
+++ b/app/ui/copyDialog.js
@@ -0,0 +1,76 @@
+const html = require('choo/html');
+const { copyToClipboard } = require('../utils');
+const qr = require('./qr');
+
+module.exports = function(name, url) {
+  const dialog = function(state, emit, close) {
+    return html`
+      <send-copy-dialog
+        class="flex flex-col items-center text-center p-4 max-w-sm m-auto"
+      >
+        <h1 class="text-3xl font-bold my-4">
+          ${state.translate('notifyUploadEncryptDone')}
+        </h1>
+        <p
+          class="font-normal leading-normal text-grey-80 word-break-all dark:text-grey-40"
+        >
+          ${state.translate('copyLinkDescription')} <br />
+          ${name}
+        </p>
+        <div class="flex flex-row items-center justify-center w-full">
+          <input
+            type="text"
+            id="share-url"
+            class="block w-full my-4 border rounded-lg leading-loose h-12 px-2 py-1 dark:bg-grey-80"
+            value="${url}"
+            readonly="true"
+          />
+          <button
+            id="qr-btn"
+            class="w-16 m-1 p-1"
+            onclick="${toggleQR}"
+            title="QR code"
+          >
+            ${qr(url)}
+          </button>
+        </div>
+        <button
+          class="btn rounded-lg w-full flex-shrink-0 focus:outline"
+          onclick="${copy}"
+          title="${state.translate('copyLinkButton')}"
+        >
+          ${state.translate('copyLinkButton')}
+        </button>
+        <button
+          class="link-blue my-4 font-medium cursor-pointer focus:outline"
+          onclick="${close}"
+          title="${state.translate('okButton')}"
+        >
+          ${state.translate('okButton')}
+        </button>
+      </send-copy-dialog>
+    `;
+
+    function toggleQR(event) {
+      event.stopPropagation();
+      const shareUrl = document.getElementById('share-url');
+      const qrBtn = document.getElementById('qr-btn');
+      if (shareUrl.classList.contains('hidden')) {
+        shareUrl.classList.replace('hidden', 'block');
+        qrBtn.classList.replace('w-48', 'w-16');
+      } else {
+        shareUrl.classList.replace('block', 'hidden');
+        qrBtn.classList.replace('w-16', 'w-48');
+      }
+    }
+
+    function copy(event) {
+      event.stopPropagation();
+      copyToClipboard(url);
+      event.target.textContent = state.translate('copiedUrl');
+      setTimeout(close, 1000);
+    }
+  };
+  dialog.type = 'copy';
+  return dialog;
+};
--- a/app/ui/download.js
+++ b/app/ui/download.js
@@ -0,0 +1,96 @@
+/* global downloadMetadata */
+const html = require('choo/html');
+const archiveTile = require('./archiveTile');
+const modal = require('./modal');
+const noStreams = require('./noStreams');
+const notFound = require('./notFound');
+const downloadPassword = require('./downloadPassword');
+const downloadCompleted = require('./downloadCompleted');
+const BIG_SIZE = 1024 * 1024 * 256;
+
+function createFileInfo(state) {
+  return {
+    id: state.params.id,
+    secretKey: state.params.key,
+    nonce: downloadMetadata.nonce,
+    requiresPassword: downloadMetadata.pwd
+  };
+}
+
+function downloading(state, emit) {
+  return html`
+    <div
+      class="flex flex-col w-full h-full items-center md:justify-center md:-mt-8"
+    >
+      <h1 class="text-3xl font-bold mb-4">
+        ${state.translate('downloadingTitle')}
+      </h1>
+      ${archiveTile.downloading(state, emit)}
+    </div>
+  `;
+}
+
+function preview(state, emit) {
+  if (!state.capabilities.streamDownload && state.fileInfo.size > BIG_SIZE) {
+    return noStreams(state, emit);
+  }
+  return html`
+    <div
+      class="flex flex-col w-full max-w-md h-full mx-auto items-center justify-center"
+    >
+      <h1 class="text-3xl font-bold mb-4">
+        ${state.translate('downloadTitle')}
+      </h1>
+      <p
+        class="w-full text-grey-80 text-center leading-normal dark:text-grey-40"
+      >
+        ${state.translate('downloadDescription')}
+      </p>
+      ${archiveTile.preview(state, emit)}
+    </div>
+  `;
+}
+
+module.exports = function(state, emit) {
+  let content = '';
+  if (!state.fileInfo) {
+    state.fileInfo = createFileInfo(state);
+    if (downloadMetadata.status === 404) {
+      return notFound(state);
+    }
+    if (!state.fileInfo.nonce) {
+      // coming from something like the browser back button
+      return location.reload();
+    }
+  }
+
+  if (!state.transfer && !state.fileInfo.requiresPassword) {
+    emit('getMetadata');
+  }
+
+  if (state.transfer) {
+    switch (state.transfer.state) {
+      case 'downloading':
+      case 'decrypting':
+        content = downloading(state, emit);
+        break;
+      case 'complete':
+        content = downloadCompleted(state);
+        break;
+      default:
+        content = preview(state, emit);
+    }
+  } else if (state.fileInfo.requiresPassword && !state.fileInfo.password) {
+    content = downloadPassword(state, emit);
+  }
+  return html`
+    <main class="main">
+      ${state.modal && modal(state, emit)}
+      <section
+        class="relative h-full w-full p-6 md:p-8 md:rounded-xl md:shadow-big"
+      >
+        ${content}
+      </section>
+    </main>
+  `;
+};
--- a/app/ui/downloadCompleted.js
+++ b/app/ui/downloadCompleted.js
@@ -0,0 +1,30 @@
+const html = require('choo/html');
+const assets = require('../../common/assets');
+
+module.exports = function(state) {
+  const btnText = state.user.loggedIn ? 'okButton' : 'sendYourFilesLink';
+  return html`
+    <div
+      id="download-complete"
+      class="flex flex-col items-center justify-center h-full w-full bg-white p-2 dark:bg-grey-90"
+    >
+      <h1 class="text-center text-3xl font-bold my-2">
+        ${state.translate('downloadFinish')}
+      </h1>
+      <img src="${assets.get('completed.svg')}" class="my-8 h-48" />
+      <p
+        class="text-grey-80 leading-normal dark:text-grey-40 ${state.user
+          .loggedIn
+          ? 'hidden'
+          : ''}"
+      >
+        ${state.translate('trySendDescription')}
+      </p>
+      <p class="my-5">
+        <a href="/" class="btn rounded-lg flex items-center mt-4" role="button"
+          >${state.translate(btnText)}</a
+        >
+      </p>
+    </div>
+  `;
+};
--- a/app/ui/downloadPassword.js
+++ b/app/ui/downloadPassword.js
@@ -0,0 +1,98 @@
+const html = require('choo/html');
+
+module.exports = function(state, emit) {
+  const fileInfo = state.fileInfo;
+  const invalid = fileInfo.password === null;
+
+  const div = html`
+    <div
+      class="h-full w-full flex flex-col items-center justify-center bg-white py-8 max-w-md mx-auto dark:bg-grey-90"
+    >
+      <h1 class="text-3xl font-bold mb-4">
+        ${state.translate('downloadTitle')}
+      </h1>
+      <p
+        class="w-full mb-4 text-center text-grey-80 dark:text-grey-40 leading-normal"
+      >
+        ${state.translate('downloadDescription')}
+      </p>
+      <form
+        class="flex flex-row flex-no-wrap w-full md:w-4/5"
+        onsubmit="${checkPassword}"
+        data-no-csrf
+      >
+        <input
+          id="autocomplete-decoy"
+          class="hidden"
+          type="password"
+          value="lol"
+        />
+        <input
+          id="password-input"
+          class="w-full border-l border-t border-b rounded-l-lg rounded-r-none ${invalid
+            ? 'border-red dark:border-red-40'
+            : 'border-grey'} leading-loose px-2 py-1 dark:bg-grey-80"
+          maxlength="32"
+          autocomplete="off"
+          placeholder="${state.translate('unlockInputPlaceholder')}"
+          oninput="${inputChanged}"
+          type="password"
+        />
+        <input
+          type="submit"
+          id="password-btn"
+          class="btn rounded-r-lg rounded-l-none ${invalid
+            ? 'bg-red hover:bg-red focus:bg-red dark:bg-red-40'
+            : ''}"
+          value="${state.translate('unlockButtonLabel')}"
+          title="${state.translate('unlockButtonLabel')}"
+        />
+      </form>
+      <label
+        id="password-error"
+        class="${invalid ? '' : 'invisible'} text-red dark:text-red-40 my-4"
+        for="password-input"
+      >
+        ${state.translate('passwordTryAgain')}
+      </label>
+    </div>
+  `;
+
+  if (!(div instanceof String)) {
+    setTimeout(() => document.getElementById('password-input').focus());
+  }
+
+  function inputChanged(event) {
+    event.stopPropagation();
+    event.preventDefault();
+    const label = document.getElementById('password-error');
+    const input = document.getElementById('password-input');
+    const btn = document.getElementById('password-btn');
+    label.classList.add('invisible');
+    input.classList.remove('border-red', 'dark:border-red-40');
+    btn.classList.remove(
+      'bg-red',
+      'hover:bg-red',
+      'focus:bg-red',
+      'dark:bg-red-40'
+    );
+  }
+
+  function checkPassword(event) {
+    event.stopPropagation();
+    event.preventDefault();
+    const el = document.getElementById('password-input');
+    const password = el.value;
+    if (password.length > 0) {
+      document.getElementById('password-btn').disabled = true;
+      // Strip any url parameters between fileId and secretKey
+      const fileInfoUrl = window.location.href.replace(/\?.+#/, '#');
+      state.fileInfo.url = fileInfoUrl;
+      state.fileInfo.password = password;
+      emit('getMetadata');
+    }
+    return false;
+  }
+
+  return div;
+};
--- a/app/ui/error.js
+++ b/app/ui/error.js
@@ -0,0 +1,33 @@
+const html = require('choo/html');
+const assets = require('../../common/assets');
+const modal = require('./modal');
+
+module.exports = function(state, emit) {
+  const btnText = state.user.loggedIn ? 'okButton' : 'sendYourFilesLink';
+  return html`
+    <main class="main">
+      ${state.modal && modal(state, emit)}
+      <section
+        class="flex flex-col items-center justify-center h-full w-full p-6 md:p-8 overflow-hidden md:rounded-xl md:shadow-big"
+      >
+        <h1 class="text-center text-3xl font-bold my-2">
+          ${state.translate('errorPageHeader')}
+        </h1>
+        <img class="my-12 h-48" src="${assets.get('error.svg')}" />
+        <p
+          class="max-w-md text-center text-grey-80 leading-normal dark:text-grey-40 ${state
+            .user.loggedIn
+            ? 'hidden'
+            : ''}"
+        >
+          ${state.translate('trySendDescription')}
+        </p>
+        <p class="my-5">
+          <a href="/" class="btn rounded-lg flex items-center" role="button"
+            >${state.translate(btnText)}</a
+          >
+        </p>
+      </section>
+    </main>
+  `;
+};
--- a/app/ui/expiryOptions.js
+++ b/app/ui/expiryOptions.js
@@ -0,0 +1,75 @@
+const html = require('choo/html');
+const raw = require('choo/html/raw');
+const { secondsToL10nId } = require('../utils');
+const selectbox = require('./selectbox');
+
+module.exports = function(state, emit) {
+  const el = html`
+    <div class="px-1">
+      ${raw(
+        state.translate('archiveExpiryInfo', {
+          downloadCount:
+            '<span class="lg:inline-block md:block sm:inline-block block"></span><select id="dlCount"></select>',
+          timespan: '<select id="timespan"></select>'
+        })
+      )}
+    </div>
+  `;
+  if (el.__encoded) {
+    // we're rendering on the server
+    return el;
+  }
+
+  const counts = state.DEFAULTS.DOWNLOAD_COUNTS.filter(
+    i => state.capabilities.account || i <= state.user.maxDownloads
+  );
+
+  const dlCountSelect = el.querySelector('#dlCount');
+  el.replaceChild(
+    selectbox(
+      state.archive.dlimit,
+      counts,
+      num => state.translate('downloadCount', { num }),
+      value => {
+        const max = state.user.maxDownloads;
+        state.archive.dlimit = Math.min(value, max);
+        if (value > max) {
+          emit('signup-cta', 'count');
+        } else {
+          emit('render');
+        }
+      },
+      'expire-after-dl-count-select'
+    ),
+    dlCountSelect
+  );
+
+  const expires = state.DEFAULTS.EXPIRE_TIMES_SECONDS.filter(
+    i => state.capabilities.account || i <= state.user.maxExpireSeconds
+  );
+
+  const timeSelect = el.querySelector('#timespan');
+  el.replaceChild(
+    selectbox(
+      state.archive.timeLimit,
+      expires,
+      num => {
+        const l10n = secondsToL10nId(num);
+        return state.translate(l10n.id, l10n);
+      },
+      value => {
+        const max = state.user.maxExpireSeconds;
+        state.archive.timeLimit = Math.min(value, max);
+        if (value > max) {
+          emit('signup-cta', 'time');
+        } else {
+          emit('render');
+        }
+      },
+      'expire-after-time-select'
+    ),
+    timeSelect
+  );
+
+  return el;
+};
--- a/app/ui/faviconProgressbar.js
+++ b/app/ui/faviconProgressbar.js
@@ -0,0 +1,41 @@
+const { platform } = require('../utils');
+const assets = require('../../common/assets');
+
+const size = 32;
+const loaderWidth = 5;
+const loaderColor = '#0090ed';
+
+function drawCircle(canvas, context, color, lineWidth, outerWidth, percent) {
+  canvas.width = canvas.height = outerWidth;
+  context.translate(outerWidth * 0.5, outerWidth * 0.5);
+  context.rotate(-Math.PI * 0.5);
+  const radius = (outerWidth - lineWidth) * 0.5;
+  context.beginPath();
+  context.arc(0, 0, radius, 0, Math.PI * 2 * percent, false);
+  context.strokeStyle = color;
+  context.lineCap = 'square';
+  context.lineWidth = lineWidth;
+  context.stroke();
+}
+
+function drawNewFavicon(progressRatio) {
+  const canvas = document.createElement('canvas');
+  const context = canvas.getContext('2d');
+  drawCircle(canvas, context, '#efefef', loaderWidth, size, 1);
+  drawCircle(canvas, context, loaderColor, loaderWidth, size, progressRatio);
+  return canvas.toDataURL();
+}
+
+module.exports.updateFavicon = function(progressRatio) {
+  if (platform() === 'web') {
+    const link = document.querySelector("link[rel='icon'][sizes='32x32']");
+    const progress = progressRatio * 100;
+    if (progress === 0 || progress === 100) {
+      link.type = 'image/png';
+      link.href = assets.get('favicon-32x32.png');
+      return;
+    }
+
+    link.href = drawNewFavicon(progressRatio);
+  }
+};
--- a/app/ui/footer.js
+++ b/app/ui/footer.js
@@ -0,0 +1,87 @@
+const html = require('choo/html');
+const Component = require('choo/component');
+
+class Footer extends Component {
+  constructor(name, state) {
+    super(name);
+    this.state = state;
+  }
+
+  update() {
+    return false;
+  }
+
+  createElement() {
+    const translate = this.state.translate;
+
+    // Add additional links from configuration if available
+    var links = [];
+    if (this.state != undefined && this.state.WEB_UI != undefined) {
+      const WEB_UI = this.state.WEB_UI;
+
+      if (WEB_UI.FOOTER_DONATE_URL != '') {
+        links.push(html`
+          <li class="m-2">
+            <a href="${WEB_UI.FOOTER_DONATE_URL}" target="_blank">
+              ${translate('footerLinkDonate')}
+            </a>
+          </li>
+        `);
+      }
+      if (WEB_UI.FOOTER_CLI_URL != '') {
+        links.push(html`
+          <li class="m-2">
+            <a href="${WEB_UI.FOOTER_CLI_URL}" target="_blank">
+              ${translate('footerLinkCli')}
+            </a>
+          </li>
+        `);
+      }
+      if (WEB_UI.FOOTER_DMCA_URL != '') {
+        links.push(html`
+          <li class="m-2">
+            <a href="${WEB_UI.FOOTER_DMCA_URL}" target="_blank">
+              ${translate('footerLinkDmca')}
+            </a>
+          </li>
+        `);
+      }
+      if (WEB_UI.FOOTER_SOURCE_URL != '') {
+        links.push(html`
+          <li class="m-2">
+            <a href="${WEB_UI.FOOTER_SOURCE_URL}" target="_blank">
+              ${translate('footerLinkSource')}
+            </a>
+          </li>
+        `);
+      }
+    } else {
+      links.push(html`
+        <li class="m-2">
+          <a href="https://gitlab.com/timvisee/send" target="_blank">
+            ${translate('footerLinkSource')}
+          </a>
+        </li>
+      `);
+    }
+
+    return html`
+      <footer
+        class="flex flex-col md:flex-row items-start w-full flex-none self-start p-6 md:p-8 font-medium text-xs text-grey-60 dark:text-grey-40 md:items-center justify-between"
+      >
+        <ul
+          class="flex flex-col md:flex-row items-start md:items-center md:justify-start"
+        >
+          <li class="m-2">${translate('footerText')}</li>
+        </ul>
+        <ul
+          class="flex flex-col md:flex-row items-start md:items-center md:justify-end"
+        >
+          ${links}
+        </ul>
+      </footer>
+    `;
+  }
+}
+
+module.exports = Footer;
--- a/app/ui/header.js
+++ b/app/ui/header.js
@@ -0,0 +1,52 @@
+const html = require('choo/html');
+const Component = require('choo/component');
+const Account = require('./account');
+const assets = require('../../common/assets');
+const { platform } = require('../utils');
+
+class Header extends Component {
+  constructor(name, state, emit) {
+    super(name);
+    this.state = state;
+    this.emit = emit;
+    this.account = state.cache(Account, 'account');
+  }
+
+  update() {
+    this.account.render();
+    return false;
+  }
+
+  createElement() {
+    const title =
+      platform() === 'android'
+        ? html`
+            <a class="flex flex-row items-center">
+              <img src="${assets.get('icon.svg')}" />
+              <svg class="w-48">
+                <use xlink:href="${assets.get('wordmark.svg')}#logo" />
+              </svg>
+            </a>
+          `
+        : html`
+            <a class="flex flex-row items-center" href="/">
+              <img
+                alt="${this.state.translate('title')}"
+                src="${assets.get('icon.svg')}"
+              />
+              <svg viewBox="66 0 340 64" class="w-48 md:w-64">
+                <use xlink:href="${assets.get('wordmark.svg')}#logo" />
+              </svg>
+            </a>
+          `;
+    return html`
+      <header
+        class="main-header relative flex-none flex flex-row items-center justify-between w-full px-6 md:px-8 h-16 md:h-24 z-20 bg-transparent"
+      >
+        ${title} ${this.account.render()}
+      </header>
+    `;
+  }
+}
+
+module.exports = Header;
--- a/app/ui/home.js
+++ b/app/ui/home.js
@@ -0,0 +1,36 @@
+const html = require('choo/html');
+const { list } = require('../utils');
+const archiveTile = require('./archiveTile');
+const modal = require('./modal');
+const intro = require('./intro');
+
+module.exports = function(state, emit) {
+  const archives = state.storage.files
+    .filter(archive => !archive.expired)
+    .map(archive => archiveTile(state, emit, archive));
+  let left = '';
+  if (state.uploading) {
+    left = archiveTile.uploading(state, emit);
+  } else if (state.archive.numFiles > 0) {
+    left = archiveTile.wip(state, emit);
+  } else {
+    left = archiveTile.empty(state, emit);
+  }
+  archives.reverse();
+  const right =
+    archives.length === 0
+      ? intro(state)
+      : list(archives, 'p-2 h-full overflow-y-auto w-full', 'mb-4 w-full');
+
+  return html`
+    <main class="main">
+      ${state.modal && modal(state, emit)}
+      <section
+        class="h-full w-full p-6 md:p-8 overflow-hidden md:flex md:flex-row md:rounded-xl md:shadow-big"
+      >
+        <div class="px-2 w-full md:px-0 md:mr-8 md:w-1/2">${left}</div>
+        <div class="mt-6 w-full md:w-1/2 md:-m-2">${right}</div>
+      </section>
+    </main>
+  `;
+};
--- a/Show More
+++ b/Show More