Add language picker to onboarding (#17668)

src/auth/ha-authorize.ts

@@ -35,6 +35,8 @@ export class HaAuthorize extends litLocalizeLiteMixin(LitElement) {
 
   @property() public oauth2State?: string;
 
+  @property() public translationFragment = "page-authorize";
+
   @state() private _authProvider?: AuthProvider;
 
   @state() private _authProviders?: AuthProvider[];
@@ -45,7 +47,6 @@ export class HaAuthorize extends litLocalizeLiteMixin(LitElement) {
 
   constructor() {
     super();
-    this.translationFragment = "page-authorize";
     const query = extractSearchParamsObject() as AuthUrlSearchParams;
     if (query.client_id) {
       this.clientId = query.client_id;
@@ -102,7 +103,6 @@ export class HaAuthorize extends litLocalizeLiteMixin(LitElement) {
         : nothing}
 
       <ha-auth-flow
-        .resources=${this.resources}
         .clientId=${this.clientId}
         .redirectUri=${this.redirectUri}
         .oauth2State=${this.oauth2State}

src/html/onboarding.html.template

@@ -14,24 +14,9 @@
         padding: 64px 0;
       }
       .content {
-        box-sizing: border-box;
-        padding: 20px 16px;
-        border-radius: var(--ha-card-border-radius, 12px);
         max-width: 432px;
         margin: 0 auto;
-        box-shadow: var(
-          --ha-card-box-shadow,
-          rgba(0, 0, 0, 0.25) 0px 54px 55px,
-          rgba(0, 0, 0, 0.12) 0px -12px 30px,
-          rgba(0, 0, 0, 0.12) 0px 4px 6px,
-          rgba(0, 0, 0, 0.17) 0px 12px 13px,
-          rgba(0, 0, 0, 0.09) 0px -3px 5px
-        );
-        background: var(
-          --ha-card-background,
-          var(--card-background-color, white)
-        );
-        color: var(--primary-text-color, #212121);
+        box-sizing: border-box;
       }
 
       .header {
@@ -41,6 +26,8 @@
         align-items: center;
         justify-content: center;
         font-weight: 300;
+        color: var(--text-primary-color, #fff);
+        margin-bottom: 16px;
       }
 
       .header img {

src/mixins/lit-localize-lite-mixin.ts

@@ -1,5 +1,5 @@
 import { LitElement, PropertyValues } from "lit";
-import { property } from "lit/decorators";
+import { property, state } from "lit/decorators";
 import { computeLocalize, LocalizeFunc } from "../common/translations/localize";
 import { Constructor, Resources } from "../types";
 import { getLocalLanguage, getTranslation } from "../util/common-translation";
@@ -15,13 +15,13 @@ export const litLocalizeLiteMixin = <T extends Constructor<LitElement>>(
     // Initialized to empty will prevent undefined errors if called before connected to DOM.
     @property() public localize: LocalizeFunc = empty;
 
-    @property() public resources?: Resources;
-
     // Use browser language setup before login.
     @property() public language?: string = getLocalLanguage();
 
     @property() public translationFragment?: string;
 
+    @state() private _resources?: Resources;
+
     public connectedCallback(): void {
       super.connectedCallback();
       this._initializeLocalizeLite();
@@ -35,22 +35,27 @@ export const litLocalizeLiteMixin = <T extends Constructor<LitElement>>(
       );
     }
 
-    protected updated(changedProperties: PropertyValues) {
-      super.updated(changedProperties);
+    protected willUpdate(changedProperties: PropertyValues) {
+      super.willUpdate(changedProperties);
+      if (changedProperties.get("language")) {
+        this._resources = undefined;
+        this._initializeLocalizeLite();
+      }
+
       if (changedProperties.get("translationFragment")) {
         this._initializeLocalizeLite();
       }
 
       if (
         this.language &&
-        this.resources &&
+        this._resources &&
         (changedProperties.has("language") ||
-          changedProperties.has("resources"))
+          changedProperties.has("_resources"))
       ) {
         computeLocalize(
           this.constructor.prototype,
           this.language,
-          this.resources
+          this._resources
         ).then((localize) => {
           this.localize = localize;
         });
@@ -58,7 +63,7 @@ export const litLocalizeLiteMixin = <T extends Constructor<LitElement>>(
     }
 
     protected async _initializeLocalizeLite() {
-      if (this.resources) {
+      if (this._resources) {
         return;
       }
 
@@ -68,7 +73,7 @@ export const litLocalizeLiteMixin = <T extends Constructor<LitElement>>(
         if (__DEV__) {
           setTimeout(
             () =>
-              !this.resources &&
+              !this._resources &&
               // eslint-disable-next-line
               console.error(
                 "Forgot to pass in resources or set translationFragment for",
@@ -84,7 +89,7 @@ export const litLocalizeLiteMixin = <T extends Constructor<LitElement>>(
         this.translationFragment!,
         this.language!
       );
-      this.resources = {
+      this._resources = {
         [this.language!]: data,
       };
     }

src/onboarding/ha-onboarding.ts

@@ -5,7 +5,7 @@ import {
   getAuth,
   subscribeConfig,
 } from "home-assistant-js-websocket";
-import { html, PropertyValues, nothing } from "lit";
+import { html, PropertyValues, nothing, css } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { applyThemesOnElement } from "../common/dom/apply_themes_on_element";
 import { HASSDomEvent } from "../common/dom/fire_event";
@@ -27,6 +27,9 @@ import { registerServiceWorker } from "../util/register-service-worker";
 import "./onboarding-analytics";
 import "./onboarding-create-user";
 import "./onboarding-loading";
+import "../components/ha-language-picker";
+import "../components/ha-card";
+import { storeState } from "../util/ha-pref-storage";
 import {
   enableWrite,
   loadTokens,
@@ -74,6 +77,21 @@ class HaOnboarding extends litLocalizeLiteMixin(HassElement) {
   @state() private _steps?: OnboardingStep[];
 
   protected render() {
+    return html`<ha-card>
+        <div class="card-content">${this._renderStep()}</div>
+      </ha-card>
+      ${this.hass
+        ? html`<ha-language-picker
+            .hass=${this.hass}
+            .value=${this.language}
+            .label=${this.localize("ui.panel.page-onboarding.language")}
+            nativeName
+            @value-changed=${this._languageChanged}
+          ></ha-language-picker>`
+        : nothing} `;
+  }
+
+  private _renderStep() {
     const step = this._curStep()!;
 
     if (this._loading || !step) {
@@ -114,7 +132,6 @@ class HaOnboarding extends litLocalizeLiteMixin(HassElement) {
         ></onboarding-analytics>
       `;
     }
-
     if (step.step === "integration") {
       return html`
         <onboarding-integrations
@@ -338,6 +355,31 @@ class HaOnboarding extends litLocalizeLiteMixin(HassElement) {
       setTimeout(resolve, 0);
     });
   }
+
+  private _languageChanged(ev: CustomEvent) {
+    const language = ev.detail.value;
+    this.language = language;
+    this._updateHass({
+      locale: { ...this.hass!.locale, language },
+      language,
+      selectedLanguage: language,
+    });
+    storeState(this.hass!);
+  }
+
+  static styles = css`
+    ha-language-picker {
+      display: block;
+      width: 200px;
+      margin-top: 8px;
+      --mdc-select-fill-color: none;
+      --mdc-select-label-ink-color: var(--text-primary-color, #fff);
+      --mdc-select-ink-color: var(--text-primary-color, #fff);
+      --mdc-select-idle-line-color: var(--text-primary-color, #fff);
+      --mdc-select-hover-line-color: var(--text-primary-color, #fff);
+      --mdc-select-dropdown-icon-color: var(--text-primary-color, #fff);
+    }
+  `;
 }
 
 declare global {

src/translations/en.json

@@ -5687,6 +5687,7 @@
         "intro": "Are you ready to awaken your home, reclaim your privacy and join a worldwide community of tinkerers?",
         "next": "Next",
         "finish": "Finish",
+        "language": "Language",
         "user": {
           "intro": "Let's get started by creating a user account.",
           "required_field": "Required",