config_service: Add authentication to the UI.

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

Index: appengine/config_service/ui/src/config-ui/config-ui.html
diff --git a/appengine/config_service/ui/src/config-ui/config-ui.html b/appengine/config_service/ui/src/config-ui/config-ui.html
index fd09d9199373a94c3115bc35673a07f9d775a224..f4f714e211690dcd55b62044a74a04ab471ae5ab 100644
--- a/appengine/config_service/ui/src/config-ui/config-ui.html
+++ b/appengine/config_service/ui/src/config-ui/config-ui.html
@@ -10,12 +10,17 @@
 <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;
@@ -29,11 +34,14 @@
         height: 100%;
       }
 
+      .right {
+        margin-left:15px;
+      }
+
       .title {
         padding-left: 1%;
         padding-bottom: 0.5%;
         font-size: 150%;
-        font-family: sans-serif;
       }
     </style>
 
@@ -43,48 +51,70 @@
         <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>-->      
+    <app-route  route="{{route}}"
+                pattern="/projects/:projectName"
+                data="{{projectData}}"
+                tail="{{projectTail}}"
+                active="{{projectActive}}"></app-route>
 
-    <app-route  route="{{route}}" 
-                pattern="/" 
+    <app-route  route="{{route}}"
+                pattern="/"
                 active="{{frontPageActive}}"></app-route>
 
-    <div hidden$="[[!frontPageActive]]">
-      <front-page></front-page>
-    </div>
+    <template is="dom-if" if="[[frontPageActive]]">
+      <front-page auth_headers="{{auth_headers}}"></front-page>
+    </template>
 
-    <div hidden$="[[!serviceActive]]">
+    <template is="dom-if" if="[[serviceActive]]">
       <config-set category="services"
                   name="{{serviceData.serviceName}}"
-                  route="{{serviceTail}}"></config-set>
-    </div>
+                  route="{{serviceTail}}"
+                  auth_headers="{{auth_headers}}"></config-set>
+    </template>
 
-    <div hidden$="[[!projectActive]]">
+    <template is="dom-if" if="[[projectActive]]">
       <config-set category="projects"
                   name="{{projectData.projectName}}"
-                  route="{{projectTail}}"></config-set>
-    </div>
+                  route="{{projectTail}}"
+                  auth_headers="{{auth_headers}}"></config-set>
+    </template>
 
   </template>
 
   <script>
     Polymer({
       is: 'config-ui',
+
+      properties: {
+        client_id: {
+          type: String,
+          value: null
+        }
+      },
       
       ready: function() {
         this.async(function() {