appengine/findit/ui/elements/auth-login.html

<link rel="import" href="/bower_components/polymer/polymer.html">

<dom-module id="auth-login">
  <template>
    <style>
      a, span {
        text-decoration: none;
        color: #fff;
      }

      a:hover {
        color: black;
      }
    </style>

    <template is="dom-if" if="[[email]]">
      <span>[[email]]</span>
      <template is="dom-if" if="[[isAdmin]]">
        <span>(admin)</span>
      </template>
      <template is="dom-if" if="[[logoutUrl]]">
        |
        <a href="[[logoutUrl]]">Log out</a>
      </template>
    </template>
    <template is="dom-if" if="[[loginUrl]]">
      <a href="[[loginUrl]]">Log in</a>
    </template>
  </template>

  <script src="../js/common.js"></script>

  <script>
    (function() {
      'use strict';

      Polymer({
        is: 'auth-login',

        properties: {
          isAdmin: {
            type: Boolean,
            value: false,
          },
          email: {
            type: String,
            value: undefined,
          },
          loginUrl: {
            type: String,
            value:undefined,
          },
          logoutUrl: {
            type: String,
            value:undefined,
          },
          loginRequired: {
            type: Boolean,
            value: false,
          },
        },

        observers: [
          'checkPermission(email, loginRequired)',
        ],

        checkPermission: function(email, loginRequired) {
          // In Polymer 2.0 and above, observers need to check for undefined
          // arguments. Refer "Update Observers" section at
          // https://www.polymer-project.org/2.0/docs/upgrade
          if (email === undefined) return;
          if ((!email || !email.endsWith('@google.com')) && loginRequired) {
            displayMessage(100);  // Permission.
          }
        },
      });
    })();
  </script>
</dom-module>