res/imp/login.html

<!--
  This in an HTML Import-able file that contains the JS and HTML Templates for
  the login.

  To use this file import it:

    <link href="/res/imp/login.html" rel="import" />

  There is nothing to instantiate, on load the #login element will be found and
  populated with the users login status.
-->
<script type="text/javascript" charset="utf-8">
(function(){

  var importer__ = new sk.Importer();

  // A Promise that will be resolved with the users current login status.
  //
  // The resolution object looks like:
  //
  //   {
  //     "Email": "fred@example.com",
  //     "LoginURL": "https://..."
  //   }
  //
  // The Email will be the empty string if the user is not logged in.
  sk.Login = new Promise(function(resolve, reject) {
      sk.get('/loginstatus/').then(JSON.parse).then(resolve).catch(reject);
    });

})();
</script>

<!--
  The <login-sk> custom element.

  Uses sk.Login promise to display the current login status and provides
  login/logout links.
-->
<polymer-element name="login-sk">
  <template>
    <style type="text/css" media="screen">
      @media (max-width: 500px) {
        #email {
          display: none;
        }
      }
      #logInOut {
        margin-left: 10px;
      }
      #email,
      #logInOut {
        font-size: 15px;
      }
    </style>
    <span id=email></span>
    <a id=logInOut href=""></a>
  </template>
  <script>
    Polymer({
      ready: function() {
        var ele = this;
        sk.Login.then(function(status) {
          ele.$.email.innerText = status['Email'];
          if (status['Email'] == '') {
            ele.$.logInOut.href = status['LoginURL'];
            ele.$.logInOut.innerText = 'Login';
          } else {
            ele.$.logInOut.href = "/logout/?redirect=" + encodeURIComponent(document.location);
            ele.$.logInOut.innerText = 'Logout';
          }
        });
      }
    });
  </script>
</polymer-element>