stubbed copy dialog

app/fileManager.js

@@ -6,6 +6,7 @@ import * as metrics from './metrics';
 import Archive from './archive';
 import { bytes } from './utils';
 import okDialog from './ui/okDialog';
+import copyDialog from './ui/copyDialog';
 
 export default function(state, emitter) {
   let lastRender = 0;
@@ -156,6 +157,7 @@ export default function(state, emitter) {
       if (password) {
         emitter.emit('password', { password, file: ownedFile });
       }
+      state.modal = copyDialog(ownedFile.url);
       state.animation = () => {
         const x = document.querySelector('.foo');
         const y = x.previousElementSibling;

app/ui/copyDialog.js

@@ -0,0 +1,29 @@
+const html = require('choo/html');
+const assets = require('../../common/assets');
+const { copyToClipboard } = require('../utils');
+
+module.exports = function(url) {
+  return function(state, emit, close) {
+    return html`
+    <div class="flex flex-col p-4">
+    <input
+      type="image"
+      class="self-end text-white"
+      alt="Close"
+      src="${assets.get('close-16.svg')}"
+      onclick=${close}/>
+      <h1 class="font-normal mt-2">${state.translate('notifyUploadDone')}</h1>
+      <input type="text" class="w-full my-4 border rounded leading-loose" value=${url} readonly="true"/>
+      <button class="border rounded bg-blue text-white leading-loose w-full" onclick=${copy}>
+        ${state.translate('copyUrlFormButton')}
+      </button>
+    </div>`;
+
+    function copy(event) {
+      event.stopPropagation();
+      copyToClipboard(url);
+      event.target.textContent = state.translate('copiedUrl');
+      setTimeout(close, 1000);
+    }
+  };
+};

package.json

@@ -100,6 +100,7 @@
     "npm-run-all": "^4.1.3",
     "nyc": "^13.0.1",
     "postcss-loader": "^3.0.0",
+    "postcss-preset-env": "^6.2.0",
     "prettier": "^1.14.3",
     "proxyquire": "^2.1.0",
     "puppeteer": "^1.9.0",

postcss.config.js

@@ -7,6 +7,14 @@ class TailwindExtractor {
 const options = {
   plugins: [
     require('tailwindcss')('./tailwind.js'),
+    require('postcss-preset-env')
+  ]
+};
+
+if (process.env.NODE_ENV === 'development') {
+  options.map = { inline: true };
+} else {
+  options.plugins.push(
     require('@fullhuman/postcss-purgecss')({
       content: ['./app/*.js', './app/ui/*.js'],
       extractors: [
@@ -15,15 +23,13 @@ const options = {
           extensions: ['js']
         }
       ]
-    }),
+    })
+  );
+  options.plugins.push(
     require('cssnano')({
       preset: 'default'
     })
-  ]
+  );
-};
-
-if (process.env.NODE_ENV === 'development') {
-  options.map = { inline: true };
 }
 
 module.exports = options;

webpack.config.js

@@ -200,7 +200,8 @@ const web = {
   ],
   devtool: 'source-map',
   devServer: {
-    before: require('./server/bin/dev'),
+    before:
+      process.env.NODE_ENV === 'development' && require('./server/bin/dev'),
     compress: true,
     hot: false,
     host: '0.0.0.0',
@@ -217,7 +218,7 @@ const web = {
 module.exports = (env, argv) => {
   const mode = argv.mode || 'production';
   console.error(`mode: ${mode}`);
-  web.mode = serviceWorker.mode = mode;
+  process.env.NODE_ENV = web.mode = serviceWorker.mode = mode;
   if (mode === 'development') {
     // istanbul instruments the source for code coverage
     webJsOptions.plugins.push('istanbul');