updated password input UI

app/base.css

@@ -34,22 +34,15 @@ body {
   position: relative;
 }
 
-pre,
 input,
 select,
 textarea,
 button {
+  outline: none;
   font-family: inherit;
   margin: 0;
 }
 
-pre {
-  font-family: monospace;
-  font-size: 18px;
-  font-weight: 600;
-  display: inline-block;
-}
-
 a {
   text-decoration: none;
 }
@@ -69,7 +62,7 @@ a {
 .btn {
   font-size: 15px;
   font-weight: 500;
-  color: white;
+  color: var(--primaryControlFGColor);
   cursor: pointer;
   text-align: center;
   background: var(--primaryControlBGColor);
@@ -113,7 +106,7 @@ a {
   background: var(--primaryControlBGColor);
   border-radius: 0 6px 6px 0;
   border: 1px solid var(--primaryControlBGColor);
-  color: white;
+  color: var(--primaryControlFGColor);
   cursor: pointer;
 
   /* Force flat button look */
@@ -177,7 +170,7 @@ a {
 }
 
 .progressSection__text {
-  color: rgba(0, 0, 0, 0.5);
+  color: var(--lightTextColor);
   letter-spacing: -0.4px;
   margin-top: 24px;
   margin-bottom: 74px;

app/fileManager.js

@@ -130,9 +130,13 @@ export default function(state, emitter) {
 
   emitter.on('password', async ({ password, file }) => {
     try {
+      state.settingPassword = true;
+      render();
       await file.setPassword(password);
       state.storage.writeFile(file);
       metrics.addedPassword({ size: file.size });
+      await delay(1000);
+      state.settingPassword = false;
     } catch (err) {
       console.error(err);
     }

app/main.css

@@ -5,7 +5,6 @@
 @import './templates/passwordInput/passwordInput.css';
 @import './templates/downloadPassword/downloadPassword.css';
 @import './templates/setPasswordSection/setPasswordSection.css';
-@import './templates/changePasswordSection/changePasswordSection.css';
 @import './templates/footer/footer.css';
 @import './templates/fxPromo/fxPromo.css';
 @import './templates/selectbox/selectbox.css';

app/pages/blank.js

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

app/pages/completed/index.js

@@ -3,7 +3,7 @@ const progress = require('../../templates/progress');
 const { fadeOut } = require('../../utils');
 
 module.exports = function(state, emit) {
-  const div = html`
+  return html`
     <div class="page effect--fadeIn">
       <div class="title">
         ${state.translate('downloadFinish')}
@@ -23,6 +23,4 @@ module.exports = function(state, emit) {
     await fadeOut('.page');
     emit('pushState', '/');
   }
-
-  return div;
 };

app/pages/download/index.js

@@ -13,7 +13,7 @@ module.exports = function(state, emit) {
     ${state.translate('deletePopupCancel')}
   </button>`;
 
-  const div = html`
+  return html`
     <div class="page effect--fadeIn">
       <div class="title">
         ${state.translate('downloadingPageProgress', {
@@ -39,5 +39,4 @@ module.exports = function(state, emit) {
     btn.remove();
     emit('cancel');
   }
-  return div;
 };

app/pages/legal.js

@@ -1,17 +1,8 @@
 const html = require('choo/html');
 const raw = require('choo/html/raw');
 
-function replaceLinks(str, urls) {
-  let i = -1;
-  const s = str.replace(/<a>([^<]+)<\/a>/g, (m, v) => {
-    i++;
-    return `<a href="${urls[i]}">${v}</a>`;
-  });
-  return `<div class="description">${s}</div>`;
-}
-
 module.exports = function(state) {
-  const div = html`
+  return html`
     <div id="legal">
       <div class="title">${state.translate('legalHeader')}</div>
         ${raw(
@@ -29,5 +20,13 @@ module.exports = function(state) {
         )}
     </div>
   `;
-  return div;
 };
+
+function replaceLinks(str, urls) {
+  let i = 0;
+  const s = str.replace(
+    /<a>([^<]+)<\/a>/g,
+    (m, v) => `<a href="${urls[i++]}">${v}</a>`
+  );
+  return `<div class="description">${s}</div>`;
+}

app/pages/notFound/index.js

@@ -2,7 +2,7 @@ const html = require('choo/html');
 const assets = require('../../../common/assets');
 
 module.exports = function(state) {
-  const div = html`
+  return html`
     <div class="notFoundPage">
       <div class="title">${state.translate('expiredPageHeader')}</div>
       <div class="notFoundPage__img">
@@ -15,5 +15,4 @@ module.exports = function(state) {
         ${state.translate('sendYourFilesLink')}
       </a>
     </div>`;
-  return div;
 };

app/pages/preview/index.js

@@ -20,7 +20,7 @@ module.exports = function(state, pageAction) {
   if (!pageAction) {
     return info;
   }
-  const div = html`
+  return html`
     <div class="page">
       <div class="title">
         <span>${title}</span>
@@ -38,5 +38,4 @@ module.exports = function(state, pageAction) {
       ${info}
     </div>
   `;
-  return div;
 };

app/pages/share/index.js

@@ -3,41 +3,18 @@ const html = require('choo/html');
 const raw = require('choo/html/raw');
 const assets = require('../../../common/assets');
 const notFound = require('../notFound');
-const changePasswordSection = require('../../templates/changePasswordSection');
 const setPasswordSection = require('../../templates/setPasswordSection');
 const selectbox = require('../../templates/selectbox');
 const deletePopup = require('../../templates/popup');
 const { allowedCopy, delay, fadeOut } = require('../../utils');
 
-function expireInfo(file, translate, emit) {
-  const hours = Math.floor(EXPIRE_SECONDS / 60 / 60);
-  const el = html`<div>${raw(
-    translate('expireInfo', {
-      downloadCount: '<select></select>',
-      timespan: translate('timespanHours', { num: hours })
-    })
-  )}</div>`;
-  const select = el.querySelector('select');
-  const options = [1, 2, 3, 4, 5, 20].filter(i => i > (file.dtotal || 0));
-  const t = num => translate('downloadCount', { num });
-  const changed = value => emit('changeLimit', { file, value });
-  select.parentNode.replaceChild(
-    selectbox(file.dlimit || 1, options, t, changed),
-    select
-  );
-  return el;
-}
-
 module.exports = function(state, emit) {
   const file = state.storage.getFileById(state.params.id);
   if (!file) {
     return notFound(state, emit);
   }
 
-  const passwordSection = file.hasPassword
-    ? changePasswordSection(state, emit)
-    : setPasswordSection(state, emit);
-  const div = html`
+  return html`
   <div id="shareWrapper" class="effect--fadeIn">
     <div class="title">${expireInfo(file, state.translate, emit)}</div>
     <div class="sharePage">
@@ -56,7 +33,7 @@ module.exports = function(state, emit) {
           title="${state.translate('copyUrlFormButton')}"
           onclick=${copyLink}>${state.translate('copyUrlFormButton')}</button>
       </div>
-      ${passwordSection}
+      ${setPasswordSection(state, emit)}
       <button
         class="btn btn--delete"
         title="${state.translate('deleteFileButton')}"
@@ -94,6 +71,7 @@ module.exports = function(state, emit) {
       emit('copy', { url: file.url, location: 'success-screen' });
       const input = document.getElementById('fileUrl');
       input.disabled = true;
+      input.classList.add('input--copied');
       const copyBtn = document.getElementById('copyBtn');
       copyBtn.disabled = true;
       copyBtn.classList.add('inputBtn--copied');
@@ -103,6 +81,7 @@ module.exports = function(state, emit) {
       );
       await delay(2000);
       input.disabled = false;
+      input.classList.remove('input--copied');
       copyBtn.disabled = false;
       copyBtn.classList.remove('inputBtn--copied');
       copyBtn.textContent = state.translate('copyUrlFormButton');
@@ -114,5 +93,23 @@ module.exports = function(state, emit) {
     await fadeOut('#shareWrapper');
     emit('pushState', '/');
   }
-  return div;
 };
+
+function expireInfo(file, translate, emit) {
+  const hours = Math.floor(EXPIRE_SECONDS / 60 / 60);
+  const el = html`<div>${raw(
+    translate('expireInfo', {
+      downloadCount: '<select></select>',
+      timespan: translate('timespanHours', { num: hours })
+    })
+  )}</div>`;
+  const select = el.querySelector('select');
+  const options = [1, 2, 3, 4, 5, 20].filter(i => i > (file.dtotal || 0));
+  const t = num => translate('downloadCount', { num });
+  const changed = value => emit('changeLimit', { file, value });
+  select.parentNode.replaceChild(
+    selectbox(file.dlimit || 1, options, t, changed),
+    select
+  );
+  return el;
+}

app/pages/share/share.css

@@ -40,7 +40,6 @@
   line-height: 23px;
   font-weight: 300;
   padding-left: 10px;
-  padding-right: 10px;
 }
 
 .copySection__url:disabled {
@@ -53,6 +52,10 @@
   padding-bottom: 4px;
 }
 
+.input--copied {
+  border-color: var(--successControlBGColor);
+}
+
 .inputBtn--copied,
 .inputBtn--copied:hover {
   background: var(--successControlBGColor);

app/pages/unsupported/index.js

@@ -1,24 +1,6 @@
 const html = require('choo/html');
 const assets = require('../../../common/assets');
 
-function outdatedStrings(state) {
-  return {
-    title: state.translate('notSupportedHeader'),
-    description: state.translate('notSupportedOutdatedDetail'),
-    button: state.translate('updateFirefox'),
-    explainer: state.translate('uploadPageExplainer')
-  };
-}
-
-function unsupportedStrings(state) {
-  return {
-    title: state.translate('notSupportedHeader'),
-    description: state.translate('notSupportedDetail'),
-    button: state.translate('downloadFirefoxButtonSub'),
-    explainer: state.translate('uploadPageExplainer')
-  };
-}
-
 module.exports = function(state) {
   let strings = {};
   let why = '';
@@ -46,7 +28,7 @@ module.exports = function(state) {
         ${strings.button}
       </div>`;
   }
-  const div = html`
+  return html`
     <div class="unsupportedPage">
       <div class="title">${strings.title}</div>
       <div class="description">
@@ -64,5 +46,22 @@ module.exports = function(state) {
         ${strings.explainer}
       </div>
     </div>`;
-  return div;
 };
+
+function outdatedStrings(state) {
+  return {
+    title: state.translate('notSupportedHeader'),
+    description: state.translate('notSupportedOutdatedDetail'),
+    button: state.translate('updateFirefox'),
+    explainer: state.translate('uploadPageExplainer')
+  };
+}
+
+function unsupportedStrings(state) {
+  return {
+    title: state.translate('notSupportedHeader'),
+    description: state.translate('notSupportedDetail'),
+    button: state.translate('downloadFirefoxButtonSub'),
+    explainer: state.translate('uploadPageExplainer')
+  };
+}

app/pages/unsupported/unsupported.css

@@ -9,7 +9,7 @@
   font-size: 13px;
   line-height: 23px;
   text-align: center;
-  color: #7d7d7d;
+  color: var(--lightTextColor);
   margin: 0 auto 23px;
 }
 
@@ -23,7 +23,7 @@
   box-shadow: 0 5px 3px rgb(234, 234, 234);
   font-family: 'Fira Sans', 'segoe ui', sans-serif;
   font-weight: 500;
-  color: #fff;
+  color: var(--primaryControlFGColor);
   font-size: 26px;
   display: flex;
   justify-content: center;

app/pages/upload/index.js

@@ -5,7 +5,7 @@ const { bytes } = require('../../utils');
 module.exports = function(state, emit) {
   const transfer = state.transfer;
 
-  const div = html`
+  return html`
   <div class="page effect--fadeIn">
     <div class="title">
       ${state.translate('uploadingPageProgress', {
@@ -36,5 +36,4 @@ module.exports = function(state, emit) {
     btn.textContent = state.translate('uploadCancelNotification');
     emit('cancel');
   }
-  return div;
 };

app/pages/welcome/index.js

@@ -7,7 +7,7 @@ const { bytes, fadeOut } = require('../../utils');
 module.exports = function(state, emit) {
   // the page flickers if both the server and browser set 'effect--fadeIn'
   const fade = state.layout ? '' : 'effect--fadeIn';
-  const div = html`
+  return html`
   <div id="page-one" class="${fade}">
     <div class="title">${state.translate('uploadPageHeader')}</div>
     <div class="description">
@@ -82,5 +82,4 @@ module.exports = function(state, emit) {
     await fadeOut('#page-one');
     emit('upload', { file, type: 'click' });
   }
-  return div;
 };