config_service: Add authentication to the UI.

appengine/config_service/ui/src/config-ui/config-ui.html

 <!--
   Copyright 2017 The LUCI Authors. All rights reserved.
   Use of this source code is governed under the Apache License, Version 2.0
   that can be found in the LICENSE file.
 -->
 
 <link rel="import" href="../../bower_components/polymer/polymer.html">
 <link rel="import" href="../../bower_components/app-layout/app-layout.html">
 <link rel="import" href="../../bower_components/paper-search/paper-search-bar.html">
 <link rel="import" href="../../bower_components/app-route/app-location.html">
 <link rel="import" href="../../bower_components/app-route/app-route.html">
 
+<link rel="import" href="../../common/auth-signin.html">
 <link rel="import" href="config-set.html">
 <link rel="import" href="front-page.html">
 
 <dom-module id="config-ui">
   <template>
     <style>
+      * {
+        font-family: sans-serif;
+      }
+
       app-toolbar {
         background-color: #efefef;
         color: #232323;
       }
 
       app-header {
         @apply --layout-fixed-top;
       }
 
       .logo {
         height: 100%;
       }
 
+      .right {
+        margin-left:15px;
+      }
+
       .title {
         padding-left: 1%;
         padding-bottom: 0.5%;
         font-size: 150%;
-        font-family: sans-serif;
       }
     </style>
 
     <app-header reveals>
       <app-toolbar>
         <image class="logo" src="/static/images/chromium.png"/>
         <div class="title" main-title>
           Configuration Service (not fully implemented)
         </div>
+
+        <template is="dom-if" if="[[client_id]]">
+          <auth-signin
+              class="right"
+              client_id="[[client_id]]"
+              auth_headers="{{auth_headers}}"
+              profile="{{profile}}"
+              signed_in="{{signed_in}}">
+          </auth-signin>
+        </template>
+        <template is="dom-if" if="[[!client_id]]">
+          <div class="right">No OAauth client id found.</div>
+        </template>
       </app-toolbar>
     </app-header>
 
 
     <app-location route="{{route}}" use-hash-as-path></app-location>
-    <app-route  route="{{route}}" 
-                pattern="/services/:serviceName" 
-                data="{{serviceData}}" 
-                tail="{{serviceTail}}" 
+    <app-route  route="{{route}}"
+                pattern="/services/:serviceName"
+                data="{{serviceData}}"
+                tail="{{serviceTail}}"
                 active="{{serviceActive}}"></app-route>
 
     <app-route  route="{{route}}" 
                 pattern="/projects/:projectName" 
                 data="{{projectData}}" 
                 tail="{{projectTail}}" 
-                active="{{projectActive}}"></app-route>-->      
+                active="{{projectActive}}"></app-route>
 
     <app-route  route="{{route}}" 
                 pattern="/" 
                 active="{{frontPageActive}}"></app-route>
 
     <div hidden$="[[!frontPageActive]]">

[Sergey Berezin, 2017/06/28 19:53:02]

nit: would it also work if we wrap the subpages in <template is="dom-if"
if="[[frontPageActive]]"> ?

IIUC, this would remove inactive content from the DOM, and in particular,
disable all AJAX calls from the hidden elements. WDYT?

[cwpayton, 2017/06/29 22:28:15]

This sounds like it would work a bit better for what we're trying to do. I'll
integrate this change now.

-      <front-page></front-page>
+      <front-page auth_headers="{{auth_headers}}"
+                  hidden="[[!frontPageActive]]"></front-page>
     </div>
 
     <div hidden$="[[!serviceActive]]">
       <config-set category="services"
                   name="{{serviceData.serviceName}}"
-                  route="{{serviceTail}}"></config-set>
+                  route="{{serviceTail}}"
+                  auth_headers="{{auth_headers}}"
+                  hidden="[[!serviceActive]]"></config-set>
     </div>
 
     <div hidden$="[[!projectActive]]">
       <config-set category="projects"
                   name="{{projectData.projectName}}"
-                  route="{{projectTail}}"></config-set>
+                  route="{{projectTail}}"
+                  auth_headers="{{auth_headers}}"
+                  hidden="[[!projectActive]]"></config-set>
     </div>
 
   </template>
 
   <script>
     Polymer({
       is: 'config-ui',
+
+      properties: {
+        auth_headers: {
+          type: Object,
+          notify: true
+        },
+
+        client_id: {
+          type: String,
+          value: null
+        },
+
+        profile: {
+          type: Object,
+          notify: true
+        }
+      },
       
       ready: function() {
         this.async(function() {
           // If the path is blank, redirect to /
           if (!this.route.path) {
             this.set('route.path', '/');
           }
         });
       },
 
     });
   </script>
 </dom-module>