Begin implementing a reporting mechanism

mozilla · Jul 24, 2020 · 9891d1f · 9891d1f
1 parent ccbcb69
commit 9891d1f
Show file tree

Hide file tree

Showing 37 changed files with 762 additions and 183 deletions.
diff --git a/app/api.js b/app/api.js
@@ -127,10 +127,10 @@ export async function metadata(id, keychain) {
     return {
       size: meta.size,
       ttl: data.ttl,
-      iv: meta.iv,
       name: meta.name,
       type: meta.type,
-      manifest: meta.manifest
+      manifest: meta.manifest,
+      flagged: data.flagged
     };
   }
   throw new Error(result.response.status);
@@ -438,3 +438,16 @@ export async function getConstants() {
 
   throw new Error(response.status);
 }
+
+export async function reportLink(id, key, reason) {
+  const response = await fetch(
+    getApiUrl(`/api/report/${id}`),
+    post({ key, reason })
+  );
+
+  if (response.ok) {
+    return;
+  }
+
+  throw new Error(response.status);
+}
diff --git a/app/controller.js b/app/controller.js
@@ -1,5 +1,6 @@
 import FileSender from './fileSender';
 import FileReceiver from './fileReceiver';
+import { reportLink } from './api';
 import { copyToClipboard, delay, openLinksInNewTab, percent } from './utils';
 import * as metrics from './metrics';
 import { bytes, locale } from './utils';
@@ -306,6 +307,26 @@ export default function(state, emitter) {
     render();
   });
 
+  emitter.on('report', async ({ reason }) => {
+    try {
+      const file = state.fileInfo;
+      if (!file) {
+        // TODO
+        emitter.emit('pushState', '/error');
+        return render();
+      }
+      await reportLink(file.id, file.secretKey, reason);
+      render();
+    } catch (err) {
+      console.error(err);
+      if (err.message === '404') {
+        state.fileInfo = { reported: true };
+        return render();
+      }
+      emitter.emit('pushState', '/error');
+    }
+  });
+
   setInterval(() => {
     // poll for updates of the upload list
     if (!state.modal && state.route === '/') {

diff --git a/app/fileReceiver.js b/app/fileReceiver.js
@@ -47,9 +47,9 @@ export default class FileReceiver extends Nanobus {
     const meta = await metadata(this.fileInfo.id, this.keychain);
     this.fileInfo.name = meta.name;
     this.fileInfo.type = meta.type;
-    this.fileInfo.iv = meta.iv;
     this.fileInfo.size = +meta.size;
     this.fileInfo.manifest = meta.manifest;
+    this.fileInfo.flagged = meta.flagged;
     this.state = 'ready';
   }
 

diff --git a/app/main.css b/app/main.css
@@ -55,6 +55,12 @@ body {
   @apply bg-blue-70;
 }
 
+.btn:disabled {
+  @apply bg-grey-transparent;
+
+  cursor: not-allowed;
+}
+
 .checkbox {
   @apply leading-normal;
   @apply select-none;
@@ -138,21 +144,6 @@ footer li:hover {
   text-decoration: underline;
 }
 
-.feedback-link {
-  background-color: #000;
-  background-image: url('../assets/feedback.svg');
-  background-position: 0.125rem 0.25rem;
-  background-repeat: no-repeat;
-  background-size: 1.125rem;
-  color: #fff;
-  display: block;
-  font-size: 0.75rem;
-  line-height: 0.75rem;
-  padding: 0.375rem 0.375rem 0.375rem 1.25rem;
-  text-indent: 0.125rem;
-  white-space: nowrap;
-}
-
 .link-blue {
   @apply text-blue-60;
 }
@@ -175,6 +166,10 @@ footer li:hover {
   height: unset;
 }
 
+.dl-bg {
+  filter: grayscale(1) opacity(0.15);
+}
+
 .main {
   display: flex;
   position: relative;
@@ -322,6 +317,10 @@ select {
     @apply bg-blue-50;
   }
 
+  .btn:disabled {
+    @apply bg-grey-80;
+  }
+
   .link-blue {
     @apply text-blue-40;
   }
@@ -392,48 +391,3 @@ select {
 .signin:hover:active {
   transform: scale(0.9375);
 }
-
-/* begin signin button color experiment */
-
-.white-blue {
-  @apply border-blue-60;
-  @apply border-2;
-  @apply text-blue-60;
-}
-
-.white-blue:hover,
-.white-blue:focus {
-  @apply bg-blue-60;
-  @apply text-white;
-}
-
-.blue {
-  @apply bg-blue-60;
-  @apply text-white;
-}
-
-.white-violet {
-  @apply border-violet;
-  @apply border-2;
-  @apply text-violet;
-}
-
-.white-violet:hover,
-.white-violet:focus {
-  @apply bg-violet;
-  @apply text-white;
-
-  background-image: var(--violet-gradient);
-}
-
-.violet {
-  @apply bg-violet;
-  @apply text-white;
-}
-
-.violet:hover,
-.violet:focus {
-  background-image: var(--violet-gradient);
-}
-
-/* end signin button color experiment */
diff --git a/app/routes.js b/app/routes.js
@@ -14,6 +14,7 @@ module.exports = function(app = choo({ hash: true })) {
     emit('authenticate', state.query.code, state.query.state);
   });
   app.route('/login', body(require('./ui/home')));
+  app.route('/report', body(require('./ui/report')));
   app.route('*', body(require('./ui/notFound')));
   return app;
 };
diff --git a/app/ui/archiveTile.js b/app/ui/archiveTile.js
@@ -482,6 +482,11 @@ module.exports.empty = function(state, emit) {
       >
         ${state.translate('addFilesButton')}
       </label>
+      <p
+        class="font-normal text-sm text-grey-50 dark:text-grey-40 my-6 mx-12 text-center max-w-sm leading-loose"
+      >
+        ${state.translate('trustWarningMessage')}
+      </p>
       ${upsell}
     </send-upload-area>
   `;
@@ -517,13 +522,27 @@ module.exports.preview = function(state, emit) {
       `;
   return html`
     <send-archive
-      class="flex flex-col max-h-full bg-white p-4 w-full md:w-128 dark:bg-grey-90"
+      class="flex flex-col max-h-full bg-white w-full dark:bg-grey-90"
     >
-      <div class="border rounded py-3 px-6 dark:border-grey-70">
+      <div class="border rounded py-3 px-4 dark:border-grey-70">
         ${archiveInfo(archive)} ${details}
       </div>
+      <div class="checkbox inline-block mt-6 mx-auto">
+        <input
+          id="trust-download"
+          type="checkbox"
+          autocomplete="off"
+          onchange="${toggleDownloadEnabled}"
+        />
+        <label for="trust-download">
+          ${state.translate('downloadTrustCheckbox', {
+            count: archive.manifest.files.length
+          })}
+        </label>
+      </div>
       <button
         id="download-btn"
+        disabled
         class="btn rounded-lg mt-4 w-full flex-shrink-0 focus:outline"
         title="${state.translate('downloadButtonLabel')}"
         onclick=${download}
@@ -533,6 +552,13 @@ module.exports.preview = function(state, emit) {
     </send-archive>
   `;
 
+  function toggleDownloadEnabled(event) {
+    event.stopPropagation();
+    const checked = event.target.checked;
+    const btn = document.getElementById('download-btn');
+    btn.disabled = !checked;
+  }
+
   function download(event) {
     event.preventDefault();
     event.target.disabled = true;

diff --git a/app/ui/copyDialog.js b/app/ui/copyDialog.js
@@ -10,11 +10,9 @@ module.exports = function(name, url) {
         <h1 class="text-3xl font-bold my-4">
           ${state.translate('notifyUploadEncryptDone')}
         </h1>
-        <p
-          class="font-normal leading-normal text-grey-80 word-break-all dark:text-grey-40"
-        >
+        <p class="font-normal leading-normal text-grey-80 dark:text-grey-40">
           ${state.translate('copyLinkDescription')} <br />
-          ${name}
+          <span class="word-break-all">${name}</span>
         </p>
         <input
           type="text"

diff --git a/app/ui/download.js b/app/ui/download.js
@@ -1,5 +1,6 @@
 /* global downloadMetadata */
 const html = require('choo/html');
+const assets = require('../../common/assets');
 const archiveTile = require('./archiveTile');
 const modal = require('./modal');
 const noStreams = require('./noStreams');
@@ -31,22 +32,53 @@ function downloading(state, emit) {
 }
 
 function preview(state, emit) {
+  if (state.fileInfo.flagged) {
+    return html`
+      <div
+        class="flex flex-col w-full max-w-md h-full mx-auto items-center justify-center"
+      >
+        <h1 class="text-xl font-bold">${state.translate('downloadFlagged')}</h1>
+      </div>
+    `;
+  }
   if (!state.capabilities.streamDownload && state.fileInfo.size > BIG_SIZE) {
     return noStreams(state, emit);
   }
   return html`
     <div
-      class="flex flex-col w-full max-w-md h-full mx-auto items-center justify-center"
+      class="w-full overflow-hidden md:flex md:flex-row items-stretch md:flex-1"
     >
-      <h1 class="text-3xl font-bold mb-4">
-        ${state.translate('downloadTitle')}
-      </h1>
-      <p
-        class="w-full text-grey-80 text-center leading-normal dark:text-grey-40"
+      <div
+        class="px-2 w-full md:px-0 flex-half md:flex md:flex-col mt-12 md:pr-8 pb-4"
+      >
+        <h1 class="text-3xl font-bold mb-4 text-center md:text-left">
+          ${state.translate('downloadTitle')}
+        </h1>
+        <p
+          class="text-grey-80 leading-normal dark:text-grey-40 mb-4 text-center md:text-left"
+        >
+          ${state.translate('downloadDescription')}
+        </p>
+        <p
+          class="text-grey-80 leading-normal dark:text-grey-40 font-semibold text-center md:mb-8 md:text-left"
+        >
+          ${state.translate('downloadConfirmDescription')}
+        </p>
+        <img
+          class="hidden md:block dl-bg w-full"
+          src="${assets.get('intro.svg')}"
+        />
+      </div>
+      <div
+        class="w-full flex-half flex-half md:flex md:flex-col md:justify-center"
       >
-        ${state.translate('downloadDescription')}
-      </p>
-      ${archiveTile.preview(state, emit)}
+        ${archiveTile.preview(state, emit)}
+        <a href="/report" class="link-blue mt-4 text-center block"
+          >${state.translate('reportFile', {
+            count: state.fileInfo.manifest.files.length
+          })}</a
+        >
+      </div>
     </div>
   `;
 }
@@ -83,7 +115,7 @@ module.exports = function(state, emit) {
     <main class="main">
       ${state.modal && modal(state, emit)}
       <section
-        class="relative h-full w-full p-6 md:p-8 md:rounded-xl md:shadow-big"
+        class="relative h-full w-full p-6 md:p-8 md:rounded-xl md:shadow-big md:flex md:flex-col"
       >
         ${content}
       </section>

diff --git a/app/ui/downloadCompleted.js b/app/ui/downloadCompleted.js
@@ -10,7 +10,7 @@ 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-12 h-48" />
+      <img src="${assets.get('completed.svg')}" class="my-8 h-48" />
       <p class="text-grey-80 leading-normal dark:text-grey-40">
         ${state.translate('trySendDescription')}
       </p>
@@ -19,6 +19,9 @@ module.exports = function(state) {
           >${state.translate('sendYourFilesLink')}</a
         >
       </p>
+      <p class="">
+        <a href="/report" class="link-blue">${state.translate('reportFile')}</a>
+      </p>
     </div>
   `;
 };