update chapril banner to v2

See https://github.com/timvisee/send/pull/147

.gitattributes

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

.gitignore

@@ -1,6 +1,7 @@
 node_modules
 coverage
 dist
+.env
 .idea
 .DS_Store
 .nyc_output

.gitlab-ci.yml

@@ -1,105 +1,72 @@
-image: "node:15-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
-
 # Build Send, run npm tests
 test:
   stage: test
+  image: "node:16-slim"
+  only:
+    - api
+    - branches
+    - chat
+    - merge_requests
+    - pushes
+    - schedules
+    - tags
+    - triggers
+    - web
+  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 gconf-service libasound2 libatk1.0-0 libc6 libcairo2 libcups2 libdbus-1-3 libexpat1 libfontconfig1 libgcc1 libgconf-2-4 libgdk-pixbuf2.0-0 libglib2.0-0 libgtk-3-0 libnspr4 libpango-1.0-0 libpangocairo-1.0-0 libstdc++6 libx11-6 libx11-xcb1 libxcb1 libxcomposite1 libxcursor1 libxdamage1 libxext6 libxfixes3 libxi6 libxrandr2 libxrender1 libxss1 libxtst6 ca-certificates fonts-liberation libappindicator1 libnss3 lsb-release xdg-utils
+    - 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
   script:
     - npm ci
     - npm run lint
     - npm test
 
-# Build Docker image, export Docker image artifact
-artifact-docker:
-  stage: artifact
-  image: docker:latest
-  needs: []
-  services:
-    - docker:dind
-  variables:
-    IMG_FILE: "send:git-$CI_COMMIT_SHORT_SHA.tar"
-    IMG_NAME: "send:git-$CI_COMMIT_SHORT_SHA"
-  before_script: []
-  script:
-    - docker build -t $IMG_NAME .
-    - docker image save -o $IMG_FILE $IMG_NAME
-  artifacts:
-    name: artifact-docker
-    paths:
-      - $IMG_FILE
-    expire_in: 1 week
-
-# Release public Docker image for the master branch
-release-docker-master:
-  stage: release
-  image: docker:latest
-  dependencies:
-    - artifact-docker
-  services:
-    - docker:dind
-  only:
-    - master
-  variables:
-    IMG_IMPORT_FILE: "send:git-$CI_COMMIT_SHORT_SHA.tar"
-    IMG_IMPORT_NAME: "send:git-$CI_COMMIT_SHORT_SHA"
-    IMG_NAME: "registry.gitlab.com/timvisee/send:master-$CI_COMMIT_SHORT_SHA"
-  before_script: []
-  script:
-    # Login in to registry
-    - 'docker login registry.gitlab.com -u $DOCKER_USER -p $DOCKER_PASS'
-
-    # Load existing, retag for new image images
-    - docker image load -i $IMG_IMPORT_FILE
-    - docker tag $IMG_IMPORT_NAME $IMG_NAME
-
-    # Publish tagged image
-    - docker push $IMG_NAME
-
-    - 'echo "Docker image artifact published, available as:" && echo "  docker pull $IMG_NAME"'
-
-# Release public Docker image for a version tag
 release-docker:
   stage: release
   image: docker:latest
-  dependencies:
-    - artifact-docker
   services:
     - docker:dind
   only:
-    - /^v(\d+\.)*\d+$/
-  variables:
-    IMG_IMPORT_FILE: "send:git-$CI_COMMIT_SHORT_SHA.tar"
-    IMG_IMPORT_NAME: "send:git-$CI_COMMIT_SHORT_SHA"
-    IMG_NAME: "registry.gitlab.com/timvisee/send:$CI_COMMIT_REF_NAME"
-    IMG_NAME_LATEST: "registry.gitlab.com/timvisee/send:latest"
-  before_script: []
+    - api
+    - branches
+    - chat
+    - merge_requests
+    - pushes
+    - schedules
+    - tags
+    - triggers
+    - web
   script:
-    # Login in to registry
-    - 'docker login registry.gitlab.com -u $DOCKER_USER -p $DOCKER_PASS'
-
-    # Load existing, retag for new image images
-    - docker image load -i $IMG_IMPORT_FILE
-    - docker tag $IMG_IMPORT_NAME $IMG_NAME
-    - docker tag $IMG_IMPORT_NAME $IMG_NAME_LATEST
-
-    # Publish tagged image
-    - 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"'
+    - docker login "$CI_REGISTRY" -u "$CI_REGISTRY_USER" -p "$CI_REGISTRY_PASSWORD"
+    - docker build -t send .
+    - |
+      if [ "$CI_PIPELINE_SOURCE" == "merge_request_event" ]; then
+        IMAGE_NAMES="$CI_REGISTRY_IMAGE/mr:$CI_MERGE_REQUEST_IID"
+      elif [ "$CI_COMMIT_TAG" != "" ]; then
+        IMAGE_NAMES="$CI_REGISTRY_IMAGE:$CI_COMMIT_TAG $CI_REGISTRY_IMAGE:latest"
+      else
+        IMAGE_NAMES="$CI_REGISTRY_IMAGE/$CI_COMMIT_BRANCH:$CI_COMMIT_SHORT_SHA"
+      fi
+    - |
+      for image in $IMAGE_NAMES; do
+        docker tag send $image
+        docker push $image
+      done
+    - |
+      echo "Container image pushed. You can pull it with";
+      for image in $IMAGE_NAMES; do
+        echo "docker pull $image"
+      done

.stylelintrc

@@ -11,3 +11,5 @@ rules:
   selector-list-comma-newline-after: null
   value-list-comma-newline-after: null
   at-rule-no-unknown: null
+  # Conflicts with prettier
+  string-quotes: null

CONTRIBUTORS

@@ -49,6 +49,7 @@ Cynthia Pereira
 Daniel Thorn
 Daniela Arcese
 Danny Coates
+David Dumas
 Davide
 Derek Tamsen
 Dhyey Thakore

Dockerfile

@@ -4,41 +4,57 @@
 # License https://gitlab.com/timvisee/send/blob/master/LICENSE
 ##
 
-
 # Build project
-FROM node:15.5.1-alpine AS builder
+FROM node:16.13-alpine3.13 AS builder
+
+RUN set -x \
+  # Change node uid/gid
+  && apk --no-cache add shadow \
+  && groupmod -g 1001 node \
+  && usermod -u 1001 -g 1001 node
+
 RUN set -x \
     # Add user
-    && addgroup --gid 10001 app \
+    && addgroup --gid 1000 app \
     && adduser --disabled-password \
         --gecos '' \
         --ingroup app \
         --home /app \
-        --uid 10001 \
+        --uid 1000 \
         app
+
 COPY --chown=app:app . /app
+
 USER app
 WORKDIR /app
+
 RUN set -x \
     # Build
     && PUPPETEER_SKIP_CHROMIUM_DOWNLOAD=true npm ci \
     && npm run build
 
-
 # Main image
-FROM node:15.5.1-alpine
+FROM node:16.13-alpine3.13
+
+RUN set -x \
+  # Change node uid/gid
+  && apk --no-cache add shadow \
+  && groupmod -g 1001 node \
+  && usermod -u 1001 -g 1001 node
+
 RUN set -x \
     # Add user
-    && addgroup --gid 10001 app \
+    && addgroup --gid 1000 app \
     && adduser --disabled-password \
         --gecos '' \
         --ingroup app \
         --home /app \
-        --uid 10001 \
+        --uid 1000 \
         app
 
 USER app
 WORKDIR /app
+
 COPY --chown=app:app package*.json ./
 COPY --chown=app:app app app
 COPY --chown=app:app common common

README.md

@@ -1,4 +1,4 @@
-# [![Send](./assets/icon.svg)](https://gitlab.com/timvisee/send/) Send
+# [![Send](./assets/icon-64x64.png)](https://gitlab.com/timvisee/send/) Send
 
 [![Build status on GitLab CI][gitlab-ci-master-badge]][gitlab-ci-link]
 [![Latest release][release-badge]][release-link]
@@ -66,6 +66,7 @@ Thanks [Mozilla][mozilla] for building this amazing tool!
 * [Configuration](#configuration)
 * [Localization](#localization)
 * [Contributing](#contributing)
+* [Instances](#instances)
 * [Deployment](#deployment)
 * [Clients](#clients)
 * [License](#license)
@@ -80,7 +81,7 @@ A file sharing experiment which allows you to send encrypted files to other user
 
 ## Requirements
 
-- [Node.js 12.x](https://nodejs.org/)
+- [Node.js 16.x](https://nodejs.org/)
 - [Redis server](https://redis.io/) (optional for development)
 - [AWS S3](https://aws.amazon.com/s3/) or compatible service (optional)
 
@@ -120,21 +121,29 @@ The server is configured with environment variables. See [server/config.js](serv
 
 ## Localization
 
-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)
+See: [docs/localization.md](docs/localization.md)
 
 ---
 
 ## Contributing
 
-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).
+Pull requests are always welcome! Feel free to check out the list of "good first issues" (to be implemented).
+
+---
+
+## Instances
+
+Find a list of public instances here: https://github.com/timvisee/send-instances/
 
 ---
 
 ## Deployment
 
-see also [docs/deployment.md](docs/deployment.md)
+See: [docs/deployment.md](docs/deployment.md)
+
+Docker quickstart: [docs/docker.md](docs/docker.md)
+
+AWS example using Ubuntu Server `20.04`: [docs/AWS.md](docs/AWS.md)
 
 ---
 
@@ -143,6 +152,7 @@ see also [docs/deployment.md](docs/deployment.md)
 - Web: _this repository_
 - Command-line: [`ffsend`](https://github.com/timvisee/ffsend)
 - Android: _see [Android](#android) section_
+- Thunderbird: [FileLink provider for Send](https://addons.thunderbird.net/thunderbird/addon/filelink-provider-for-send/)
 
 #### Android
 

android/android.js

@@ -77,7 +77,11 @@ function body(main) {
     state.capabilities = {
       account: true
     }; //TODO
-    state.archive = new Archive([], DEFAULTS.EXPIRE_SECONDS);
+    state.archive = new Archive(
+      [],
+      DEFAULTS.EXPIRE_SECONDS,
+      DEFAULTS.DOWNLOADS
+    );
     state.storage = storage;
     state.user = new User(storage, LIMITS);
     state.sentry = Sentry;

app/archive.js

@@ -14,11 +14,12 @@ function isDupe(newFile, array) {
 }
 
 export default class Archive {
-  constructor(files = [], defaultTimeLimit = 86400) {
+  constructor(files = [], defaultTimeLimit = 86400, defaultDownloadLimit = 1) {
     this.files = Array.from(files);
     this.defaultTimeLimit = defaultTimeLimit;
+    this.defaultDownloadLimit = defaultDownloadLimit;
     this.timeLimit = defaultTimeLimit;
-    this.dlimit = 1;
+    this.dlimit = defaultDownloadLimit;
     this.password = null;
   }
 
@@ -76,7 +77,7 @@ export default class Archive {
 
   clear() {
     this.files = [];
-    this.dlimit = 1;
+    this.dlimit = 100;
     this.timeLimit = this.defaultTimeLimit;
     this.password = null;
   }

app/experiments.js

@@ -7,7 +7,7 @@ const experiments = {
       return true;
     },
     variant: function() {
-      return ['white-blue', 'blue', 'white-violet', 'violet'][
+      return ['white-primary', 'primary', 'white-violet', 'violet'][
         Math.floor(Math.random() * 4)
       ];
     },

app/fileReceiver.js

@@ -224,24 +224,6 @@ async function saveFile(file) {
     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');

app/locale.js

@@ -1,8 +1,8 @@
-import { FluentBundle } from '@fluent/bundle';
+import { FluentBundle, FluentResource } from '@fluent/bundle';
 
 function makeBundle(locale, ftl) {
   const bundle = new FluentBundle(locale, { useIsolating: false });
-  bundle.addMessages(ftl);
+  bundle.addResource(new FluentResource(ftl));
   return bundle;
 }
 
@@ -19,7 +19,7 @@ export async function getTranslator(locale) {
   return function(id, data) {
     for (let bundle of bundles) {
       if (bundle.hasMessage(id)) {
-        return bundle.format(bundle.getMessage(id), data);
+        return bundle.formatPattern(bundle.getMessage(id).value, data);
       }
     }
   };

app/main.css

@@ -7,17 +7,14 @@ html {
 @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%
+    rgb(144 89 255 / 80%) 0%,
+    rgb(144 89 255 / 40%) 100%
   );
 }
 
@@ -39,7 +36,7 @@ body {
 }
 
 .btn {
-  @apply bg-blue-60;
+  @apply bg-primary;
   @apply text-white;
   @apply cursor-pointer;
   @apply py-4;
@@ -48,11 +45,11 @@ body {
 }
 
 .btn:hover {
-  @apply bg-blue-70;
+  @apply bg-primary_accent;
 }
 
 .btn:focus {
-  @apply bg-blue-70;
+  @apply bg-primary_accent;
 }
 
 .checkbox {
@@ -71,7 +68,7 @@ body {
 
 .checkbox > label::before {
   /* @apply bg-grey-10; */
-  @apply border;
+  @apply border-default;
   @apply rounded-sm;
 
   content: '';
@@ -82,16 +79,16 @@ body {
 }
 
 .checkbox > label:hover::before {
-  @apply border-blue-50;
+  @apply border-primary;
 }
 
 .checkbox > input:focus + label::before {
-  @apply border-blue-50;
+  @apply border-primary;
 }
 
 .checkbox > input:checked + label::before {
-  @apply bg-blue-50;
-  @apply border-blue-50;
+  @apply bg-primary;
+  @apply border-primary;
 
   background-image: url('../assets/lock.svg');
   background-position: center;
@@ -104,8 +101,8 @@ body {
 }
 
 .checkbox > input:disabled + label::before {
-  @apply bg-blue-50;
-  @apply border-blue-50;
+  @apply bg-primary;
+  @apply border-primary;
 
   background-image: url('../assets/lock.svg');
   background-position: center;
@@ -118,7 +115,7 @@ details {
   overflow: hidden;
 }
 
-details > summary::-webkit-details-marker {
+details > summary::marker {
   display: none;
 }
 
@@ -153,16 +150,16 @@ footer li a:hover {
   white-space: nowrap;
 }
 
-.link-blue {
-  @apply text-blue-60;
+.link-primary {
+  @apply text-primary;
 }
 
-.link-blue:hover {
-  @apply text-blue-70;
+.link-primary:hover {
+  @apply text-primary_accent;
 }
 
-.link-blue:focus {
-  @apply text-blue-70;
+.link-primary:focus {
+  @apply text-primary_accent;
 }
 
 .main-header img {
@@ -175,7 +172,6 @@ footer li a:hover {
   position: relative;
   max-width: 64rem;
   width: 100%;
-  height: 100%;
 }
 
 .main > section {
@@ -205,19 +201,18 @@ progress::-webkit-progress-value {
   background-image: -webkit-linear-gradient(
       -45deg,
       transparent 20%,
-      rgba(255, 255, 255, 0.4) 20%,
-      rgba(255, 255, 255, 0.4) 40%,
+      rgb(255 255 255 / 40%) 20%,
+      rgb(255 255 255 / 40%) 40%,
       transparent 40%,
       transparent 60%,
-      rgba(255, 255, 255, 0.4) 60%,
-      rgba(255, 255, 255, 0.4) 80%,
+      rgb(255 255 255 / 40%) 60%,
+      rgb(255 255 255 / 40%) 80%,
       transparent 80%
     ),
-    -webkit-linear-gradient(left, #0a84ff, #0a84ff);
+    -webkit-linear-gradient(left, var(--color-primary), var(--color-primary));
   /* stylelint-enable */
   border-radius: 2px;
   background-size: 21px 20px, 100% 100%, 100% 100%;
-  -webkit-animation: animate-stripes 1s linear infinite;
 }
 
 progress::-moz-progress-bar {
@@ -225,27 +220,21 @@ progress::-moz-progress-bar {
   background-image: -moz-linear-gradient(
       135deg,
       transparent 20%,
-      rgba(255, 255, 255, 0.4) 20%,
-      rgba(255, 255, 255, 0.4) 40%,
+      rgb(255 255 255 / 40%) 20%,
+      rgb(255 255 255 / 40%) 40%,
       transparent 40%,
       transparent 60%,
-      rgba(255, 255, 255, 0.4) 60%,
-      rgba(255, 255, 255, 0.4) 80%,
+      rgb(255 255 255 / 40%) 60%,
+      rgb(255 255 255 / 40%) 80%,
       transparent 80%
     ),
-    -moz-linear-gradient(left, #0a84ff, #0a84ff);
+    -moz-linear-gradient(left, var(--color-primary), var(--color-primary));
   /* 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;
@@ -271,7 +260,6 @@ select {
     @apply m-auto;
     @apply py-8;
 
-    min-height: 42rem;
     max-height: 42rem;
     width: calc(100% - 3rem);
   }
@@ -285,28 +273,28 @@ select {
   }
 
   .btn {
-    @apply bg-blue-40;
+    @apply bg-primary;
     @apply text-white;
   }
 
   .btn:hover {
-    @apply bg-blue-50;
+    @apply bg-primary_accent;
   }
 
   .btn:focus {
-    @apply bg-blue-50;
+    @apply bg-primary_accent;
   }
 
-  .link-blue {
-    @apply text-blue-40;
+  .link-primary {
+    @apply text-primary;
   }
 
-  .link-blue:hover {
-    @apply text-blue-50;
+  .link-primary:hover {
+    @apply text-primary_accent;
   }
 
-  .link-blue:focus {
-    @apply text-blue-50;
+  .link-primary:focus {
+    @apply text-primary_accent;
   }
 
   .main > section {
@@ -315,7 +303,7 @@ select {
 
   @screen md {
     .main > section {
-      @apply border;
+      @apply border-default;
       @apply border-grey-80;
     }
   }
@@ -325,13 +313,12 @@ select {
 
 @responsive {
   .shadow-light {
-    box-shadow: 0 0 8px 0 rgba(12, 12, 13, 0.1);
+    box-shadow: 0 0 8px 0 rgb(12 12 13 / 10%);
   }
 
   .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);
+    box-shadow: 0 12px 18px 2px rgb(34 0 51 / 4%),
+      0 6px 22px 4px rgb(7 48 114 / 12%), 0 6px 10px -4px rgb(14 13 26 / 12%);
   }
 }
 
@@ -365,20 +352,20 @@ select {
 
 /* begin signin button color experiment */
 
-.white-blue {
-  @apply border-blue-60;
+.white-primary {
+  @apply border-primary;
   @apply border-2;
-  @apply text-blue-60;
+  @apply text-primary;
 }
 
-.white-blue:hover,
-.white-blue:focus {
-  @apply bg-blue-60;
+.white-primary:hover,
+.white-primary:focus {
+  @apply bg-primary;
   @apply text-white;
 }
 
-.blue {
-  @apply bg-blue-60;
+.primary {
+  @apply bg-primary;
   @apply text-white;
 }
 

app/main.js

@@ -52,7 +52,7 @@ if (process.env.NODE_ENV === 'production') {
     DEFAULTS,
     WEB_UI,
     PREFS,
-    archive: new Archive([], DEFAULTS.EXPIRE_SECONDS),
+    archive: new Archive([], DEFAULTS.EXPIRE_SECONDS, DEFAULTS.DOWNLOADS),
     capabilities,
     translate,
     storage,

app/ui/account.js

@@ -69,7 +69,7 @@ class Account extends Component {
       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"
+            class="px-4 py-2 md:px-8 md:py-4 focus:outline signin border-2 link-primary border-primary hover:border-primary dark:border-primary dark:hover:border-primary"
             onclick="${e => this.login(e)}"
             title="${translate('signInOnlyButton')}"
           >
@@ -83,19 +83,19 @@ class Account extends Component {
         <input
           type="image"
           alt="${user.email}"
-          class="w-8 h-8 rounded-full border text-blue-50 md:text-white focus:outline"
+          class="w-8 h-8 rounded-full border-default text-primary 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"
+          class="invisible absolute top-0 right-0 mt-10 pt-2 pb-2 bg-white shadow-md whitespace-nowrap 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"
+              class="block w-full text-left px-4 py-2 text-grey-80 dark:text-grey-30 hover:bg-primary hover:text-white cursor-pointer focus:outline"
               onclick="${e => this.logout(e)}"
               title="${translate('signOut')}"
             >

app/ui/archiveTile.js

@@ -26,7 +26,7 @@ function expiryInfo(translate, archive) {
 }
 
 function password(state) {
-  const MAX_LENGTH = 32;
+  const MAX_LENGTH = 4096;
 
   return html`
     <div class="mb-2 px-1">
@@ -53,7 +53,7 @@ function password(state) {
           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"
+            : 'invisible'} border-default rounded-default focus:border-primary leading-normal my-1 py-1 px-2 h-8 dark:bg-grey-80"
           autocomplete="off"
           maxlength="${MAX_LENGTH}"
           type="password"
@@ -150,7 +150,7 @@ function password(state) {
 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">
+      <svg class="h-8 w-8 text-primary">
         <use xlink:href="${assets.get('blue_file.svg')}#icon"/>
       </svg>
       <p class="ml-4 w-full">
@@ -166,7 +166,7 @@ function fileInfo(file, action) {
 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">
+      <svg class="h-8 w-6 mr-3 flex-shrink-0 text-primary">
         <use xlink:href="${assets.get('blue_file.svg')}#icon"/>
       </svg>
       <p class="flex-grow">
@@ -188,7 +188,7 @@ function archiveDetails(translate, archive) {
         ontoggle="${toggled}"
       >
         <summary
-          class="flex items-center link-blue text-sm cursor-pointer outline-none"
+          class="flex items-center link-primary text-sm cursor-pointer outline-none"
         >
           <svg
             class="fill-current w-4 h-4 mr-1"
@@ -218,7 +218,7 @@ module.exports = function(state, emit, archive) {
     state.capabilities.share || platform() === 'android'
       ? html`
           <button
-            class="link-blue self-end flex items-start"
+            class="link-primary self-end flex items-start"
             onclick=${share}
             title="Share link"
           >
@@ -230,7 +230,7 @@ module.exports = function(state, emit, archive) {
         `
       : html`
           <button
-            class="link-blue focus:outline self-end flex items-center"
+            class="link-primary focus:outline self-end flex items-center"
             onclick=${copy}
             title="${state.translate('copyLinkButton')}"
           >
@@ -244,7 +244,7 @@ module.exports = function(state, emit, archive) {
     platform() === 'web'
       ? html`
           <a
-            class="flex items-baseline link-blue"
+            class="flex items-baseline link-primary"
             href="${archive.url}"
             title="${state.translate('downloadButtonLabel')}"
             tabindex="0"
@@ -261,7 +261,7 @@ module.exports = function(state, emit, archive) {
   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"
+      class="flex flex-col items-start rounded-default shadow-light bg-white p-4 w-full dark:bg-grey-90 dark:border-default dark:border-grey-70"
     >
       ${archiveInfo(
         archive,
@@ -335,7 +335,7 @@ module.exports.wip = function(state, emit) {
             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'
+        'bg-white px-2 my-2 shadow-light rounded-default dark:bg-grey-90 dark:border-default 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"
@@ -358,7 +358,7 @@ module.exports.wip = function(state, emit) {
             class="flex items-center cursor-pointer"
             title="${state.translate('addFilesButton')}"
           >
-            <svg class="w-6 h-6 mr-2 link-blue">
+            <svg class="w-6 h-6 mr-2 link-primary">
               <use xlink:href="${assets.get('addfiles.svg')}#plus" />
             </svg>
             ${state.translate('addFilesButton')}
@@ -438,7 +438,7 @@ module.exports.uploading = function(state, emit) {
   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"
+      class="flex flex-col items-start rounded-default 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">
@@ -448,12 +448,12 @@ module.exports.uploading = function(state, emit) {
           expiresAt: Date.now() + 500 + state.archive.timeLimit * 1000
         })}
       </div>
-      <div class="link-blue text-sm font-medium mt-2">
+      <div class="link-primary text-sm font-medium mt-2">
         ${progressPercent}
       </div>
       <progress class="my-3" value="${progress}">${progressPercent}</progress>
       <button
-        class="link-blue self-end font-medium"
+        class="link-primary self-end font-medium"
         onclick=${cancel}
         title="${state.translate('deletePopupCancel')}"
       >
@@ -475,7 +475,7 @@ module.exports.empty = function(state, emit) {
       ? ''
       : html`
           <button
-            class="center font-medium text-sm link-blue mt-4 mb-2"
+            class="center font-medium text-sm link-primary mt-4 mb-2"
             onclick="${event => {
               event.stopPropagation();
               emit('signup-cta', 'drop');
@@ -488,14 +488,14 @@ module.exports.empty = function(state, emit) {
         `;
   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"
+      class="flex flex-col items-center justify-center border-2 border-dashed border-grey-transparent rounded-default 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">
+      <svg class="w-10 h-10 link-primary">
         <use xlink:href="/${assets.get('addfiles.svg')}#plus" />
       </svg>
       <div class="pt-6 pb-2 text-center text-lg font-bold tracking-wide">
@@ -531,11 +531,11 @@ module.exports.empty = function(state, emit) {
   `;
 
   function focus(event) {
-    event.target.nextElementSibling.classList.add('bg-blue-70', 'outline');
+    event.target.nextElementSibling.classList.add('bg-primary', 'outline');
   }
 
   function blur(event) {
-    event.target.nextElementSibling.classList.remove('bg-blue-70', 'outline');
+    event.target.nextElementSibling.classList.remove('bg-primary', 'outline');
   }
 
   function add(event) {
@@ -563,7 +563,7 @@ module.exports.preview = function(state, emit) {
     <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">
+      <div class="border-default rounded-default py-3 px-6 dark:border-grey-70">
         ${archiveInfo(archive)} ${details}
       </div>
       <button
@@ -590,10 +590,10 @@ module.exports.downloading = function(state) {
   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"
+      class="flex flex-col bg-white rounded-default 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">
+      <div class="link-primary text-sm font-medium mt-2">
         ${progressPercent}
       </div>
       <progress class="my-3" value="${progress}">${progressPercent}</progress>

app/ui/copyDialog.js

@@ -21,7 +21,7 @@ module.exports = function(name, url) {
           <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"
+            class="block w-full my-4 border-default rounded-lg leading-loose h-12 px-2 py-1 dark:bg-grey-80"
             value="${url}"
             readonly="true"
           />
@@ -42,7 +42,7 @@ module.exports = function(name, url) {
           ${state.translate('copyLinkButton')}
         </button>
         <button
-          class="link-blue my-4 font-medium cursor-pointer focus:outline"
+          class="link-primary my-4 font-medium cursor-pointer focus:outline"
           onclick="${close}"
           title="${state.translate('okButton')}"
         >

app/ui/downloadCompleted.js

@@ -11,7 +11,9 @@ module.exports = function(state) {
       <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" />
+      <svg class="my-8 h-48 text-primary">
+        <use xlink:href="${assets.get('completed.svg')}#Page-1" />
+      </svg>
       <p
         class="text-grey-80 leading-normal dark:text-grey-40 ${state.user
           .loggedIn

app/ui/downloadPassword.js

@@ -17,7 +17,7 @@ module.exports = function(state, emit) {
         ${state.translate('downloadDescription')}
       </p>
       <form
-        class="flex flex-row flex-no-wrap w-full md:w-4/5"
+        class="flex flex-row flex-nowrap w-full md:w-4/5"
         onsubmit="${checkPassword}"
         data-no-csrf
       >
@@ -32,7 +32,7 @@ module.exports = function(state, emit) {
           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"
+          maxlength="4096"
           autocomplete="off"
           placeholder="${state.translate('unlockInputPlaceholder')}"
           oninput="${inputChanged}"

app/ui/error.js

@@ -13,7 +13,9 @@ module.exports = function(state, emit) {
         <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')}" />
+        <svg class="text-primary my-12 h-48">
+          <use xlink:href="${assets.get('error.svg')}#svg114" />
+        </svg>
         <p
           class="max-w-md text-center text-grey-80 leading-normal dark:text-grey-40 ${state
             .user.loggedIn

app/ui/expiryOptions.js

@@ -31,12 +31,11 @@ module.exports = function(state, emit) {
       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');
+        const selected = parseInt(value);
+        state.archive.dlimit = selected;
+        emit('render');
+        if (selected > parseInt(state.user.maxDownloads || '0')) {
+          console.log('Chosen max download count is larger than the allowed limit', selected)
         }
       },
       'expire-after-dl-count-select'
@@ -58,12 +57,11 @@ module.exports = function(state, emit) {
         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');
+        const selected = parseInt(value);
+        state.archive.timeLimit = selected;
+        emit('render');
+        if (selected > parseInt(state.user.maxExpireSeconds || '0')) {
+          console.log('Chosen download expiration is larger than the allowed limit', selected)
         }
       },
       'expire-after-time-select'

app/ui/faviconProgressbar.js

@@ -1,9 +1,11 @@
+/*global WEB_UI*/
+
 const { platform } = require('../utils');
 const assets = require('../../common/assets');
 
 const size = 32;
 const loaderWidth = 5;
-const loaderColor = '#0090ed';
+const loaderColor = WEB_UI.COLORS.PRIMARY;
 
 function drawCircle(canvas, context, color, lineWidth, outerWidth, percent) {
   canvas.width = canvas.height = outerWidth;
@@ -32,7 +34,10 @@ module.exports.updateFavicon = function(progressRatio) {
     const progress = progressRatio * 100;
     if (progress === 0 || progress === 100) {
       link.type = 'image/png';
-      link.href = assets.get('favicon-32x32.png');
+      link.href =
+        WEB_UI.CUSTOM_ASSETS.favicon_32px !== ''
+          ? WEB_UI.CUSTOM_ASSETS.favicon_32px
+          : assets.get('favicon-32x32.png');
       return;
     }
 

app/ui/footer.js

@@ -1,5 +1,7 @@
 const html = require('choo/html');
 const Component = require('choo/component');
+const version = require('../../package.json').version;
+/*const { browserName } = require('../utils');*/
 
 class Footer extends Component {
   constructor(name, state) {
@@ -12,73 +14,18 @@ class Footer extends Component {
   }
 
   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"
+        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:justify-end justify-between"
       >
-        <ul
-          class="flex flex-col md:flex-row items-start md:items-center md:justify-start"
+        <a
+          href="https://admin.chapril.org/doku.php?id=admin:chatons:drop.chapril.org#personnalisation"
+          rel="noreferrer noopener"
+          alt="Version"
+          target="_blank"
         >
-          <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>
+          FirefoxSend chapril-${version}
+        </a>
       </footer>
     `;
   }

app/ui/header.js

@@ -1,8 +1,8 @@
 const html = require('choo/html');
 const Component = require('choo/component');
 const Account = require('./account');
-const assets = require('../../common/assets');
-const { platform } = require('../utils');
+/*const assets = require('../../common/assets');*/
+/*const { platform } = require('../utils');*/
 
 class Header extends Component {
   constructor(name, state, emit) {
@@ -18,32 +18,66 @@ class Header extends Component {
   }
 
   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"
+        class="main-header relative flex-none flex flex-row items-center justify-between px-6 md:px-8 z-20 bg-transparent"
       >
-        ${title} ${this.account.render()}
+        <!-- Chapril banner code: starting… -->
+        <nav class="chapril-banniere-Nav">
+          <div class="chapril-banniere-Logo" aria-hidden="true">
+            <a href="https://www.chapril.org"
+              ><img alt="" src="/Chapril-banner/v2/chapril-banner-logo.png"
+            /></a>
+          </div>
+          <div class="chapril-banniere-Menu" aria-hidden="true">
+            <details>
+              <summary>
+                <span></span>
+                <span></span>
+                <span></span>
+              </summary>
+              <div><a href="https://www.chapril.org/">Accueil Chapril</a></div>
+              <div>
+                <a href="https://www.chapril.org/services.html"
+                  >Services libres</a
+                >
+              </div>
+              <div>
+                <a href="https://pouet.april.org/@aprilorg">Nous suivre</a>
+              </div>
+              <div><a href="https://www.chapril.org/cgu.html">CGU</a></div>
+              <div>
+                <a href="https://www.chapril.org/a-propos.html"
+                  >Mentions légales</a
+                >
+              </div>
+              <div>
+                <a href="https://www.chapril.org/contact.html"
+                  >Nous contacter</a
+                >
+              </div>
+            </details>
+          </div>
+          <div class="chapril-banniere-Entree">
+            <a href="https://www.chapril.org/">Accueil Chapril</a>
+          </div>
+          <div class="chapril-banniere-Entree">
+            <a href="https://www.chapril.org/services.html">Services libres</a>
+          </div>
+          <div class="chapril-banniere-Entree">
+            <a href="https://pouet.april.org/@aprilorg">Nous suivre</a>
+          </div>
+          <div class="chapril-banniere-Entree">
+            <a href="https://www.chapril.org/cgu.html">CGU</a>
+          </div>
+          <div class="chapril-banniere-Entree">
+            <a href="https://www.chapril.org/a-propos.html">Mentions légales</a>
+          </div>
+          <div class="chapril-banniere-Entree">
+            <a href="https://www.chapril.org/contact.html">Nous contacter</a>
+          </div>
+        </nav>
+        <!-- Chapril banner code: done. -->
       </header>
     `;
   }

app/ui/noStreams.js

@@ -12,14 +12,14 @@ module.exports = function(state, emit) {
         'downloadTitle'
       )}</h1>
       <p
-        class="w-full p-2 border border-yellow-50 rounded md:w-4/5 text-orange-60 bg-yellow-40 text-center leading-normal"
+        class="w-full p-2 border-default border-yellow-50 rounded-default md:w-4/5 text-orange-60 bg-yellow-40 text-center leading-normal"
       >
         ⚠️ ${state.translate('noStreamsWarning')} ⚠️
       </p>
       <form class="md:w-128" onsubmit=${submit}>
-        <fieldset class="border rounded p-4 my-4" onchange=${optionChanged}>
+        <fieldset class="border-default rounded-default p-4 my-4" onchange=${optionChanged}>
           <div class="flex items-center mb-2">
-            <svg class="h-8 w-6 mr-3 flex-shrink-0 text-white dark:text-grey-90">
+            <svg class="h-8 w-6 mr-3 flex-shrink-0 text-primary">
               <use xlink:href="${assets.get('blue_file.svg')}#icon"/>
             </svg>
             <p class="flex-grow">

app/ui/notFound.js

@@ -13,7 +13,9 @@ module.exports = function(state, emit) {
         <h1 class="text-center text-3xl font-bold my-2">
           ${state.translate('expiredTitle')}
         </h1>
-        <img src="${assets.get('notFound.svg')}" class="my-12" />
+        <svg class="text-primary my-12">
+          <use xlink:href="${assets.get('notFound.svg')}#svg124" />
+        </svg>
         <p
           class="max-w-md text-center text-grey-80 leading-normal dark:text-grey-40 ${state
             .user.loggedIn

app/ui/qr.js

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

app/ui/selectbox.js

@@ -1,32 +1,35 @@
 const html = require('choo/html');
 
 module.exports = function(selected, options, translate, changed, htmlId) {
-  let x = selected;
+  function choose(event) {
+    if (event.target.value != selected) {
+      console.log(
+        'Selected new value from dropdown',
+        htmlId,
+        ':',
+        selected,
+        '->',
+        event.target.value
+      );
+      changed(event.target.value);
+    }
+  }
 
   return html`
     <select
       id="${htmlId}"
-      class="appearance-none cursor-pointer border rounded bg-grey-10 hover:border-blue-50 focus:border-blue-50 pl-1 pr-8 py-1 my-1 h-8 dark:bg-grey-80"
+      class="appearance-none cursor-pointer border-default rounded-default bg-grey-10 hover:border-primary focus:border-primary pl-1 pr-8 py-1 my-1 h-8 dark:bg-grey-80"
+      data-selected="${selected}"
       onchange="${choose}"
     >
       ${options.map(
-        i =>
+        value =>
           html`
-            <option value="${i}" ${i === selected ? 'selected' : ''}
-              >${translate(i)}</option
-            >
+            <option value="${value}" ${value == selected ? 'selected' : ''}>
+              ${translate(value)}
+            </option>
           `
       )}
     </select>
   `;
-
-  function choose(event) {
-    const target = event.target;
-    const value = +target.value;
-
-    if (x !== value) {
-      x = value;
-      changed(value);
-    }
-  }
 };

app/ui/shareDialog.js

@@ -18,7 +18,7 @@ module.exports = function(name, url) {
         <input
           type="text"
           id="share-url"
-          class="w-full my-4 border rounded-lg leading-loose h-12 px-2 py-1 dark:bg-grey-80"
+          class="w-full my-4 border-default rounded-lg leading-loose h-12 px-2 py-1 dark:bg-grey-80"
           value="${url}"
           readonly="true"
         />
@@ -30,7 +30,7 @@ module.exports = function(name, url) {
           ${state.translate('shareLinkButton')}
         </button>
         <button
-          class="link-blue my-4 font-medium cursor-pointer focus:outline"
+          class="link-primary my-4 font-medium cursor-pointer focus:outline"
           onclick="${close}"
           title="${state.translate('okButton')}"
         >

app/ui/signupDialog.js

@@ -35,7 +35,7 @@ module.exports = function() {
             <input
               id="email-input"
               type="email"
-              class="hidden border rounded-lg w-full px-2 py-1 h-12 mb-3 text-lg text-grey-70 leading-loose dark:bg-grey-80 dark:text-white"
+              class="hidden border-default rounded-lg w-full px-2 py-1 h-12 mb-3 text-lg text-grey-70 leading-loose dark:bg-grey-80 dark:text-white"
               placeholder=${state.translate('emailPlaceholder')}
             />
             <input
@@ -50,7 +50,7 @@ module.exports = function() {
             ? ''
             : html`
                 <button
-                  class="my-3 link-blue font-medium"
+                  class="my-3 link-primary font-medium"
                   title="${state.translate('deletePopupCancel')}"
                   onclick=${cancel}
                 >

app/ui/surveyDialog.js

@@ -30,7 +30,7 @@ module.exports = function() {
           Give feedback
         </a>
         <button
-          class="link-blue font-medium cursor-pointer focus:outline"
+          class="link-primary font-medium cursor-pointer focus:outline"
           onclick="${close}"
           title="Skip"
         >

app/ui/unsupported.js

@@ -10,8 +10,8 @@ module.exports = function(state, emit) {
     strings = unsupportedStrings(state);
     why = html`
       <a
-        class="text-blue"
-        href="https://github.com/mozilla/send/blob/master/docs/faq.md#why-is-my-browser-not-supported"
+        class="text-primary"
+        href="https://github.com/timvisee/send/blob/master/docs/faq.md#why-is-my-browser-not-supported"
       >
         ${state.translate('notSupportedLink')}
       </a>
@@ -27,7 +27,7 @@ module.exports = function(state, emit) {
     <main class="main">
       ${state.modal && modal(state, emit)}
       <section
-        class="flex flex-col items-center justify-center text-center bg-white m-6 px-6 py-8 border border-grey-30 md:border-none md:px-12 md:py-16 shadow w-full md:h-full dark:bg-grey-90"
+        class="flex flex-col items-center justify-center text-center bg-white m-6 px-6 py-8 border-default border-grey-30 md:border-none md:px-12 md:py-16 shadow-default w-full md:h-full dark:bg-grey-90"
       >
         <h1 class="text-3xl font-bold">${strings.header}</h1>
         <p class="mt-4 mb-8 max-w-md leading-normal">${strings.description}</p>

app/user.js

@@ -81,21 +81,15 @@ export default class User {
   }
 
   get maxSize() {
-    return this.loggedIn
-      ? this.limits.MAX_FILE_SIZE
-      : this.limits.ANON.MAX_FILE_SIZE;
+    return this.limits.MAX_FILE_SIZE;
   }
 
   get maxExpireSeconds() {
-    return this.loggedIn
-      ? this.limits.MAX_EXPIRE_SECONDS
-      : this.limits.ANON.MAX_EXPIRE_SECONDS;
+    return this.limits.MAX_EXPIRE_SECONDS;
   }
 
   get maxDownloads() {
-    return this.loggedIn
-      ? this.limits.MAX_DOWNLOADS
-      : this.limits.ANON.MAX_DOWNLOADS;
+    return this.limits.MAX_DOWNLOADS;
   }
 
   async metricId() {

app/zip.js

@@ -29,7 +29,7 @@ class File {
     const v = new DataView(h);
     v.setUint32(0, 0x04034b50, true); // sig
     v.setUint16(4, 20, true); // version
-    v.setUint16(6, 8, true); // bit flags (8 = use data descriptor)
+    v.setUint16(6, 0x808, true); // bit flags (use data descriptor(8) + utf8-encoded(8 << 8))
     v.setUint16(8, 0, true); // compression
     v.setUint16(10, this.dateTime.time, true); // modified time
     v.setUint16(12, this.dateTime.date, true); // modified date
@@ -60,7 +60,7 @@ class File {
     v.setUint32(0, 0x02014b50, true); // sig
     v.setUint16(4, 20, true); // version made
     v.setUint16(6, 20, true); // version required
-    v.setUint16(8, 8, true); // bit flags (8 = use data descriptor)
+    v.setUint16(8, 0x808, true); // bit flags (use data descriptor(8) + utf8-encoded(8 << 8))
     v.setUint16(10, 0, true); // compression
     v.setUint16(12, this.dateTime.time, true); // modified time
     v.setUint16(14, this.dateTime.date, true); // modified date

assets/blue_file.svg

@@ -1,26 +1,24 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<?xml version="1.0" encoding="utf-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1">
+    <!--
+      This would be the elegant way, but chrome cannot handle masks in external SVGs.
+      See https://bugs.chromium.org/p/chromium/issues/detail?id=109212
+    -->
+    <!--
     <symbol id="icon" viewBox="0 0 26 32">
-    <defs>
-        <path d="M21.848475,31.6653183 L2.89005487,31.6653183 C1.32717435,31.6653183 0.104050469,30.3742431 0.104050469,28.8793139 L0.104050469,2.7860044 C0.104050469,1.22312388 1.39512568,0 2.89005487,0 L14.7135857,0 C15.4610503,0 16.2085149,0.271805307 16.6841742,0.815415921 L23.8190635,7.95030523 C24.3626741,8.49391584 24.6344794,9.17342911 24.6344794,9.9208937 L24.6344794,28.8793139 C24.6344794,30.3742431 23.4113555,31.6653183 21.848475,31.6653183 Z" id="path-1"></path>
-    </defs>
-    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="Send_Ready_to_Send-Spec" transform="translate(-277.000000, -206.000000)">
-            <g id="List-Item-1" transform="translate(253.000000, 192.000000)">
-                <g id="Locked-File-Icon" transform="translate(24.000000, 14.000000)">
-                    <g id="File-Icon">
-                        <mask id="mask-2" fill="white">
-                            <use xlink:href="#path-1"></use>
-                        </mask>
-                        <use id="Mask" fill="#45a1ff" xlink:href="#path-1"></use>
-                        <path d="M24.3031318,10.6474633 L16.7826187,10.6474633 C15.2742552,10.6474633 14.051485,9.42469306 14.051485,7.91632957 L14.051485,0.395816478" id="Path" stroke="currentColor" stroke-width="2" stroke-linecap="round" mask="url(#mask-2)"></path>
-                        <path d="M7.2830232,8.93885547 L8.91906464,8.93885547" id="Path" stroke="currentColor" stroke-width="2" stroke-linecap="round" mask="url(#mask-2)"></path>
-                        <path d="M7.2830232,15.7798836 L17.5412669,15.7798836" id="Path" stroke="currentColor" stroke-width="2" stroke-linecap="round" mask="url(#mask-2)"></path>
-                        <path d="M7.2830232,22.6209117 L17.5412669,22.6209117" id="Path" stroke="currentColor" stroke-width="2" stroke-linecap="round" mask="url(#mask-2)"></path>
-                    </g>
-                </g>
-            </g>
+        <g id="Fire-Icon">
+            <mask id="mask">
+                <rect x="0" y="0" width="100" height="100" fill="white"/>
+                <path d="M7.2830232,8.93885547 L8.91906464,8.93885547" stroke="black" stroke-width="2" stroke-linecap="round"/>
+                <path d="M7.2830232,15.7798836 L17.5412669,15.7798836" stroke="black" stroke-width="2" stroke-linecap="round"/>
+                <path d="M7.2830232,22.6209117 L17.5412669,22.6209117" stroke="black" stroke-width="2" stroke-linecap="round"/>
+                <path d="M24.3031318,10.6474633 L16.7826187,10.6474633 C15.2742552,10.6474633 14.051485,9.42469306 14.051485,7.91632957 L14.051485,0.395816478" id="Path" stroke-linecap="square" stroke="black" stroke-width="2" fill="none"/>
+            </mask>
+            <path d="M21.848475,31.6653183 L2.89005487,31.6653183 C1.32717435,31.6653183 0.104050469,30.3742431 0.104050469,28.8793139 L0.104050469,2.7860044 C0.104050469,1.22312388 1.39512568,0 2.89005487,0 L14.7135857,0 C15.4610503,0 16.2085149,0.271805307 16.6841742,0.815415921 L23.8190635,7.95030523 C24.3626741,8.49391584 24.6344794,9.17342911 24.6344794,9.9208937 L24.6344794,28.8793139 C24.6344794,30.3742431 23.4113555,31.6653183 21.848475,31.6653183 Z" id="path-1" fill="currentColor" mask="url(#mask)" />
         </g>
-    </g>
     </symbol>
-</svg>
+    -->
+    <symbol id="icon" viewBox="0 0 26 32">
+        <path d="m 15 0 c 0.7 0.1 1.233 0.331 1.7 0.8 l 7.1 7.1 c 0.5 0.5 0.8 1.1 0.8 1.8 h -7.9 c -1 0 -1.7 -0.8 -1.7 -1.7 V 0.4 z M 24.65 11.647 v 17.23 c 0 1.5 -1.2 2.8 -2.8 2.8 h -19 c -1.234 -0.017 -2.694 -1.094 -2.7 -2.8 V 2.8 C 0.1 1.2 1.4 0 2.9 0 h 10.15 v 7.5 c -0.135 2.533 1.669 4.119 3.7 4.15 h 7.9 z M 6.3 8.9 c 0 0.6 0.4 1 1 1 h 1.6 c 0.5 0 1 -0.4 1 -1 c 0 -0.5 -0.5 -1 -1 -1 H 7.3 C 6.7 7.9 6.3 8.4 6.3 8.9 z M 18.5 22.6 c 0 -0.5 -0.4 -1 -1 -1 H 7.3 c -0.6 0 -1 0.5 -1 1 s 0.4 1 1 1 h 10.3 C 18.1 23.6 18.5 23.2 18.5 22.6 z M 18.5 15.8 c 0 -0.6 -0.4 -1 -1 -1 H 7.3 c -0.6 0 -1 0.4 -1 1 s 0.4 1 1 1 h 10.3 C 18.1 16.8 18.5 16.3 18.5 15.8 z" fill="currentColor" />
+    </symbol>
+</svg>

assets/completed.svg

@@ -253,7 +253,7 @@
         <path
            id="cloud-check"
            d="m 240.12048,110.31165 a 39.582604,39.582604 0 0 1 -10.23938,26.55813 33.935974,33.935974 0 0 1 -20.28366,10.27635 39.949372,39.949372 0 0 0 0.80301,-16.48404 16.944722,16.944722 0 0 0 7.65405,-4.47239 23.665469,23.665469 0 0 0 6.1311,-15.87805 26.589359,26.589359 0 0 0 -26.55812,-26.558123 c -0.87568,0 -5.3742,0.56186 -8.11085,0.91445 a 2.6398778,2.6398778 0 0 1 -2.83769,-1.77451 l -1.08155,-3.155106 A 32.772357,32.772357 0 0 0 158.37085,57.356128 31.757517,31.757517 0 0 0 124.14114,96.347867 l 1.13419,4.851433 a 2.6558127,2.6558127 0 0 1 -1.8179,3.14687 l -4.77313,1.44232 a 15.788381,15.788381 0 0 0 -11.35445,15.14642 10.699791,10.699791 0 0 0 2.19933,6.52543 12.871343,12.871343 0 0 0 9.50281,4.09782 h 7.25749 a 40.137987,40.137987 0 0 0 1.02966,15.93487 h -8.28715 A 28.433555,28.433555 0 0 1 96.535402,136.68302 26.739094,26.739094 0 0 1 91.39497,120.93491 31.54075,31.54075 0 0 1 107.53217,93.318597 c -0.13492,-1.42644 -0.20238,-2.84772 -0.20238,-4.25345 a 47.786197,47.786197 0 0 1 90.59848,-21.246498 42.542454,42.542454 0 0 1 42.19216,42.493001 z m -39.83719,26.55813 a 31.869752,31.869752 0 1 1 -31.86975,-31.86975 31.869752,31.869752 0 0 1 31.86975,31.86975 z m -15.15067,-11.86394 -2.71673,-2.01199 a 1.5763311,1.5763311 0 0 0 -2.00127,0.14182 l -16.73162,15.72576 -9.38033,-4.48657 a 1.7144864,1.7144864 0 0 0 -2.00221,0.5062 l -2.30275,2.94497 a 1.576756,1.576756 0 0 0 0.14182,2.00158 l 11.86234,11.8768 a 4.410933,4.410933 0 0 0 6.89242,-0.53116 l 16.51629,-24.2992 a 1.346922,1.346922 0 0 0 -0.27833,-1.86831 z"
-           style="fill:#45a1ff;fill-opacity:1;stroke-width:5.31163" />
+           style="fill-opacity:1;stroke-width:5.31163" fill="currentColor" />
       </g>
     </g>
   </g>

assets/error.svg

@@ -5,8 +5,6 @@
    xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
    xmlns:svg="http://www.w3.org/2000/svg"
    xmlns="http://www.w3.org/2000/svg"
-   width="356px"
-   height="210px"
    viewBox="0 0 356 210"
    version="1.1"
    id="svg114">
@@ -256,5 +254,5 @@
   <path
      id="cloud-alert"
      d="m 254.54362,110.61709 a 41.858804,41.858804 0 0 1 -10.8282,28.08534 35.887465,35.887465 0 0 1 -21.45007,10.8673 42.246663,42.246663 0 0 0 0.84918,-17.43196 17.919131,17.919131 0 0 0 8.09421,-4.72957 25.026353,25.026353 0 0 0 6.48366,-16.79111 28.118382,28.118382 0 0 0 -28.08535,-28.085359 c -0.92602,0 -5.68324,0.594174 -8.57727,0.967035 a 2.7916842,2.7916842 0 0 1 -3.0008,-1.876551 l -1.14369,-3.336147 A 34.656989,34.656989 0 0 0 168.09302,54.616462 33.58368,33.58368 0 0 0 131.89488,95.850311 l 1.19942,5.130409 a 2.8085354,2.8085354 0 0 1 -1.92244,3.32783 l -5.04762,1.52526 a 16.696293,16.696293 0 0 0 -12.00739,16.01742 11.315083,11.315083 0 0 0 2.32581,6.90069 13.611511,13.611511 0 0 0 10.04928,4.33345 h 7.67482 a 42.446125,42.446125 0 0 0 1.08887,16.85122 h -8.76369 A 30.06863,30.06863 0 0 1 102.70166,138.50495 28.276728,28.276728 0 0 1 97.265633,121.85123 33.354503,33.354503 0 0 1 114.33081,92.64684 c -0.14268,-1.508465 -0.21401,-3.01148 -0.21401,-4.498037 a 50.534146,50.534146 0 0 1 95.80834,-22.468284 44.988861,44.988861 0 0 1 44.61843,44.936571 z m -42.12804,28.08534 a 33.702425,33.702425 0 1 1 -33.70241,-33.70242 33.702425,33.702425 0 0 1 33.70241,33.70242 z m -28.08535,14.04269 a 2.8085354,2.8085354 0 0 0 -2.80853,-2.80853 h -5.61707 a 2.8085354,2.8085354 0 0 0 -2.80853,2.80853 v 5.61706 a 2.8085354,2.8085354 0 0 0 2.80853,2.80855 h 5.61707 a 2.8085354,2.8085354 0 0 0 2.80853,-2.80855 z m 0,-33.70243 a 2.8166239,2.8166239 0 0 0 -2.80853,-2.80853 h -5.61707 a 2.8166239,2.8166239 0 0 0 -2.80853,2.80853 v 11.23415 a 22.144684,22.144684 0 0 0 0.83447,5.49022 l 2.24351,7.21126 a 2.0333796,2.0333796 0 0 0 1.82117,1.34118 h 1.43583 a 2.0333796,2.0333796 0 0 0 1.82118,-1.34118 l 2.2435,-7.21126 a 22.144684,22.144684 0 0 0 0.83447,-5.49022 z"
-     style="stroke-width:5.61707;fill:#45a1ff;fill-opacity:1" />
+     style="stroke-width:5.61707;fill:currentColor;fill-opacity:1" />
 </svg>

assets/notFound.svg

@@ -5,8 +5,6 @@
    xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
    xmlns:svg="http://www.w3.org/2000/svg"
    xmlns="http://www.w3.org/2000/svg"
-   width="348px"
-   height="210px"
    viewBox="0 0 348 210"
    version="1.1"
    id="svg124">
@@ -272,5 +270,5 @@
   <path
      id="cloud-off"
      d="M 232.66609,50.155807 A 8.2118103,8.2118103 0 0 0 221.05286,38.54253 l -24.58739,24.587284 a 49.087021,49.087021 0 0 0 -82.69072,35.970548 c 0,1.448998 0.0696,2.914018 0.20861,4.384368 a 32.511588,32.511588 0 0 0 -16.633903,28.46635 27.562135,27.562135 0 0 0 5.298643,16.23286 22.799931,22.799931 0 0 0 4.2838,4.4793 l -7.176402,7.17673 a 8.2118072,8.2118072 0 1 0 11.613272,11.61322 z M 118.72657,140.86955 a 8.5946237,8.5946237 0 0 1 -2.68479,-2.19217 11.029135,11.029135 0 0 1 -2.26703,-6.7263 16.274355,16.274355 0 0 1 11.70415,-15.61263 l 4.92005,-1.48644 a 2.738162,2.738162 0 0 0 1.8737,-3.24418 l -1.16893,-5.00059 a 32.735029,32.735029 0 0 1 35.28314,-40.191861 31.860268,31.860268 0 0 1 18.36694,8.426592 z m 131.92616,-19.86871 a 40.800975,40.800975 0 0 1 -10.55455,27.3756 35.587128,35.587128 0 0 1 -25.2904,10.95024 h -71.10166 l 16.42536,-16.42536 h 54.6763 a 19.17354,19.17354 0 0 0 13.09966,-5.53393 24.393903,24.393903 0 0 0 6.31993,-16.36655 27.319807,27.319807 0 0 0 -25.05414,-27.140158 l 13.61114,-13.61313 a 43.833807,43.833807 0 0 1 27.86836,40.753288 z"
-     style="fill:#45a1ff;fill-opacity:1;stroke-width:5.47512" />
+     style="fill:currentColor;fill-opacity:1;stroke-width:5.47512" />
 </svg>

docs/AWS.md

@@ -0,0 +1,236 @@
+# Deployment to AWS
+
+This document describes how to do a deployment of Send in AWS
+
+## AWS requirements
+
+### Security groups (2)
+
+* ALB:
+  - inbound: allow traffic from anywhere on port 80 and 443
+  - ountbound: allow traffic to the instance security group on port `8080`
+
+* Instance:
+  - inbound: allow SSH from your public IP or a bastion (changing the default SSH port is a good idea)
+  - inbound: allow traffic from the ALB security group on port `8080`
+  - ountbound: allow all traffic to anywhere
+
+### Resources
+
+* An S3 bucket (block all public access)
+
+* A private EC2 instance running Ubuntu `20.04` (you can use the [Amazon EC2 AMI Locator](https://cloud-images.ubuntu.com/locator/ec2/) to find the latest)
+
+  Attach an IAM role to the instance with the following inline policy:
+
+  ```json
+  {
+      "Version": "2012-10-17",
+      "Statement": [
+          {
+              "Action": [
+                  "s3:ListAllMyBuckets"
+              ],
+              "Resource": [
+                  "*"
+              ],
+              "Effect": "Allow"
+          },
+          {
+              "Action": [
+                  "s3:ListBucket",
+                  "s3:GetBucketLocation",
+                  "s3:ListBucketMultipartUploads"
+              ],
+              "Resource": [
+                  "arn:aws:s3:::<s3_bucket_name>"
+              ],
+              "Effect": "Allow"
+          },
+          {
+              "Action": [
+                  "s3:GetObject",
+                  "s3:GetObjectVersion",
+                  "s3:ListMultipartUploadParts",
+                  "s3:PutObject",
+                  "s3:AbortMultipartUpload",
+                  "s3:DeleteObject",
+                  "s3:DeleteObjectVersion"
+              ],
+              "Resource": [
+                  "arn:aws:s3:::<s3_bucket_name>/*"
+              ],
+              "Effect": "Allow"
+          }
+      ]
+  }
+  ```
+
+* A public ALB:
+
+  - Create a target group with the instance registered (HTTP on port `8080` and path `/`)
+  - Configure HTTP (port 80) to redirect to HTTPS (port 443)
+  - HTTPS (port 443) using the latest security policy and an ACM certificate like `send.mydomain.com`
+
+* A Route53 public record, alias from `send.mydomain.com` to the ALB
+
+## Software requirements
+
+* Git
+* NodeJS `15.x` LTS
+* Local Redis server
+
+### Prerequisite packages
+
+```bash
+sudo apt update
+sudo apt install -y apt-transport-https ca-certificates curl software-properties-common
+```
+
+### Add repositories
+
+* NodeJS `15.x` LTS (checkout [package.json](../package.json)):
+
+```bash
+curl -fsSL https://deb.nodesource.com/gpgkey/nodesource.gpg.key | sudo apt-key add -
+echo 'deb [arch=amd64] https://deb.nodesource.com/node_15.x focal main' | sudo tee /etc/apt/sources.list.d/nodejs.list
+```
+
+* Git (latest)
+
+```bash
+sudo add-apt-repository ppa:git-core/ppa
+```
+
+* Redis (latest)
+
+```bash
+sudo add-apt-repository ppa:redislabs/redis
+```
+
+### Install required packages
+
+```bash
+sudo apt update
+sudo apt install git nodejs redis-server telnet
+```
+
+### Redis server
+
+#### Password (optional)
+
+Generate a strong password:
+
+```bash
+makepasswd --chars=100
+```
+
+Edit Redis configuration file `/etc/redis/redis.conf`:
+
+```bash
+requirepass <redis_password>
+```
+
+_Note: documentation on securing Redis https://redis.io/topics/security_
+
+#### Systemd
+
+Enable and (re)start the Redis server service:
+
+```bash
+sudo systemctl enable redis-server
+sudo systemctl restart redis-server
+sudo systemctl status redis-server
+```
+
+## Website directory
+
+Setup a directory for the data
+
+```
+sudo mkdir -pv /var/www/send
+sudo chown www-data:www-data /var/www/send
+sudo 750 /var/www/send
+```
+
+### NodeJS
+
+Update npm:
+
+```bash
+sudo npm install -g npm
+```
+
+Checkout current NodeJS and npm versions:
+
+```bash
+node --version
+npm --version
+```
+
+Clone repository, install JavaScript packages and compiles the assets:
+
+```bash
+sudo su -l www-data -s /bin/bash
+cd /var/www/send
+git clone https://gitlab.com/timvisee/send.git .
+npm install
+npm run build
+exit
+```
+
+Create the file `/var/www/send/.env` used by Systemd with your environment variables
+(checkout [config.js](../server/config.js) for more configuration environment variables):
+
+```
+BASE_URL='https://send.mydomain.com'
+NODE_ENV='production'
+PORT='8080'
+REDIS_PASSWORD='<redis_password>'
+S3_BUCKET='<s3_bucket_name>'
+```
+
+Lower files and folders permissions to user and group `www-data`:
+
+```
+sudo find /var/www/send -type d -exec chmod 750 {} \;
+sudo find /var/www/send -type f -exec chmod 640 {} \;
+sudo find -L /var/www/send/node_modules/.bin/ -exec chmod 750 {} \;
+```
+
+### Systemd
+
+Create the file `/etc/systemd/system/send.service` with `root` user and `644` mode:
+
+```
+[Unit]
+Description=Send
+After=network.target
+Requires=redis-server.service
+Documentation=https://gitlab.com/timvisee/send
+
+[Service]
+Type=simple
+ExecStart=/usr/bin/npm run prod
+EnvironmentFile=/var/www/send/.env
+WorkingDirectory=/var/www/send
+User=www-data
+Group=www-data
+Restart=on-failure
+
+[Install]
+WantedBy=multi-user.target
+```
+
+_Note: could be better tuner to secure the service by restricting system permissions,
+check with `systemd-analyze security send`_
+
+Enable and start the Send service, check logs:
+
+```
+sudo systemctl daemon-reload
+sudo systemctl enable send
+sudo systemctl start send
+sudo systemctl status send
+journalctl -fu send
+```

docs/deployment.md

@@ -1,69 +1,96 @@
 ## Requirements
+
 This document describes how to do a full deployment of Send on your own Linux server. You will need:
 
-* A working (and ideally somewhat recent) installation of NodeJS and NPM
-* GIT
-* An Apache webserver
+* A working (and ideally somewhat recent) installation of NodeJS and npm
+* Git
+* Apache webserver
 * Optionally telnet, to be able to quickly check your installation
 
-For Debian/Ubuntu systems this probably just means something like this:
+For example in Debian/Ubuntu systems:
 
-* apt install git apache2 nodejs npm telnet
+```bash
+sudo apt install git apache2 nodejs npm telnet
+```
 
 ## Building
+
 * We assume an already configured virtual-host on your webserver with an existing empty htdocs folder
 * First, remove that htdocs folder - we will replace it with Send's version now
-* git clone https://github.com/mozilla/send.git htdocs
+* git clone https://github.com/timvisee/send.git htdocs
 * Make now sure you are NOT root but rather the user your webserver is serving files under (e.g. "su www-data" or whoever the owner of your htdocs folder is)
 * npm install
 * npm run build
 
 ## Running
+
 To have a permanently running version of Send as a background process:
 
-* Create a file "run.sh" with:
-```
+* Create a file `run.sh` with:
+
+```bash
 #!/bin/bash
 nohup su www-data -c "npm run prod" 2>/dev/null &
 ```
-* chmod +x run.sh
-* ./run.sh
+
+* Execute the script:
+
+```bash
+chmod +x run.sh
+./run.sh
+```
 
 Now the Send backend should be running on port 1443. You can check with:
-* telnet localhost 1443
+
+```bash
+telnet localhost 1443
+```
 
 ## Reverse Proxy
+
 Of course, we don't want to expose the service on port 1443. Instead we want our normal webserver to forward all requests to Send ("Reverse proxy").
 
 # Apache webserver
 
-* a2enmod proxy
-* a2enmod proxy_http
-* a2enmod proxy_wstunnel
-* a2enmod rewrite
+* Enable Apache required modules:
 
-In your Apache virtual host configuration file, insert this:
+```bash
+sudo a2enmod headers
+sudo a2enmod proxy
+sudo a2enmod proxy_http
+sudo a2enmod proxy_wstunnel
+sudo a2enmod rewrite
+```
+
+* Edit your Apache virtual host configuration file, insert this:
 
 ```
-    # Enable rewrite engine
-    RewriteEngine on
+# Enable rewrite engine
+RewriteEngine on
 
-    # Make sure the original domain name is forwarded to Send
-    # Otherwise the generated URLs will be wrong
-    ProxyPreserveHost on
+# Make sure the original domain name is forwarded to Send
+# Otherwise the generated URLs will be wrong
+ProxyPreserveHost on
 
-    # Make sure the generated URL is https://
-    RequestHeader set X-Forwarded-Proto https
+# Make sure the generated URL is https://
+RequestHeader set X-Forwarded-Proto https
 
-    # If it's a normal file (e.g. PNG, CSS) just return it
-    RewriteCond %{REQUEST_FILENAME} -f
-    RewriteRule .* - [L]
+# If it's a normal file (e.g. PNG, CSS) just return it
+RewriteCond %{REQUEST_FILENAME} -f
+RewriteRule .* - [L]
 
-    # If it's a websocket connection, redirect it to a Send WS connection
-    RewriteCond %{HTTP:Upgrade} =websocket [NC]
-    RewriteRule /(.*) ws://127.0.0.1:1443/$1 [P,L]
+# If it's a websocket connection, redirect it to a Send WS connection
+RewriteCond %{HTTP:Upgrade} =websocket [NC]
+RewriteRule /(.*) ws://127.0.0.1:1443/$1 [P,L]
 
-    # Otherwise redirect it to a normal HTTP connection
-    RewriteRule ^/(.*)$ http://127.0.0.1:1443/$1 [P,QSA]
-    ProxyPassReverse  "/" "http://127.0.0.1:1443"
+# Otherwise redirect it to a normal HTTP connection
+RewriteRule ^/(.*)$ http://127.0.0.1:1443/$1 [P,QSA]
+ProxyPassReverse  "/" "http://127.0.0.1:1443"
+```
+
+* Test configuration and restart Apache:
+
+```bash
+sudo apache2ctl configtest
+sudo systemctl restart apache2
 ```

docs/docker.md

@@ -1,45 +1,158 @@
-## Setup
+## Docker Quickstart
 
-Use `registry.gitlab.com/timvisee/send:latest` from [`timvisee/send`'s registry](https://gitlab.com/timvisee/send/container_registry) for the latest Docker image.
+Use `registry.gitlab.com/timvisee/send:latest` from [`timvisee/send`'s Gitlab image registry](https://gitlab.com/timvisee/send/container_registry) for the latest Docker image.
 
 ```bash
 docker pull registry.gitlab.com/timvisee/send:latest
+
+# example quickstart (point REDIS_HOST to an already-running redis server)
+docker run -v $PWD/uploads:/uploads -p 1443:1443 \
+    -e 'DETECT_BASE_URL=true' \
+    -e 'REDIS_HOST=localhost' \
+    registry.gitlab.com/timvisee/send:latest
 ```
 
-Or run `docker build -t send:latest .` to create an image locally or `docker-compose up` to run a full testable stack. *We don't recommend using docker-compose for production.*
+Or clone this repo and run `docker build -t send:latest .` to build an image locally.
 
-## Environment variables:
+*Note: for Docker Compose, see: https://github.com/timvisee/send-docker-compose*
 
-| Name             | Description
+## Environment Variables
+
+All the available config options and their defaults can be found here: https://github.com/timvisee/send/blob/master/server/config.js
+
+Config options should be set as unquoted environment variables. Boolean options should be `true`/`false`, time/duration should be integers (seconds), and filesize values should be integers (bytes).
+
+Config options expecting array values (e.g. `EXPIRE_TIMES_SECONDS`, `DOWNLOAD_COUNTS`) should be in unquoted CSV format. UI dropdowns will default to the first value in the CSV, e.g. `DOWNLOAD_COUNTS=5,1,10,100` will show four dropdown options, with `5` selected by the default.
+
+#### Server Configuration
+
+| Name     | Description |
 |------------------|-------------|
 | `BASE_URL`       | The HTTPS URL where traffic will be served (e.g. `https://send.firefox.com`)
-| `PORT`           | Port the server will listen on (defaults to 1443).
-| `NODE_ENV`       | `"production"`
-| `FILE_DIR`     | Uploads directory for local storage
-| `S3_BUCKET`  | The S3 bucket name.
-| `S3_ENDPOINT`| Optional custom S3 endpoint host.
-| `S3_USE_PATH_STYLE_ENDPOINTS`| `true` or `false`
-| `AWS_ACCESS_KEY_ID` | S3 access key ID
-| `AWS_SECRET_ACCESS_KEY` | S3 secret access key ID
-| `MAX_FILE_SIZE` | Maximum upload file size in bytes (defaults to 2147483648)
-| `MAX_EXPIRE_SECONDS` | Maximum upload expiry time in seconds (defaults to 604800)
-| `REDIS_HOST` | Host name of the Redis server.
-| `SENTRY_CLIENT` | Sentry Client ID
-| `SENTRY_DSN` | Sentry DSN
+| `DETECT_BASE_URL` | Autodetect the base URL using browser if `BASE_URL` is unset (defaults to `false`)
+| `PORT`           | Port the server will listen on (defaults to `1443`)
+| `NODE_ENV`       | Run in `development` mode (unsafe) or `production` mode (the default)
+| `SEND_FOOTER_DMCA_URL` | A URL to a contact page for DMCA requests (empty / not shown by default)
+| `SENTRY_CLIENT`, `SENTRY_DSN`  | Sentry Client ID and DNS for error tracking (optional, disabled by default)
 
-## Example:
+*Note: more options can be found here: https://github.com/timvisee/send/blob/master/server/config.js*
+
+#### Upload and Download Limits
+
+Configure the limits for uploads and downloads. Long expiration times are risky on public servers as people may use you as free hosting for copyrighted content or malware (which is why Mozilla shut down their `send` service). It's advised to only expose your service on a LAN/intranet, password protect it with a proxy/gateway, or make sure to set `SEND_FOOTER_DMCA_URL` above so you can respond to takedown requests.
+
+| Name    | Description |
+|------------------|-------------|
+| `MAX_FILE_SIZE` | Maximum upload file size in bytes (defaults to `2147483648` aka 2GB)
+| `MAX_FILES_PER_ARCHIVE` | Maximum number of files per archive (defaults to `64`)
+| `MAX_EXPIRE_SECONDS` | Maximum upload expiry time in seconds (defaults to `604800` aka 7 days)
+| `MAX_DOWNLOADS` | Maximum number of downloads (defaults to `100`)
+| `DOWNLOAD_COUNTS` | Download limit options to show in UI dropdown, e.g. `10,1,2,5,10,15,25,50,100,1000`
+| `EXPIRE_TIMES_SECONDS` | Expire time options to show in UI dropdown, e.g. `3600,86400,604800,2592000,31536000`
+| `DEFAULT_DOWNLOADS` | Default download limit in UI (defaults to `1`)
+| `DEFAULT_EXPIRE_SECONDS` | Default expire time in UI (defaults to `86400`)
+
+*Note: more options can be found here: https://github.com/timvisee/send/blob/master/server/config.js*
+
+#### Storage Backend Options
+
+Pick how you want to store uploaded files and set these config options accordingly:
+
+- Local filesystem (the default): set `FILE_DIR` to the local path used inside the container for storage (or leave the default)
+- S3-compatible object store: set `S3_BUCKET`, `AWS_ACCESS_KEY_ID`, `AWS_SECRET_ACCESS_KEY` (and `S3_ENDPOINT` if using something other than AWS)
+- Google Cloud Storage: set `GCS_BUCKET` to the name of a GCS bucket (auth should be set up using [Application Default Credentials](https://cloud.google.com/docs/authentication/production#auth-cloud-implicit-nodejs))
+
+Redis is used as the metadata database for the backend and is required no matter which storage method you use.
+
+| Name  | Description |
+|------------------|-------------|
+| `REDIS_HOST`, `REDIS_PORT`, `REDIS_USER`, `REDIS_PASSWORD`, `REDIS_DB` | Host name, port, and pass of the Redis server (defaults to `localhost`, `6379`, and no password)
+| `FILE_DIR`       | Directory for storage inside the Docker container (defaults to `/uploads`)
+| `S3_BUCKET`  | The S3 bucket name to use (only set if using S3 for storage)
+| `S3_ENDPOINT` | An optional custom endpoint to use for S3 (defaults to AWS)
+| `S3_USE_PATH_STYLE_ENDPOINT`| Whether to force [path style URLs](https://docs.aws.amazon.com/AWSJavaScriptSDK/latest/AWS/Config.html#s3ForcePathStyle-property) for S3 objects (defaults to `false`)
+| `AWS_ACCESS_KEY_ID` | S3 access key ID (only set if using S3 for storage)
+| `AWS_SECRET_ACCESS_KEY` | S3 secret access key ID (only set if using S3 for storage)
+| `GCS_BUCKET` | Google Cloud Storage bucket (only set if using GCP for storage)
+
+*Note: more options can be found here: https://github.com/timvisee/send/blob/master/server/config.js*
+
+## Branding
+
+To change the look the colors aswell as some graphics can be changed via environment variables.  
+See the table below for the variables and their default values.
+
+| Name | Default | Description |
+|---|---|---|
+| UI_COLOR_PRIMARY | #0a84ff | The primary color |
+| UI_COLOR_ACCENT | #003eaa | The accent color (eg. for hover-effects) |
+| UI_CUSTOM_ASSETS_ANDROID_CHROME_192PX | | A custom icon for Android (192x192px) |
+| UI_CUSTOM_ASSETS_ANDROID_CHROME_512PX | | A custom icon for Android (512x512px) |
+| UI_CUSTOM_ASSETS_APPLE_TOUCH_ICON | | A custom icon for Apple |
+| UI_CUSTOM_ASSETS_FAVICON_16PX | | A custom favicon (16x16px) |
+| UI_CUSTOM_ASSETS_FAVICON_32PX | | A custom favicon (32x32px) |
+| UI_CUSTOM_ASSETS_ICON | | A custom icon (Logo on the top-left of the UI) |
+| UI_CUSTOM_ASSETS_SAFARI_PINNED_TAB | | A custom icon for Safari |
+| UI_CUSTOM_ASSETS_FACEBOOK | | A custom header image for Facebook |
+| UI_CUSTOM_ASSETS_TWITTER | | A custom header image for Twitter |
+| UI_CUSTOM_ASSETS_WORDMARK | | A custom wordmark (Text next to the logo) |
+| UI_CUSTOM_CSS | | Allows you to define a custom CSS file for custom styling |
+| CUSTOM_FOOTER_TEXT | | Allows you to define a custom footer |
+| CUSTOM_FOOTER_URL | | Allows you to define a custom URL in your footer |
+
+Side note: If you define a custom URL and a custom footer, only the footer text will display, but will be hyperlinked to the URL.
+
+## Examples
+
+**Run using an Amazon Elasticache for the Redis DB, Amazon S3 for the storage backend, and Sentry for error reporting.**
 
 ```bash
-$ docker run --net=host -e 'NODE_ENV=production' \
+$ docker run -p 1443:1443 \
   -e 'S3_BUCKET=testpilot-p2p-dev' \
   -e 'REDIS_HOST=dyf9s2r4vo3.bolxr4.0001.usw2.cache.amazonaws.com' \
   -e 'SENTRY_CLIENT=https://51e23d7263e348a7a3b90a5357c61cb2@sentry.prod.mozaws.net/168' \
   -e 'SENTRY_DSN=https://51e23d7263e348a7a3b90a5357c61cb2:65e23d7263e348a7a3b90a5357c61c44@sentry.prod.mozaws.net/168' \
-  -e 'BASE_URL=https://send.firefox.com' \
+  -e 'BASE_URL=https://send.example.com' \
   registry.gitlab.com/timvisee/send:latest
 ```
 
-## Docker compose
+*Note: make sure to replace the example values above with your real values before running.*
+
+
+**Run totally self-hosted using the current filesystem directry (`$PWD`) to store the Redis data and file uploads, with a `5GB` upload limit, 1 month expiry, and contact URL set.**
+
+```bash
+# create a network for the send backend and redis containers to talk to each other
+$ docker network create timviseesend
+
+# start the redis container
+$ docker run --net=timviseesend -v $PWD/redis:/data redis-server --appendonly yes
+
+# start the send backend container
+$ docker run --net=timviseesend -v $PWD/uploads:/uploads -p 1443:1443 \
+    -e 'BASE_URL=http://localhost:1443' \
+    -e 'MAX_FILE_SIZE=5368709120' \
+    -e 'MAX_EXPIRE_SECONDS=2592000' \
+    -e 'SEND_FOOTER_DMCA_URL=https://example.com/dmca-contact-info' \
+    registry.gitlab.com/timvisee/send:latest
+```
+Then open http://localhost:1443 to view the UI. (change the `localhost` to your IP or hostname above to serve the UI to others)
+
+To run with HTTPS, you will need to set up a reverse proxy with SSL termination in front of the backend. See Docker Compose below for an example setup.
+
+
+**Run with custom branding.**
+
+```bash
+$ docker run -p 1443:1443 \
+    -v $PWD/custom_assets:/app/dist/custom_assets \
+    -e 'UI_COLOR_PRIMARY=#f00' \
+    -e 'UI_COLOR_ACCENT=#a00' \
+    -e 'UI_CUSTOM_ASSETS_ICON=custom_assets/logo.svg' \
+    registry.gitlab.com/timvisee/send:latest
+```
+
+## Docker Compose
 
 For a Docker compose configuration example, see:
 

docs/faq.md

@@ -1,12 +1,12 @@
 ## How big of a file can I transfer with Send?
 
-There is a 2.5GB file size limit built in to Send(1GB for non-signed in users), however, in practice you may
-be unable to send files that large.  Send encrypts and decrypts the files in
-the browser which is great for security but will tax your system resources.  In
-particular you can expect to see your memory usage go up by at least the size
-of the file when the transfer is processing.  You can see [the results of some
-testing](https://github.com/mozilla/send/issues/170#issuecomment-314107793).
-For the most reliable operation on common computers, it’s probably best to stay
+There is a 2GB file size limit built in to Send, but this may be changed by the
+hoster. Send encrypts and decrypts the files in the browser which is great for
+security but will tax your system resources.  In particular you can expect to
+see your memory usage go up by at least the size of the file when the transfer
+is processing.  You can see [the results of some
+testing](https://github.com/mozilla/send/issues/170#issuecomment-314107793). For
+the most reliable operation on common computers, it’s probably best to stay
 under a few hundred megabytes.
 
 ## Why is my browser not supported?
@@ -23,10 +23,10 @@ Send uses JavaScript to:
 
 - Encrypt and decrypt files locally on the client instead of the server.
 - Render the user interface.
-- Manage translations on the website into [various different languages](https://github.com/mozilla/send#localization).
+- Manage translations on the website into [various different languages](https://github.com/timvisee/send#localization).
 - Collect data to help us improve Send in accordance with our [Terms & Privacy](https://send.firefox.com/legal).
 
-Since Send is an open source project, you can see all of the cool ways we use JavaScript by [examining our code](https://github.com/mozilla/send/).
+Since Send is an open source project, you can see all of the cool ways we use JavaScript by [examining our code](https://github.com/timvisee/send/).
 
 ## How long are files available for?
 

docs/localization.md

@@ -1,6 +1,6 @@
 # Localization
 
-Send is localized in over 50 languages. We use the [fluent](http://projectfluent.org/) library and store our translations in [FTL](http://projectfluent.org/fluent/guide/) files in `public/locales/`. `en-US` is our base language, and other languages are managed by [pontoon](https://pontoon.mozilla.org/projects/test-pilot-firefox-send/).
+Send is localized in over 50 languages. We use the [fluent](http://projectfluent.org/) library and store our translations in [FTL](http://projectfluent.org/fluent/guide/) files in `public/locales/`. `en-US` is our base language.
 
 ## Process
 

package.json

@@ -1,7 +1,7 @@
 {
   "name": "send",
   "description": "File Sharing Experiment",
-  "version": "3.4.5",
+  "version": "3.4.23",
   "author": "Mozilla (https://mozilla.org)",
   "contributors": [
     "Tim Visee <3a4fb3964f@sinenomine.email> (https://timvisee.com)"
@@ -30,16 +30,14 @@
     "test:report": "nyc report --reporter=html",
     "test-integration": "cross-env NODE_ENV=development wdio test/wdio.docker.conf.js",
     "circleci-test-integration": "echo 'webdriverio tests need to be updated to node 12'",
-    "start": "npm run clean && cross-env NODE_ENV=development L10N_DEV=true FXA_CLIENT_ID=fced6b5e3f4c66b9 BASE_URL=http://localhost:8080 webpack-dev-server --mode=development",
+    "start": "npm run clean && cross-env NODE_ENV=development L10N_DEV=true BASE_URL=http://localhost:8080 DETECT_BASE_URL=true webpack-dev-server --mode=development",
     "android": "cross-env ANDROID=1 npm start",
     "prod": "node server/bin/prod.js"
   },
   "husky": {
     "hooks": {
       "pre-commit": "lint-staged",
-      "pre-push": "npm test",
-      "post-merge": "npm install",
-      "post-checkout": "scripts/sync-npm-dependencies.sh"
+      "pre-push": "npm test"
     }
   },
   "lint-staged": {
@@ -61,29 +59,29 @@
     "cache": true
   },
   "engines": {
-    "node": "^15.5.1"
+    "node": "^16.13.0"
   },
   "devDependencies": {
-    "@babel/core": "^7.13.10",
-    "@babel/plugin-proposal-class-properties": "^7.13.0",
+    "@babel/core": "^7.17.9",
+    "@babel/plugin-proposal-class-properties": "^7.16.7",
     "@babel/plugin-syntax-dynamic-import": "^7.2.0",
-    "@babel/preset-env": "^7.13.10",
+    "@babel/preset-env": "^7.16.11",
     "@dannycoates/webcrypto-liner": "^0.1.37",
-    "@fullhuman/postcss-purgecss": "^1.3.0",
+    "@fullhuman/postcss-purgecss": "^4.1.3",
     "@mattiasbuelens/web-streams-polyfill": "0.2.1",
     "@sentry/browser": "^5.30.0",
     "asmcrypto.js": "^0.22.0",
-    "babel-loader": "^8.2.2",
+    "babel-loader": "^8.2.4",
     "babel-plugin-istanbul": "^5.2.0",
     "base64-js": "^1.5.1",
-    "content-disposition": "^0.5.3",
-    "copy-webpack-plugin": "^5.1.2",
-    "core-js": "^3.9.1",
+    "content-disposition": "^0.5.4",
+    "copy-webpack-plugin": "^6.4.0",
+    "core-js": "^3.21.1",
     "crc": "^3.8.0",
     "cross-env": "^6.0.3",
-    "css-loader": "^3.6.0",
+    "css-loader": "^5.2.7",
     "css-mqpacker": "^7.0.0",
-    "cssnano": "^4.1.10",
+    "cssnano": "^5.1.12",
     "eslint": "^6.6.0",
     "eslint-config-prettier": "^6.15.0",
     "eslint-plugin-mocha": "^6.2.1",
@@ -93,22 +91,23 @@
     "extract-loader": "^3.2.0",
     "extract-text-webpack-plugin": "^4.0.0-beta.0",
     "fast-text-encoding": "^1.0.3",
-    "file-loader": "^4.2.0",
-    "git-rev-sync": "^1.12.0",
+    "file-loader": "^6.2.0",
+    "git-rev-sync": "^3.0.2",
     "html-loader": "^0.5.5",
     "http_ece": "^1.1.0",
     "husky": "^3.0.9",
-    "intl-pluralrules": "^1.2.2",
+    "intl-pluralrules": "^1.3.1",
     "lint-staged": "^9.4.2",
-    "mocha": "^6.2.2",
+    "mocha": "^10.1.0",
     "morgan": "^1.9.1",
     "nanobus": "^4.5.0",
     "nanohtml": "^1.9.0",
     "nanotiming": "^7.3.1",
     "npm-run-all": "^4.1.5",
     "nyc": "^14.1.1",
-    "postcss-loader": "^3.0.0",
-    "postcss-preset-env": "^6.7.0",
+    "postcss": "^8.4.14",
+    "postcss-loader": "^4.2.0",
+    "postcss-preset-env": "^7.7.2",
     "prettier": "^1.19.1",
     "proxyquire": "^2.1.3",
     "puppeteer": "^2.0.0",
@@ -117,41 +116,42 @@
     "script-loader": "^0.7.2",
     "sinon": "^7.5.0",
     "string-hash": "^1.1.3",
-    "stylelint": "^13.12.0",
-    "stylelint-config-standard": "^19.0.0",
-    "stylelint-no-unsupported-browser-features": "^4.1.4",
-    "svgo": "^1.3.2",
-    "svgo-loader": "^2.2.2",
-    "tailwindcss": "^1.9.6",
-    "val-loader": "^1.1.1",
+    "stylelint": "^14.9.1",
+    "stylelint-config-standard": "^26.0.0",
+    "stylelint-no-unsupported-browser-features": "^5.0.3",
+    "svgo": "^2.8.0",
+    "svgo-loader": "^3.0.1",
+    "tailwindcss": "^2",
+    "val-loader": "^2.1.2",
     "webpack": "4.38.0",
     "webpack-cli": "^3.3.12",
     "webpack-dev-middleware": "^3.7.3",
-    "webpack-dev-server": "^3.11.2",
+    "webpack-dev-server": "^3.11.3",
     "webpack-manifest-plugin": "^2.2.0",
     "webpack-unassert-loader": "^1.2.0"
   },
   "dependencies": {
     "@dannycoates/express-ws": "^5.0.3",
-    "@fluent/bundle": "^0.13.0",
-    "@fluent/langneg": "^0.3.0",
-    "@google-cloud/storage": "^5.8.1",
-    "@sentry/node": "^5.30.0",
-    "aws-sdk": "^2.864.0",
-    "body-parser": "^1.19.0",
+    "@fluent/bundle": "^0.17.1",
+    "@fluent/langneg": "^0.6.2",
+    "@google-cloud/storage": "^6.2.3",
+    "@sentry/node": "^7.7.0",
+    "aws-sdk": "^2.1109.0",
+    "body-parser": "^1.20.0",
     "choo": "^7.0.0",
     "cldr-core": "^35.1.0",
     "configstore": "github:dannycoates/configstore#master",
-    "convict": "^5.2.0",
-    "express": "^4.17.1",
+    "convict": "^6.2.4",
+    "convict-format-with-validator": "^6.2.0",
+    "double-ended-queue": "^2.1.0-0",
+    "express": "^4.17.3",
     "helmet": "^3.23.3",
-    "mkdirp": "^0.5.1",
-    "mozlog": "^2.2.0",
-    "node-fetch": "^2.6.1",
-    "redis": "^2.8.0",
+    "mozlog": "^3.0.1",
+    "node-fetch": "^2.6.7",
+    "redis": "^3.1.1",
     "redis-mock": "^0.47.0",
-    "selenium-standalone": "^6.23.0",
-    "ua-parser-js": "^0.7.24"
+    "selenium-standalone": "^6.24.0",
+    "ua-parser-js": "^0.7.31"
   },
   "availableLanguages": [
     "en-US",

postcss.config.js

@@ -1,8 +1,6 @@
-class TailwindExtractor {
-  static extract(content) {
-    return content.match(/[A-Za-z0-9-_:/]+/g) || [];
-  }
-}
+const TailwindExtractor = content => {
+  return content.match(/[A-Za-z0-9-_:/]+/g) || [];
+};
 
 const options = {
   plugins: [

public/chapril.css

@@ -0,0 +1,76 @@
+#chapril-banner {
+  /* position: fixed; */
+
+  /* top: 0; */
+  height: 42px !important;
+  width: 100%;
+  margin: 0;
+  padding: 0;
+  background-color: #fafafa;
+  text-align: center;
+  border-bottom: 1px solid #bdbdbd;
+}
+
+#chapril-banner-zone {
+  width: 100%;
+
+  /* max-width: 950px; */
+  margin: 0 auto;
+  padding: 0;
+  text-align: left;
+
+  /* border: solid 1px red; */
+}
+
+#chapril-banner-zone > div {
+  float: left;
+  margin: 0 15px;
+}
+
+#chapril-banner-menu > ul {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  text-align: justify;
+  box-sizing: border-box;
+}
+
+#chapril-banner-menu > ul > li {
+  float: left;
+  margin: 0 10px 0 0;
+  padding: 0;
+  display: block;
+  box-sizing: border-box;
+  font-family: 'DejaVu Sans', Verdana, Geneva, sans-serif !important;
+  height: 42px;
+}
+
+#chapril-banner-menu > ul > li:hover {
+  background-color: #dadada;
+}
+
+#chapril-banner-menu > ul > li > a {
+  height: 42px;
+  color: #555000;
+  font-size: 12px;
+  text-decoration: none !important;
+  line-height: 42px;
+  border: none !important;
+  padding: 10px 15px;
+}
+
+#chapril-banner-aprillogo {
+  float: right !important;
+}
+
+#chapril-banner-aprillogo > a > img {
+  padding-top: 2px;
+}
+
+#chapril-banner-zone > div > a > img {
+  height: auto !important;
+}
+
+.send-promo {
+  display: none;
+}

public/contribute.json

@@ -2,22 +2,17 @@
   "name": "firefox-send",
   "description": "File Sharing Experiment",
   "repository": {
-    "url": "https://github.com/mozilla/send/",
+    "url": "https://github.com/send/send/",
     "license": "MPL-2.0"
   },
-    "participate": {
-      "home": "https://github.com/mozilla/send/blob/master/README.md",
-      "docs": "https://github.com/mozilla/send/blob/master/README.md"
-    },
-    "bugs": {
-      "list": "https://github.com/mozilla/send/issues",
-      "report": "https://github.com/mozilla/send/issues/new"
-    },
-    "urls": {
-      "prod": "https://send.firefox.com/",
-      "stage": "https://stage.send.nonprod.cloudops.mozgcp.net/",
-      "dev": "https://send2.dev.lcip.org/"
-    },
+  "participate": {
+    "home": "https://github.com/send/send/blob/master/README.md",
+    "docs": "https://github.com/send/send/blob/master/README.md"
+  },
+  "bugs": {
+    "list": "https://gitlab.com/send/send/issues",
+    "report": "https://gitlab.com/send/send/issues/new"
+  },
   "keywords": [
     "JavaScript",
     "jQuery",

public/locales/fr/send.ftl

@@ -48,7 +48,7 @@ passwordSetError = Ce mot de passe n’a pas pu être défini
 -firefox = Firefox
 -mozilla = Mozilla
 introTitle = Partage de fichiers simple et privé
-introDescription = { -send-brand } vous permet de partager des fichiers chiffrés de bout en bout ainsi qu’un lien qui expire automatiquement. Ainsi, vous pouvez garder ce que vous partagez en privé et vous assurer que vos contenus ne restent pas en ligne pour toujours.
+introDescription = DropChaprilOrg vous permet de partager des fichiers chiffrés de bout en bout ainsi qu’un lien qui expire automatiquement. Ainsi, vous pouvez garder ce que vous partagez en privé et vous assurer que vos contenus ne restent pas en ligne pour toujours.
 notifyUploadEncryptDone = Votre fichier est chiffré et prêt à l’envoi
 # downloadCount is from the downloadCount string and timespan is a timespanMinutes string. ex. 'Expires after 2 downloads or 25 minutes'
 archiveExpiryInfo = Expire après { $downloadCount } ou { $timespan }

public/locales/nl/send.ftl

@@ -28,7 +28,7 @@ notSupportedOutdatedDetail = Helaas ondersteunt deze versie van Firefox de webte
 updateFirefox = Firefox bijwerken
 deletePopupCancel = Annuleren
 deleteButtonHover = Verwijderen
-footerText = Niet aangesloten aan Mozilla of Firefox.
+footerText = Niet gelieerd aan Mozilla of Firefox.
 footerLinkDonate = Doneren
 footerLinkCli = CLI
 footerLinkDmca = DMCA
@@ -52,7 +52,7 @@ passwordSetError = Dit wachtwoord kon niet worden ingesteld
 -send-short-brand = Send
 -firefox = Firefox
 -mozilla = Mozilla
-introTitle = Eenvoudig, privé bestanden delen
+introTitle = Bestanden delen, eenvoudig en privé 
 introDescription = Met { -send-brand } kunt u bestanden delen met end-to-endversleuteling en een koppeling die automatisch verloopt. Hierdoor kunt u privé houden wat u wilt delen en er zeker van zijn dat uw zaken niet voor altijd online blijven.
 notifyUploadEncryptDone = Uw bestand is versleuteld en klaar voor verzending
 # downloadCount is from the downloadCount string and timespan is a timespanMinutes string. ex. 'Expires after 2 downloads or 25 minutes'

public/robots.txt

@@ -0,0 +1,2 @@
+User-agent: *
+Disallow: /

server/clientConstants.js

@@ -2,11 +2,6 @@ const config = require('./config');
 
 module.exports = {
   LIMITS: {
-    ANON: {
-      MAX_FILE_SIZE: config.anon_max_file_size,
-      MAX_DOWNLOADS: config.anon_max_downloads,
-      MAX_EXPIRE_SECONDS: config.anon_max_expire_seconds
-    },
     MAX_FILE_SIZE: config.max_file_size,
     MAX_DOWNLOADS: config.max_downloads,
     MAX_EXPIRE_SECONDS: config.max_expire_seconds,
@@ -17,9 +12,17 @@ module.exports = {
     FOOTER_DONATE_URL: config.footer_donate_url,
     FOOTER_CLI_URL: config.footer_cli_url,
     FOOTER_DMCA_URL: config.footer_dmca_url,
-    FOOTER_SOURCE_URL: config.footer_source_url
+    FOOTER_SOURCE_URL: config.footer_source_url,
+    CUSTOM_FOOTER_TEXT: config.custom_footer_text,
+    CUSTOM_FOOTER_URL: config.custom_footer_url,
+    COLORS: {
+      PRIMARY: config.ui_color_primary,
+      ACCENT: config.ui_color_accent
+    },
+    CUSTOM_ASSETS: config.ui_custom_assets
   },
   DEFAULTS: {
+    DOWNLOADS: config.default_downloads,
     DOWNLOAD_COUNTS: config.download_counts,
     EXPIRE_TIMES_SECONDS: config.expire_times_seconds,
     EXPIRE_SECONDS: config.default_expire_seconds

server/config.js

@@ -1,8 +1,31 @@
 const convict = require('convict');
+const convict_format_with_validator = require('convict-format-with-validator');
 const { tmpdir } = require('os');
 const path = require('path');
 const { randomBytes } = require('crypto');
 
+convict.addFormats(convict_format_with_validator);
+
+convict.addFormat({
+  name: 'positive-int-array',
+  coerce: ints => {
+    // can take: int[] | string[] | string (csv), returns -> int[]
+    const ints_arr = Array.isArray(ints) ? ints : ints.trim().split(',');
+    return ints_arr.map(int =>
+      typeof int === 'number'
+        ? int
+        : parseInt(int.replace(/['"]+/g, '').trim(), 10)
+    );
+  },
+  validate: ints => {
+    // takes: int[], errors if any NaNs, negatives, or floats present
+    for (const int of ints) {
+      if (typeof int !== 'number' || isNaN(int) || int < 0 || int % 1 > 0)
+        throw new Error('must be a comma-separated list of positive integers');
+    }
+  }
+});
+
 const conf = convict({
   s3_bucket: {
     format: String,
@@ -25,8 +48,8 @@ const conf = convict({
     env: 'GCS_BUCKET'
   },
   expire_times_seconds: {
-    format: Array,
-    default: [300, 3600, 86400, 604800],
+    format: 'positive-int-array',
+    default: [300, 3600, 86400, 172800, 432000, 604800],
     env: 'EXPIRE_TIMES_SECONDS'
   },
   default_expire_seconds: {
@@ -36,29 +59,24 @@ const conf = convict({
   },
   max_expire_seconds: {
     format: Number,
-    default: 86400 * 7,
+    default: 432000,
     env: 'MAX_EXPIRE_SECONDS'
   },
-  anon_max_expire_seconds: {
-    format: Number,
-    default: 86400,
-    env: 'ANON_MAX_EXPIRE_SECONDS'
-  },
   download_counts: {
-    format: Array,
+    format: 'positive-int-array',
     default: [1, 2, 3, 4, 5, 20, 50, 100],
     env: 'DOWNLOAD_COUNTS'
   },
+  default_downloads: {
+    format: Number,
+    default: 1,
+    env: 'DEFAULT_DOWNLOADS'
+  },
   max_downloads: {
     format: Number,
     default: 100,
     env: 'MAX_DOWNLOADS'
   },
-  anon_max_downloads: {
-    format: Number,
-    default: 5,
-    env: 'ANON_MAX_DOWNLOADS'
-  },
   max_files_per_archive: {
     format: Number,
     default: 64,
@@ -74,6 +92,26 @@ const conf = convict({
     default: 'localhost',
     env: 'REDIS_HOST'
   },
+  redis_port: {
+    format: Number,
+    default: 6379,
+    env: 'REDIS_PORT'
+  },
+  redis_user: {
+    format: String,
+    default: '',
+    env: 'REDIS_USER'
+  },
+  redis_password: {
+    format: String,
+    default: '',
+    env: 'REDIS_PASSWORD'
+  },
+  redis_db: {
+    format: String,
+    default: '',
+    env: 'REDIS_DB'
+  },
   redis_event_expire: {
     format: Boolean,
     default: false,
@@ -120,11 +158,6 @@ const conf = convict({
     default: 1024 * 1024 * 1024 * 2.5,
     env: 'MAX_FILE_SIZE'
   },
-  anon_max_file_size: {
-    format: Number,
-    default: 1024 * 1024 * 1024,
-    env: 'ANON_MAX_FILE_SIZE'
-  },
   l10n_dev: {
     format: Boolean,
     default: false,
@@ -132,9 +165,24 @@ const conf = convict({
   },
   base_url: {
     format: 'url',
-    default: 'https://send.firefox.com',
+    default: 'https://send.example.com',
     env: 'BASE_URL'
   },
+  custom_title: {
+    format: String,
+    default: 'Send',
+    env: 'CUSTOM_TITLE'
+  },
+  custom_description: {
+    format: String,
+    default: 'Encrypt and send files with a link that automatically expires to ensure your important documents don’t stay online forever.',
+    env: 'CUSTOM_DESCRIPTION'
+  },
+  detect_base_url: {
+    format: Boolean,
+    default: false,
+    env: 'DETECT_BASE_URL'
+  },
   file_dir: {
     format: 'String',
     default: `${tmpdir()}${path.sep}send-${randomBytes(4).toString('hex')}`,
@@ -204,6 +252,88 @@ const conf = convict({
     format: String,
     default: 'https://github.com/timvisee/send',
     env: 'SEND_FOOTER_SOURCE_URL'
+  },
+  custom_footer_text: {
+    format: String,
+    default: '',
+    env: 'CUSTOM_FOOTER_TEXT'
+  },
+  custom_footer_url: {
+    format: String,
+    default: '',
+    env: 'CUSTOM_FOOTER_URL'
+  },
+  ui_color_primary: {
+    format: String,
+    default: '#0a84ff',
+    env: 'UI_COLOR_PRIMARY'
+  },
+  ui_color_accent: {
+    format: String,
+    default: '#003eaa',
+    env: 'UI_COLOR_ACCENT'
+  },
+  custom_locale: {
+    format: String,
+    default: '',
+    env: 'CUSTOM_LOCALE'
+  },
+  ui_custom_assets: {
+    android_chrome_192px: {
+      format: String,
+      default: '',
+      env: 'UI_CUSTOM_ASSETS_ANDROID_CHROME_192PX'
+    },
+    android_chrome_512px: {
+      format: String,
+      default: '',
+      env: 'UI_CUSTOM_ASSETS_ANDROID_CHROME_512PX'
+    },
+    apple_touch_icon: {
+      format: String,
+      default: '',
+      env: 'UI_CUSTOM_ASSETS_APPLE_TOUCH_ICON'
+    },
+    favicon_16px: {
+      format: String,
+      default: '',
+      env: 'UI_CUSTOM_ASSETS_FAVICON_16PX'
+    },
+    favicon_32px: {
+      format: String,
+      default: '',
+      env: 'UI_CUSTOM_ASSETS_FAVICON_32PX'
+    },
+    icon: {
+      format: String,
+      default: '',
+      env: 'UI_CUSTOM_ASSETS_ICON'
+    },
+    safari_pinned_tab: {
+      format: String,
+      default: '',
+      env: 'UI_CUSTOM_ASSETS_SAFARI_PINNED_TAB'
+    },
+    facebook: {
+      format: String,
+      default: '',
+      env: 'UI_CUSTOM_ASSETS_FACEBOOK'
+    },
+    twitter: {
+      format: String,
+      default: '',
+      env: 'UI_CUSTOM_ASSETS_TWITTER'
+    },
+    wordmark: {
+      format: String,
+      default: '',
+      env: 'UI_CUSTOM_ASSETS_WORDMARK'
+    },
+    custom_css: {
+      format: String,
+      default: '',
+      env: 'UI_CUSTOM_CSS'
+    }
   }
 });
 
@@ -211,4 +341,17 @@ const conf = convict({
 conf.validate({ allowed: 'strict' });
 
 const props = conf.getProperties();
-module.exports = props;
+
+const deriveBaseUrl = req => {
+  if (!props.detect_base_url) {
+    return props.base_url;
+  }
+
+  const protocol = req.secure ? 'https://' : 'http://';
+  return `${protocol}${req.headers.host}`;
+};
+
+module.exports = {
+  ...props,
+  deriveBaseUrl
+};

server/layout.js

@@ -3,6 +3,10 @@ const assets = require('../common/assets');
 const initScript = require('./initScript');
 
 module.exports = function(state, body = '') {
+  const custom_css = state.ui.assets.custom_css !== ''
+    ? html`<link rel="stylesheet" type="text/css" href="${state.ui.assets.custom_css}" />`
+    : ''
+
   return html`
     <!DOCTYPE html>
     <html lang="${state.locale}">
@@ -21,45 +25,51 @@ module.exports = function(state, body = '') {
         <meta property="og:description" content="${state.description}" />
         <meta name="twitter:description" content="${state.description}" />
         <meta name="twitter:card" content="summary" />
-        <meta
-          property="og:image"
-          content="${state.baseUrl}/${assets.get('send-fb.jpg')}"
-        />
-        <meta
-          name="twitter:image"
-          content="${state.baseUrl}/${assets.get('send-twitter.jpg')}"
-        />
+        <meta property="og:image" content="${state.ui.assets.facebook}" />
+        <meta name="twitter:image" content="${state.ui.assets.twitter}" />
         <meta property="og:url" content="${state.baseUrl}" />
         <meta name="theme-color" content="#220033" />
         <meta name="msapplication-TileColor" content="#220033" />
 
         <link rel="manifest" href="/app.webmanifest" />
         <link rel="stylesheet" type="text/css" href="/inter.css" />
+        <style nonce=${state.cspNonce}>
+          :root {
+            --color-primary: ${state.ui.colors.primary};
+            --color-primary-accent: ${state.ui.colors.accent};
+          }
+        </style>
+        <link
+          rel="stylesheet"
+          type="text/css"
+          href="/Chapril-banner/v2/chapril-banner.css"
+        />
         <link
           rel="stylesheet"
           type="text/css"
           href="${assets.get('app.css')}"
         />
+        ${custom_css}
         <link
           rel="apple-touch-icon"
           sizes="180x180"
-          href="${assets.get('apple-touch-icon.png')}"
+          href="${state.ui.assets.apple_touch_icon}"
         />
         <link
           rel="icon"
           type="image/png"
           sizes="32x32"
-          href="${assets.get('favicon-32x32.png')}"
+          href="${state.ui.assets.favicon_32px}"
         />
         <link
           rel="icon"
           type="image/png"
           sizes="16x16"
-          href="${assets.get('favicon-16x16.png')}"
+          href="${state.ui.assets.favicon_16px}"
         />
         <link
           rel="mask-icon"
-          href="${assets.get('safari-pinned-tab.svg')}"
+          href="${state.ui.assets.safari_pinned_tab}"
           color="#838383"
         />
         <script defer src="${assets.get('app.js')}"></script>

server/locale.js

@@ -1,13 +1,15 @@
 const fs = require('fs');
 const path = require('path');
-const { FluentBundle } = require('@fluent/bundle');
+const { FluentBundle, FluentResource } = require('@fluent/bundle');
 const localesPath = path.resolve(__dirname, '../public/locales');
 const locales = fs.readdirSync(localesPath);
 
 function makeBundle(locale) {
   const bundle = new FluentBundle(locale, { useIsolating: false });
-  bundle.addMessages(
-    fs.readFileSync(path.resolve(localesPath, locale, 'send.ftl'), 'utf8')
+  bundle.addResource(
+    new FluentResource(
+      fs.readFileSync(path.resolve(localesPath, locale, 'send.ftl'), 'utf8')
+    )
   );
   return [locale, bundle];
 }
@@ -19,8 +21,11 @@ module.exports = function getTranslator(locale) {
   const bundle = bundles.get(locale) || defaultBundle;
   return function(id, data) {
     if (bundle.hasMessage(id)) {
-      return bundle.format(bundle.getMessage(id), data);
+      return bundle.formatPattern(bundle.getMessage(id).value, data);
     }
-    return defaultBundle.format(defaultBundle.getMessage(id), data);
+    return defaultBundle.formatPattern(
+      defaultBundle.getMessage(id).value,
+      data
+    );
   };
 };

server/middleware/auth.js

@@ -1,6 +1,7 @@
 const assert = require('assert');
 const crypto = require('crypto');
 const storage = require('../storage');
+const config = require('../config');
 const fxa = require('../fxa');
 
 module.exports = {
@@ -70,10 +71,11 @@ module.exports = {
       const token = authHeader.split(' ')[1];
       req.user = await fxa.verify(token);
     }
-    if (req.user) {
-      next();
-    } else {
+
+    if (config.fxa_required && !req.user) {
       res.sendStatus(401);
+    } else {
+      next();
     }
   }
 };

server/routes/index.js

@@ -36,15 +36,26 @@ module.exports = function(app) {
         defaultSrc: ["'self'"],
         connectSrc: [
           "'self'",
-          config.base_url.replace(/^https:\/\//, 'wss://')
+          function(req) {
+            const baseUrl = config.deriveBaseUrl(req);
+            const r = baseUrl.replace(/^http(s?):\/\//, 'ws$1://');
+            console.log([baseUrl, r]);
+            return r;
+          }
         ],
-        imgSrc: ["'self'"],
+        imgSrc: ["'self'", 'data:'],
         scriptSrc: [
           "'self'",
           function(req) {
             return `'nonce-${req.cspNonce}'`;
           }
         ],
+        styleSrc: [
+          "'self'",
+          function(req) {
+            return `'nonce-${req.cspNonce}'`;
+          }
+        ],
         formAction: ["'none'"],
         frameAncestors: ["'none'"],
         objectSrc: ["'none'"],
@@ -52,10 +63,6 @@ module.exports = function(app) {
       }
     };
 
-    csp.directives.connectSrc.push(
-      config.base_url.replace(/^https:\/\//, 'wss://')
-    );
-
     app.use(helmet.contentSecurityPolicy(csp));
   }
 

server/routes/params.js

@@ -2,7 +2,7 @@ const config = require('../config');
 const storage = require('../storage');
 
 module.exports = function(req, res) {
-  const max = req.user ? config.max_downloads : config.anon_max_downloads;
+  const max = config.max_downloads;
   const dlimit = req.body.dlimit;
   if (!dlimit || dlimit > max) {
     return res.sendStatus(400);

server/routes/upload.js

@@ -28,8 +28,7 @@ module.exports = async function(req, res) {
     //this hasn't been updated to expiration time setting yet
     //if you want to fallback to this code add this
     await storage.set(newId, fileStream, meta, config.default_expire_seconds);
-    const protocol = config.env === 'production' ? 'https' : req.protocol;
-    const url = `${protocol}://${req.get('host')}/download/${newId}/`;
+    const url = `${config.deriveBaseUrl(req)}/download/${newId}/`;
     res.set('WWW-Authenticate', `send-v1 ${meta.nonce}`);
     res.json({
       url,

server/routes/webmanifest.js

@@ -1,18 +1,20 @@
-const assets = require('../../common/assets');
+const state = require('../state');
+
+module.exports = async function(req, res) {
+  const appState = await state(req);
 
-module.exports = function(req, res) {
   const manifest = {
     name: 'Send',
     short_name: 'Send',
     lang: req.language,
     icons: [
       {
-        src: assets.get('android-chrome-192x192.png'),
+        src: appState.ui.assets.android_chrome_192px,
         type: 'image/png',
         sizes: '192x192'
       },
       {
-        src: assets.get('android-chrome-512x512.png'),
+        src: appState.ui.assets.android_chrome_512px,
         type: 'image/png',
         sizes: '512x512'
       }

server/routes/ws.js

@@ -26,19 +26,13 @@ module.exports = function(ws, req) {
 
       const fileInfo = JSON.parse(message);
       const timeLimit = fileInfo.timeLimit || config.default_expire_seconds;
-      const dlimit = fileInfo.dlimit || 1;
+      const dlimit = fileInfo.dlimit || config.default_downloads;
       const metadata = fileInfo.fileMetadata;
       const auth = fileInfo.authorization;
       const user = await fxa.verify(fileInfo.bearer);
-      const maxFileSize = user
-        ? config.max_file_size
-        : config.anon_max_file_size;
-      const maxExpireSeconds = user
-        ? config.max_expire_seconds
-        : config.anon_max_expire_seconds;
-      const maxDownloads = user
-        ? config.max_downloads
-        : config.anon_max_downloads;
+      const maxFileSize = config.max_file_size;
+      const maxExpireSeconds = config.max_expire_seconds;
+      const maxDownloads = config.max_downloads;
 
       if (config.fxa_required && !user) {
         ws.send(
@@ -71,8 +65,7 @@ module.exports = function(ws, req) {
         nonce: crypto.randomBytes(16).toString('base64')
       };
 
-      const protocol = config.env === 'production' ? 'https' : req.protocol;
-      const url = `${protocol}://${req.get('host')}/download/${newId}/`;
+      const url = `${config.deriveBaseUrl(req)}/download/${newId}/`;
 
       ws.send(
         JSON.stringify({

server/state.js

@@ -3,9 +3,18 @@ const layout = require('./layout');
 const assets = require('../common/assets');
 const getTranslator = require('./locale');
 const { getFxaConfig } = require('./fxa');
+const fs = require('fs');
+const path = require('path');
 
 module.exports = async function(req) {
-  const locale = req.language || 'en-US';
+  const locale = (() => {
+    if (config.custom_locale != '' && fs.existsSync(path.join(__dirname,'../public/locales',config.custom_locale))) {
+        return config.custom_locale;
+    }
+    else {
+      return req.language || 'en-US';
+    }
+  })();
   let authConfig = null;
   let robots = 'none';
   if (req.route && req.route.path === '/') {
@@ -23,6 +32,24 @@ module.exports = async function(req) {
   if (config.survey_url) {
     prefs.surveyUrl = config.survey_url;
   }
+  const baseUrl = config.deriveBaseUrl(req);
+  const uiAssets = {
+    android_chrome_192px: assets.get('android-chrome-192x192.png'),
+    android_chrome_512px: assets.get('android-chrome-512x512.png'),
+    apple_touch_icon: assets.get('apple-touch-icon.png'),
+    favicon_16px: assets.get('favicon-16x16.png'),
+    favicon_32px: assets.get('favicon-32x32.png'),
+    icon: assets.get('icon.svg'),
+    safari_pinned_tab: assets.get('safari-pinned-tab.svg'),
+    facebook: baseUrl + '/' + assets.get('send-fb.jpg'),
+    twitter: baseUrl + '/' + assets.get('send-twitter.jpg'),
+    wordmark: assets.get('wordmark.svg') + '#logo',
+    custom_css: ''
+  };
+  Object.keys(uiAssets).forEach(index => {
+    if (config.ui_custom_assets[index] !== '')
+      uiAssets[index] = config.ui_custom_assets[index];
+  });
   return {
     archive: {
       numFiles: 0
@@ -30,11 +57,17 @@ module.exports = async function(req) {
     locale,
     capabilities: { account: false },
     translate: getTranslator(locale),
-    title: 'Send',
+    title: 'DropChaprilOrg',
     description:
       'Encrypt and send files with a link that automatically expires to ensure your important documents don’t stay online forever.',
-    baseUrl: config.base_url,
-    ui: {},
+    baseUrl,
+    ui: {
+      colors: {
+        primary: config.ui_color_primary,
+        accent: config.ui_color_accent
+      },
+      assets: uiAssets
+    },
     storage: {
       files: []
     },

server/storage/fs.js

@@ -1,7 +1,6 @@
 const fs = require('fs');
 const path = require('path');
 const promisify = require('util').promisify;
-const mkdirp = require('mkdirp');
 
 const stat = promisify(fs.stat);
 
@@ -9,7 +8,9 @@ class FSStorage {
   constructor(config, log) {
     this.log = log;
     this.dir = config.file_dir;
-    mkdirp.sync(this.dir);
+    fs.mkdirSync(this.dir, {
+      recursive: true
+    });
   }
 
   async length(id) {

server/storage/redis.js

@@ -8,8 +8,10 @@ module.exports = function(config) {
 
   //eslint-disable-next-line security/detect-non-literal-require
   const redis = require(redis_lib);
-  const client = redis.createClient({
+
+  var client_config = {
     host: config.redis_host,
+    port: config.redis_port,
     retry_strategy: options => {
       if (options.total_retry_time > config.redis_retry_time) {
         client.emit('error', 'Retry time exhausted');
@@ -18,7 +20,14 @@ module.exports = function(config) {
 
       return config.redis_retry_delay;
     }
-  });
+  };
+  if (config.redis_user != null && config.redis_user.length > 0)
+    client_config.user = config.redis_user;
+  if (config.redis_password != null && config.redis_password.length > 0)
+    client_config.password = config.redis_password;
+  if (config.redis_db != null && config.redis_db.length > 0)
+    client_config.db = config.redis_db;
+  const client = redis.createClient(client_config);
 
   client.ttlAsync = promisify(client.ttl);
   client.hgetallAsync = promisify(client.hgetall);

tailwind.config.js

@@ -1,5 +1,7 @@
 const colors = {
   transparent: 'transparent',
+  primary: 'var(--color-primary)',
+  primary_accent: 'var(--color-primary-accent)',
 
   black: '#000000',
   'grey-90': '#0c0c0d',
@@ -16,93 +18,12 @@ const colors = {
   'grey-10': '#f9f9fa',
   white: '#ffffff',
 
-  'red-90': '#3e0200',
-  'red-80': '#5a0002',
-  'red-70': '#a4000f',
-  'red-60': '#d70022',
-  red: '#d70022',
-  'red-50': '#ff0039',
-  // unspec
-  'red-40': '#ff3363',
-  'red-30': '#ff99aa',
-
-  'orange-90': '#3e1300',
-  'orange-80': '#712b00',
-  'orange-70': '#a44900',
-  'orange-60': '#d76e00',
-  'orange-50': '#ff9400',
-  // unspec
-  'orange-40': '#ffb24c',
-  'orange-30': '#ffd399',
-
-  'yellow-90': '#3e2800',
-  'yellow-80': '#715100',
-  'yellow-70': '#a47f00',
-  'yellow-60': '#d7b600',
-  yellow: '#d7b600',
-  'yellow-50': '#ffe900',
-  'yellow-40': '#ffed4c',
-  'yellow-30': '#fff599',
-
-  // 'green-darkest': '#003706',
-  // 'green-darker': '#006504',
-  // 'green-dark': '#058b00',
-  // green: '#12bc00',
-  // 'green-light': '#51d88a',
-  // 'green-lighter': '#a2f5bf',
-  // 'green-lightest': '#e3fcec',
-
-  // 'teal-darkest': '#0d3331',
-  // 'teal-darker': '#20504f',
-  // 'teal-dark': '#38a89d',
-  // teal: '#4dc0b5',
-  // 'teal-light': '#64d5ca',
-  // 'teal-lighter': '#a0f0ed',
-  // 'teal-lightest': '#e8fffe',
-
-  'blue-90': '#000f40',
-  'blue-80': '#002275',
-  'blue-70': '#003eaa',
-  'blue-60': '#0060df',
-  'blue-50': '#0a84ff',
-  blue: '#0a84ff',
-  'blue-40': '#45a1ff',
-  'blue-30': '#99ccff',
-  'blue-20': '#cce6ff',
-
-  'ink-90': '#0f1126',
-  'ink-80': '#202340',
-  'ink-70': '#363959',
-
-  // 'indigo-darkest': '#191e38',
-  // 'indigo-darker': '#2f365f',
-  // 'indigo-dark': '#5661b3',
-  // indigo: '#6574cd',
-  // 'indigo-light': '#7886d7',
-  // 'indigo-lighter': '#b2b7ff',
-  // 'indigo-lightest': '#e6e8ff',
-
-  'purple-90': '#25003e',
-  'purple-80': '#440071',
-  'purple-70': '#6200a4',
-  'purple-60': '#8000d7',
-  'purple-50': '#9400ff',
-  'purple-40': '#ad3bff',
-  'purple-30': '#c069ff',
-  'purple-20': '#d7a3ff',
-
-  // 'pink-darkest': '#451225',
-  // 'pink-darker': '#6f213f',
-  // 'pink-dark': '#eb5286',
-  // pink: '#f66d9b',
-  // 'pink-light': '#fa7ea8',
-  // 'pink-lighter': '#ffbbca',
-  // 'pink-lightest': '#ffebef',
   cloud: 'rgba(255, 255, 255, 0.8)',
   violet: 'hsl(258, 57%, 35%)'
 };
 
 module.exports = {
+  purge: false,
   theme: {
     colors: colors,
     screens: {

test/frontend/runner.js

@@ -1,7 +1,6 @@
 /* eslint-disable no-undef, no-process-exit */
 const fs = require('fs');
 const path = require('path');
-const mkdirp = require('mkdirp');
 const puppeteer = require('puppeteer');
 const webpack = require('webpack');
 const config = require('../../webpack.config');
@@ -44,7 +43,9 @@ const server = app.listen(async function() {
     const coverage = await page.evaluate(() => __coverage__);
     if (coverage) {
       const dir = path.resolve(__dirname, '../../.nyc_output');
-      mkdirp.sync(dir);
+      fs.mkdirSync(dir, {
+        recursive: true
+      });
       fs.writeFileSync(
         path.resolve(dir, 'frontend.json'),
         JSON.stringify(coverage)

test/wdio.common.conf.js

@@ -1,9 +1,11 @@
 const path = require('path');
-const mkdirp = require('mkdirp');
+const fs = require('fs');
 const rimraf = require('rimraf');
 const dir = path.join(__dirname, 'integration', 'downloads');
 
-mkdirp.sync(dir);
+fs.mkdirSync(dir, {
+  recursive: true
+});
 rimraf.sync(`${dir}${path.sep}*`);
 
 exports.config = {

webpack.config.js

@@ -42,7 +42,8 @@ const serviceWorker = {
         test: /\.(png|jpg)$/,
         loader: 'file-loader',
         options: {
-          name: '[name].[contenthash:8].[ext]'
+          name: '[name].[contenthash:8].[ext]',
+          esModule: false
         }
       },
       {
@@ -51,16 +52,26 @@ const serviceWorker = {
           {
             loader: 'file-loader',
             options: {
-              name: '[name].[contenthash:8].[ext]'
+              name: '[name].[contenthash:8].[ext]',
+              esModule: false
             }
           },
           {
             loader: 'svgo-loader',
             options: {
               plugins: [
-                { removeViewBox: false }, // true causes stretched images
-                { convertStyleToAttrs: true }, // for CSP, no unsafe-eval
-                { removeTitle: true } // for smallness
+                {
+                  name: 'removeViewBox',
+                  active: false // true causes stretched images
+                },
+                {
+                  name: 'convertStyleToAttrs',
+                  active: true // for CSP, no unsafe-eval
+                },
+                {
+                  name: 'removeTitle',
+                  active: true // for smallness
+                }
               ]
             }
           }
@@ -127,7 +138,8 @@ const web = {
         test: /\.(png|jpg)$/,
         loader: 'file-loader',
         options: {
-          name: '[name].[contenthash:8].[ext]'
+          name: '[name].[contenthash:8].[ext]',
+          esModule: false
         }
       },
       {
@@ -136,17 +148,30 @@ const web = {
           {
             loader: 'file-loader',
             options: {
-              name: '[name].[contenthash:8].[ext]'
+              name: '[name].[contenthash:8].[ext]',
+              esModule: false
             }
           },
           {
             loader: 'svgo-loader',
             options: {
               plugins: [
-                { cleanupIDs: false },
-                { removeViewBox: false }, // true causes stretched images
-                { convertStyleToAttrs: true }, // for CSP, no unsafe-eval
-                { removeTitle: true } // for smallness
+                {
+                  name: 'cleanupIDs',
+                  active: false
+                },
+                {
+                  name: 'removeViewBox',
+                  active: false // true causes stretched images
+                },
+                {
+                  name: 'convertStyleToAttrs',
+                  active: true // for CSP, no unsafe-eval
+                },
+                {
+                  name: 'removeTitle',
+                  active: true // for smallness
+                }
               ]
             }
           }
@@ -160,7 +185,8 @@ const web = {
             {
               loader: 'css-loader',
               options: {
-                importLoaders: 1
+                importLoaders: 1,
+                esModule: false
               }
             },
             'postcss-loader'
@@ -184,12 +210,14 @@ const web = {
     ]
   },
   plugins: [
-    new CopyPlugin([
-      {
-        context: 'public',
-        from: '*.*'
-      }
-    ]),
+    new CopyPlugin({
+      patterns: [
+        {
+          context: 'public',
+          from: '*.*'
+        }
+      ]
+    }),
     new webpack.EnvironmentPlugin(['NODE_ENV']),
     new webpack.IgnorePlugin(/\.\.\/dist/), // used in common/*.js
     new ExtractTextPlugin({