Split profile page (#20103)

src/panels/profile/ha-panel-profile.ts

@@ -1,286 +1,45 @@
-import "@material/mwc-button";
+import { customElement, property } from "lit/decorators";
-import { UnsubscribeFunc } from "home-assistant-js-websocket";
+
-import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
-import { customElement, property, state } from "lit/decorators";
-import { fireEvent } from "../../common/dom/fire_event";
-import "../../components/ha-card";
-import "../../components/ha-menu-button";
-import "../../components/ha-top-app-bar-fixed";
-import { isExternal } from "../../data/external";
-import {
-  CoreFrontendUserData,
-  getOptimisticFrontendUserDataCollection,
-} from "../../data/frontend";
-import { RefreshToken } from "../../data/refresh_token";
-import { showConfirmationDialog } from "../../dialogs/generic/show-dialog-box";
-import { haStyle } from "../../resources/styles";
 import { HomeAssistant } from "../../types";
-import "./ha-advanced-mode-row";
+import { HassRouterPage, RouterOptions } from "../../layouts/hass-router-page";
-import "./ha-change-password-card";
+import { PageNavigation } from "../../layouts/hass-tabs-subpage";
-import "./ha-enable-shortcuts-row";
+import { SubscribeMixin } from "../../mixins/subscribe-mixin";
-import "./ha-force-narrow-row";
+
-import "./ha-long-lived-access-tokens-card";
+export const profileSections: PageNavigation[] = [
-import "./ha-mfa-modules-card";
+  {
-import "./ha-pick-dashboard-row";
+    path: "/profile/general",
-import "./ha-pick-first-weekday-row";
+    translationKey: "ui.panel.profile.tabs.general",
-import "./ha-pick-language-row";
+  },
-import "./ha-pick-number-format-row";
+  {
-import "./ha-pick-theme-row";
+    path: "/profile/security",
-import "./ha-pick-time-format-row";
+    translationKey: "ui.panel.profile.tabs.security",
-import "./ha-pick-date-format-row";
+  },
-import "./ha-pick-time-zone-row";
+];
-import "./ha-push-notifications-row";
-import "./ha-refresh-tokens-card";
-import "./ha-set-suspend-row";
-import "./ha-set-vibrate-row";
 
 @customElement("ha-panel-profile")
-class HaPanelProfile extends LitElement {
+class HaPanelProfile extends SubscribeMixin(HassRouterPage) {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
   @property({ type: Boolean }) public narrow = false;
 
-  @state() private _refreshTokens?: RefreshToken[];
+  protected routerOptions: RouterOptions = {
+    defaultPage: "general",
+    routes: {
+      general: {
+        tag: "ha-profile-section-general",
+        load: () => import("./ha-profile-section-general"),
+      },
+      security: {
+        tag: "ha-profile-section-security",
+        load: () => import("./ha-profile-section-security"),
+      },
+    },
+  };
 
-  @state() private _coreUserData?: CoreFrontendUserData | null;
+  protected updatePageEl(el) {
-
+    el.route = this.routeTail;
-  private _unsubCoreData?: UnsubscribeFunc;
+    el.hass = this.hass;
-
+    el.narrow = this.narrow;
-  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 {
-    return html`
-      <ha-top-app-bar-fixed>
-        <ha-menu-button
-          slot="navigationIcon"
-          .hass=${this.hass}
-          .narrow=${this.narrow}
-        ></ha-menu-button>
-        <div slot="title">${this.hass.localize("panel.profile")}</div>
-        <div class="content">
-          <ha-card .header=${this.hass.user!.name}>
-            <div class="card-content">
-              ${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")
-                : ""}
-            </div>
-            <div class="card-actions">
-              <mwc-button class="warning" @click=${this._handleLogOut}>
-                ${this.hass.localize("ui.panel.profile.logout")}
-              </mwc-button>
-            </div>
-          </ha-card>
-          <ha-card
-            .header=${this.hass.localize(
-              "ui.panel.profile.user_settings_header"
-            )}
-          >
-            <div class="card-content">
-              ${this.hass.localize("ui.panel.profile.user_settings_detail")}
-            </div>
-            <ha-pick-language-row
-              .narrow=${this.narrow}
-              .hass=${this.hass}
-            ></ha-pick-language-row>
-            <ha-pick-number-format-row
-              .narrow=${this.narrow}
-              .hass=${this.hass}
-            ></ha-pick-number-format-row>
-            <ha-pick-time-format-row
-              .narrow=${this.narrow}
-              .hass=${this.hass}
-            ></ha-pick-time-format-row>
-            <ha-pick-date-format-row
-              .narrow=${this.narrow}
-              .hass=${this.hass}
-            ></ha-pick-date-format-row>
-            <ha-pick-time-zone-row
-              .narrow=${this.narrow}
-              .hass=${this.hass}
-            ></ha-pick-time-zone-row>
-            <ha-pick-first-weekday-row
-              .narrow=${this.narrow}
-              .hass=${this.hass}
-            ></ha-pick-first-weekday-row>
-            ${this.hass.user!.is_admin
-              ? html`
-                  <ha-advanced-mode-row
-                    .hass=${this.hass}
-                    .narrow=${this.narrow}
-                    .coreUserData=${this._coreUserData}
-                  ></ha-advanced-mode-row>
-                `
-              : ""}
-          </ha-card>
-          <ha-card
-            .header=${this.hass.localize(
-              isExternal
-                ? "ui.panel.profile.mobile_app_settings"
-                : "ui.panel.profile.browser_settings"
-            )}
-          >
-            <div class="card-content">
-              ${this.hass.localize("ui.panel.profile.client_settings_detail")}
-            </div>
-            <ha-pick-theme-row
-              .narrow=${this.narrow}
-              .hass=${this.hass}
-            ></ha-pick-theme-row>
-            <ha-pick-dashboard-row
-              .narrow=${this.narrow}
-              .hass=${this.hass}
-            ></ha-pick-dashboard-row>
-            <ha-settings-row .narrow=${this.narrow}>
-              <span slot="heading">
-                ${this.hass.localize(
-                  "ui.panel.profile.customize_sidebar.header"
-                )}
-              </span>
-              <span slot="description">
-                ${this.hass.localize(
-                  "ui.panel.profile.customize_sidebar.description"
-                )}
-              </span>
-              <mwc-button @click=${this._customizeSidebar}>
-                ${this.hass.localize(
-                  "ui.panel.profile.customize_sidebar.button"
-                )}
-              </mwc-button>
-            </ha-settings-row>
-            ${this.hass.dockedSidebar !== "auto" || !this.narrow
-              ? html`
-                  <ha-force-narrow-row
-                    .narrow=${this.narrow}
-                    .hass=${this.hass}
-                  ></ha-force-narrow-row>
-                `
-              : ""}
-            ${"vibrate" in navigator
-              ? html`
-                  <ha-set-vibrate-row
-                    .narrow=${this.narrow}
-                    .hass=${this.hass}
-                  ></ha-set-vibrate-row>
-                `
-              : ""}
-            ${!isExternal
-              ? html`
-                  <ha-push-notifications-row
-                    .narrow=${this.narrow}
-                    .hass=${this.hass}
-                  ></ha-push-notifications-row>
-                `
-              : ""}
-            <ha-set-suspend-row
-              .narrow=${this.narrow}
-              .hass=${this.hass}
-            ></ha-set-suspend-row>
-            <ha-enable-shortcuts-row
-              .narrow=${this.narrow}
-              .hass=${this.hass}
-            ></ha-enable-shortcuts-row>
-          </ha-card>
-
-          ${this.hass.user!.credentials.some(
-            (cred) => cred.auth_provider_type === "homeassistant"
-          )
-            ? html`
-                <ha-change-password-card
-                  .refreshTokens=${this._refreshTokens}
-                  @hass-refresh-tokens=${this._refreshRefreshTokens}
-                  .hass=${this.hass}
-                ></ha-change-password-card>
-              `
-            : ""}
-
-          <ha-mfa-modules-card
-            .hass=${this.hass}
-            .mfaModules=${this.hass.user!.mfa_modules}
-          ></ha-mfa-modules-card>
-
-          <ha-refresh-tokens-card
-            .hass=${this.hass}
-            .refreshTokens=${this._refreshTokens}
-            @hass-refresh-tokens=${this._refreshRefreshTokens}
-          ></ha-refresh-tokens-card>
-
-          <ha-long-lived-access-tokens-card
-            .hass=${this.hass}
-            .refreshTokens=${this._refreshTokens}
-            @hass-refresh-tokens=${this._refreshRefreshTokens}
-          ></ha-long-lived-access-tokens-card>
-        </div>
-      </ha-top-app-bar-fixed>
-    `;
-  }
-
-  private _customizeSidebar() {
-    fireEvent(this, "hass-edit-sidebar", { editMode: true });
-  }
-
-  private async _refreshRefreshTokens() {
-    this._refreshTokens = await this.hass.callWS({
-      type: "auth/refresh_tokens",
-    });
-  }
-
-  private _handleLogOut() {
-    showConfirmationDialog(this, {
-      title: this.hass.localize("ui.panel.profile.logout_title"),
-      text: this.hass.localize("ui.panel.profile.logout_text"),
-      confirmText: this.hass.localize("ui.panel.profile.logout"),
-      confirm: () => fireEvent(this, "hass-logout"),
-    });
-  }
-
-  static get styles(): CSSResultGroup {
-    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;
-          padding-bottom: env(safe-area-inset-bottom);
-        }
-
-        .content > * {
-          display: block;
-          margin: 24px 0;
-        }
-
-        .promo-advanced {
-          text-align: center;
-          color: var(--secondary-text-color);
-        }
-      `,
-    ];
   }
 }
 declare global {

src/panels/profile/ha-profile-section-general.ts

@@ -0,0 +1,262 @@
+import "@material/mwc-button";
+import { UnsubscribeFunc } from "home-assistant-js-websocket";
+import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
+import { customElement, property, state } from "lit/decorators";
+import { fireEvent } from "../../common/dom/fire_event";
+import "../../components/ha-card";
+import "../../layouts/hass-tabs-subpage";
+import { profileSections } from "./ha-panel-profile";
+import { isExternal } from "../../data/external";
+import {
+  CoreFrontendUserData,
+  getOptimisticFrontendUserDataCollection,
+} from "../../data/frontend";
+import { showConfirmationDialog } from "../../dialogs/generic/show-dialog-box";
+import { haStyle } from "../../resources/styles";
+import { HomeAssistant, Route } from "../../types";
+import "./ha-advanced-mode-row";
+import "./ha-enable-shortcuts-row";
+import "./ha-force-narrow-row";
+import "./ha-pick-dashboard-row";
+import "./ha-pick-first-weekday-row";
+import "./ha-pick-language-row";
+import "./ha-pick-number-format-row";
+import "./ha-pick-theme-row";
+import "./ha-pick-time-format-row";
+import "./ha-pick-date-format-row";
+import "./ha-pick-time-zone-row";
+import "./ha-push-notifications-row";
+import "./ha-set-suspend-row";
+import "./ha-set-vibrate-row";
+
+@customElement("ha-profile-section-general")
+class HaProfileSectionGeneral extends LitElement {
+  @property({ attribute: false }) public hass!: HomeAssistant;
+
+  @property({ type: Boolean }) public narrow = false;
+
+  @state() private _coreUserData?: CoreFrontendUserData | null;
+
+  @property({ attribute: false }) public route!: Route;
+
+  private _unsubCoreData?: UnsubscribeFunc;
+
+  private getCoreData() {
+    this._unsubCoreData = getOptimisticFrontendUserDataCollection(
+      this.hass.connection,
+      "core"
+    ).subscribe((coreUserData) => {
+      this._coreUserData = coreUserData;
+    });
+  }
+
+  public connectedCallback() {
+    super.connectedCallback();
+    if (this.hass) {
+      this.getCoreData();
+    }
+  }
+
+  public firstUpdated() {
+    if (!this._unsubCoreData) {
+      this.getCoreData();
+    }
+  }
+
+  public disconnectedCallback() {
+    super.disconnectedCallback();
+    if (this._unsubCoreData) {
+      this._unsubCoreData();
+      this._unsubCoreData = undefined;
+    }
+  }
+
+  protected render(): TemplateResult {
+    return html`
+      <hass-tabs-subpage
+        main-page
+        .hass=${this.hass}
+        .narrow=${this.narrow}
+        .tabs=${profileSections}
+        .route=${this.route}
+      >
+        <div slot="title">${this.hass.localize("panel.profile")}</div>
+        <div class="content">
+          <ha-card .header=${this.hass.user!.name}>
+            <div class="card-content">
+              ${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")
+                : ""}
+            </div>
+            <div class="card-actions">
+              <mwc-button class="warning" @click=${this._handleLogOut}>
+                ${this.hass.localize("ui.panel.profile.logout")}
+              </mwc-button>
+            </div>
+          </ha-card>
+          <ha-card
+            .header=${this.hass.localize(
+              "ui.panel.profile.user_settings_header"
+            )}
+          >
+            <div class="card-content">
+              ${this.hass.localize("ui.panel.profile.user_settings_detail")}
+            </div>
+            <ha-pick-language-row
+              .narrow=${this.narrow}
+              .hass=${this.hass}
+            ></ha-pick-language-row>
+            <ha-pick-number-format-row
+              .narrow=${this.narrow}
+              .hass=${this.hass}
+            ></ha-pick-number-format-row>
+            <ha-pick-time-format-row
+              .narrow=${this.narrow}
+              .hass=${this.hass}
+            ></ha-pick-time-format-row>
+            <ha-pick-date-format-row
+              .narrow=${this.narrow}
+              .hass=${this.hass}
+            ></ha-pick-date-format-row>
+            <ha-pick-time-zone-row
+              .narrow=${this.narrow}
+              .hass=${this.hass}
+            ></ha-pick-time-zone-row>
+            <ha-pick-first-weekday-row
+              .narrow=${this.narrow}
+              .hass=${this.hass}
+            ></ha-pick-first-weekday-row>
+            ${this.hass.user!.is_admin
+              ? html`
+                  <ha-advanced-mode-row
+                    .hass=${this.hass}
+                    .narrow=${this.narrow}
+                    .coreUserData=${this._coreUserData}
+                  ></ha-advanced-mode-row>
+                `
+              : ""}
+          </ha-card>
+          <ha-card
+            .header=${this.hass.localize(
+              isExternal
+                ? "ui.panel.profile.mobile_app_settings"
+                : "ui.panel.profile.browser_settings"
+            )}
+          >
+            <div class="card-content">
+              ${this.hass.localize("ui.panel.profile.client_settings_detail")}
+            </div>
+            <ha-pick-theme-row
+              .narrow=${this.narrow}
+              .hass=${this.hass}
+            ></ha-pick-theme-row>
+            <ha-pick-dashboard-row
+              .narrow=${this.narrow}
+              .hass=${this.hass}
+            ></ha-pick-dashboard-row>
+            <ha-settings-row .narrow=${this.narrow}>
+              <span slot="heading">
+                ${this.hass.localize(
+                  "ui.panel.profile.customize_sidebar.header"
+                )}
+              </span>
+              <span slot="description">
+                ${this.hass.localize(
+                  "ui.panel.profile.customize_sidebar.description"
+                )}
+              </span>
+              <mwc-button @click=${this._customizeSidebar}>
+                ${this.hass.localize(
+                  "ui.panel.profile.customize_sidebar.button"
+                )}
+              </mwc-button>
+            </ha-settings-row>
+            ${this.hass.dockedSidebar !== "auto" || !this.narrow
+              ? html`
+                  <ha-force-narrow-row
+                    .narrow=${this.narrow}
+                    .hass=${this.hass}
+                  ></ha-force-narrow-row>
+                `
+              : ""}
+            ${"vibrate" in navigator
+              ? html`
+                  <ha-set-vibrate-row
+                    .narrow=${this.narrow}
+                    .hass=${this.hass}
+                  ></ha-set-vibrate-row>
+                `
+              : ""}
+            ${!isExternal
+              ? html`
+                  <ha-push-notifications-row
+                    .narrow=${this.narrow}
+                    .hass=${this.hass}
+                  ></ha-push-notifications-row>
+                `
+              : ""}
+            <ha-set-suspend-row
+              .narrow=${this.narrow}
+              .hass=${this.hass}
+            ></ha-set-suspend-row>
+            <ha-enable-shortcuts-row
+              .narrow=${this.narrow}
+              .hass=${this.hass}
+            ></ha-enable-shortcuts-row>
+          </ha-card>
+        </div>
+      </hass-tabs-subpage>
+    `;
+  }
+
+  private _customizeSidebar() {
+    fireEvent(this, "hass-edit-sidebar", { editMode: true });
+  }
+
+  private _handleLogOut() {
+    showConfirmationDialog(this, {
+      title: this.hass.localize("ui.panel.profile.logout_title"),
+      text: this.hass.localize("ui.panel.profile.logout_text"),
+      confirmText: this.hass.localize("ui.panel.profile.logout"),
+      confirm: () => fireEvent(this, "hass-logout"),
+    });
+  }
+
+  static get styles(): CSSResultGroup {
+    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;
+          padding-bottom: env(safe-area-inset-bottom);
+        }
+
+        .content > * {
+          display: block;
+          margin: 24px 0;
+        }
+
+        .promo-advanced {
+          text-align: center;
+          color: var(--secondary-text-color);
+        }
+      `,
+    ];
+  }
+}
+declare global {
+  interface HTMLElementTagNameMap {
+    "ha-profile-section-general": HaProfileSectionGeneral;
+  }
+}

src/panels/profile/ha-profile-section-security.ts

@@ -0,0 +1,119 @@
+import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
+import { customElement, property, state } from "lit/decorators";
+import "../../layouts/hass-tabs-subpage";
+import { profileSections } from "./ha-panel-profile";
+import { RefreshToken } from "../../data/refresh_token";
+import { haStyle } from "../../resources/styles";
+import { HomeAssistant, Route } from "../../types";
+import "./ha-change-password-card";
+import "./ha-long-lived-access-tokens-card";
+import "./ha-mfa-modules-card";
+import "./ha-refresh-tokens-card";
+
+@customElement("ha-profile-section-security")
+class HaProfileSectionSecurity extends LitElement {
+  @property({ attribute: false }) public hass!: HomeAssistant;
+
+  @property({ type: Boolean }) public narrow = false;
+
+  @state() private _refreshTokens?: RefreshToken[];
+
+  @property({ attribute: false }) public route!: Route;
+
+  public connectedCallback() {
+    super.connectedCallback();
+    this._refreshRefreshTokens();
+  }
+
+  public firstUpdated() {
+    if (!this._refreshTokens) {
+      this._refreshRefreshTokens();
+    }
+  }
+
+  protected render(): TemplateResult {
+    return html`
+      <hass-tabs-subpage
+        .hass=${this.hass}
+        .narrow=${this.narrow}
+        .tabs=${profileSections}
+        .route=${this.route}
+      >
+        <div slot="title">${this.hass.localize("panel.profile")}</div>
+        <div class="content">
+          ${this.hass.user!.credentials.some(
+            (cred) => cred.auth_provider_type === "homeassistant"
+          )
+            ? html`
+                <ha-change-password-card
+                  .refreshTokens=${this._refreshTokens}
+                  @hass-refresh-tokens=${this._refreshRefreshTokens}
+                  .hass=${this.hass}
+                ></ha-change-password-card>
+              `
+            : ""}
+          <ha-mfa-modules-card
+            .hass=${this.hass}
+            .mfaModules=${this.hass.user!.mfa_modules}
+          ></ha-mfa-modules-card>
+
+          <ha-refresh-tokens-card
+            .hass=${this.hass}
+            .refreshTokens=${this._refreshTokens}
+            @hass-refresh-tokens=${this._refreshRefreshTokens}
+          ></ha-refresh-tokens-card>
+
+          <ha-long-lived-access-tokens-card
+            .hass=${this.hass}
+            .refreshTokens=${this._refreshTokens}
+            @hass-refresh-tokens=${this._refreshRefreshTokens}
+          ></ha-long-lived-access-tokens-card>
+        </div>
+      </hass-tabs-subpage>
+    `;
+  }
+
+  private async _refreshRefreshTokens() {
+    if (!this.hass) {
+      return;
+    }
+    this._refreshTokens = await this.hass.callWS({
+      type: "auth/refresh_tokens",
+    });
+  }
+
+  static get styles(): CSSResultGroup {
+    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;
+          padding-bottom: env(safe-area-inset-bottom);
+        }
+
+        .content > * {
+          display: block;
+          margin: 24px 0;
+        }
+
+        .promo-advanced {
+          text-align: center;
+          color: var(--secondary-text-color);
+        }
+      `,
+    ];
+  }
+}
+declare global {
+  interface HTMLElementTagNameMap {
+    "ha-profile-section-security": HaProfileSectionSecurity;
+  }
+}

src/translations/en.json

@@ -5903,6 +5903,10 @@
         "edit_zones": "Edit zones"
       },
       "profile": {
+        "tabs": {
+          "general": "General",
+          "security": "Security"
+        },
         "current_user": "You are currently logged in as {fullName}.",
         "is_owner": "You are an owner.",
         "user_settings_header": "User settings",