Make login optional. Add login icon.

app.yaml

@@ -9,7 +9,6 @@ handlers:
   static_files: static/babystats.html
   upload: static/babystats.html
   secure: always
-  login: required
   http_headers:
     X-Content-Type-Options: nosniff
 
@@ -17,14 +16,12 @@ handlers:
   static_files: static/babystats.html
   upload: static/babystats.html
   secure: always
-  login: required
   http_headers:
     X-Content-Type-Options: nosniff
 
 - url: /static
   static_dir: static
   secure: always
-  login: required
   http_headers:
     X-Content-Type-Options: nosniff
 

static/babystats.js

@@ -64,7 +64,12 @@ var BabyStats = function(container) {
 
   this.intervals_ = {};
 
+  this.buildStylesheet_();
+
   this.cosmo_ = new Cosmopolite();
+  this.cosmo_.addEventListener('login', this.onLogin_.bind(this));
+  this.cosmo_.addEventListener('logout', this.onLogout_.bind(this));
+
   this.client_id_ = this.cosmo_.uuid();
   hogfather.PublicChat.Join(this.cosmo_, id).then(this.onChatReady_.bind(this));
 };
@@ -78,7 +83,6 @@ BabyStats.prototype.onChatReady_ = function(chat) {
   this.chat_ = chat;
 
   this.buildCells_();
-  this.buildStylesheet_();
   this.buildLayout_();
 
   window.addEventListener('resize', this.rebuildIfNeeded_.bind(this));
@@ -97,6 +101,34 @@ BabyStats.prototype.onChatReady_ = function(chat) {
 };
 
 
+/**
+ * @param {Event} e
+ * @private
+ */
+BabyStats.prototype.onLogin_ = function(e) {
+  this.loginRule_.style.visibility = 'hidden';
+};
+
+
+/**
+ * @param {Event} e
+ * @private
+ */
+BabyStats.prototype.onLogout_ = function(e) {
+  this.loginURL_ = e.detail.login_url;
+  this.loginRule_.style.visibility = 'visible';
+};
+
+
+
+/**
+ * @private
+ */
+BabyStats.prototype.onLoginClick_ = function() {
+  window.open(this.loginURL_);
+};
+
+
 /**
  * @param {Event} e
  * @private
@@ -230,6 +262,16 @@ BabyStats.prototype.buildStylesheet_ = function() {
   var focus = style.sheet.cssRules[0];
   focus.style.outline = 'none';
 
+  style.sheet.insertRule('.babyStatsLogin {}', 0);
+  this.loginRule_ = style.sheet.cssRules[0];
+  this.loginRule_.style.position = 'absolute';
+  this.loginRule_.style.top = 0;
+  this.loginRule_.style.right = 0;
+  this.loginRule_.style.height = '32px';
+  this.loginRule_.style.width = '32px';
+  this.loginRule_.style.margin = '4px';
+  this.loginRule_.style.visibility = 'hidden';
+
   style.sheet.insertRule('babyStatsGridOverlay {}', 0);
   var gridOverlay = style.sheet.cssRules[0];
   gridOverlay.style.display = 'flex';
@@ -522,6 +564,12 @@ BabyStats.prototype.buildLayout_ = function() {
   this.yourName_.addEventListener('input', this.onYourNameChange_.bind(this));
   this.container_.appendChild(this.yourName_);
 
+  var login = document.createElement('img');
+  this.addCSSClass_(login, 'babyStatsLogin');
+  login.src = '/static/google.svg';
+  login.addEventListener('click', this.onLoginClick_.bind(this));
+  this.container_.appendChild(login);
+
   this.gridContainer_ = document.createElement('babyStatsGridContainer');
   this.container_.appendChild(this.gridContainer_);