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(function(reason){
        reject("Problem reaching /loginstatus/ "+reason);
    });
  });

})();
</script>

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

  Uses sk.Login promise to display the current login status and provides
  login/logout links.

  The color of the text in the login-sk element can be controlled by
  the --login-sk-color custom CSS attribute.
-->

<dom-module id="login-sk">
  <style type="text/css" media="screen">
    @media (max-width: 500px) {
      #email {
        display: none;
      }
    }

    #logInOut {
      margin-left: 10px;
    }

    #email,
    #logInOut {
      font-size: 15px;
    }

    span,
    a[href] {
      color: var(--login-sk-color, lightgray)
    }
  </style>
  <template>
    <span id=email>{{email}}</span>
    <a id=logInOut href=""></a>
  </template>
</dom-module>

<script>
  Polymer({
    is: "login-sk",

    properties: {
      email: {
        type: String,
        value: '',
        notify: true,
      }
    },

    ready: function() {
      var that = this;
      sk.Login.then(function(status) {
        that.email = status['Email'];
        if (that.email == '') {
          that.$.logInOut.href = status['LoginURL'];
          that.$.logInOut.innerText = 'Login';
        } else {
          that.$.logInOut.href = "/logout/?redirect=" + encodeURIComponent(document.location);
          that.$.logInOut.innerText = 'Logout';
        }
      });
    }
  });
</script>