Add login status and logout option to the toolbar (#2242)

* Init logout component

* Update kd-action-separator style

* Mark auth menu with red icon when auth was skipped

* Add logout method to auth service

* Clean up the code

* Display login status

* Update login page styling

* Fix lint errors

* Move login status check to $onInit

* Rename auth to control panel

* Remove redundant stylesheet rule

* Add progress spinner for auth status field

* Remove redundant auth status

* Fix lint errors

i18n/messages-en.xtb

@@ -10,6 +10,9 @@
   <translation id="6783150167357318030" key="MSG_ACTION_BAR_DELETE_TOOLTIP" desc="Generic &quot;Delete some resource&quot; tooltip text which appears over the delete icon on the global action bar.">Delete <ph name="RESOURCE_NAME"/></translation>
   <translation id="1421031463694814701" key="MSG_ACTION_BAR_EDIT_TOOLTIP" desc="Generic &quot;Edit some resource&quot; tooltip text which appears over the edit icon on the global action bar.">Edit <ph name="RESOURCE_NAME"/></translation>
   <translation id="1024358167652076581" key="MSG_ALL_NAMESPACES" desc="Text for dropdown item that indicates that no namespace was selected">All namespaces</translation>
+  <translation id="2436932884134192170" key="MSG_AUTH_STATUS_HEADER" desc="Login status displayed when authorization header is used.">Logged in with auth header</translation>
+  <translation id="2593766780781854099" key="MSG_AUTH_STATUS_SKIPPED" desc="Login status displayed when default service account is used.">Default service account</translation>
+  <translation id="7811526624157700330" key="MSG_AUTH_STATUS_TOKEN" desc="Login status displayed when token is used.">Logged in with token</translation>
   <translation id="6614117428496734699" key="MSG_BREADCRUMBS_ABOUT_LABEL" desc="Label 'About' that appears as a breadcrumbs on the action bar.">About</translation>
   <translation id="1153397682574555638" key="MSG_BREADCRUMBS_CLUSTER_LABEL" desc="Label 'Cluster' that appears as a breadcrumbs on the action bar.">Cluster</translation>
   <translation id="5346529710805392125" key="MSG_BREADCRUMBS_CONFIG_AND_STORAGE_LABEL" desc="Label 'Config and storage' that appears as a breadcrumbs on the action bar.">Config and storage</translation>
@@ -23,7 +26,7 @@
   <translation id="8885204956315323333" key="MSG_BREADCRUMBS_INGRESSS_LABEL" desc="Label 'Ingresses' that appears as a breadcrumbs on the action bar.">Ingresses</translation>
   <translation id="2741276106482217695" key="MSG_BREADCRUMBS_INTERNALERROR_LABEL" desc="Label for internal error page for breadcrumbs on the action bar.">Internal error</translation>
   <translation id="2024511088483477440" key="MSG_BREADCRUMBS_JOBS_LABEL" desc="Label 'Jobs' that appears as a breadcrumbs on the action bar.">Jobs</translation>
-  <translation id="6766334846566612127" key="MSG_BREADCRUMBS_LOGIN_LABEL" desc="Label 'Log in' that appears as a breadcrumbs on the action bar.">Log in</translation>
+  <translation id="7001335550079103928" key="MSG_BREADCRUMBS_LOGIN_LABEL" desc="Label 'Log in' that appears as a breadcrumbs on the action bar.">Login</translation>
   <translation id="1050029015813261838" key="MSG_BREADCRUMBS_LOGS_LABEL" desc="Breadcrum label for the logs view.">Logs</translation>
   <translation id="7538864180606148657" key="MSG_BREADCRUMBS_NAMESPACES_LABEL" desc="Label 'Namespaces' that appears as a breadcrumbs on the action bar.">Namespaces</translation>
   <translation id="1946322401100894439" key="MSG_BREADCRUMBS_NODES_LABEL" desc="Label 'Nodes' that appears as a breadcrumbs on the action bar.">Nodes</translation>
@@ -43,6 +46,9 @@
   <translation id="1656728804447365846" key="MSG_BREADCRUMBS_WORKLOADS_LABEL" desc="Label 'Workloads' that appears as a breadcrumbs on the action bar.">Workloads</translation>
   <translation id="5441724995487814814" key="MSG_CHROME_CHROME_0" desc="Tooltip for global action bar create button tooltip.">Create an application or any Kubernetes resource</translation>
   <translation id="152996649337797552" key="MSG_CHROME_CHROME_1" desc="Label for global action bar create button.">Create</translation>
+  <translation id="8711874778657823772" key="MSG_CHROME_CONTROLPANEL_CONTROLPANEL_0" desc="Tooltip for the control panel displayed in the right top corner.">Control panel</translation>
+  <translation id="7284639485141385452" key="MSG_CHROME_CONTROLPANEL_CONTROLPANEL_1" desc="Logout menu item.">Logout</translation>
+  <translation id="7210325010968831729" key="MSG_CHROME_CONTROLPANEL_CONTROLPANEL_2" desc="Login menu item.">Login</translation>
   <translation id="5023828914132135944" key="MSG_CHROME_NAV_NAV_0" desc="Cluster group menu entry.">Cluster</translation>
   <translation id="6343362656986122693" key="MSG_CHROME_NAV_NAV_1" desc="Namespaces menu entry.">Namespaces</translation>
   <translation id="716443703088219571" key="MSG_CHROME_NAV_NAV_10" desc="Pods menu entry.">Pods</translation>
@@ -463,8 +469,9 @@
   <translation id="5485538583399563094" key="MSG_LESS_WARNINGS_LABEL" desc="Show less warnings button label.">Show <ph name="COUNT"> less</ph></translation>
   <translation id="6428808795341026405" key="MSG_LOGIN_BASIC_0" desc="\'Username\' field label shown on login page for basic auth">Username</translation>
   <translation id="2222883722971802152" key="MSG_LOGIN_BASIC_1" desc="\'Password\' field label shown on login page for basic auth">Password</translation>
-  <translation id="5259124924941383194" key="MSG_LOGIN_LOGIN_0" desc="Title shown on login page on login card">Log in to Kubernetes Dashboard</translation>
+  <translation id="1409623546562132476" key="MSG_LOGIN_LOGIN_0" desc="Title shown on login page on login card">Kubernetes Dashboard</translation>
   <translation id="5474439021716449004" key="MSG_LOGIN_LOGIN_1" desc="\'Token\' option label shown on login page">Token</translation>
+  <translation id="7903955345350777049" key="MSG_LOGIN_OPTIONS_0" desc="Label of authentication method selector.">Authentication method:</translation>
   <translation id="3142285229708080307" key="MSG_LOGIN_TOKEN_0" desc="\'Token\' field label shown on login page for token auth">Token</translation>
   <translation id="1813585001229142426" key="MSG_LOGIN_UNAUTHORIZED_ERROR" desc="Text shown when unauthorized user tries to log in.">Authentication failed. Please try again.</translation>
   <translation id="4722922095699681308" key="MSG_LOGS_LOGS_0" desc="Title prefix for logs card.">Logs from</translation>

i18n/messages-ja.xtb

@@ -14,6 +14,9 @@
     <ph name="RESOURCE_NAME"> を編集</ph>
   </translation>
   <translation id="1024358167652076581" key="MSG_ALL_NAMESPACES" desc="Text for dropdown item that indicates that no namespace was selected">すべてのネームスペース</translation>
+  <translation id="2436932884134192170" key="MSG_AUTH_STATUS_HEADER" desc="Login status displayed when authorization header is used.">Logged in with auth header</translation>
+  <translation id="2593766780781854099" key="MSG_AUTH_STATUS_SKIPPED" desc="Login status displayed when default service account is used.">Default service account</translation>
+  <translation id="7811526624157700330" key="MSG_AUTH_STATUS_TOKEN" desc="Login status displayed when token is used.">Logged in with token</translation>
   <translation id="6614117428496734699" key="MSG_BREADCRUMBS_ABOUT_LABEL" desc="Label 'About' that appears as a breadcrumbs on the action bar.">バージョン情報</translation>
   <translation id="1153397682574555638" key="MSG_BREADCRUMBS_CLUSTER_LABEL" desc="Label 'Cluster' that appears as a breadcrumbs on the action bar.">クラスター</translation>
   <translation id="5346529710805392125" key="MSG_BREADCRUMBS_CONFIG_AND_STORAGE_LABEL" desc="Label 'Config and storage' that appears as a breadcrumbs on the action bar.">コンフィグとストレージ</translation>
@@ -27,7 +30,7 @@
   <translation id="8885204956315323333" key="MSG_BREADCRUMBS_INGRESSS_LABEL" desc="Label 'Ingresses' that appears as a breadcrumbs on the action bar.">イングレス</translation>
   <translation id="2741276106482217695" key="MSG_BREADCRUMBS_INTERNALERROR_LABEL" desc="Label for internal error page for breadcrumbs on the action bar.">内部エラー</translation>
   <translation id="2024511088483477440" key="MSG_BREADCRUMBS_JOBS_LABEL" desc="Label 'Jobs' that appears as a breadcrumbs on the action bar.">ジョブ</translation>
-  <translation id="6766334846566612127" key="MSG_BREADCRUMBS_LOGIN_LABEL" desc="Label 'Log in' that appears as a breadcrumbs on the action bar.">Log in</translation>
+  <translation id="7001335550079103928" key="MSG_BREADCRUMBS_LOGIN_LABEL" desc="Label 'Log in' that appears as a breadcrumbs on the action bar.">Login</translation>
   <translation id="1050029015813261838" key="MSG_BREADCRUMBS_LOGS_LABEL" desc="Breadcrum label for the logs view.">ログ</translation>
   <translation id="7538864180606148657" key="MSG_BREADCRUMBS_NAMESPACES_LABEL" desc="Label 'Namespaces' that appears as a breadcrumbs on the action bar.">ネームスペース</translation>
   <translation id="1946322401100894439" key="MSG_BREADCRUMBS_NODES_LABEL" desc="Label 'Nodes' that appears as a breadcrumbs on the action bar.">ノード</translation>
@@ -47,6 +50,9 @@
   <translation id="1656728804447365846" key="MSG_BREADCRUMBS_WORKLOADS_LABEL" desc="Label 'Workloads' that appears as a breadcrumbs on the action bar.">ワークロード</translation>
   <translation id="5441724995487814814" key="MSG_CHROME_CHROME_0" desc="Tooltip for global action bar create button tooltip.">アプリケーションまたはKubernetesリソースを作成</translation>
   <translation id="152996649337797552" key="MSG_CHROME_CHROME_1" desc="Label for global action bar create button.">作成</translation>
+  <translation id="8711874778657823772" key="MSG_CHROME_CONTROLPANEL_CONTROLPANEL_0" desc="Tooltip for the control panel displayed in the right top corner.">Control panel</translation>
+  <translation id="7284639485141385452" key="MSG_CHROME_CONTROLPANEL_CONTROLPANEL_1" desc="Logout menu item.">Logout</translation>
+  <translation id="7210325010968831729" key="MSG_CHROME_CONTROLPANEL_CONTROLPANEL_2" desc="Login menu item.">Login</translation>
   <translation id="5023828914132135944" key="MSG_CHROME_NAV_NAV_0" desc="Cluster group menu entry.">クラスター</translation>
   <translation id="6343362656986122693" key="MSG_CHROME_NAV_NAV_1" desc="Namespaces menu item in the nav.">ネームスペース</translation>
   <translation id="716443703088219571" key="MSG_CHROME_NAV_NAV_10" desc="Pods menu entry.">ポッド</translation>
@@ -479,8 +485,9 @@
   <translation id="5485538583399563094" key="MSG_LESS_WARNINGS_LABEL" desc="Show less warnings button label.">Show <ph name="COUNT"> less</ph></translation>
   <translation id="6428808795341026405" key="MSG_LOGIN_BASIC_0" desc="\'Username\' field label shown on login page for basic auth">Username</translation>
   <translation id="2222883722971802152" key="MSG_LOGIN_BASIC_1" desc="\'Password\' field label shown on login page for basic auth">Password</translation>
-  <translation id="5259124924941383194" key="MSG_LOGIN_LOGIN_0" desc="Title shown on login page on login card">Log in to Kubernetes Dashboard</translation>
+  <translation id="1409623546562132476" key="MSG_LOGIN_LOGIN_0" desc="Title shown on login page on login card">Kubernetes Dashboard</translation>
   <translation id="5474439021716449004" key="MSG_LOGIN_LOGIN_1" desc="\'Token\' option label shown on login page">Token</translation>
+  <translation id="7903955345350777049" key="MSG_LOGIN_OPTIONS_0" desc="Label of authentication method selector.">Authentication method:</translation>
   <translation id="3142285229708080307" key="MSG_LOGIN_TOKEN_0" desc="\'Token\' field label shown on login page for token auth">Token</translation>
   <translation id="1813585001229142426" key="MSG_LOGIN_UNAUTHORIZED_ERROR" desc="Text shown when unauthorized user tries to log in.">Authentication failed. Please try again.</translation>
   <translation id="4722922095699681308" key="MSG_LOGS_LOGS_0" desc="Title prefix for logs card.">Logs from</translation>

i18n/messages-zh.xtb

@@ -10,6 +10,9 @@
   <translation id="6783150167357318030" key="MSG_ACTION_BAR_DELETE_TOOLTIP" desc="Generic &quot;Delete some resource&quot; tooltip text which appears over the delete icon on the global action bar.">删除<ph name="RESOURCE_NAME"/></translation>
   <translation id="1421031463694814701" key="MSG_ACTION_BAR_EDIT_TOOLTIP" desc="Generic &quot;Edit some resource&quot; tooltip text which appears over the edit icon on the global action bar.">编辑<ph name="RESOURCE_NAME"/></translation>
   <translation id="1024358167652076581" key="MSG_ALL_NAMESPACES" desc="Text for dropdown item that indicates that no namespace was selected">所有命名空间</translation>
+  <translation id="2436932884134192170" key="MSG_AUTH_STATUS_HEADER" desc="Login status displayed when authorization header is used.">Logged in with auth header</translation>
+  <translation id="2593766780781854099" key="MSG_AUTH_STATUS_SKIPPED" desc="Login status displayed when default service account is used.">Default service account</translation>
+  <translation id="7811526624157700330" key="MSG_AUTH_STATUS_TOKEN" desc="Login status displayed when token is used.">Logged in with token</translation>
   <translation id="6614117428496734699" key="MSG_BREADCRUMBS_ABOUT_LABEL" desc="Label 'About' that appears as a breadcrumbs on the action bar.">关于</translation>
   <translation id="1153397682574555638" key="MSG_BREADCRUMBS_CLUSTER_LABEL" desc="Label 'Cluster' that appears as a breadcrumbs on the action bar.">集群</translation>
   <translation id="5346529710805392125" key="MSG_BREADCRUMBS_CONFIG_AND_STORAGE_LABEL" desc="Label 'Config and storage' that appears as a breadcrumbs on the action bar.">配置与存储</translation>
@@ -23,7 +26,7 @@
   <translation id="8885204956315323333" key="MSG_BREADCRUMBS_INGRESSS_LABEL" desc="Label 'Ingresses' that appears as a breadcrumbs on the action bar.">访问权</translation>
   <translation id="2741276106482217695" key="MSG_BREADCRUMBS_INTERNALERROR_LABEL" desc="Label for internal error page for breadcrumbs on the action bar.">内部错误</translation>
   <translation id="2024511088483477440" key="MSG_BREADCRUMBS_JOBS_LABEL" desc="Label 'Jobs' that appears as a breadcrumbs on the action bar.">任务</translation>
-  <translation id="6766334846566612127" key="MSG_BREADCRUMBS_LOGIN_LABEL" desc="Label 'Log in' that appears as a breadcrumbs on the action bar.">Log in</translation>
+  <translation id="7001335550079103928" key="MSG_BREADCRUMBS_LOGIN_LABEL" desc="Label 'Log in' that appears as a breadcrumbs on the action bar.">Login</translation>
   <translation id="1050029015813261838" key="MSG_BREADCRUMBS_LOGS_LABEL" desc="Breadcrum label for the logs view.">日志</translation>
   <translation id="7538864180606148657" key="MSG_BREADCRUMBS_NAMESPACES_LABEL" desc="Label 'Namespaces' that appears as a breadcrumbs on the action bar.">命名空间</translation>
   <translation id="1946322401100894439" key="MSG_BREADCRUMBS_NODES_LABEL" desc="Label 'Nodes' that appears as a breadcrumbs on the action bar.">节点</translation>
@@ -43,6 +46,9 @@
   <translation id="1656728804447365846" key="MSG_BREADCRUMBS_WORKLOADS_LABEL" desc="Label 'Workloads' that appears as a breadcrumbs on the action bar.">工作负载</translation>
   <translation id="5441724995487814814" key="MSG_CHROME_CHROME_0" desc="Tooltip for global action bar create button tooltip.">创建应用或任意 Kubernetes 资源</translation>
   <translation id="152996649337797552" key="MSG_CHROME_CHROME_1" desc="Label for global action bar create button.">创建</translation>
+  <translation id="8711874778657823772" key="MSG_CHROME_CONTROLPANEL_CONTROLPANEL_0" desc="Tooltip for the control panel displayed in the right top corner.">Control panel</translation>
+  <translation id="7284639485141385452" key="MSG_CHROME_CONTROLPANEL_CONTROLPANEL_1" desc="Logout menu item.">Logout</translation>
+  <translation id="7210325010968831729" key="MSG_CHROME_CONTROLPANEL_CONTROLPANEL_2" desc="Login menu item.">Login</translation>
   <translation id="5023828914132135944" key="MSG_CHROME_NAV_NAV_0" desc="Cluster group menu entry.">集群</translation>
   <translation id="6343362656986122693" key="MSG_CHROME_NAV_NAV_1" desc="Namespaces menu item in the nav.">命名空间</translation>
   <translation id="716443703088219571" key="MSG_CHROME_NAV_NAV_10" desc="Pods menu entry.">容器组</translation>
@@ -463,8 +469,9 @@
   <translation id="5485538583399563094" key="MSG_LESS_WARNINGS_LABEL" desc="Show less warnings button label.">隐藏 <ph name="COUNT"> 条</ph></translation>
   <translation id="6428808795341026405" key="MSG_LOGIN_BASIC_0" desc="\'Username\' field label shown on login page for basic auth">Username</translation>
   <translation id="2222883722971802152" key="MSG_LOGIN_BASIC_1" desc="\'Password\' field label shown on login page for basic auth">Password</translation>
-  <translation id="5259124924941383194" key="MSG_LOGIN_LOGIN_0" desc="Title shown on login page on login card">Log in to Kubernetes Dashboard</translation>
+  <translation id="1409623546562132476" key="MSG_LOGIN_LOGIN_0" desc="Title shown on login page on login card">Kubernetes Dashboard</translation>
   <translation id="5474439021716449004" key="MSG_LOGIN_LOGIN_1" desc="\'Token\' option label shown on login page">Token</translation>
+  <translation id="7903955345350777049" key="MSG_LOGIN_OPTIONS_0" desc="Label of authentication method selector.">Authentication method:</translation>
   <translation id="3142285229708080307" key="MSG_LOGIN_TOKEN_0" desc="\'Token\' field label shown on login page for token auth">Token</translation>
   <translation id="1813585001229142426" key="MSG_LOGIN_UNAUTHORIZED_ERROR" desc="Text shown when unauthorized user tries to log in.">Authentication failed. Please try again.</translation>
   <translation id="4722922095699681308" key="MSG_LOGS_LOGS_0" desc="Title prefix for logs card.">容器日志</translation>

src/app/frontend/chrome/chrome.html

@@ -28,11 +28,13 @@ limitations under the License.
     <div class="kd-global-actions">
       <md-button ng-click="$ctrl.create()">
         <md-icon class="kd-global-action-icon">add</md-icon>
-        <md-tooltip md-direction="bottom">
+        <md-tooltip md-delay="500">
           [[Create an application or any Kubernetes resource|Tooltip for global action bar create button tooltip.]]
         </md-tooltip>
         [[Create|Label for global action bar create button.]]
       </md-button>
+      <div class="kd-action-separator">|</div>
+      <kd-control-panel></kd-control-panel>
     </div>
   </div>
 </md-toolbar>

src/app/frontend/chrome/chrome.scss

@@ -208,3 +208,11 @@ $chip-margin: 0 $baseline-grid ($baseline-grid / 2) 0;
     background-color: $delicate;
   }
 }
+
+.kd-action-separator {
+  cursor: default;
+  font-weight: $light-font-weight;
+  line-height: 5 * $baseline-grid;
+  padding: 0 $baseline-grid;
+  user-select: none;
+}

src/app/frontend/chrome/controlpanel/component.js

+// Copyright 2017 The Kubernetes Dashboard Authors.
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+//     http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+/**
+ * @final
+ */
+export class ControlPanelController {
+  /**
+   * @param {!ui.router.$state} $state
+   * @param {!angular.$log} $log
+   * @param {!./../../common/auth/service.AuthService} kdAuthService
+   * @ngInject
+   */
+  constructor($state, $log, kdAuthService) {
+    /** @private {!ui.router.$state} */
+    this.state_ = $state;
+    /** @private {!angular.$log} */
+    this.log_ = $log;
+    /** @private {!./../../common/auth/service.AuthService} */
+    this.kdAuthService_ = kdAuthService;
+    /** @private {!backendApi.LoginStatus} */
+    this.loginStatus_;
+    /** @export {boolean} */
+    this.isLoginStatusLoaded = false;
+  }
+
+  /**
+   * Checks if user is logged in using Dashboard log in mechanism and sets class variable after
+   * backend responds.
+   */
+  $onInit() {
+    this.kdAuthService_.getLoginStatus().then(
+        (/** @type {!backendApi.LoginStatus} */ loginStatus) => {
+          this.loginStatus_ = loginStatus;
+          this.isLoginStatusLoaded = true;
+        },
+        (err) => {
+          this.log_.error(err);
+        });
+  }
+
+  /**
+   * Returns current authentication status string.
+   *
+   * @return {string}
+   * @export
+   */
+  getAuthStatus() {
+    if (this.loginStatus_.headerPresent) {
+      /** @type {string} @desc Login status displayed when authorization header is used. */
+      let MSG_AUTH_STATUS_HEADER = goog.getMsg('Logged in with auth header');
+      return MSG_AUTH_STATUS_HEADER;
+    }
+    if (this.loginStatus_.tokenPresent) {
+      /** @type {string} @desc Login status displayed when token is used. */
+      let MSG_AUTH_STATUS_TOKEN = goog.getMsg('Logged in with token');
+      return MSG_AUTH_STATUS_TOKEN;
+    }
+    /** @type {string} @desc Login status displayed when default service account is used. */
+    let MSG_AUTH_STATUS_SKIPPED = goog.getMsg('Default service account');
+    return MSG_AUTH_STATUS_SKIPPED;
+  }
+
+  /**
+   * Checks if authentication was skipped and default service account is used.
+   *
+   * @return {boolean}
+   * @export
+   */
+  isAuthSkipped() {
+    return !this.kdAuthService_.isLoginPageEnabled();
+  }
+
+  /**
+   * Checks if user is logged in.
+   *
+   * @return {boolean}
+   * @export
+   */
+  isLoggedIn() {
+    return this.loginStatus_ && (this.loginStatus_.headerPresent || this.loginStatus_.tokenPresent);
+  }
+
+  /**
+   * Logs out current user.
+   *
+   * @export
+   */
+  logout() {
+    this.kdAuthService_.logout();
+  }
+}
+
+/**
+ * @type {!angular.Component}
+ */
+export const controlPanelComponent = {
+  controller: ControlPanelController,
+  templateUrl: 'chrome/controlpanel/controlpanel.html',
+};

src/app/frontend/chrome/controlpanel/controlpanel.html

+<!--
+Copyright 2017 The Kubernetes Dashboard Authors.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+-->
+
+<md-menu>
+  <md-button class="md-icon-button"
+             ng-click="$mdMenu.open($event)">
+    <i class="material-icons">account_circle</i>
+    <svg class="kd-cross-style"
+         ng-if="$ctrl.isAuthSkipped()"
+         width="40px"
+         height="40px"
+         viewBox="0 0 40 40">
+      <line class="kd-cross-line-white" x1="10" x2="30" y1="10" y2="30"/>
+      <line class="kd-cross-line-blue" x1="10" x2="30" y1="10" y2="30"/>
+    </svg>
+    <md-tooltip md-delay="500">
+      [[Control panel|Tooltip for the control panel displayed in the right top corner.]]
+    </md-tooltip>
+  </md-button>
+  <md-menu-content width="4">
+    <md-menu-item>
+      <md-button disabled="disabled">
+        <div class="kd-auth-status"
+             ng-if="$ctrl.isLoginStatusLoaded">
+          {{$ctrl.getAuthStatus()}}
+        </div>
+        <md-progress-circular class="kd-auth-status-spinner"
+                              ng-if="!$ctrl.isLoginStatusLoaded"
+                              md-diameter="24">
+        </md-progress-circular>
+      </md-button>
+    </md-menu-item>
+    <md-menu-divider ng-if="$ctrl.isLoggedIn() || $ctrl.isAuthSkipped()"></md-menu-divider>
+    <md-menu-item ng-if="$ctrl.isLoggedIn()">
+      <md-button ng-click="$ctrl.logout()">
+        [[Logout|Logout menu item.]]
+      </md-button>
+    </md-menu-item>
+    <md-menu-item ng-if="$ctrl.isAuthSkipped()">
+      <md-button ng-click="$ctrl.logout()">
+        [[Login|Login menu item.]]
+      </md-button>
+    </md-menu-item>
+  </md-menu-content>
+</md-menu>

src/app/frontend/chrome/controlpanel/controlpanel.scss

+// Copyright 2017 The Kubernetes Dashboard Authors.
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+//     http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+@import '../../variables';
+
+.kd-auth-status {
+  font-weight: $bold-font-weight;
+  text-transform: uppercase;
+}
+
+.kd-auth-status-spinner {
+  margin: 0 auto;
+}
+
+.kd-cross-line-blue {
+  stroke: $primary;
+  stroke-width: 2;
+}
+
+.kd-cross-line-white {
+  stroke: $content-background;
+  stroke-width: 4;
+}
+
+.kd-cross-style {
+  bottom: 0;
+  left: 0;
+  position: absolute;
+  right: 0;
+  top: 0;
+}

src/app/frontend/chrome/module.js

@@ -16,6 +16,7 @@ import componentsModule from 'common/components/module';
 import namespaceModule from 'common/namespace/module';
 
 import {chromeComponent} from './component';
+import {controlPanelComponent} from './controlpanel/component';
 import navModule from './nav/module';
 import {searchComponent} from './search/component';
 import stateConfig from './stateconfig';
@@ -35,4 +36,5 @@ export default angular
         ])
     .config(stateConfig)
     .component('kdChrome', chromeComponent)
+    .component('kdControlPanel', controlPanelComponent)
     .component('kdSearch', searchComponent);

src/app/frontend/common/auth/service.js

@@ -64,6 +64,14 @@ export class AuthService {
     this.cookies_.put(this.tokenCookieName_, token);
   }
 
+  /**
+   * Cleans cookies, but does not remove them.
+   */
+  cleanAuthCookies() {
+    this.setTokenCookie_('');
+    this.skipLoginPage(false);
+  }
+
   /**
    * Sends a login request to the backend with filled in login spec structure.
    *
@@ -105,6 +113,14 @@ export class AuthService {
     return deferred.promise;
   }
 
+  /**
+   * Cleans cookies and goes to login page.
+   */
+  logout() {
+    this.cleanAuthCookies();
+    this.state_.go(loginState);
+  }
+
   /**
    * Returns promise that returns TargetState once backend decides whether user is logged in or not.
    * User is then redirected to target state (if logged in) or to login page.
@@ -119,15 +135,6 @@ export class AuthService {
    */
   isLoggedIn(transition) {
     let deferred = this.q_.defer();
-    let token = this.cookies_.get(this.tokenCookieName_) || '';
-    let resource = this.resource_('api/v1/login/status', {}, {
-      get: {
-        method: 'GET',
-        headers: {
-          [this.tokenHeaderName_]: token,
-        },
-      },
-    });
 
     // Skip log in check if user is going to login page already or has chosen to skip it.
     if (!this.isLoginPageEnabled() || transition.to().name === loginState ||
@@ -136,7 +143,7 @@ export class AuthService {
       return deferred.promise;
     }
 
-    resource.get(
+    this.getLoginStatus().then(
         (/** @type {!backendApi.LoginStatus} */ loginStatus) => {
           if (loginStatus.headerPresent || loginStatus.tokenPresent) {
             deferred.resolve(true);
@@ -154,6 +161,24 @@ export class AuthService {
     return deferred.promise;
   }
 
+  /**
+   * @return {!angular.$q.Promise}
+   */
+  getLoginStatus() {
+    let token = this.cookies_.get(this.tokenCookieName_) || '';
+    return this
+        .resource_('api/v1/login/status', {}, {
+          get: {
+            method: 'GET',
+            headers: {
+              [this.tokenHeaderName_]: token,
+            },
+          },
+        })
+        .get()
+        .$promise;
+  }
+
   /**
    * @param {boolean} skip
    */

src/app/frontend/login/login.html

@@ -22,13 +22,13 @@ limitations under the License.
       novalidate>
   <kd-content-card class="kd-login-card">
     <kd-title>
-      [[Log in to Kubernetes Dashboard|Title shown on login page on login card]]
+      [[Kubernetes Dashboard|Title shown on login page on login card]]
     </kd-title>
     <kd-content class="kd-content-padded">
       <kd-login-options>
         <!--TODO(floreks): enable once kubernetes#49709 is resolved -->
         <!--<kd-basic-login title="[[Basic|Basic login]]" on-update="$ctrl.update(loginSpec)"></kd-basic-login>-->
-        <kd-token-login title="[[Token|'Token' option label shown on login page]]"
+        <kd-token-login title="[[Token|Token option label shown on login page]]"
                         on-update="$ctrl.onUpdate(loginSpec)"></kd-token-login>
       </kd-login-options>
 

src/app/frontend/login/login.scss

@@ -26,6 +26,14 @@ kd-login {
   margin: auto;
   padding-top: 2 * $baseline-grid;
   width: 50%;
+
+  h1 {
+    background-color: $primary;
+    border-top-left-radius: 2px;
+    border-top-right-radius: 2px;
+    color: $content-background;
+    margin: -1px;
+  }
 }
 
 .kd-login-card-content {
@@ -41,6 +49,10 @@ kd-login {
   }
 }
 
+.kd-option-title {
+  margin-bottom: 2 * $baseline-grid;
+}
+
 .kd-option-container {
   padding-top: $baseline-grid / 2;
 }

src/app/frontend/login/options.html

@@ -14,6 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 -->
 
+<div class="kd-option-title">[[Authentication method:|Label of authentication method selector.]]</div>
 <md-radio-group ng-model="$ctrl.selectedOption"
                 ng-change="$ctrl.onOptionChange()">
   <md-radio-button ng-repeat="option in $ctrl.options"

src/app/frontend/login/stateconfig.js

@@ -21,7 +21,7 @@ import {stateName, stateUrl} from './state';
  */
 const i18n = {
   /** @type {string} @desc Label 'Log in' that appears as a breadcrumbs on the action bar. */
-  MSG_BREADCRUMBS_LOGIN_LABEL: goog.getMsg('Log in'),
+  MSG_BREADCRUMBS_LOGIN_LABEL: goog.getMsg('Login'),
 };
 
 /**

src/app/frontend/overview/overview.html

@@ -30,41 +30,42 @@ limitations under the License.
 </div>
 
 <kd-content-card ng-if="$ctrl.overview.podList.pods.length">
-    <kd-title>[[Resource Status|Label 'Resource Status' for the allocated resources section.]]</kd-title>
-    <kd-content>
-        <div class="kd-graph-container">
-            <div layout="row" layout-align="center center">
-                <div class="kd-graph-legend">
-                  <div class="kd-graph-legend-title">
-                    Pods
-                  </div>
-                  <div class="kd-graph-legend-entry">
-                    <md-icon class="kd-graph-green">stop</md-icon>
-                    [[Running|Label 'Running' for the pod statistics graphs legend.]]
-                    <span class="kd-graph-legend-value">
+  <kd-title>[[Resource Status|Label 'Resource Status' for the allocated resources section.]]</kd-title>
+  <kd-content>
+    <div class="kd-graph-container">
+      <div layout="row"
+           layout-align="center center">
+        <div class="kd-graph-legend">
+          <div class="kd-graph-legend-title">
+            Pods
+          </div>
+          <div class="kd-graph-legend-entry">
+            <md-icon class="kd-graph-green">stop</md-icon>
+            [[Running|Label 'Running' for the pod statistics graphs legend.]]
+            <span class="kd-graph-legend-value">
                       {{$ctrl.podStats.success}}
                     </span>
-                  </div>
-                  <div class="kd-graph-legend-entry">
-                      <md-icon class="kd-graph-yellow">stop</md-icon>
-                      [[Pending|Label 'Pending' for the pod statistics graphs legend.]]
-                      <span class="kd-graph-legend-value">
+          </div>
+          <div class="kd-graph-legend-entry">
+            <md-icon class="kd-graph-yellow">stop</md-icon>
+            [[Pending|Label 'Pending' for the pod statistics graphs legend.]]
+            <span class="kd-graph-legend-value">
                         {{$ctrl.podStats.pending}}
                       </span>
-                  </div>
-                  <div class="kd-graph-legend-entry">
-                      <md-icon class="kd-graph-red">stop</md-icon>
-                      [[Failed|Label 'Failed' for the pod statistics graphs legend.]]
-                      <span class="kd-graph-legend-value">
+          </div>
+          <div class="kd-graph-legend-entry">
+            <md-icon class="kd-graph-red">stop</md-icon>
+            [[Failed|Label 'Failed' for the pod statistics graphs legend.]]
+            <span class="kd-graph-legend-value">
                         {{$ctrl.podStats.failed}}
                       </span>
-                  </div>
-                </div>
-                <kd-allocated-resources-chart color-palette="$ctrl.colorPalette"
-                                              data="$ctrl.podStats.chartValues">
-                </kd-allocated-resources-chart>
-            </div>
+          </div>
         </div>
+        <kd-allocated-resources-chart color-palette="$ctrl.colorPalette"
+                                      data="$ctrl.podStats.chartValues">
+        </kd-allocated-resources-chart>
+      </div>
+    </div>
     <kd-content>
 </kd-content-card>
 

src/app/frontend/secret/detail/detail.html

@@ -32,7 +32,7 @@ limitations under the License.
                  width="40px"
                  height="40px"
                  viewBox="0 0 40 40"
-                 style="left: 0; top:0; position:absolute; bottom:0, right: 0;">
+                 style="left: 0; top:0; position:absolute; bottom:0; right: 0;">
               <line x1="10" y1="10" x2="30" y2="30"
                 style="stroke-width: 2; stroke: rgba(0,0,0,0.54);"/>
             </svg>