fixed multiple issues with the /signin page. #935 #936 #937

app/fileManager.js

@@ -45,8 +45,8 @@ export default function(state, emitter) {
     lastRender = Date.now();
   });
 
-  emitter.on('login', () => {
+  emitter.on('login', email => {
-    state.user.login();
+    state.user.login(email);
   });
 
   emitter.on('logout', () => {

app/pages/signin/index.js

@@ -1,6 +1,8 @@
+/* globals LIMITS */
 const html = require('choo/html');
 const assets = require('../../../common/assets');
 const title = require('../../templates/title');
+const bytes = require('../../utils').bytes;
 
 module.exports = function(state, emit) {
   return html`
@@ -12,12 +14,11 @@ module.exports = function(state, emit) {
       <div class="signIn__info flexible">
         ${state.translate('accountBenefitTitle')}
       <ul>
-        <li>${state.translate('accountBenefitMultiFile')}</li>
+        <li>${state.translate('accountBenefitLargeFiles', {
-        <li>${state.translate('accountBenefitLargeFiles')}</li>
+          size: bytes(LIMITS.MAX_FILE_SIZE)
+        })}</li>
         <li>${state.translate('accountBenefitExpiry')}</li>
         <li>${state.translate('accountBenefitSync')}</li>
-        <li>${state.translate('accountBenefitNotify')}</li>
-        <li>${state.translate('accountBenefitMore')}</li>
       </ul>
       </div>
       <div class="signIn__form flexible">
@@ -33,16 +34,17 @@ module.exports = function(state, emit) {
             onsubmit=${submitEmail}
             data-no-csrf>
             <input
+              id="email-input"
               type="text"
               class="signIn__emailInput"
               placeholder=${state.translate('emailEntryPlaceholder')}/>
             <input
               class='noDisplay'
-              id="emailSubmit"
+              id="email-submit"
               type="submit"/>
           </form>
       </div>
-      <label class="btn" for="emailSubmit">
+      <label class="btn" for="email-submit">
         ${state.translate('signInContinueButton')}
       </label>
     </div>
@@ -50,6 +52,15 @@ module.exports = function(state, emit) {
 
   function submitEmail(event) {
     event.preventDefault();
-    emit('login');
+    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 = '';
   }
 };

app/templates/signupPromo/index.js

@@ -5,14 +5,12 @@ module.exports = function(state) {
     return null;
   }
   return html`
-  <div class="signupPromo">
+  <a href="/signin" class="signupPromo">
     <div class="signupPromo__title">${state.translate('signInPromoText')}</div>
     <div class="signupPromo__info">${state.translate('signInExplanation')}</div>
-    <a href="/signin"
+    <div class="link signupPromo__link">${state.translate(
-      class="link signupPromo__link"
+      'signInLearnMore'
-    >
+    )}</div>
-      ${state.translate('signInLearnMore')}
   </a>
-  </div>
   `;
 };

app/user.js

@@ -54,12 +54,12 @@ export default class User {
     return this.loggedIn ? LIMITS.MAX_DOWNLOADS : LIMITS.ANON.MAX_DOWNLOADS;
   }
 
-  async login() {
+  async login(email) {
     const state = arrayToB64(crypto.getRandomValues(new Uint8Array(16)));
     storage.set('oauthState', state);
     const keys_jwk = await prepareScopedBundleKey(this.storage);
     const code_challenge = await preparePkce(this.storage);
-    const params = new URLSearchParams({
+    const options = {
       client_id: AUTH_CONFIG.client_id,
       code_challenge,
       code_challenge_method: 'S256',
@@ -67,7 +67,11 @@ export default class User {
       scope: 'profile https://identity.mozilla.com/apps/send', //TODO param
       state,
       keys_jwk
-    });
+    };
+    if (email) {
+      options.email = email;
+    }
+    const params = new URLSearchParams(options);
     location.assign(
       `${AUTH_CONFIG.authorization_endpoint}?${params.toString()}`
     );

app/utils.js

@@ -60,7 +60,7 @@ function bytes(num) {
     return '0B';
   }
   const exponent = Math.min(Math.floor(Math.log10(num) / 3), UNITS.length - 1);
-  const n = Number(num / Math.pow(1000, exponent));
+  const n = Number(num / Math.pow(1024, exponent));
   let nStr = n.toFixed(1);
   if (LOCALIZE_NUMBERS) {
     try {

public/locales/en-US/send.ftl

@@ -164,12 +164,9 @@ signInContinueButton = Continue
 signInMenuOption = Sign in/up
 accountMenuOption = Firefox Account
 accountBenefitTitle = With a free Firefox Account with Send you can:
-accountBenefitMultiFile = Send multiple files at once
+accountBenefitLargeFiles = Upload larger files (up to { $size })
-accountBenefitLargeFiles = Upload larger files (up to { $size } GB)
 accountBenefitExpiry = Have more expiry options
 accountBenefitSync = Manage your uploads across devices
-accountBenefitNotify = Be notified when your files are downloaded
-accountBenefitMore = Do a lot more!
 manageAccount = Manage Account
 logOut = Sign Out
 okButton = Ok

server/routes/index.js

@@ -67,6 +67,7 @@ module.exports = function(app) {
   });
   app.use(express.json());
   app.get('/', language, pages.index);
+  app.get('/signin', pages.blank);
   app.get('/legal', language, pages.legal);
   app.get('/jsconfig.js', require('./jsconfig'));
   app.get(`/share/:id${ID_REGEX}`, language, pages.blank);