Add the ability to logout.

appengine/chromium_rietveld/new_static/components/cr-app.html

 <!-- Copyright (c) 2014 The Chromium Authors. All rights reserved.
 Use of this source code is governed by a BSD-style license that can be
 found in the LICENSE file. -->
 
 <script src="../lib/sugar.js"></script>
 <script src="../bower_components/gif.js/dist/gif.js"></script>
 
 <link rel="import" href="../bower_components/polymer/polymer.html">
 <link rel="import" href="../bower_components/app-router/app-router.html">
 
@@ skipping 89 matching lines @@
             }
 
             app-router,
             active-route {
                 display: block;
             }
 
             app-route {
                 display: none;
             }
-
-            .view-links .login-link,
-            .view-links .settings-link {
-                display: none;
-            }
-
-            :host-context(.login) .settings-link {
-                display: block;
-            }
-
-            :host-context(.no-login) .login-link {
-                display: block;
-            }
         </style>
         <header>
             <div class="title">
                 <a href="/">
                     <img src="../images/chromium-logo.png">
                     <span>Chromium Code Review</span>
                 </a>
             </div>
             <div class="view-links">
                 <a class="bug-report"
                    href="https://code.google.com/p/chromium/issues/entry?labels=Type-Bug,Pri-2,Infra-Area-Rietveld"
                    target="_blank">Report a bug</a>
                 <a href="/search" class="search-link">Search</a>
-                <a href="/settings" class="settings-link">Settings</a>
-                <cr-action on-tap="{{ handleLogin }}" class="login-link" white>Login</cr-action>
+                <template if="{{ user }}">
+                    <a href="/settings">Settings</a>
+                </template>
+                <cr-action on-tap="{{ handleLogin }}" white>
+                    <template if="{{ user }}">
+                        Logout
+                    </template>
+                    <template if="{{ !user }}">
+                        Login
+                    </template>
+                </cr-action>
             </div>
         </header>
         <app-router id="router" trailingSlash="ignore">
             <app-route path="/" element="cr-inbox-view"></app-route>
             <app-route path="/search" element="cr-search-view"></app-route>
             <app-route path="/settings" element="cr-settings-view"></app-route>
             <app-route path="/user/:username" element="cr-user-view"></app-route>
             <app-route path="/:issueId" element="cr-issue-view"></app-route>
         </cr-view>
     </template>
     <script>
         Polymer({
+            created: function() {
+                this.user = User.current;
+            },
             attached: function() {
                 var self = this;
                 User.loadCurrentUser({cached:true}).then(function() {
                     self.classList.add("login");
                 }).catch(function(e) {
                     self.classList.add("no-login");
                 });
             },
             handleNavigate: function(event) {
                 var currentUrl = window.location.pathname + window.location.search + window.location.hash;
                 if (currentUrl != event.detail.url)
                     window.history.pushState(null, null, event.detail.url);
                 this.$.router.go();
             },
             handleLogin: function() {
-                window.location.href = User.getLoginUrl();
+                if (this.user)
+                    location.href = User.getLogoutUrl();

[ojan, 2015/02/08 05:49:08]

It's kinda funny to recreate links here. I would just get rid of the on-tap
handler and just put <a>'s in the template with the right URL. Up to you though.

+                else
+                    location.href = User.getLoginUrl();
             },
         });
     </script>
 </polymer-element>