diff --git a/src/panels/profile/ha-panel-profile.js b/src/panels/profile/ha-panel-profile.js deleted file mode 100644 index dfd2a3f6c0..0000000000 --- a/src/panels/profile/ha-panel-profile.js +++ /dev/null @@ -1,193 +0,0 @@ -import "@polymer/app-layout/app-header-layout/app-header-layout"; -import "@polymer/app-layout/app-header/app-header"; -import "@polymer/paper-item/paper-item-body"; -import "@polymer/paper-item/paper-item"; -import "@material/mwc-button"; -import "@polymer/app-layout/app-toolbar/app-toolbar"; -import { html } from "@polymer/polymer/lib/utils/html-tag"; -import { PolymerElement } from "@polymer/polymer/polymer-element"; - -import "../../components/ha-card"; -import "../../components/ha-menu-button"; -import "../../resources/ha-style"; - -import { getOptimisticFrontendUserDataCollection } from "../../data/frontend"; - -import { EventsMixin } from "../../mixins/events-mixin"; -import LocalizeMixin from "../../mixins/localize-mixin"; - -import "./ha-change-password-card"; -import "./ha-mfa-modules-card"; -import "./ha-advanced-mode-card"; -import "./ha-refresh-tokens-card"; -import "./ha-long-lived-access-tokens-card"; - -import "./ha-pick-language-row"; -import "./ha-pick-theme-row"; -import "./ha-push-notifications-row"; -import "./ha-force-narrow-row"; - -/* - * @appliesMixin EventsMixin - * @appliesMixin LocalizeMixin - */ -class HaPanelProfile extends EventsMixin(LocalizeMixin(PolymerElement)) { - static get template() { - return html` - - - - - - -
[[localize('panel.profile')]]
- - - -
- -
- [[localize('ui.panel.profile.current_user', 'fullName', - hass.user.name)]] - -
- - - - - - - - -
- [[localize('ui.panel.profile.logout')]] -
- - - - - - - - - - - -
- - `; - } - - static get properties() { - return { - hass: Object, - narrow: Boolean, - _refreshTokens: Array, - _coreUserData: Object, - }; - } - - connectedCallback() { - super.connectedCallback(); - this._refreshRefreshTokens(); - this._unsubCoreData = getOptimisticFrontendUserDataCollection( - this.hass.connection, - "core" - ).subscribe((coreUserData) => { - this._coreUserData = coreUserData; - }); - } - - disconnectedCallback() { - super.disconnectedCallback(); - if (this._unsubCoreData) { - this._unsubCoreData(); - this._unsubCoreData = undefined; - } - } - - async _refreshRefreshTokens() { - this._refreshTokens = await this.hass.callWS({ - type: "auth/refresh_tokens", - }); - } - - _handleLogOut() { - this.fire("hass-logout"); - } - - _canChangePassword(user) { - return user.credentials.some( - (cred) => cred.auth_provider_type === "homeassistant" - ); - } - - _isAdmin(user) { - return user.is_admin; - } - - _showNarrowRow(dockedSidebar, narrow) { - return dockedSidebar === "auto" ? !narrow : true; - } -} - -customElements.define("ha-panel-profile", HaPanelProfile); diff --git a/src/panels/profile/ha-panel-profile.ts b/src/panels/profile/ha-panel-profile.ts new file mode 100644 index 0000000000..2bdc22955e --- /dev/null +++ b/src/panels/profile/ha-panel-profile.ts @@ -0,0 +1,200 @@ +import "@polymer/app-layout/app-header-layout/app-header-layout"; +import "@polymer/app-layout/app-header/app-header"; +import "@polymer/paper-item/paper-item-body"; +import "@polymer/paper-item/paper-item"; +import "@material/mwc-button"; +import "@polymer/app-layout/app-toolbar/app-toolbar"; + +import "../../components/ha-card"; +import "../../components/ha-menu-button"; +import "../../resources/ha-style"; + +import { + getOptimisticFrontendUserDataCollection, + CoreFrontendUserData, +} from "../../data/frontend"; + +import "./ha-change-password-card"; +import "./ha-mfa-modules-card"; +import "./ha-advanced-mode-card"; +import "./ha-refresh-tokens-card"; +import "./ha-long-lived-access-tokens-card"; + +import "./ha-pick-language-row"; +import "./ha-pick-theme-row"; +import "./ha-push-notifications-row"; +import "./ha-force-narrow-row"; +import { + LitElement, + TemplateResult, + html, + CSSResultArray, + css, + property, +} from "lit-element"; +import { haStyle } from "../../resources/styles"; +import { HomeAssistant } from "../../types"; +import { fireEvent } from "../../common/dom/fire_event"; +import { UnsubscribeFunc } from "home-assistant-js-websocket"; + +class HaPanelProfile extends LitElement { + @property() public hass!: HomeAssistant; + @property() public narrow!: boolean; + @property() private _refreshTokens?: unknown[]; + @property() private _coreUserData?: CoreFrontendUserData | null; + private _unsubCoreData?: UnsubscribeFunc; + + public connectedCallback() { + super.connectedCallback(); + this._refreshRefreshTokens(); + this._unsubCoreData = getOptimisticFrontendUserDataCollection( + this.hass.connection, + "core" + ).subscribe((coreUserData) => { + this._coreUserData = coreUserData; + }); + } + + public disconnectedCallback() { + super.disconnectedCallback(); + if (this._unsubCoreData) { + this._unsubCoreData(); + this._unsubCoreData = undefined; + } + } + + protected render(): TemplateResult | void { + return html` + + + + +
${this.hass.localize("panel.profile")}
+ + + +
+ +
+ ${this.hass.localize( + "ui.panel.profile.current_user", + "fullName", + this.hass.user!.name + )} + ${this.hass.user!.is_owner + ? this.hass.localize("ui.panel.profile.is_owner") + : ""} +
+ + + + ${this.hass.dockedSidebar !== "auto" || !this.narrow + ? html` + + ` + : ""} + + +
+ + ${this.hass.localize("ui.panel.profile.logout")} + +
+ + + ${this.hass.user!.credentials.some( + (cred) => cred.auth_provider_type === "homeassistant" + ) + ? html` + + ` + : ""} + + + + ${this.hass.user!.is_admin + ? html` + + ` + : ""} + + + + +
+ + `; + } + + private async _refreshRefreshTokens() { + this._refreshTokens = await this.hass.callWS({ + type: "auth/refresh_tokens", + }); + } + + private _handleLogOut() { + fireEvent(this, "hass-logout"); + } + + static get styles(): CSSResultArray { + return [ + haStyle, + css` + :host { + -ms-user-select: initial; + -webkit-user-select: initial; + -moz-user-select: initial; + } + + .content { + display: block; + max-width: 600px; + margin: 0 auto; + } + + .content > * { + display: block; + margin: 24px 0; + } + + .promo-advanced { + text-align: center; + color: var(--secondary-text-color); + } + `, + ]; + } +} + +customElements.define("ha-panel-profile", HaPanelProfile);