B2g dev tos pp

lib/static/views.js

@@ -71,17 +71,21 @@ function isProductionEnvironment() {
     ].indexOf(config.get('public_url')) !== -1;
 }
 
+const X_FRAME_ALLOWED = [
+  '/communication_iframe',
+  '/relay',
+  '/embedded_tos',
+  '/embedded_privacy'
+];
 
 exports.setup = function(app) {
 
   // Issue#1353 This is kind of dirty, but this is our last chance
   // to fixup headers for an ETag cache hit
   // x-frame-options - Allow these to be run within a frame
   app.use(function (req, res, next) {
-    if (req.path === '/communication_iframe') {
-      res.removeHeader('x-frame-options');
-    } else if (req.path === '/relay') {
-      res.removeHeader('x-frame-options');
+    if (X_FRAME_ALLOWED.indexOf(req.path) !== -1) {
+         res.removeHeader('x-frame-options');
     }
     next();
   });
@@ -219,11 +223,31 @@ exports.setup = function(app) {
   });
 
   app.get("/tos", function(req, res) {
-    renderCachableView(req, res, 'tos.ejs', {title: _('Terms of Service'), fullpage: false});
+    renderCachableView(req, res, 'tos.ejs', {
+      title: _('Terms of Service'),
+      fullpage: false
+    });
+  });
+
+  app.get("/embedded_tos", function(req, res) {
+    renderCachableView(req, res, 'tos.ejs', {
+      title: _('Terms of Service'),
+      embedded: true
+    });
   });
 
   app.get("/privacy", function(req, res) {
-    renderCachableView(req, res, 'privacy.ejs', {title: _('Privacy Policy'), fullpage: false});
+    renderCachableView(req, res, 'privacy.ejs', {
+      title: _('Privacy Policy'),
+      fullpage: false
+    });
+  });
+
+  app.get("/embedded_privacy", function(req, res) {
+    renderCachableView(req, res, 'privacy.ejs', {
+      title: _('Privacy Policy'),
+      embedded: true
+    });
   });
 
   app.get("/verify_email_address", function(req, res) {

lib/static_resources.js

@@ -109,6 +109,7 @@ var dialog_js = und.flatten([
     '/dialog/js/modules/is_this_your_computer.js',
     '/dialog/js/modules/set_password.js',
     '/dialog/js/modules/rp_info.js',
+    '/dialog/js/modules/inline_tospp.js',
     '/dialog/js/start.js'
   ]]);
 

resources/static/common/css/style.css

@@ -535,7 +535,11 @@ footer .help {
 
 #showDevelopment {
   position: absolute;
-  top: 0;
+  /**
+   * The TOS/PP agreement close button is in the upper right corner. To avoid
+   * interfering with it, push the development button down a bit.
+   */
+  top: 50px;
   right: 0;
   width: 50px;
   height: 50px;

resources/static/dialog/css/m.css

@@ -487,5 +487,11 @@
     -webkit-animation-name: none;
   }
 
+  /**
+   * The margins are too large on the desktop lightbox.
+   */
+  .lightbox {
+    padding: 45px 5px 5px 5px;
+  }
 }
 

resources/static/dialog/css/style.css

@@ -594,3 +594,52 @@ a.emphasize:active {
 #authentication_form span.label {
   display: none;
 }
+
+/**
+ * The lightbox shows TOS/PP agreements.
+ */
+.lightbox {
+  display: block;
+  position: fixed;
+  top: 0;
+  right: 0;
+  left: 0;
+  bottom: 0;
+  /**
+   * The width and height are needed for webkit browsers
+   * to size the iframe properly
+   */
+  width: 100%;
+  height: 100%;
+  z-index: 900;
+  background-color: #111;
+  background-color: rgba(0,0,0,.9);
+  padding: 50px 60px 20px 60px;
+}
+
+.lightbox .contents {
+  width: 100%;
+  height: 100%;
+  border-radius: 4px;
+  border: 2px solid grey;
+  background-color: #fff;
+  border: 0;
+}
+
+.lightbox .close {
+  margin-top: -35px;
+  display: block;
+  color: red;
+  position: absolute;
+  right: 10px;
+  background: url("/common/i/closex.png") no-repeat scroll right center #000;
+  background: url("/common/i/closex.png") no-repeat scroll right center rgba(0, 0, 0, 0.6);
+  border-radius: 6px;
+  padding: 5px 28px 5px 5px;
+  font-size: 12px;
+  font-weight: bold;
+  text-transform: uppercase;
+  text-shadow: none;
+  color: #ccc;
+}
+

resources/static/dialog/js/modules/inline_tospp.js

@@ -0,0 +1,88 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+BrowserID.Modules.InlineTosPp = (function() {
+  "use strict";
+
+  // B2G requires special TOS/PP handling. TOS/PP agreements must be shown in
+  // a modal iframe instead of opening a new tab. Take care of that.
+
+  var bid = BrowserID,
+      dom = bid.DOM,
+      renderer = bid.Renderer,
+      complete = bid.Helpers.complete,
+      BODY_SELECTOR = "body",
+      TOSPP_OPENER_SELECTOR = ".tospp a",
+      TOSPP_SELECTOR = "#tosppmodal",
+      TOSPP_CLOSE_SELECTOR = "#tosppmodal",
+      TOSPP_IFRAME = "#tosppframe",
+      IFRAME_PARENT_SELECTOR = "body",
+      sc;
+
+  var Module = bid.Modules.PageModule.extend({
+    start: function(options) {
+      options = options || {};
+
+      var self=this;
+
+      sc.start.call(self, options);
+
+      // Use event propagation to avoid using jQuery .live events directly.
+      self.bind(BODY_SELECTOR, 'click', function(event) {
+        var target = event.target;
+        if (dom.is(target, TOSPP_OPENER_SELECTOR)) {
+          event.preventDefault();
+          showTOSPP.call(self, target.href);
+        }
+      });
+
+      complete(options.ready);
+    },
+
+    stop: function() {
+      removeTOSPP.call(this);
+      sc.stop.call(this);
+    },
+
+    // BEGIN TESTING API
+    show: showTOSPP,
+    close: closeTOSPP,
+    remove: removeTOSPP
+    // END TESTING API
+  });
+
+  sc = Module.sc;
+
+  function showTOSPP(url) {
+    /*jshint validthis:true*/
+    var self=this;
+
+    if (!self._tospp) {
+      self._tospp = renderer.append(IFRAME_PARENT_SELECTOR, "inline_tospp", {
+        no_iframe: self.options.no_iframe
+      });
+      self.click(TOSPP_CLOSE_SELECTOR, closeTOSPP, self);
+    }
+
+    dom.setAttr(TOSPP_IFRAME, 'src', url);
+    dom.show(TOSPP_SELECTOR);
+  }
+
+  function closeTOSPP() {
+    /*jshint validthis:true*/
+    if (this._tospp) {
+      dom.hide(TOSPP_SELECTOR);
+    }
+  }
+
+  function removeTOSPP() {
+    /*jshint validthis: true*/
+    var tosppEl = this._tospp;
+    if (tosppEl) {
+      dom.removeElement(tosppEl);
+    }
+  }
+
+  return Module;
+}());
+

resources/static/dialog/js/start.js

@@ -53,10 +53,12 @@
       moduleManager.register("xhr_disable_form", modules.XHRDisableForm);
       moduleManager.register("set_password", modules.SetPassword);
       moduleManager.register("rp_info", modules.RPInfo);
+      moduleManager.register("inline_tospp", modules.InlineTosPp);
 
       moduleManager.start("xhr_delay");
       moduleManager.start("xhr_disable_form");
       moduleManager.start("dialog");
+      moduleManager.start("inline_tospp");
     }
   });
 }());

resources/static/dialog/views/inline_tospp.ejs

@@ -0,0 +1,23 @@
+<!-- This Source Code Form is subject to the terms of the Mozilla Public
+   - License, v. 2.0. If a copy of the MPL was not distributed with this
+   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
+
+
+<div id="tosppmodal" class="lightbox">
+  <a href="#" class="close">Close</a>
+    <!--
+    Travis-CI uses PhantomJS 1.8.1 which contains a crash bug when appending
+    and removing an iframe. The Phantom bug is tracked at:
+    https://github.com/ariya/phantomjs/issues/10947
+    The Travis bug is tracked at:
+    https://github.com/travis-ci/travis-ci/issues/1074
+    When Travis updates its version of Phantom, the no_iframe branch
+    can be removed.
+    -->
+  <% if (typeof no_iframe !== "undefined" && no_iframe === true) { %>
+    <div class="contents" id="tosppframe" name="tosppframe"></div>
+  <% } else { %>
+    <iframe class="contents" id="tosppframe" name="tosppframe" sandbox security="restricted"></iframe>
+  <% } %>
+</div>
+

resources/static/include_js/_include.js

@@ -324,6 +324,12 @@
       checkRenamed(options, "tosURL", "termsOfService");
       checkRenamed(options, "privacyURL", "privacyPolicy");
 
+      if (document.location.protocol !== "https:") {
+        warn("privacyPolicy and termsOfService are only allowed on https domains");
+        delete options.termsOfService;
+        delete options.privacyPolicy;
+      }
+
       if (options.termsOfService && !options.privacyPolicy) {
         warn("termsOfService ignored unless privacyPolicy also defined");
       }
@@ -332,6 +338,7 @@
         warn("privacyPolicy ignored unless termsOfService also defined");
       }
 
+
       options.rp_api = getRPAPI();
       // reset the api_called in case the site implementor changes which api
       // method called the next time around.

resources/static/pages/css/ie8.css

@@ -6,10 +6,29 @@
  * These fixes are specific to IE8 for the main site
  */
 
+/**
+ * IE8 can only handle one background image in a CSS declaration
+ */
 body {
-  background-image: url("/pages/i/marketplace-header.png");
-  background-position: center top;
-  background-repeat: repeat-x;
+  background: #6a7b86 url("/pages/i/marketplace-header.png") repeat-x center top;
+}
+
+
+/**
+ * IE8 in the embedded context does not respect the IFRAME size and shows a
+ * scroll bar unless the wrapper's width is set to auto
+ */
+.embedded #wrapper {
+  background: #fff;
+  width: auto;
+}
+
+/**
+ * IE8 doesn't respect media queries that sets the padding to 20px. Duplicate
+ * that logic here.
+ */
+.embedded #content {
+  padding: 20px;
 }
 
 

resources/static/pages/css/m.css

@@ -196,7 +196,7 @@
     display: none;
   }
 
-  #legal {
+  #legal, .embedded #legal {
     padding: 20px;
     text-align: left;
   }

resources/static/pages/css/style.css

@@ -24,6 +24,13 @@ body {
   color: #fff;
 }
 
+/**
+ * In an embedded context, get rid of all background colors
+ */
+.embedded {
+  background: #fff;
+}
+
 #errorBackground {
   position: absolute;
   position: fixed;
@@ -107,6 +114,13 @@ body {
   padding: 50px 0;
 }
 
+/**
+ * embedded content should not show any of the sandstone background
+ */
+.embedded #content {
+  padding: 0;
+}
+
 h1 {
   margin-bottom: 35px;
 }
@@ -120,6 +134,13 @@ h1 {
   padding: 75px 125px;
 }
 
+/**
+ * embedded content doesn't really need that humongous padding.
+ */
+.embedded #legal {
+  padding: 25px 50px;
+}
+
 #manage {
   padding: 75px;
 }

resources/static/test/cases/dialog/js/misc/state.js

@@ -284,12 +284,16 @@
     equal(actions.info.doAuthenticate.email, TEST_EMAIL, "authenticate called with the correct email");
   });
 
-  test("start - RPInfo always started, issuer set", function() {
-    mediator.publish("start", {
-      termsOfService: "https://browserid.org/TOS.html",
-      privacyPolicy: "https://browserid.org/priv.html",
-      forceIssuer: "fxos_issuer"
-    });
+  test("start - RPInfo always started, issuer set, inline_tosspp not started", function() {
+    try {
+      mediator.publish("start", {
+        termsOfService: "https://browserid.org/TOS.html",
+        privacyPolicy: "https://browserid.org/priv.html",
+        forceIssuer: "fxos_issuer"
+      });
+    } catch(e) {
+      ok(false, "exception not expected");
+    }
 
     ok(actions.info.doRPInfo.termsOfService, "doRPInfo called with termsOfService set");
     ok(actions.info.doRPInfo.privacyPolicy, "doRPInfo called with privacyPolicy set");