signup dialog changes

- send empty or invalid emails to the standard fxa signup page
- show the signup dialog when file too big and not logged in

app/controller.js

@@ -6,6 +6,7 @@ import * as metrics from './metrics';
 import { bytes } from './utils';
 import okDialog from './ui/okDialog';
 import copyDialog from './ui/copyDialog';
+import signupDialog from './ui/signupDialog';
 
 export default function(state, emitter) {
   let lastRender = 0;
@@ -98,12 +99,16 @@ export default function(state, emitter) {
     try {
       state.archive.addFiles(files, maxSize);
     } catch (e) {
-      state.modal = okDialog(
-        state.translate(e.message, {
-          size: bytes(maxSize),
-          count: LIMITS.MAX_FILES_PER_ARCHIVE
-        })
-      );
+      if (e.message === 'fileTooBig' && maxSize < LIMITS.MAX_FILE_SIZE) {
+        state.modal = signupDialog();
+      } else {
+        state.modal = okDialog(
+          state.translate(e.message, {
+            size: bytes(maxSize),
+            count: LIMITS.MAX_FILES_PER_ARCHIVE
+          })
+        );
+      }
     }
     render();
   });

app/ui/signupDialog.js

@@ -4,6 +4,9 @@ const { bytes } = require('../utils');
 
 module.exports = function() {
   return function(state, emit, close) {
+    setTimeout(function() {
+      document.getElementById('email-input').focus();
+    });
     return html`
     <div class="flex flex-col p-4">
       <p class="p-8">
@@ -39,18 +42,20 @@ module.exports = function() {
       </button>
     </div>`;
 
+    function emailish(str) {
+      if (!str) {
+        return false;
+      }
+      // just check if it's the right shape
+      const a = str.split('@');
+      return a.length === 2 && a.every(s => s.length > 0);
+    }
+
     function submitEmail(event) {
       event.preventDefault();
       const el = document.getElementById('email-input');
       const email = el.value;
-      if (email) {
-        // just check if it's the right shape
-        const a = email.split('@');
-        if (a.length === 2 && a.every(s => s.length > 0)) {
-          return emit('login', email);
-        }
-      }
-      el.value = '';
+      emit('login', emailish(email) ? email : null);
     }
   };
 };