From b829be29b6125de5f6663d7c05daefc57ed4f663 Mon Sep 17 00:00:00 2001
From: Eelco Dolstra <eelco.dolstra@logicblox.com>
Date: Thu, 28 Apr 2016 17:13:02 +0200
Subject: [PATCH] Lazy load Google and Persona login stuff

---
 src/root/auth.tt   | 66 ++++++++++++++++++++++++++++++----------------
 src/root/layout.tt |  1 -
 src/root/topbar.tt | 15 ++++-------
 3 files changed, 48 insertions(+), 34 deletions(-)

diff --git a/src/root/auth.tt b/src/root/auth.tt
index 32e8ec58..4374daba 100644
--- a/src/root/auth.tt
+++ b/src/root/auth.tt
@@ -1,5 +1,13 @@
 [% IF c.user_exists  %]
 
+  [% IF c.user.type == 'google' %]
+    <script src="https://apis.google.com/js/platform.js" async="1" defer="1"></script>
+  [% END %]
+
+  [% IF c.user.type == 'persona' %]
+    <script src="https://login.persona.org/include.js"></script>
+  [% END %]
+
   <script>
     function finishSignOut() {
       $.post("[% c.uri_for('/logout') %]")
@@ -65,6 +73,15 @@
       return false;
     });
 
+    $("#sign-in-menu").on("click", function() {
+      [% IF c.config.enable_google_login %]
+        $.getScript("https://apis.google.com/js/platform.js");
+      [% END %]
+      [% IF c.config.enable_persona %]
+        $.getScript("https://login.persona.org/include.js");
+      [% END %]
+    });
+
   </script>
 
   [% IF c.config.enable_google_login %]
@@ -79,30 +96,33 @@
           }
         });
         return false;
-      };
+        };
+
+      $("#google-signin").click(function() {
+        $(".g-signin2:first-child > div").click();
+      });
+    </script>
+  [% END %]
+
+  [% IF c.config.enable_persona %]
+    <script>
+      $("#persona-signin").click(function() {
+
+        navigator.id.watch({
+          onlogin: function(assertion) {
+            requestJSON({
+              url: "[% c.uri_for('/persona-login') %]",
+              data: "assertion=" + assertion,
+              type: 'POST',
+              success: function(data) { window.location.reload(); },
+              postError: function() { navigator.id.logout(); }
+            });
+          }
+        });
+
+        navigator.id.request({ siteName: 'Hydra' });
+      });
     </script>
   [% END %]
 
 [% END %]
-
-[% IF c.config.enable_persona %]
-  <script src="https://login.persona.org/include.js"></script>
-
-  <script>
-    navigator.id.watch({
-      onlogin: function(assertion) {
-        requestJSON({
-          url: "[% c.uri_for('/persona-login') %]",
-          data: "assertion=" + assertion,
-          type: 'POST',
-          success: function(data) { window.location.reload(); },
-          postError: function() { navigator.id.logout(); }
-        });
-      }
-    });
-
-    $("#persona-signin").click(function() {
-      navigator.id.request({ siteName: 'Hydra' });
-    });
-  </script>
-[% END %]
diff --git a/src/root/layout.tt b/src/root/layout.tt
index 01424f90..d16043de 100644
--- a/src/root/layout.tt
+++ b/src/root/layout.tt
@@ -43,7 +43,6 @@
 
     [% IF c.config.enable_google_login %]
       <meta name="google-signin-client_id" content="[% c.config.google_client_id %]">
-      <script src="https://apis.google.com/js/platform.js" async="1" defer="1"></script>
     [% END %]
 
     [% tracker %]
diff --git a/src/root/topbar.tt b/src/root/topbar.tt
index 54051fa8..0503d15c 100644
--- a/src/root/topbar.tt
+++ b/src/root/topbar.tt
@@ -1,5 +1,5 @@
 [% BLOCK makeSubMenu %]
-  <li class="dropdown">
+  <li class="dropdown" [% IF id; HTML.attributes(id => id); END %] >
     <a class="dropdown-toggle" href="#" data-toggle="dropdown">[% title %]<b class="caret"></b></a>
     <ul class="dropdown-menu">
       [% content %]
@@ -130,19 +130,14 @@
       <a href="#" onclick="signOut();">Sign out</a>
     </li>
   [% ELSE %]
-    [% WRAPPER makeSubMenu title="Sign in" %]
+    [% WRAPPER makeSubMenu title="Sign in" id="sign-in-menu" %]
       [% IF c.config.enable_google_login %]
-        <li>
-          <a><div class="g-signin2" data-onsuccess="onGoogleSignIn" data-theme="dark"></div></a>
-        </li>
+        <div style="display: none" class="g-signin2" data-onsuccess="onGoogleSignIn" data-theme="dark"></div></a>
+        <li><a href="#" id="google-signin">Sign in with Google</a></li>
         <li class="divider"></li>
       [% END %]
       [% IF c.config.enable_persona %]
-        <li>
-          <a href="#" id="persona-signin">
-            <img src="[% c.uri_for("/static/images/persona_sign_in_blue.png") %]" alt="Sign in with Persona" />
-          </a>
-        </li>
+        <li><a href="#" id="persona-signin">Sign in with Persona</a></li>
         <li class="divider"></li>
       [% END %]
       <li>