| /** |
| * @license |
| * Copyright (C) 2015 The Android Open Source Project |
| * |
| * 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 '../../shared/gr-dropdown/gr-dropdown'; |
| import '../../shared/gr-avatar/gr-avatar'; |
| import {getUserName} from '../../../utils/display-name-util'; |
| import {AccountInfo, ServerInfo} from '../../../types/common'; |
| import {appContext} from '../../../services/app-context'; |
| import {fireEvent} from '../../../utils/event-util'; |
| import { |
| DropdownContent, |
| DropdownLink, |
| } from '../../shared/gr-dropdown/gr-dropdown'; |
| import {sharedStyles} from '../../../styles/shared-styles'; |
| import {LitElement, css, html} from 'lit'; |
| import {customElement, property} from 'lit/decorators'; |
| |
| const INTERPOLATE_URL_PATTERN = /\${([\w]+)}/g; |
| |
| declare global { |
| interface HTMLElementTagNameMap { |
| 'gr-account-dropdown': GrAccountDropdown; |
| } |
| } |
| |
| @customElement('gr-account-dropdown') |
| export class GrAccountDropdown extends LitElement { |
| @property({type: Object}) |
| account?: AccountInfo; |
| |
| @property({type: Object}) |
| config?: ServerInfo; |
| |
| @property({type: String}) |
| _path = '/'; |
| |
| @property({type: Boolean}) |
| _hasAvatars = false; |
| |
| @property({type: String}) |
| _switchAccountUrl = ''; |
| |
| private readonly restApiService = appContext.restApiService; |
| |
| override connectedCallback() { |
| super.connectedCallback(); |
| this.handleLocationChange(); |
| window.addEventListener('location-change', this.handleLocationChange); |
| this.restApiService.getConfig().then(cfg => { |
| this.config = cfg; |
| |
| if (cfg && cfg.auth && cfg.auth.switch_account_url) { |
| this._switchAccountUrl = cfg.auth.switch_account_url; |
| } else { |
| this._switchAccountUrl = ''; |
| } |
| this._hasAvatars = !!(cfg && cfg.plugin && cfg.plugin.has_avatars); |
| }); |
| } |
| |
| override disconnectedCallback() { |
| window.removeEventListener('location-change', this.handleLocationChange); |
| super.disconnectedCallback(); |
| } |
| |
| static override get styles() { |
| return [ |
| sharedStyles, |
| css` |
| gr-dropdown { |
| padding: 0 var(--spacing-m); |
| --gr-button-text-color: var(--header-text-color); |
| } |
| gr-avatar { |
| height: 2em; |
| width: 2em; |
| vertical-align: middle; |
| } |
| `, |
| ]; |
| } |
| |
| override render() { |
| // To pass CSS mixins for @apply to Polymer components, they need to appear |
| // in <style> inside the template. |
| /* eslint-disable lit/prefer-static-styles */ |
| const customStyle = html` |
| <style> |
| gr-dropdown { |
| --gr-dropdown-item: { |
| color: var(--primary-text-color); |
| } |
| } |
| </style> |
| `; |
| return html`${customStyle} |
| <gr-dropdown |
| link="" |
| .items="${this.links}" |
| .topContent="${this.topContent}" |
| @tap-item-shortcuts=${this._handleShortcutsTap} |
| .horizontalAlign=${'right'} |
| > |
| <span ?hidden="${this._hasAvatars}" |
| >${this._accountName(this.account)}</span |
| > |
| <gr-avatar |
| .account="${this.account}" |
| ?hidden=${!this._hasAvatars} |
| .imageSize=${56} |
| aria-label="Account avatar" |
| ></gr-avatar> |
| </gr-dropdown>`; |
| } |
| |
| get links(): DropdownLink[] | undefined { |
| return this._getLinks(this._switchAccountUrl, this._path); |
| } |
| |
| get topContent(): DropdownContent[] | undefined { |
| return this._getTopContent(this.account); |
| } |
| |
| _getLinks(switchAccountUrl?: string, path?: string) { |
| // Polymer 2: check for undefined |
| if (switchAccountUrl === undefined || path === undefined) { |
| return undefined; |
| } |
| |
| const links: DropdownLink[] = []; |
| links.push({name: 'Settings', id: 'settings', url: '/settings/'}); |
| links.push({name: 'Keyboard Shortcuts', id: 'shortcuts'}); |
| if (switchAccountUrl) { |
| const replacements = {path}; |
| const url = this._interpolateUrl(switchAccountUrl, replacements); |
| links.push({name: 'Switch account', url, external: true}); |
| } |
| links.push({name: 'Sign out', id: 'signout', url: '/logout'}); |
| return links; |
| } |
| |
| _getTopContent(account?: AccountInfo) { |
| return [ |
| {text: this._accountName(account), bold: true}, |
| {text: account?.email ? account.email : ''}, |
| ] as DropdownContent[]; |
| } |
| |
| _handleShortcutsTap() { |
| fireEvent(this, 'show-keyboard-shortcuts'); |
| } |
| |
| private readonly handleLocationChange = () => { |
| this._path = |
| window.location.pathname + window.location.search + window.location.hash; |
| }; |
| |
| _interpolateUrl(url: string, replacements: {[key: string]: string}) { |
| return url.replace( |
| INTERPOLATE_URL_PATTERN, |
| (_, p1) => replacements[p1] || '' |
| ); |
| } |
| |
| _accountName(account?: AccountInfo) { |
| return getUserName(this.config, account); |
| } |
| } |