Fix #2414, lazily check auth state on My Shots page

mozilla-services · Mar 23, 2017 · ddf21ee · ddf21ee
1 parent d63c48a
commit ddf21ee
Show file tree

Hide file tree

Showing 4 changed files with 48 additions and 13 deletions.
diff --git a/server/src/pages/shotindex/controller.js b/server/src/pages/shotindex/controller.js
@@ -2,16 +2,34 @@ const sendEvent = require("../../browser-send-event.js");
 const page = require("./page").page;
 const { AbstractShot } = require("../../../shared/shot");
 
+const TEN_SECONDS = 10 * 1000;
+
 let model;
 
 exports.launch = function (m) {
-  m.shots = m.shots.map((shot) => new AbstractShot(m.backend, shot.id, shot.json));
-  let match = /[\?&]q=([^&]+)/.exec(location.href);
-  if (match) {
-    m.defaultSearch = decodeURIComponent(match[1]);
+  if (m.hasDeviceId) {
+    m.shots = m.shots.map((shot) => new AbstractShot(m.backend, shot.id, shot.json));
+    let match = /[\?&]q=([^&]+)/.exec(location.href);
+    if (match) {
+      m.defaultSearch = decodeURIComponent(match[1]);
+    }
+    model = m;
+    render();
+    return;
+  }
+  if (window.wantsauth) {
+    if (window.wantsauth.getAuthData()) {
+      location.reload();
+    } else {
+      let authTimeout = setTimeout(() => {
+        location.pathname = "";
+      }, TEN_SECONDS);
+      window.wantsauth.addAuthDataListener((data) => {
+        clearTimeout(authTimeout);
+        location.reload();
+      });
+    }
   }
-  model = m;
-  render();
 };
 
 function render() {

diff --git a/server/src/pages/shotindex/model.js b/server/src/pages/shotindex/model.js
@@ -8,6 +8,7 @@ exports.createModel = function (req) {
   }
   let serverModel = {
     title,
+    hasDeviceId: req.deviceId || null,
     defaultSearch: query || null
   };
   serverModel.shots = req.shots;

diff --git a/server/src/pages/shotindex/server.js b/server/src/pages/shotindex/server.js
@@ -8,16 +8,20 @@ exports.app = app;
 
 app.get("/", function (req, res) {
   if (! req.deviceId) {
-    res.redirect('/?extension-not-installed');
+    _render();
     return;
   }
   let query = req.query.q || null;
   Shot.getShotsForDevice(req.backend, req.deviceId, query).then((shots) => {
-    req.shots = shots;
-    const page = require("./page").page;
-    reactrender.render(req, res, page);
+    _render(shots);
   }).catch((err) => {
     res.type("txt").status(500).send("Error rendering page: " + err);
     console.error("Error rendering page:", err);
   });
+
+  function _render(shots) {
+    req.shots = shots || [];
+    const page = require("./page").page;
+    reactrender.render(req, res, page);
+  }
 });
diff --git a/server/src/pages/shotindex/view.js b/server/src/pages/shotindex/view.js
@@ -10,8 +10,9 @@ class Head extends React.Component {
   render() {
     return (
       <reactruntime.HeadTemplate {...this.props}>
-        <script src={this.props.staticLink("/static/js/shotindex-bundle.js")} async></script>
-        <link rel="stylesheet" href={this.props.staticLink("/static/css/shot-index.css")} />
+        <script src={ this.props.staticLink("/static/js/wantsauth.js") } />
+        <script src={ this.props.staticLink("/static/js/shotindex-bundle.js") } async></script>
+        <link rel="stylesheet" href={ this.props.staticLink("/static/css/shot-index.css") } />
       </reactruntime.HeadTemplate>
     );
   }
@@ -31,7 +32,9 @@ class Body extends React.Component {
       children.push(this.renderShot(shot));
     }
     if (children.length === 0) {
-      if (this.props.defaultSearch) {
+      if (! this.props.hasDeviceId) {
+        children.push(this.renderNoDeviceId());
+      } else if (this.props.defaultSearch) {
         children.push(this.renderNoSearchResults());
       } else {
         children.push(this.renderNoShots());
@@ -68,6 +71,15 @@ class Body extends React.Component {
     );
   }
 
+  renderNoDeviceId() {
+    return (
+      <div className="large-icon-message-container" key="no-shots-found">
+        <div className="large-icon logo-no-shots" />
+        <div className="large-icon-message-string">Looking for your shots...</div>
+      </div>
+    );
+  }
+
   renderNoSearchResults() {
     return (
       <div className="large-icon-message-container" key="no-shots-found">