blob: ac3d5f45f4107aa24e910444502d994019174a3d [file] [log] [blame]
/**
* @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);
}
}