implemented amplitude metrics (#1141)

app/ui/account.js

@@ -1,6 +1,5 @@
 const html = require('choo/html');
 const Component = require('choo/component');
-const signupDialog = require('./signupDialog');
 
 class Account extends Component {
   constructor(name, state, emit) {
@@ -27,8 +26,7 @@ class Account extends Component {
 
   login(event) {
     event.preventDefault();
-    this.state.modal = signupDialog();
-    this.emit('render');
+    this.emit('signup-cta', 'button');
   }
 
   logout(event) {

app/ui/archiveTile.js

@@ -34,7 +34,7 @@ function password(state) {
         <input
           id="add-password"
           type="checkbox"
-          ${state.password ? 'checked' : ''}
+          ${state.archive.password ? 'checked' : ''}
           autocomplete="off"
           onchange="${togglePasswordInput}"
         />
@@ -44,7 +44,7 @@ function password(state) {
       </div>
       <input
         id="password-input"
-        class="${state.password
+        class="${state.archive.password
           ? ''
           : 'invisible'} border rounded-sm focus:border-blue leading-normal my-2 py-1 px-2 h-8"
         autocomplete="off"
@@ -53,7 +53,7 @@ function password(state) {
         oninput="${inputChanged}"
         onfocus="${focused}"
         placeholder="${state.translate('unlockInputPlaceholder')}"
-        value="${state.password || ''}"
+        value="${state.archive.password || ''}"
       />
       <label
         id="password-msg"
@@ -74,7 +74,7 @@ function password(state) {
       input.classList.add('invisible');
       input.value = '';
       document.getElementById('password-msg').textContent = '';
-      state.password = null;
+      state.archive.password = null;
     }
   }
 
@@ -91,7 +91,7 @@ function password(state) {
     } else {
       pwdmsg.textContent = '';
     }
-    state.password = password;
+    state.archive.password = password;
   }
 
   function focused(event) {
@@ -219,7 +219,7 @@ module.exports = function(state, emit, archive) {
 
   function del(event) {
     event.stopPropagation();
-    emit('delete', { file: archive, location: 'success-screen' });
+    emit('delete', archive);
   }
 
   function share(event) {
@@ -279,11 +279,7 @@ module.exports.wip = function(state, emit) {
     event.preventDefault();
     event.target.disabled = true;
     if (!state.uploading) {
-      emit('upload', {
-        type: 'click',
-        dlimit: state.downloadCount || 1,
-        password: state.password
-      });
+      emit('upload');
     }
   }
 
@@ -333,9 +329,9 @@ module.exports.uploading = function(state, emit) {
     </p>
     <div class="text-xs text-grey-dark w-full mt-2 mb-2">
       ${expiryInfo(state.translate, {
-        dlimit: state.downloadCount || 1,
+        dlimit: state.archive.dlimit,
         dtotal: 0,
-        expiresAt: Date.now() + 500 + state.timeLimit * 1000
+        expiresAt: Date.now() + 500 + state.archive.timeLimit * 1000
       })}
     </div>
     <div class="text-blue text-sm font-medium mt-2">${progressPercent}</div>

app/ui/expiryOptions.js

@@ -3,7 +3,6 @@ const html = require('choo/html');
 const raw = require('choo/html/raw');
 const { secondsToL10nId } = require('../utils');
 const selectbox = require('./selectbox');
-const signupDialog = require('./signupDialog');
 
 module.exports = function(state, emit) {
   const el = html`
@@ -29,17 +28,17 @@ module.exports = function(state, emit) {
   const dlCountSelect = el.querySelector('#dlCount');
   el.replaceChild(
     selectbox(
-      state.downloadCount || 1,
+      state.archive.dlimit,
       counts,
       num => state.translate('downloadCount', { num }),
       value => {
         const max = state.user.maxDownloads;
+        state.archive.dlimit = Math.min(value, max);
         if (value > max) {
-          state.modal = signupDialog();
-          value = max;
+          emit('signup-cta', 'count');
+        } else {
+          emit('render');
         }
-        state.downloadCount = value;
-        emit('render');
       },
       'expire-after-dl-count-select'
     ),
@@ -53,7 +52,7 @@ module.exports = function(state, emit) {
   const timeSelect = el.querySelector('#timespan');
   el.replaceChild(
     selectbox(
-      state.timeLimit || 86400,
+      state.archive.timeLimit,
       expires,
       num => {
         const l10n = secondsToL10nId(num);
@@ -61,12 +60,12 @@ module.exports = function(state, emit) {
       },
       value => {
         const max = state.user.maxExpireSeconds;
+        state.archive.timeLimit = Math.min(value, max);
         if (value > max) {
-          state.modal = signupDialog();
-          value = max;
+          emit('signup-cta', 'time');
+        } else {
+          emit('render');
         }
-        state.timeLimit = value;
-        emit('render');
       },
       'expire-after-time-select'
     ),

app/ui/signupDialog.js

@@ -1,8 +1,9 @@
 /* global LIMITS */
 const html = require('choo/html');
 const { bytes, platform } = require('../utils');
+const { canceledSignup, submittedSignup } = require('../metrics');
 
-module.exports = function() {
+module.exports = function(trigger) {
   return function(state, emit, close) {
     const hidden = platform() === 'android' ? 'hidden' : '';
     let submitting = false;
@@ -37,7 +38,7 @@ module.exports = function() {
       <button
         class="my-4 text-blue hover:text-blue-dark focus:text-blue-darker font-medium"
         title="${state.translate('deletePopupCancel')}"
-        onclick=${close}>${state.translate('deletePopupCancel')}
+        onclick=${cancel}>${state.translate('deletePopupCancel')}
       </button>
     </send-signup-dialog>`;
 
@@ -50,6 +51,11 @@ module.exports = function() {
       return a.length === 2 && a.every(s => s.length > 0);
     }
 
+    function cancel(event) {
+      canceledSignup({ trigger });
+      close(event);
+    }
+
     function submitEmail(event) {
       event.preventDefault();
       if (submitting) {
@@ -59,6 +65,7 @@ module.exports = function() {
 
       const el = document.getElementById('email-input');
       const email = el.value;
+      submittedSignup({ trigger });
       emit('login', emailish(email) ? email : null);
     }
   };