Publish Vulpes Preview 15 sources for desktop, Android and Tundra

Share Gaia assets and adapters, keep private profiles and development documents local, and update both public READMEs.

gaia/apps/system/fxa/js/fxam_error_overlay.js

@@ -0,0 +1,64 @@
+/* -*- Mode: Java; tab-width: 2; indent-tabs-mode: nil; c-basic-offset: 2 -*- /
+/* vim: set shiftwidth=2 tabstop=2 autoindent cindent expandtab: */
+
+/* global HtmlHelper */
+/* exported FxaModuleErrorOverlay */
+
+'use strict';
+
+/*
+ * FxaModuleErrorOverlay shows an error prompt to the user with the info
+ * retrieved after getting an error.
+ * As params, we can define Title and Message.
+ */
+
+var FxaModuleErrorOverlay = {
+  init: function fxam_error_overlay_init() {
+    if (this.initialized) {
+      return;
+    }
+
+    HtmlHelper.importElements(this,
+      'fxa-error-overlay',
+      'fxa-error-title',
+      'fxa-error-msg',
+      'fxa-error-msg-coppa',
+      'fxa-error-ok'
+    );
+
+    this.fxaErrorOk.addEventListener('click', this.hide.bind(this));
+    this.fxaErrorOverlay.addEventListener('submit', this.prevent);
+
+    this.initialized = true;
+  },
+
+  show: function fxam_error_overlay_show(titleL10n, messageL10n, resp) {
+    this.init();
+
+    this.fxaErrorTitle.setAttribute('data-l10n-id', titleL10n);
+
+    if (resp && resp.error === 'COPPA_ERROR') {
+      this.fxaErrorMsg.style.display = 'none';
+      this.fxaErrorMsgCoppa.style.display = 'inline';
+      this.fxaErrorMsgCoppa.setAttribute('data-l10n-id', messageL10n);
+    } else {
+      this.fxaErrorMsg.style.display = 'inline';
+      this.fxaErrorMsgCoppa.style.display = 'none';
+      this.fxaErrorMsg.setAttribute('data-l10n-id', messageL10n);
+    }
+
+
+    this.fxaErrorOverlay.classList.add('show');
+  },
+
+  hide: function fxam_overlay_hide() {
+    this.init();
+
+    this.fxaErrorOverlay.classList.remove('show');
+  },
+
+  prevent: function fxam_prevent(event) {
+    event.preventDefault();
+    event.stopPropagation();
+  }
+};

gaia/apps/system/fxa/js/fxam_errors.js

@@ -0,0 +1,58 @@
+/* -*- Mode: Java; tab-width: 2; indent-tabs-mode: nil; c-basic-offset: 2 -*- /
+/* vim: set shiftwidth=2 tabstop=2 autoindent cindent expandtab: */
+
+'use strict';
+
+(function(exports) {
+  var Errors = {
+    CONNECTION_ERROR: {
+      title: 'fxa-connection-error-title',
+      message: 'fxa-connection-error-message'
+    },
+    RESET_PASSWORD_ERROR: {
+      title: 'fxa-reset-password-error-title',
+      message: 'fxa-reset-password-error-message'
+    },
+    INVALID_EMAIL: {
+      title: 'fxa-invalid-email-title',
+      message: 'fxa-invalid-email-message'
+    },
+    INVALID_PASSWORD: {
+      title: 'fxa-invalid-password-title',
+      message: 'fxa-invalid-password-message'
+    },
+    COPPA_ERROR: {
+      title: 'fxa-coppa-failure-error-title',
+      message: 'fxa-coppa-failure-error-message3'
+    },
+    COPPA_FTU_ERROR: {
+      title: 'fxa-coppa-failure-error-title',
+      message: 'fxa-coppa-ftu-error-message'
+    },
+    OFFLINE: {
+      title: 'fxa-offline-error-title',
+      message: 'fxa-offline-error-message'
+    },
+    UNKNOWN: {
+      title: 'fxa-unknown-error-title',
+      message: 'fxa-unknown-error-message'
+    }
+  };
+
+  function _getError(error) {
+    var l10nKeys = Errors[error] || Errors.UNKNOWN;
+    return {
+      title: l10nKeys.title,
+      message: l10nKeys.message
+    };
+  }
+
+  var FxaModuleErrors = {
+    responseToParams: function fxame_responseToParams(response) {
+      return response && response.error ?
+        _getError(response.error) : _getError('GENERIC_ERROR');
+    }
+  };
+
+  exports.FxaModuleErrors = FxaModuleErrors;
+}(window));

gaia/apps/system/fxa/js/fxam_manager.js

@@ -0,0 +1,58 @@
+/* -*- Mode: Java; tab-width: 2; indent-tabs-mode: nil; c-basic-offset: 2 -*- /
+/* vim: set shiftwidth=2 tabstop=2 autoindent cindent expandtab: */
+
+/* global FxaModuleUI */
+
+'use strict';
+
+/*
+ * FxaModuleManager is in charge of communication with the core of
+ * FxAccounts, sending the info retrieved during the process if the
+ * process was succeeded.
+ */
+
+var FxaModuleManager = {
+  paramsRetrieved: null,
+  init: function fxamm_init() {
+    // Some FxA UI flows require us to get some data from the platform, like
+    // the account information. This data is given by FxAccountsUI in the form
+    // of URL query parameters.
+    var hash = window.location.hash.split('?');
+    var flow = hash[0].replace('#', '');
+    if (hash.length > 1) {
+      var queryParams = hash[1].split('&');
+      for (var i = 0; i < queryParams.length; i++) {
+        var param = queryParams[i].split('=');
+        if (param.length != 2) {
+          console.warning('Wrong query parameter');
+          continue;
+        }
+        this.setParam(param[0], param[1]);
+      }
+    }
+    FxaModuleUI.init(flow);
+  },
+  setParam: function fxamm_setParam(key, value) {
+    if (!this.paramsRetrieved) {
+      this.paramsRetrieved = {};
+    }
+    this.paramsRetrieved[key] = value;
+  },
+  done: function fxamm_done() {
+    window.parent.FxAccountsUI.done(FxaModuleManager.paramsRetrieved);
+  },
+  close: function fxamm_close(error) {
+    // If there is no params retrieved, or the flow is not complete ()
+    if (!this.paramsRetrieved ||
+        !this.paramsRetrieved.done) {
+      window.parent.FxAccountsUI.error(error);
+      return;
+    }
+    window.parent.FxAccountsUI.done(this.paramsRetrieved);
+  }
+};
+
+window.addEventListener('load', function managerLoaded() {
+  window.removeEventListener('load', managerLoaded);
+  FxaModuleManager.init();
+});

gaia/apps/system/fxa/js/fxam_module.js

@@ -0,0 +1,97 @@
+/* -*- Mode: Java; tab-width: 2; indent-tabs-mode: nil; c-basic-offset: 2 -*- /
+/* vim: set shiftwidth=2 tabstop=2 autoindent cindent expandtab: */
+
+/* global HtmlHelper, FxaModuleOverlay, LazyLoader, FxaModuleErrors,
+   FxaModuleErrorOverlay, BrowserFrame, EntrySheet */
+/* exported FxaModule */
+
+'use strict';
+
+var FxaModule = (function() {
+
+  var Module = {
+    initialized: false,
+    init: function fxam_init() {
+      // override this to do initialization
+      // l10n note: this method is called after mozL10n.once has fired. It is
+      // safe to assume strings have loaded and mozL10n.readyState is 'complete'
+      // inside this function and other Module functions.
+    },
+
+    onNext: function fxam_onNext(gotoNextStepCallback) {
+      // override this to take care of when the user clicks on the "next"
+      // button. Validate any inputs, talk with the backend, do processing.
+      // When complete, call gotoNextStepCallback with the next state from
+      // fxam_states.js
+    },
+
+    onBack: function fxam_onBack() {
+      // handle "back" button presses.
+    },
+
+    onDone: function fxam_onDone(doneCallback) {
+      doneCallback();
+    },
+
+    importElements: function fxam_importElements() {
+      var args = [].slice.call(arguments);
+      // context to import into is the first argument to importElements
+      args.unshift(this);
+      HtmlHelper.importElements.apply(null, args);
+    },
+
+    showErrorResponse: function fxam_showErrorResponse(response) {
+      // special case: if a network error occurs during FTE,
+      // we show a slightly different error message
+      var resp = response;
+      if (window.location.search.indexOf('isftu') != -1 &&
+          resp == 'OFFLINE_ERROR') {
+        resp = 'CONNECTION_ERROR';
+      }
+
+      FxaModuleOverlay.hide();
+      LazyLoader.load('js/fxam_errors.js', () => {
+        var config = FxaModuleErrors.responseToParams(resp);
+        FxaModuleErrorOverlay.show(config.title, config.message, resp);
+        if (resp && resp.error === 'COPPA_ERROR') {
+          var link =
+            FxaModuleErrorOverlay.fxaErrorMsgCoppa.querySelector('#coppa-link');
+          link.addEventListener('click', this.onCopaLinkClick);
+        }
+      });
+    },
+
+    onCopaLinkClick: function(e) {
+      e.preventDefault();
+      if (this.entrySheet) {
+        this.entrySheet.close();
+        this.entrySheet = null;
+      }
+      var coppaUrl = 'http://www.ftc.gov/news-events/media-resources/' +
+        'protecting-consumer-privacy/kids-privacy-coppa';
+
+      this.entrySheet = new EntrySheet(
+        window.top.document.getElementById('screen'),
+        'URL:' + coppaUrl,
+        new BrowserFrame({
+          url: coppaUrl,
+          oop: true
+        })
+      );
+
+      this.entrySheet.open();
+    },
+
+    hideErrorResponse: function fxam_hideErrorResponse() {
+      var link =
+        FxaModuleErrorOverlay.fxaErrorMsgCoppa.querySelector('#coppa-link');
+      link.removeEventListener('click', this.onCopaLinkClick);
+      FxaModuleErrorOverlay.hide();
+      FxaModuleOverlay.hide();
+    }
+  };
+
+  return Module;
+
+}());
+

gaia/apps/system/fxa/js/fxam_navigation.js

@@ -0,0 +1,106 @@
+/* -*- Mode: Java; tab-width: 2; indent-tabs-mode: nil; c-basic-offset: 2 -*- /
+/* vim: set shiftwidth=2 tabstop=2 autoindent cindent expandtab: */
+
+/* global LazyLoader, FxaModuleUI, View, FxaModuleManager, FxaModuleStates */
+/* exported FxaModuleNavigation */
+
+'use strict';
+
+/*
+ * This code controls the navigation between modules. When tapping on
+ * next/back, we load the next/previous module, loading resources and
+ * updating the UI. Transitions are based on hash change.
+ */
+
+var FxaModuleNavigation = {
+  stepCount: 0,
+  currentModule: null,
+  init: function fxam_nav_init(flow) {
+    // Listen on hash changes for panel changes
+    window.addEventListener(
+      'hashchange',
+      this.hashchangeHandler.bind(this),
+      false
+    );
+
+    // Load view
+    LazyLoader.load('view/view_' + flow + '.js', function loaded() {
+      FxaModuleUI.setMaxSteps(View.length);
+      window.location.hash = View.start.id;
+    }.bind(this));
+  },
+  hashchangeHandler: function fxam_nav_hashchangeHandler() {
+    if (!location.hash) {
+      return;
+    }
+
+    var panel = document.querySelector(location.hash);
+    if (!panel || !panel.classList.contains('screen')) {
+      return;
+    }
+
+    if (this.backAnim) {
+      this.stepCount--;
+      this.loadStep(panel, true);
+    } else {
+      this.stepCount++;
+      this.loadStep(panel);
+    }
+  },
+  loadStep: function fxam_nav_loadStep(panel, back) {
+    if (!panel) {
+      return;
+    }
+
+    FxaModuleUI.loadScreen({
+      panel: panel,
+      count: this.stepCount,
+      back: this.backAnim,
+      onload: function() {
+        this.currentModule = window[this.moduleById(panel.id)];
+        this.currentModule.init &&
+          this.currentModule.init(FxaModuleManager.paramsRetrieved);
+      }.bind(this),
+      onanimate: function() {
+        this.backAnim = false;
+        this.updatingStep = false;
+      }.bind(this)
+    });
+  },
+  back: function fxam_nav_back() {
+    // Avoid multiple taps on 'back' if screen transition is not over.
+    if (this.updatingStep) {
+      return;
+    }
+    this.updatingStep = true;
+    // Execute module back (if is defined)
+    this.currentModule.onBack && this.currentModule.onBack();
+    // Go to previous step
+    this.backAnim = true;
+
+    window.history.back();
+  },
+  loadNextStep: function fxam_loadNextStep(nextStep) {
+    if (!nextStep || !nextStep.id) {
+      return;
+    }
+
+    location.hash = nextStep.id;
+  },
+  next: function fxam_nav_next() {
+    this.currentModule.onNext(this.loadNextStep.bind(this));
+  },
+  moduleById: function fxam_nav_moduleById(id) {
+    var moduleKey = Object.keys(FxaModuleStates).filter(function(module) {
+      return FxaModuleStates[module] &&
+        FxaModuleStates[module].id &&
+        FxaModuleStates[module].id === id;
+    }).pop();
+    if (moduleKey) {
+      return FxaModuleStates[moduleKey].module;
+    }
+  },
+  done: function fxam_nav_done() {
+    this.currentModule.onDone(FxaModuleManager.done);
+  }
+};

gaia/apps/system/fxa/js/fxam_overlay.js

@@ -0,0 +1,41 @@
+/* -*- Mode: Java; tab-width: 2; indent-tabs-mode: nil; c-basic-offset: 2 -*- /
+/* vim: set shiftwidth=2 tabstop=2 autoindent cindent expandtab: */
+
+/* global HtmlHelper */
+/* exported FxaModuleOverlay */
+
+'use strict';
+
+/*
+ * FxaModuleOverlay shows an loading prompt to the user.
+ * As params, we can only a message which will be shown with
+ * a spinner of 'loading'.
+ */
+
+var FxaModuleOverlay = {
+    init: function fxam_overlay_init() {
+      if (this.initialized) {
+        return;
+      }
+
+      HtmlHelper.importElements(this,
+        'fxa-overlay',
+        'fxa-overlay-msg'
+      );
+
+      this.initialized = true;
+    },
+
+    show: function fxam_overlay_show(l10nId) {
+      this.init();
+
+      this.fxaOverlayMsg.setAttribute('data-l10n-id', l10nId);
+      this.fxaOverlay.classList.add('show');
+    },
+
+    hide: function fxam_overlay_hide() {
+      this.init();
+
+      this.fxaOverlay.classList.remove('show');
+    }
+};

gaia/apps/system/fxa/js/fxam_server_request.js

@@ -0,0 +1,107 @@
+/* -*- Mode: Java; tab-width: 2; indent-tabs-mode: nil; c-basic-offset: 2 -*- /
+/* vim: set shiftwidth=2 tabstop=2 autoindent cindent expandtab: */
+
+/* global SettingsHelper, FxaModuleManager, MozActivity */
+
+'use strict';
+
+/*
+ * FxModuleServerRequest wraps the functionality exposed by the server,
+ * letting our code to be shielded against changes in the API of FxA.
+ */
+
+(function(exports) {
+
+  var pref = 'identity.fxaccounts.reset-password.url';
+  var fxaSettingsHelper = SettingsHelper(pref);
+  var fxaURL;
+
+  fxaSettingsHelper.get(function on_fxa_get_settings(url) {
+    fxaURL = url;
+  });
+
+  function _setAccountDetails(response) {
+    if(response && response.user && response.user.email) {
+      FxaModuleManager.setParam('done', true);
+      FxaModuleManager.setParam('verified', response.user.verified);
+    }
+  }
+
+  function _ensureFxaClient(callback) {
+    window.parent.LazyLoader.load('../js/fx_accounts_client.js', function() {
+      callback && callback();
+    });
+  }
+
+  var FxModuleServerRequest = {
+    checkEmail: function fxmsr_checkEmail(email, onsuccess, onerror) {
+      _ensureFxaClient(function() {
+        window.parent.FxAccountsClient.queryAccount(
+                email,
+                onsuccess,
+                onerror);
+      });
+    },
+    signIn: function fxmsr_signIn(email, password, onsuccess, onerror) {
+
+      function successHandler(response) {
+        _setAccountDetails(response);
+        var authenticated =
+          (response && response.user && response.user.verified) || false;
+        onsuccess && onsuccess({
+          authenticated: authenticated
+        });
+      }
+
+      function errorHandler(response) {
+        onerror && onerror(response);
+      }
+
+      _ensureFxaClient(function signIn() {
+        window.parent.FxAccountsClient.signIn(
+                email,
+                password,
+                successHandler,
+                errorHandler);
+      });
+
+    },
+    signUp: function fxmsr_signUp(email, password, onsuccess, onerror) {
+      function successHandler(response) {
+        _setAccountDetails(response);
+        onsuccess && onsuccess(response);
+      }
+
+      _ensureFxaClient(function signUp() {
+         window.parent.FxAccountsClient.signUp(
+                email,
+                password,
+                successHandler,
+                onerror);
+      });
+    },
+    requestPasswordReset:
+      function fxmsr_requestPasswordReset(email, onsuccess, onerror) {
+      var url = email ? fxaURL + '?email=' + email : fxaURL;
+      var activity = new MozActivity({
+        name: 'view',
+        data: {
+          type: 'url',
+          url: url
+        }
+      });
+      activity.onsuccess = function on_reset_success() {
+        // TODO When the browser loads, it is *behind* the system app. So we
+        //      need to dismiss this app in order to let the user reset their
+        //      password.
+        onsuccess && onsuccess();
+        FxaModuleManager.close('DIALOG_CLOSED_BY_USER');
+      };
+      activity.onerror = function on_reset_error(err) {
+        console.error(err);
+        onerror && onerror(err);
+      };
+    }
+  };
+  exports.FxModuleServerRequest = FxModuleServerRequest;
+}(window));

gaia/apps/system/fxa/js/fxam_states.js

@@ -0,0 +1,64 @@
+/* -*- Mode: Java; tab-width: 2; indent-tabs-mode: nil; c-basic-offset: 2 -*- /
+/* vim: set shiftwidth=2 tabstop=2 autoindent cindent expandtab: */
+
+/* global FxaModuleNavigation */
+/* exported FxaModuleStates */
+
+'use strict';
+
+/*
+ * Define the states of the firefox accounts signup/signin flow.
+ * The object key defines the state name, the value is the
+ * URL hash of the screen to show. done is a special state that has no
+ * corresponding screen.
+ */
+
+var FxaModuleStates = (function() {
+  return {
+    ENTER_EMAIL: {
+      id: 'fxa-email',
+      module: 'FxaModuleEnterEmail'
+    },
+    SET_PASSWORD: {
+      id: 'fxa-set-password',
+      module: 'FxaModuleSetPassword'
+    },
+    ENTER_PASSWORD: {
+      id: 'fxa-enter-password',
+      module: 'FxaModuleEnterPassword'
+    },
+    SIGNUP_SUCCESS: {
+      id: 'fxa-signup-success',
+      module: 'FxaModuleSignupSuccess'
+    },
+    SIGNIN_SUCCESS: {
+      id: 'fxa-signin-success',
+      module: 'FxaModuleSigninSuccess'
+    },
+    REFRESH_AUTH: {
+      id: 'fxa-refresh-auth',
+      module: 'FxaModuleRefreshAuth'
+    },
+    COPPA: {
+      id: 'fxa-coppa',
+      module: 'FxaModuleCoppa'
+    },
+    TOS: {
+      id: 'fxa-tos'
+    },
+    PP: {
+      id: 'fxa-pp'
+    },
+    DONE: null,
+    back: function() {
+      FxaModuleNavigation.back();
+    },
+    setState: function setState(state) {
+      if ( !(state in this) || typeof state === 'function') {
+        return;
+      }
+      document.location.hash = state.id;
+    }
+  };
+}());
+

gaia/apps/system/fxa/js/fxam_ui.js

@@ -0,0 +1,168 @@
+/* -*- Mode: Java; tab-width: 2; indent-tabs-mode: nil; c-basic-offset: 2 -*- /
+/* vim: set shiftwidth=2 tabstop=2 autoindent cindent expandtab: */
+
+/* global HtmlHelper, FxaModule, FxaModuleManager, FxaModuleNavigation,
+   LazyLoader */
+/* exported FxaModuleUI */
+
+'use strict';
+
+const OFFLINE_TIMEOUT = 30 * 1000;
+
+var FxaModuleUI = {
+  maxSteps: null,
+  init: function(flow) {
+    // Add listeners to the main elements
+    HtmlHelper.importElements(this,
+      'fxa-module-header',
+      'fxa-module-back',
+      'fxa-module-next',
+      'fxa-module-navigation',
+      'fxa-module-done',
+      'fxa-progress'
+    );
+
+    this.fxaModuleHeader.addEventListener('action', function() {
+      FxaModuleManager.close('DIALOG_CLOSED_BY_USER');
+    });
+
+    this.fxaModuleBack.addEventListener('mousedown', function() {
+      FxaModuleNavigation.back();
+    });
+
+    this.fxaModuleNext.addEventListener('mousedown', function() {
+      FxaModuleNavigation.next();
+    });
+
+    this.fxaModuleDone.addEventListener('click', function() {
+      FxaModuleNavigation.done();
+    });
+
+    // Give up if the network goes offline for more than 30 seconds straight.
+    var offlineTimer;
+    window.addEventListener('online', function onOnline(evt) {
+      clearTimeout(offlineTimer);
+      FxaModule.hideErrorResponse();
+    });
+
+    window.addEventListener('offline', function onOffline(evt) {
+      if (offlineTimer) { return; }
+      offlineTimer = setTimeout(function onOfflineTimeout() {
+        return FxaModule.showErrorResponse({
+          error: 'OFFLINE'
+        });
+      }, OFFLINE_TIMEOUT);
+    });
+
+    FxaModuleNavigation.init(flow);
+  },
+  setMaxSteps: function(num) {
+    this.maxSteps = num;
+  },
+  increaseMaxStepsBy: function(inc) {
+    this.maxSteps = this.maxSteps + inc;
+  },
+  decreaseMaxStepsBy: function(dec) {
+    this.maxSteps = this.maxSteps - dec;
+  },
+  loadScreen: function(params) {
+    var currentScreen = document.querySelector('.current');
+    var nextScreen = params.panel;
+    // Set progress width
+    this.fxaProgress.style.width = (100 / this.maxSteps) + '%';
+    // Lazy load current panel
+    LazyLoader.load(nextScreen, function() {
+      // If the panel contains any new script elements,
+      // lazy load those as well.
+      var scripts = [].slice.call(nextScreen.querySelectorAll('script'))
+        .map(function(script) { return script.getAttribute('src'); });
+
+      // Once all scripts are loaded, load the modules/UI
+      LazyLoader.load(scripts, function() {
+        if (params.count > 1 && params.count < this.maxSteps) {
+          this.fxaModuleNavigation.classList.remove('navigation-single-button');
+          this.fxaModuleNavigation.classList.remove('navigation-back-only');
+
+          if (nextScreen.getAttribute('data-navigation') === 'back') {
+            this.fxaModuleNavigation.classList.add('navigation-back-only');
+          }
+        } else {
+          this.fxaModuleNavigation.classList.add('navigation-single-button');
+          if (params.count === this.maxSteps) {
+            this.fxaModuleNavigation.classList.add('navigation-done');
+          }
+        }
+        this.setProgressBar(params.count);
+
+        navigator.mozL10n.once(function() {
+          // fire module's init method
+          params.onload && params.onload();
+
+          // animate it into view - TODO unclear how nextScreen could be falsy
+          if (nextScreen) {
+            this._animate(currentScreen,
+                          nextScreen,
+                          params.back,
+                          params.onanimate);
+          }
+        }.bind(this));
+      }.bind(this));
+    }.bind(this));
+  },
+  _animate: function(from, to, back, callback) {
+    if (!to) {
+      return;
+    }
+
+    if (!from) {
+      to.classList.add('current');
+      return;
+    }
+
+    if (this._inTransition(from) || this._inTransition(to)) {
+      return;
+    }
+
+    from.addEventListener('animationend', function fromAnimEnd() {
+      from.removeEventListener('animationend', fromAnimEnd, false);
+      from.classList.remove(back ? 'currentToNext' : 'currentToPrev');
+      from.classList.remove('current');
+      from.classList.remove('back');
+    }, false);
+
+    to.addEventListener('animationend', function toAnimEnd() {
+      to.removeEventListener('animationend', toAnimEnd, false);
+      to.classList.remove(back ? 'prevToCurrent' : 'nextToCurrent');
+      to.classList.add('current');
+      callback && callback();
+    }, false);
+
+    from.classList.add(back ? 'currentToNext' : 'currentToPrev');
+    to.classList.add(back ? 'prevToCurrent' : 'nextToCurrent');
+  },
+  _inTransition: function(elem) {
+    return elem.classList.contains('currentToNext') ||
+           elem.classList.contains('currentToPrev') ||
+           elem.classList.contains('nextToCurrent') ||
+           elem.classList.contains('prevToCurrent') || false;
+  },
+  setProgressBar: function(value) {
+    this.fxaProgress.value = 100 * value / this.maxSteps;
+    this.fxaProgress.style.transform = 'translateX(' + 100 * (value - 1) + '%)';
+  },
+  setNextText: function(l10n) {
+    this.fxaModuleNext.textContent = l10n;
+  },
+  disableNextButton: function() {
+    this.fxaModuleNext.setAttribute('disabled', 'disabled');
+  },
+  enableNextButton: function() {
+    this.fxaModuleNext.removeAttribute('disabled');
+  },
+  disableDoneButton: function() {
+    this.fxaModuleDone.setAttribute('disabled', 'disabled');
+  },
+  enableDoneButton: function() {
+    this.fxaModuleDone.removeAttribute('disabled');
+  }
+};

gaia/apps/system/fxa/js/screens/fxam_coppa.js

@@ -0,0 +1,89 @@
+/* -*- Mode: Java; tab-width: 2; indent-tabs-mode: nil; c-basic-offset: 2 -*- /
+/* vim: set shiftwidth=2 tabstop=2 autoindent cindent expandtab: */
+
+'use strict';
+
+/**
+ * This module allow the user to select her age from a date picker and checks
+ * that she is old enough to create a Firefox account. Otherwise, it shows an
+ * error.
+ */
+
+/* global FxaModuleUI, FxaModule, FxaModuleStates, FxaModuleNavigation */
+/* exported FxaModuleCoppa */
+
+var FxaModuleCoppa = (function() {
+
+  var MINIMUM_AGE = 13;
+
+  function _populateSelect(select) {
+    var currentYear = new Date().getFullYear();
+    var start = currentYear - MINIMUM_AGE;
+    for (var year = start; year <= currentYear; year++) {
+      var option = document.createElement('option');
+      option.value= year;
+      if (year == start) {
+        option.setAttribute('data-l10n-id', 'fxa-age-earlier');
+        option.setAttribute('data-l10n-args', '{ "year": "' + year + '" }');
+      } else {
+        option.textContent = year;
+      }
+      select.appendChild(option);
+    }
+  }
+
+  function _enableNext(age) {
+    if (age === '0') {
+      FxaModuleUI.disableNextButton();
+      return;
+    }
+    FxaModuleUI.enableNextButton();
+  }
+
+  var Module = Object.create(FxaModule);
+  Module.init = function init(options) {
+    this.importElements('fxa-age-select');
+
+    this.isFTU = !!(options && options.isftu);
+
+    // Initially we only have one value ("Year of birth") in the age
+    // selection element.
+    if (this.fxaAgeSelect.length == 1) {
+      _populateSelect(this.fxaAgeSelect);
+    }
+
+    _enableNext(this.fxaAgeSelect.value);
+
+    // If COPPA is part of the sign up flow, then we need to add a step to the
+    // progress bar. Don't increment if the user is moving backwards, though.
+    if (!FxaModuleNavigation.backAnim) {
+      FxaModuleUI.increaseMaxStepsBy(1);
+    }
+
+    if (this.initialized) {
+      return;
+    }
+
+    this.fxaAgeSelect.addEventListener('change', () => {
+      _enableNext(this.fxaAgeSelect.value);
+    });
+
+    this.initialized = true;
+  };
+
+  Module.onNext = function onNext(gotoNextStepCallback) {
+    if (new Date().getFullYear() - this.fxaAgeSelect.value < MINIMUM_AGE) {
+      this.showErrorResponse({
+        error: this.isFTU ? 'COPPA_FTU_ERROR' : 'COPPA_ERROR'
+      });
+      return;
+    }
+    gotoNextStepCallback(FxaModuleStates.SET_PASSWORD);
+  };
+
+  Module.onBack = function onBack() {
+    FxaModuleUI.decreaseMaxStepsBy(1);
+  };
+
+  return Module;
+})();

gaia/apps/system/fxa/js/screens/fxam_enter_email.js

@@ -0,0 +1,193 @@
+/* -*- Mode: Java; tab-width: 2; indent-tabs-mode: nil; c-basic-offset: 2 -*- /
+/* vim: set shiftwidth=2 tabstop=2 autoindent cindent expandtab: */
+
+/* global FxaModuleStates, FxaModuleUI, FxaModule, FxaModuleNavigation,
+   FxModuleServerRequest, FxaModuleOverlay, FxaModuleManager, EntrySheet,
+   BrowserFrame */
+/* exported FxaModuleEnterEmail */
+
+'use strict';
+
+/**
+ * This module checks the validity of an email address, and if valid,
+ * determines which screen to go next.
+ */
+
+var FxaModuleEnterEmail = (function() {
+
+  function _isEmailValid(emailEl) {
+    return emailEl && emailEl.value && emailEl.validity.valid;
+  }
+
+  function _loadSignIn(done) {
+    done(FxaModuleStates.ENTER_PASSWORD);
+  }
+
+  function _loadSignUp(done) {
+    done(FxaModuleStates.SET_PASSWORD);
+  }
+
+  function _loadCoppa(done) {
+    done(FxaModuleStates.COPPA);
+  }
+
+  function _enableNext(emailEl) {
+    if (_isEmailValid(emailEl)) {
+      FxaModuleUI.enableNextButton();
+    } else {
+      FxaModuleUI.disableNextButton();
+    }
+  }
+
+  var Module = Object.create(FxaModule);
+  Module.init = function init(options) {
+    // Cache static HTML elements
+    this.importElements(
+      'fxa-email-input',
+      'fxa-logo',
+      'fxa-notice'
+    );
+
+    // Blocks the navigation until check the condition
+    _enableNext(this.fxaEmailInput);
+
+    if (this.initialized) {
+      return;
+    }
+
+    this.fxaPrivacy = document.getElementById('fxa-privacy');
+    this.fxaPrivacy.setAttribute('data-l10n-id', 'fxa-pn');
+    this.fxaTerms = document.getElementById('fxa-terms');
+    this.fxaTerms.setAttribute('data-l10n-id', 'fxa-tos');
+
+    this.isFTU = !!(options && options.isftu);
+
+    // Add listeners
+    this.fxaEmailInput.addEventListener(
+      'input',
+      function onInput(event) {
+        _enableNext(event.target);
+      }
+    );
+    this.fxaEmailInput.addEventListener(
+      'focus',
+      function onFocus() {
+        this.fxaLogo.setAttribute('hidden', true);
+      }.bind(this)
+    );
+    this.fxaEmailInput.addEventListener(
+      'blur',
+      function onBlur() {
+        this.fxaLogo.removeAttribute('hidden');
+      }.bind(this)
+    );
+
+    this.fxaTerms.addEventListener('click', onExternalLinkClick.bind(this));
+    this.fxaPrivacy.addEventListener('click', onExternalLinkClick.bind(this));
+
+    function onExternalLinkClick(e) {
+      /*jshint validthis:true */
+      e.stopPropagation();
+      e.preventDefault();
+      if (!navigator.onLine) {
+        return this.showErrorResponse({error: 'OFFLINE'});
+      }
+      var url = e.target.href;
+      if (this.entrySheet) {
+        this.entrySheet.close();
+        this.entrySheet = null;
+      }
+      this.entrySheet = new EntrySheet(
+        window.top.document.getElementById('screen'),
+        // Prefix url with LRM character
+        // This ensures truncation occurs correctly in an RTL document
+        // We can remove this when bug 1154438 is fixed.
+        '\u200E' + url,
+        new BrowserFrame({
+          url: url,
+          oop: true
+        })
+      );
+      this.entrySheet.open();
+    }
+
+    document.addEventListener(
+      'visibilitychange',
+      onVisibilityChange.bind(this)
+    );
+
+    function onVisibilityChange() {
+      /*jshint validthis:true */
+      if (document.hidden) {
+        document.removeEventListener('visibilitychange', onVisibilityChange);
+        if (this.entrySheet) {
+          this.entrySheet.close();
+          this.entrySheet = null;
+        }
+      }
+    }
+
+    window.addEventListener('holdhome', hideEntrySheet.bind(this));
+    window.addEventListener('home', hideEntrySheet.bind(this));
+    window.addEventListener('activityrequesting', hideEntrySheet.bind(this));
+
+    function hideEntrySheet() {
+      /*jshint validthis:true */
+      if (this.entrySheet) {
+        this.entrySheet.close();
+        this.entrySheet = null;
+      }
+      window.removeEventListener('holdhome', hideEntrySheet);
+      window.removeEventListener('home', hideEntrySheet);
+      window.removeEventListener('activityrequesting', hideEntrySheet);
+    }
+
+    // Ensure that pressing 'ENTER' (keycode 13) we send the form
+    // as expected
+    this.fxaEmailInput.addEventListener(
+      'keypress',
+      function onKeypress(event) {
+        if (_isEmailValid(this.fxaEmailInput) && event.keyCode === 13) {
+          document.activeElement.blur();
+          FxaModuleNavigation.next();
+        }
+      }.bind(this)
+    );
+
+    // Avoid to add listener twice
+    this.initialized = true;
+  };
+
+  Module.onNext = function onNext(gotoNextStepCallback) {
+    FxaModuleOverlay.show('fxa-connecting');
+
+    var email = this.fxaEmailInput.value;
+
+    FxModuleServerRequest.checkEmail(
+      email,
+      function onSuccess(response) {
+        FxaModuleOverlay.hide();
+        FxaModuleManager.setParam('email', email);
+        if (response && response.registered) {
+          _loadSignIn(gotoNextStepCallback);
+        } else if (this.isFTU) {
+          // XXX Skip COPPA verification during FTU: if a child has a mobile
+          // device, we assume a parent/guardian has given it to them, which
+          // implies parental consent. So, we skip to the next step in the
+          // signup flow, the set-password screen. See also bug 1010598.
+          _loadSignUp(gotoNextStepCallback);
+        } else {
+          _loadCoppa(gotoNextStepCallback);
+        }
+      }.bind(this),
+      this.showErrorResponse);
+  };
+
+  Module.onBack = function onBack() {
+    FxaModuleUI.enableNextButton();
+  };
+
+  return Module;
+
+}());
+

gaia/apps/system/fxa/js/screens/fxam_enter_password.js

@@ -0,0 +1,166 @@
+/* -*- Mode: Java; tab-width: 2; indent-tabs-mode: nil; c-basic-offset: 2 -*- /
+/* vim: set shiftwidth=2 tabstop=2 autoindent cindent expandtab: */
+
+/* global FxaModuleStates, FxaModuleUI, FxaModule, FxaModuleNavigation,
+   FxModuleServerRequest, FxaModuleOverlay, FxaModuleManager */
+/* exported FxaModuleEnterPassword */
+
+'use strict';
+
+/**
+ * This module checks the validity of password given email address, and if
+ * valid, determine which screen to go next.
+ */
+
+var FxaModuleEnterPassword = (function() {
+
+  function _isPasswordValid(passwordEl) {
+    var passwordValue = passwordEl.value;
+    return passwordValue && passwordEl.validity.valid;
+  }
+
+  function _enableNext(passwordEl) {
+    if (_isPasswordValid(passwordEl)) {
+      FxaModuleUI.enableNextButton();
+    } else {
+      FxaModuleUI.disableNextButton();
+    }
+  }
+
+  function _cleanForm(passwordEl, passwordCheck) {
+    passwordEl.value = '';
+    passwordCheck.checked = false;
+    passwordEl.setAttribute('type', 'password');
+  }
+
+  function _loadSigninSuccess(done) {
+    done(FxaModuleStates.SIGNIN_SUCCESS);
+  }
+
+  function _notVerifiedUser(done) {
+    done(FxaModuleStates.SIGNUP_SUCCESS);
+  }
+
+  function _togglePasswordVisibility() {
+    /*jshint validthis:true*/
+    var passwordFieldType = !!this.fxaShowPw.checked ? 'text' : 'password';
+    this.fxaPwInput.setAttribute('type', passwordFieldType);
+  }
+
+  function _forgotPassword() {
+    /*jshint validthis:true*/
+    var self = this;
+    if (this.isFTU) {
+      return this.showErrorResponse({
+        error: 'RESET_PASSWORD_ERROR'
+      });
+    }
+    // Note: we don't need to pass a success callback, but we do need an errback
+    FxModuleServerRequest.requestPasswordReset(
+      this.email,
+      null,
+      function on_reset_error() {
+        self.showErrorResponse({
+          error: 'UNKNOWN_ERROR'
+        });
+      }
+    );
+  }
+
+  var Module = Object.create(FxaModule);
+  Module.init = function init(options) {
+
+    if (!this.initialized) {
+      // Cache DOM elements
+      this.importElements(
+        'fxa-hello-known-user',
+        'fxa-pw-input',
+        'fxa-show-pw',
+        'fxa-forgot-password'
+      );
+      // Add listeners
+      this.fxaPwInput.addEventListener(
+        'input',
+        function onInput(event) {
+          _enableNext(event.target);
+        }
+      );
+      // Ensure that pressing 'ENTER' (keycode 13) we send the form
+      // as expected
+      this.fxaPwInput.addEventListener(
+        'keypress',
+        function onKeypress(event) {
+          if (_isPasswordValid(this.fxaPwInput) && event.keyCode === 13) {
+            document.activeElement.blur();
+            FxaModuleNavigation.next();
+          }
+        }.bind(this)
+      );
+
+      this.fxaShowPw.addEventListener(
+        'change',
+        _togglePasswordVisibility.bind(this),
+        false
+      );
+
+      this.fxaForgotPassword.addEventListener(
+        'click',
+        _forgotPassword.bind(this),
+        false
+      );
+      // Avoid repeated initialization
+      this.initialized = true;
+    }
+
+    if (!options || !options.email) {
+      console.error('Options are not sent properly. Email not available');
+      return;
+    }
+
+    this.isFTU = !!(options && options.isftu);
+    this.email = options.email;
+
+    navigator.mozL10n.setAttributes(this.fxaHelloKnownUser, 'fxa-hello-user2', {
+      email: this.email
+    });
+
+    _cleanForm(
+      this.fxaPwInput,
+      this.fxaShowPw
+    );
+
+    _enableNext(this.fxaPwInput);
+
+  };
+
+  Module.onNext = function onNext(gotoNextStepCallback) {
+    FxaModuleOverlay.show('fxa-connecting');
+
+    FxaModuleManager.setParam('success', true);
+    FxModuleServerRequest.signIn(
+      this.email,
+      this.fxaPwInput.value,
+      function onServerResponse(response) {
+        FxaModuleOverlay.hide();
+
+        if (!response.authenticated) {
+          _notVerifiedUser(gotoNextStepCallback);
+          return;
+        }
+
+        _loadSigninSuccess(gotoNextStepCallback);
+      }.bind(this),
+      function onError(response) {
+        _cleanForm(
+          this.fxaPwInput,
+          this.fxaShowPw
+        );
+        this.showErrorResponse(response);
+      }.bind(this)
+    );
+  };
+
+  return Module;
+
+}());
+

gaia/apps/system/fxa/js/screens/fxam_refresh_auth.js

@@ -0,0 +1,121 @@
+/* -*- Mode: Java; tab-width: 2; indent-tabs-mode: nil; c-basic-offset: 2 -*- /
+/* vim: set shiftwidth=2 tabstop=2 autoindent cindent expandtab: */
+
+/* global FxaModuleStates, FxaModuleUI, FxaModule, FxModuleServerRequest,
+   FxaModuleOverlay */
+/* exported FxaModuleRefreshAuth */
+/* jshint unused:false */
+
+'use strict';
+
+var FxaModuleRefreshAuth = (function() {
+
+  function _isPasswordValid(passwordEl) {
+    var passwordValue = passwordEl.value;
+    return passwordValue && passwordEl.validity.valid;
+  }
+
+  function _enableDone(passwordEl) {
+    if (_isPasswordValid(passwordEl)) {
+      FxaModuleUI.enableDoneButton();
+    } else {
+      FxaModuleUI.disableDoneButton();
+    }
+  }
+
+  function _cleanForm(passwordEl, passwordCheck) {
+    passwordEl.value = '';
+    passwordCheck.checked = false;
+    passwordEl.setAttribute('type', 'password');
+    FxaModuleUI.disableDoneButton();
+  }
+
+  function _requestPasswordReset(email, done) {
+    /*jshint validthis:true */
+    FxModuleServerRequest.requestPasswordReset(
+      email,
+      function onSuccess(response) {
+        done();
+      },
+      function onError(response) {
+        this._showCouldNotResetPassword();
+      }.bind(this)
+    );
+  }
+
+  function _showCouldNotResetPassword() {
+    /*jshint validthis:true */
+    this.showErrorResponse({
+      error: 'RESET_PASSWORD_ERROR'
+    });
+  }
+
+  function _forgotPassword() {
+    /*jshint validthis:true */
+    FxaModuleOverlay.show('fxa-requesting-password-reset');
+    _requestPasswordReset.call(
+      this,
+      this.email,
+      function() {
+        FxaModuleOverlay.hide();
+        FxaModuleStates.setState(FxaModuleStates.PASSWORD_RESET_SUCCESS);
+      }
+    );
+  }
+
+
+  var Module = Object.create(FxaModule);
+  Module.init = function init(options) {
+    if (!this.initialized) {
+      // Cache DOM elements.
+      this.importElements(
+        'fxa-pw-input-refresh',
+        'fxa-show-pw-refresh',
+        'fxa-forgot-password-refresh'
+      );
+
+      this.fxaPwInputRefresh.addEventListener('input', (function(event) {
+        _enableDone(event.target);
+      }).bind(this));
+
+      this.fxaShowPwRefresh.addEventListener('change', (function() {
+        var passwordFieldType = !!this.fxaShowPwRefresh.checked ? 'text' :
+                                                                  'password';
+      }).bind(this), false);
+
+      this.fxaForgotPasswordRefresh.addEventListener('click',
+                                                     _forgotPassword.bind(this),
+                                                     false);
+      this.initialized = true;
+    }
+
+    if (!options || !options.email) {
+      console.error('Options are not sent properly. Email not available');
+      return;
+    }
+
+    this.email = options.email;
+
+    _cleanForm(this.fxaPwInputRefresh, this.fxaShowPwRefresh);
+    _enableDone(this.fxaPwInputRefresh);
+  };
+
+  Module.onDone = function onDone(callback) {
+    FxaModuleOverlay.show('fxa-connecting');
+
+    FxModuleServerRequest.signIn(
+      this.email,
+      this.fxaPwInputRefresh.value,
+      function onServerResponse(response) {
+        FxaModuleOverlay.hide();
+        callback();
+      }, function onError(response) {
+        _cleanForm(this.fxaPwInputRefresh,
+                   this.fxaShowPwRefresh);
+        this.showErrorResponse(response);
+      }.bind(this)
+    );
+  };
+
+  return Module;
+})();

gaia/apps/system/fxa/js/screens/fxam_set_password.js

@@ -0,0 +1,123 @@
+/* -*- Mode: Java; tab-width: 2; indent-tabs-mode: nil; c-basic-offset: 2 -*- /
+/* vim: set shiftwidth=2 tabstop=2 autoindent cindent expandtab: */
+
+/* global FxaModuleUI, FxaModuleOverlay, FxaModule, FxModuleServerRequest,
+   FxaModuleManager, FxaModuleStates */
+/* exported FxaModuleSetPassword */
+
+'use strict';
+
+/**
+ * Takes care of a new user's set password screen. If password is valid,
+ * attempt to stage the user.
+ */
+var FxaModuleSetPassword = (function() {
+
+  function _isPasswordValid(passwordEl) {
+    var passwordValue = passwordEl.value;
+    return passwordValue && passwordEl.validity.valid;
+  }
+
+  function _enableNext(passwordEl) {
+    if (_isPasswordValid(passwordEl)) {
+      FxaModuleUI.enableNextButton();
+    } else {
+      FxaModuleUI.disableNextButton();
+    }
+  }
+
+  function _cleanForm(passwordEl, passwordCheck) {
+    passwordEl.value = '';
+    passwordCheck.checked = false;
+    passwordEl.setAttribute('type', 'password');
+  }
+
+  function _showRegistering() {
+    FxaModuleOverlay.show('fxa-connecting');
+  }
+
+  function _hideRegistering() {
+    FxaModuleOverlay.hide();
+  }
+
+  function _showUserNotCreated() {
+    /*jshint validthis:true */
+    this.showErrorResponse({
+      error: 'CANNOT_CREATE_ACCOUNT'
+    });
+  }
+
+  function _togglePasswordVisibility() {
+    /*jshint validthis:true */
+    var passwordFieldType = !!this.fxaShowPwSet.checked ? 'text' : 'password';
+    this.fxaPwSetInput.setAttribute('type', passwordFieldType);
+  }
+
+  var Module = Object.create(FxaModule);
+  Module.init = function init(options) {
+
+    if (!this.initialized) {
+      // Cache DOM elements
+      this.importElements(
+        'fxa-pw-set-input',
+        'fxa-show-pw-set',
+        'fxa-hello-user'
+      );
+      // Add Listeners
+      this.fxaPwSetInput.addEventListener(
+        'input',
+        function onInput(event) {
+          _enableNext(event.target);
+        }
+      );
+
+      this.fxaShowPwSet.addEventListener(
+        'change',
+        _togglePasswordVisibility.bind(this),
+        false
+      );
+    }
+
+    options = options || {};
+
+    this.email = options.email;
+
+    navigator.mozL10n.setAttributes(this.fxaHelloUser, 'fxa-hello-user2', {
+      email: this.email
+    });
+
+    _cleanForm(
+      this.fxaPwSetInput,
+      this.fxaShowPwSet
+    );
+
+    _enableNext(this.fxaPwSetInput);
+  };
+
+  Module.onNext = function onNext(gotoNextStepCallback) {
+    _showRegistering();
+    FxModuleServerRequest.signUp(
+      this.email,
+      this.fxaPwSetInput.value,
+      function(response) {
+        _hideRegistering();
+
+        FxaModuleManager.setParam('success', true);
+
+        var isAccountCreated = response.accountCreated;
+
+        if (!isAccountCreated) {
+          _showUserNotCreated.call(this);
+          return;
+        }
+
+        gotoNextStepCallback(FxaModuleStates.SIGNUP_SUCCESS);
+      }.bind(this),
+      this.showErrorResponse
+    );
+  };
+
+  return Module;
+
+}());
+

gaia/apps/system/fxa/js/screens/fxam_signin_success.js

@@ -0,0 +1,23 @@
+/* -*- Mode: Java; tab-width: 2; indent-tabs-mode: nil; c-basic-offset: 2 -*- /
+/* vim: set shiftwidth=2 tabstop=2 autoindent cindent expandtab: */
+
+/* global FxaModule, FxaModuleStates */
+/* exported FxaModuleSigninSuccess */
+
+'use strict';
+
+/**
+ * Display the signup success message to the user.
+ */
+var FxaModuleSigninSuccess = (function() {
+
+  var Module = Object.create(FxaModule);
+
+  Module.onNext = function onNext(done) {
+    done(FxaModuleStates.DONE);
+  };
+
+  return Module;
+
+}());
+

gaia/apps/system/fxa/js/screens/fxam_signup_success.js

@@ -0,0 +1,34 @@
+/* -*- Mode: Java; tab-width: 2; indent-tabs-mode: nil; c-basic-offset: 2 -*- /
+/* vim: set shiftwidth=2 tabstop=2 autoindent cindent expandtab: */
+
+/* global FxaModule, FxaModuleStates */
+/* exported FxaModuleSignupSuccess */
+
+'use strict';
+
+/**
+ * Display the signup success message to the user.
+ */
+var FxaModuleSignupSuccess = (function() {
+
+  var Module = Object.create(FxaModule);
+  Module.init = function init(options) {
+    options = options || {};
+    this.importElements(
+      'fxa-will-send-email'
+    );
+
+    navigator.mozL10n.setAttributes(this.fxaWillSendEmail,
+        'fxa-will-send-email2', {
+      email: options.email
+    });
+  };
+
+  Module.onNext = function onNext(done) {
+    done(FxaModuleStates.DONE);
+  };
+
+  return Module;
+
+}());
+