diff --git a/hassio/src/dialogs/backup/dialog-hassio-backup.ts b/hassio/src/dialogs/backup/dialog-hassio-backup.ts index 230ecc1f22..66f5b6b829 100644 --- a/hassio/src/dialogs/backup/dialog-hassio-backup.ts +++ b/hassio/src/dialogs/backup/dialog-hassio-backup.ts @@ -173,6 +173,7 @@ class HassioBackupDialog private async _restoreClicked() { const backupDetails = this._backupContent.backupDetails(); this._restoringBackup = true; + this._dialogParams?.onRestoring?.(); if (this._backupContent.backupType === "full") { await this._fullRestoreClicked(backupDetails); } else { diff --git a/hassio/src/dialogs/backup/show-dialog-hassio-backup.ts b/hassio/src/dialogs/backup/show-dialog-hassio-backup.ts index 39c438e217..42f00da445 100644 --- a/hassio/src/dialogs/backup/show-dialog-hassio-backup.ts +++ b/hassio/src/dialogs/backup/show-dialog-hassio-backup.ts @@ -5,6 +5,7 @@ import { Supervisor } from "../../../../src/data/supervisor/supervisor"; export interface HassioBackupDialogParams { slug: string; onDelete?: () => void; + onRestoring?: () => void; onboarding?: boolean; supervisor?: Supervisor; localize?: LocalizeFunc; diff --git a/public/static/images/logo_discord.png b/public/static/images/logo_discord.png new file mode 100644 index 0000000000..24e567e1eb Binary files /dev/null and b/public/static/images/logo_discord.png differ diff --git a/public/static/images/logo_twitter.png b/public/static/images/logo_twitter.png new file mode 100644 index 0000000000..7b470c3bc3 Binary files /dev/null and b/public/static/images/logo_twitter.png differ diff --git a/src/components/ha-dialog.ts b/src/components/ha-dialog.ts index 5ecff68570..f061931322 100644 --- a/src/components/ha-dialog.ts +++ b/src/components/ha-dialog.ts @@ -10,12 +10,12 @@ import "./ha-icon-button"; const SUPPRESS_DEFAULT_PRESS_SELECTOR = ["button", "ha-list-item"]; export const createCloseHeading = ( - hass: HomeAssistant, + hass: HomeAssistant | undefined, title: string | TemplateResult ) => html`
${title}
option.value === this.value @@ -78,11 +79,11 @@ export class HaLanguagePicker extends LitElement { } private _getLanguagesOptions = memoizeOne( - (languages: string[], locale: FrontendLocaleData, nativeName: boolean) => { + (languages: string[], nativeName: boolean, locale?: FrontendLocaleData) => { let options: { label: string; value: string }[] = []; if (nativeName) { - const translations = this.hass.translationMetadata.translations; + const translations = translationMetadata.translations; options = languages.map((lang) => { let label = translations[lang]?.nativeName; if (!label) { @@ -101,14 +102,14 @@ export class HaLanguagePicker extends LitElement { label, }; }); - } else { + } else if (locale) { options = languages.map((lang) => ({ value: lang, label: formatLanguageCode(lang, locale), })); } - if (!this.noSort) { + if (!this.noSort && locale) { options.sort((a, b) => caseInsensitiveStringCompare(a.label, b.label, locale.language) ); @@ -118,20 +119,14 @@ export class HaLanguagePicker extends LitElement { ); private _computeDefaultLanguageOptions() { - if (!this.hass.translationMetadata?.translations) { - return; - } - - this._defaultLanguages = Object.keys( - this.hass.translationMetadata.translations - ); + this._defaultLanguages = Object.keys(translationMetadata.translations); } protected render() { const languageOptions = this._getLanguagesOptions( this.languages ?? this._defaultLanguages, - this.hass.locale, - this.nativeName + this.nativeName, + this.hass?.locale ); const value = @@ -139,9 +134,10 @@ export class HaLanguagePicker extends LitElement { return html` ${languageOptions.length === 0 ? html`${this.hass.localize( + >${this.hass?.localize( "ui.components.language-picker.no_languages" - )}` : languageOptions.map( (option) => html` @@ -176,7 +172,7 @@ export class HaLanguagePicker extends LitElement { private _changed(ev): void { const target = ev.target as HaSelect; - if (!this.hass || target.value === "" || target.value === this.value) { + if (target.value === "" || target.value === this.value) { return; } this.value = target.value; diff --git a/src/components/ha-select.ts b/src/components/ha-select.ts index 7471149051..bb3cfb4ae7 100644 --- a/src/components/ha-select.ts +++ b/src/components/ha-select.ts @@ -47,6 +47,9 @@ export class HaSelect extends SelectBase { .mdc-select__anchor { width: var(--ha-select-min-width, 200px); } + .mdc-select--filled .mdc-select__anchor { + height: var(--ha-select-height, 56px); + } .mdc-select--filled .mdc-floating-label { inset-inline-start: 12px; inset-inline-end: initial; diff --git a/src/components/language-datalist.ts b/src/components/language-datalist.ts deleted file mode 100644 index bac8b44c9c..0000000000 --- a/src/components/language-datalist.ts +++ /dev/null @@ -1,15 +0,0 @@ -import { HomeAssistant } from "../types"; - -export const createLanguageListEl = (hass: HomeAssistant) => { - const list = document.createElement("datalist"); - list.id = "languages"; - for (const [language, metadata] of Object.entries( - hass.translationMetadata.translations - )) { - const option = document.createElement("option"); - option.value = language; - option.innerText = metadata.nativeName; - list.appendChild(option); - } - return list; -}; diff --git a/src/html/onboarding.html.template b/src/html/onboarding.html.template index aed5a62a79..9f89da79f0 100644 --- a/src/html/onboarding.html.template +++ b/src/html/onboarding.html.template @@ -6,44 +6,40 @@ <%= renderTemplate("_style_base.html.template") %> @@ -51,8 +47,7 @@
- - Home Assistant + Home Assistant
diff --git a/src/onboarding/dialogs/app-dialog.ts b/src/onboarding/dialogs/app-dialog.ts new file mode 100644 index 0000000000..087adfc3a7 --- /dev/null +++ b/src/onboarding/dialogs/app-dialog.ts @@ -0,0 +1,6759 @@ +import { LitElement, css, html, nothing } from "lit"; +import { customElement, property } from "lit/decorators"; +import { LocalizeFunc } from "../../common/translations/localize"; +import { fireEvent } from "../../common/dom/fire_event"; +import { createCloseHeading } from "../../components/ha-dialog"; + +@customElement("app-dialog") +class DialogApp extends LitElement { + @property({ attribute: false }) public localize?: LocalizeFunc; + + public async showDialog(params): Promise { + this.localize = params.localize; + } + + public async closeDialog(): Promise { + this.localize = undefined; + fireEvent(this, "dialog-closed", { dialog: this.localName }); + } + + protected render() { + if (!this.localize) { + return nothing; + } + return html` +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ `; + } + + static styles = css` + ha-dialog { + --mdc-dialog-min-width: min(500px, 90vw); + } + div { + display: flex; + justify-content: space-between; + } + a:first-child { + margin-right: 16px; + } + svg { + width: 100%; + } + .light { + fill: var(--card-background-color); + } + .dark { + fill: var(--primary-text-color); + } + @media (prefers-color-scheme: dark) { + .mask { + fill: var(--primary-text-color); + } + .logo { + filter: invert(100%); + } + } + `; +} + +declare global { + interface HTMLElementTagNameMap { + "app-dialog": DialogApp; + } +} diff --git a/src/onboarding/dialogs/community-dialog.ts b/src/onboarding/dialogs/community-dialog.ts new file mode 100644 index 0000000000..f2bffcb3cc --- /dev/null +++ b/src/onboarding/dialogs/community-dialog.ts @@ -0,0 +1,106 @@ +import "@material/mwc-list/mwc-list"; +import { mdiOpenInNew } from "@mdi/js"; +import { LitElement, css, html, nothing } from "lit"; +import { customElement, property } from "lit/decorators"; +import { fireEvent } from "../../common/dom/fire_event"; +import { LocalizeFunc } from "../../common/translations/localize"; +import { createCloseHeading } from "../../components/ha-dialog"; +import "../../components/ha-list-item"; + +@customElement("community-dialog") +class DialogCommunity extends LitElement { + @property({ attribute: false }) public localize?: LocalizeFunc; + + public async showDialog(params): Promise { + this.localize = params.localize; + } + + public async closeDialog(): Promise { + this.localize = undefined; + fireEvent(this, "dialog-closed", { dialog: this.localName }); + } + + protected render() { + if (!this.localize) { + return nothing; + } + return html` + + + + + ${this.localize("ui.panel.page-onboarding.welcome.forums")} + + + + + + + ${this.localize( + "ui.panel.page-onboarding.welcome.open_home_newsletter" + )} + + + + + + + ${this.localize("ui.panel.page-onboarding.welcome.discord")} + + + + + + + ${this.localize("ui.panel.page-onboarding.welcome.twitter")} + + + + + `; + } + + static styles = css` + ha-dialog { + --mdc-dialog-min-width: min(400px, 90vw); + --dialog-content-padding: 0; + } + ha-list-item { + height: 56px; + --mdc-list-item-meta-size: 20px; + } + a { + text-decoration: none; + } + `; +} + +declare global { + interface HTMLElementTagNameMap { + "community-dialog": DialogCommunity; + } +} diff --git a/src/onboarding/dialogs/show-app-dialog.ts b/src/onboarding/dialogs/show-app-dialog.ts new file mode 100644 index 0000000000..49dbac5205 --- /dev/null +++ b/src/onboarding/dialogs/show-app-dialog.ts @@ -0,0 +1,15 @@ +import { fireEvent } from "../../common/dom/fire_event"; +import { LocalizeFunc } from "../../common/translations/localize"; + +export const loadAppDialog = () => import("./app-dialog"); + +export const showAppDialog = ( + element: HTMLElement, + params: { localize: LocalizeFunc } +): void => { + fireEvent(element, "show-dialog", { + dialogTag: "app-dialog", + dialogImport: loadAppDialog, + dialogParams: params, + }); +}; diff --git a/src/onboarding/dialogs/show-community-dialog.ts b/src/onboarding/dialogs/show-community-dialog.ts new file mode 100644 index 0000000000..236df5cc70 --- /dev/null +++ b/src/onboarding/dialogs/show-community-dialog.ts @@ -0,0 +1,15 @@ +import { fireEvent } from "../../common/dom/fire_event"; +import { LocalizeFunc } from "../../common/translations/localize"; + +export const loadCommunityDialog = () => import("./community-dialog"); + +export const showCommunityDialog = ( + element: HTMLElement, + params: { localize: LocalizeFunc } +): void => { + fireEvent(element, "show-dialog", { + dialogTag: "community-dialog", + dialogImport: loadCommunityDialog, + dialogParams: params, + }); +}; diff --git a/src/onboarding/ha-onboarding.ts b/src/onboarding/ha-onboarding.ts index 5a2872f9fb..7a06c0e3cf 100644 --- a/src/onboarding/ha-onboarding.ts +++ b/src/onboarding/ha-onboarding.ts @@ -1,3 +1,4 @@ +import "@material/mwc-linear-progress/mwc-linear-progress"; import { Auth, createConnection, @@ -5,38 +6,45 @@ import { getAuth, subscribeConfig, } from "home-assistant-js-websocket"; -import { html, PropertyValues, nothing, css } from "lit"; +import { PropertyValues, css, html, nothing } from "lit"; import { customElement, property, state } from "lit/decorators"; +import { + enableWrite, + loadTokens, + saveTokens, +} from "../common/auth/token_storage"; import { applyThemesOnElement } from "../common/dom/apply_themes_on_element"; import { HASSDomEvent } from "../common/dom/fire_event"; import { extractSearchParamsObject } from "../common/url/search-params"; import { subscribeOne } from "../common/util/subscribe-one"; +import "../components/ha-card"; +import "../components/ha-language-picker"; import { AuthUrlSearchParams, hassUrl } from "../data/auth"; import { - fetchInstallationType, - fetchOnboardingOverview, OnboardingResponses, OnboardingStep, + fetchInstallationType, + fetchOnboardingOverview, onboardIntegrationStep, } from "../data/onboarding"; import { subscribeUser } from "../data/ws-user"; import { litLocalizeLiteMixin } from "../mixins/lit-localize-lite-mixin"; import { HassElement } from "../state/hass-element"; import { HomeAssistant } from "../types"; +import { storeState } from "../util/ha-pref-storage"; 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, - saveTokens, -} from "../common/auth/token_storage"; +import "./onboarding-welcome"; +import "./onboarding-welcome-links"; +import { makeDialogManager } from "../dialogs/make-dialog-manager"; type OnboardingEvent = + | { + type: "init"; + result: { restore: boolean }; + } | { type: "user"; result: OnboardingResponses["user"]; @@ -52,13 +60,21 @@ type OnboardingEvent = type: "analytics"; }; +interface OnboardingProgressEvent { + increase?: number; + decrease?: number; + progress?: number; +} + declare global { interface HASSDomEvents { "onboarding-step": OnboardingEvent; + "onboarding-progress": OnboardingProgressEvent; } interface GlobalEventHandlersEventMap { "onboarding-step": HASSDomEvent; + "onboarding-progress": HASSDomEvent; } } @@ -68,8 +84,12 @@ class HaOnboarding extends litLocalizeLiteMixin(HassElement) { @property() public translationFragment = "page-onboarding"; + @state() private _progress = 0; + @state() private _loading = false; + @state() private _init = false; + @state() private _restoring = false; @state() private _supervisor?: boolean; @@ -77,44 +97,58 @@ class HaOnboarding extends litLocalizeLiteMixin(HassElement) { @state() private _steps?: OnboardingStep[]; protected render() { - return html` + return html` +
${this._renderStep()}
 - ${this.hass - ? html`` - : nothing} `; + ${this._init + ? html`` + : nothing} +
+ + ${this.localize("ui.panel.page-onboarding.help")} +
`; } private _renderStep() { + if (this._init) { + return html``; + } + + if (this._restoring) { + return html` + `; + } + const step = this._curStep()!; if (this._loading || !step) { return html` `; } if (step.step === "user") { - return html` - ${!this._restoring - ? html` - ` - : ""} - ${this._supervisor - ? html` - ` - : ""} - `; + return html` + `; } if (step.step === "core_config") { return html` @@ -150,9 +184,13 @@ class HaOnboarding extends litLocalizeLiteMixin(HassElement) { import("./onboarding-core-config"); registerServiceWorker(this, false); this.addEventListener("onboarding-step", (ev) => this._handleStepDone(ev)); + this.addEventListener("onboarding-progress", (ev) => + this._handleProgress(ev) + ); if (window.innerWidth > 450) { import("./particles"); } + makeDialogManager(this, this.shadowRoot!); } protected updated(changedProps: PropertyValues) { @@ -187,10 +225,6 @@ class HaOnboarding extends litLocalizeLiteMixin(HassElement) { return this._steps ? this._steps.find((stp) => !stp.done) : undefined; } - private _restoringBackup() { - this._restoring = true; - } - private async _fetchInstallationType(): Promise { try { const response = await fetchInstallationType(); @@ -239,8 +273,12 @@ class HaOnboarding extends litLocalizeLiteMixin(HassElement) { }); history.replaceState(null, "", location.pathname); await this._connectHass(auth); + const currentStep = steps.findIndex((stp) => !stp.done); + const singelStepProgress = 1 / steps.length; + this._progress = currentStep * singelStepProgress + singelStepProgress; } else { - // User creating screen needs to know the installation type. + this._init = true; + // Init screen needs to know the installation type. this._fetchInstallationType(); } @@ -250,15 +288,35 @@ class HaOnboarding extends litLocalizeLiteMixin(HassElement) { } } + private _handleProgress(ev: HASSDomEvent) { + const stepSize = 1 / this._steps!.length; + if (ev.detail.increase) { + this._progress += ev.detail.increase * stepSize; + } + if (ev.detail.decrease) { + this._progress -= ev.detail.decrease * stepSize; + } + if (ev.detail.progress) { + this._progress = ev.detail.progress; + } + } + private async _handleStepDone(ev: HASSDomEvent) { const stepResult = ev.detail; this._steps = this._steps!.map((step) => step.step === stepResult.type ? { ...step, done: true } : step ); - if (stepResult.type === "user") { + if (stepResult.type === "init") { + this._init = false; + this._restoring = stepResult.result.restore; + if (!this._restoring) { + this._progress = 0.25; + } + } else if (stepResult.type === "user") { const result = stepResult.result as OnboardingResponses["user"]; this._loading = true; + this._progress = 0.5; enableWrite(); try { const auth = await getAuth({ @@ -275,6 +333,10 @@ class HaOnboarding extends litLocalizeLiteMixin(HassElement) { this._loading = false; } } else if (stepResult.type === "core_config") { + this._progress = 0.75; + // We do nothing + } else if (stepResult.type === "analytics") { + this._progress = 1; // We do nothing } else if (stepResult.type === "integration") { this._loading = true; @@ -348,6 +410,14 @@ class HaOnboarding extends litLocalizeLiteMixin(HassElement) { subscribeOne(conn, subscribeUser), ]); this.initializeHass(auth, conn); + if (this.language && this.language !== this.hass!.language) { + this._updateHass({ + locale: { ...this.hass!.locale, language: this.language }, + language: this.language, + selectedLanguage: this.language, + }); + storeState(this.hass!); + } // Load config strings for integrations (this as any)._loadFragmentTranslations(this.hass!.language, "config"); // Make sure hass is initialized + the config/user callbacks have called. @@ -359,25 +429,54 @@ class HaOnboarding extends litLocalizeLiteMixin(HassElement) { 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!); + if (this.hass) { + this._updateHass({ + locale: { ...this.hass!.locale, language }, + language, + selectedLanguage: language, + }); + storeState(this.hass!); + } else { + try { + localStorage.setItem("selectedLanguage", JSON.stringify(language)); + } catch (err: any) { + // Ignore + } + } } static styles = css` + mwc-linear-progress { + position: fixed; + top: 0; + left: 0; + width: 100%; + z-index: 10; + } + .footer { + display: flex; + justify-content: space-between; + align-items: center; + } ha-language-picker { display: block; width: 200px; margin-top: 8px; + border-radius: 4px; + overflow: hidden; + --ha-select-height: 40px; --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); + --mdc-select-label-ink-color: var(--primary-text-color, #212121); + --mdc-select-ink-color: var(--primary-text-color, #212121); + --mdc-select-idle-line-color: transparent; + --mdc-select-hover-line-color: transparent; + --mdc-select-dropdown-icon-color: var(--primary-text-color, #212121); + --mdc-shape-small: 0; + } + a { + text-decoration: none; + color: var(--primary-text-color); + margin-right: 16px; } `; } diff --git a/src/onboarding/onboarding-analytics.ts b/src/onboarding/onboarding-analytics.ts index aeddcb4cc7..0bf36b8159 100644 --- a/src/onboarding/onboarding-analytics.ts +++ b/src/onboarding/onboarding-analytics.ts @@ -1,4 +1,5 @@ import "@material/mwc-button/mwc-button"; +import { mdiOpenInNew } from "@mdi/js"; import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit"; import { customElement, property, state } from "lit/decorators"; import { fireEvent } from "../common/dom/fire_event"; @@ -8,6 +9,7 @@ import { Analytics, setAnalyticsPreferences } from "../data/analytics"; import { onboardAnalyticsStep } from "../data/onboarding"; import type { HomeAssistant } from "../types"; import { documentationUrl } from "../util/documentation-url"; +import { onBoardingStyles } from "./styles"; @customElement("onboarding-analytics") class OnboardingAnalytics extends LitElement { @@ -23,7 +25,18 @@ class OnboardingAnalytics extends LitElement { protected render(): TemplateResult { return html` +

${this.localize("ui.panel.page-onboarding.analytics.header")}

${this.localize("ui.panel.page-onboarding.analytics.intro")}

+

+ + ${this.localize("ui.panel.page-onboarding.analytics.learn_more")} + + +

${this._error ? html`
${this._error}
` : ""}
- + ${this.localize("ui.panel.page-onboarding.analytics.finish")} - - ${this.localize("ui.panel.page-onboarding.analytics.learn_more")} -
`; } @@ -81,27 +91,19 @@ class OnboardingAnalytics extends LitElement { } static get styles(): CSSResultGroup { - return css` - p { - font-size: 14px; - line-height: 20px; - } - .error { - color: var(--error-color); - } - .footer { - margin-top: 16px; - display: flex; - justify-content: space-between; - align-items: center; - flex-direction: row-reverse; - } - a { - color: var(--primary-color); - } - `; - - // footer is direction reverse to tab to "NEXT" first + return [ + onBoardingStyles, + css` + .error { + color: var(--error-color); + } + a { + color: var(--primary-color); + text-decoration: none; + --mdc-icon-size: 14px; + } + `, + ]; } } diff --git a/src/onboarding/onboarding-core-config.ts b/src/onboarding/onboarding-core-config.ts index 67ca87b9a9..6306e8ba64 100644 --- a/src/onboarding/onboarding-core-config.ts +++ b/src/onboarding/onboarding-core-config.ts @@ -13,15 +13,6 @@ import { fireEvent } from "../common/dom/fire_event"; import type { LocalizeFunc } from "../common/translations/localize"; import "../components/ha-alert"; import "../components/ha-country-picker"; -import "../components/ha-currency-picker"; -import "../components/ha-formfield"; -import "../components/ha-language-picker"; -import "../components/ha-radio"; -import type { HaRadio } from "../components/ha-radio"; -import "../components/ha-textfield"; -import type { HaTextField } from "../components/ha-textfield"; -import "../components/ha-timezone-picker"; -import "../components/map/ha-locations-editor"; import { ConfigUpdateValues, saveCoreConfig } from "../data/core"; import { countryCurrency } from "../data/currency"; import { onboardCoreConfigStep } from "../data/onboarding"; @@ -39,15 +30,16 @@ class OnboardingCoreConfig extends LitElement { @state() private _location?: [number, number]; - @state() private _elevation?: string; + private _elevation = "0"; - @state() private _unitSystem?: ConfigUpdateValues["unit_system"]; + private _unitSystem: ConfigUpdateValues["unit_system"] = "metric"; - @state() private _currency?: ConfigUpdateValues["currency"]; + private _currency: ConfigUpdateValues["currency"] = "EUR"; - @state() private _timeZone?: ConfigUpdateValues["time_zone"]; + private _timeZone: ConfigUpdateValues["time_zone"] = + Intl.DateTimeFormat?.().resolvedOptions?.().timeZone; - @state() private _language: ConfigUpdateValues["language"]; + private _language: ConfigUpdateValues["language"] = getLocalLanguage(); @state() private _country?: ConfigUpdateValues["country"]; @@ -69,155 +61,28 @@ class OnboardingCoreConfig extends LitElement { `; } return html` - ${ - this._error - ? html`${this._error}` - : nothing - } + ${this._error + ? html`${this._error}` + : nothing}

- ${this.onboardingLocalize( - "ui.panel.page-onboarding.core-config.intro_core_config" - )} + ${this.onboardingLocalize( + "ui.panel.page-onboarding.core-config.country_intro" + )}

-
- - - - -
- -
- - - - - -
- -
-
- ${this.hass.localize( - "ui.panel.config.core.section.core.core_config.unit_system" - )} -
-
- - ${this.hass.localize( - "ui.panel.config.core.section.core.core_config.metric_example" - )} -
`} - > - - - - ${this.hass.localize( - "ui.panel.config.core.section.core.core_config.us_customary_example" - )} -
`} - > - - - - - -
-
- ${this.hass.localize( - "ui.panel.config.core.section.core.core_config.currency" - )}
- ${this.hass.localize( - "ui.panel.config.core.section.core.core_config.find_currency_value" - )} -
- - -
- + +
@@ -229,20 +94,6 @@ class OnboardingCoreConfig extends LitElement { `; } - protected willUpdate(changedProps: PropertyValues): void { - if (!changedProps.has("_country") || !this._country) { - return; - } - if (!this._currency) { - this._currency = countryCurrency[this._country]; - } - if (!this._unitSystem) { - this._unitSystem = ["US", "MM", "LR"].includes(this._country) - ? "us_customary" - : "metric"; - } - } - protected firstUpdated(changedProps: PropertyValues) { super.firstUpdated(changedProps); this.addEventListener("keyup", (ev) => { @@ -252,70 +103,49 @@ class OnboardingCoreConfig extends LitElement { }); } - private get _elevationValue() { - return this._elevation !== undefined ? this._elevation : 0; - } - - private get _timeZoneValue() { - return this._timeZone || ""; - } - - private get _languageValue() { - return this._language || ""; - } - private get _countryValue() { return this._country || ""; } - private get _unitSystemValue() { - return this._unitSystem !== undefined ? this._unitSystem : "metric"; - } - - private get _currencyValue() { - return this._currency !== undefined ? this._currency : ""; - } - - private _handleValueChanged(ev: ValueChangedEvent) { - const target = ev.currentTarget as HTMLElement; - this[`_${target.getAttribute("name")}`] = ev.detail.value; - } - - private _handleChange(ev: Event) { - const target = ev.currentTarget as HaTextField; - this[`_${target.name}`] = target.value; + private _handleCountryChanged(ev: ValueChangedEvent) { + this._country = ev.detail.value; } private async _locationChanged(ev) { this._location = ev.detail.value.location; - this._country = ev.detail.value.country; - this._elevation = ev.detail.value.elevation; - this._currency = ev.detail.value.currency; - this._language = ev.detail.value.language || getLocalLanguage(); - this._timeZone = - ev.detail.value.timezone || - Intl.DateTimeFormat?.().resolvedOptions?.().timeZone; - this._unitSystem = ev.detail.value.unit_system; + if (ev.detail.value.country) { + this._country = ev.detail.value.country; + } + if (ev.detail.value.elevation) { + this._elevation = ev.detail.value.elevation; + } + if (ev.detail.value.currency) { + this._currency = ev.detail.value.currency; + } + if (ev.detail.value.language) { + this._language = ev.detail.value.language; + } + if (ev.detail.value.timezone) { + this._timeZone = ev.detail.value.timezone; + } + if (ev.detail.value.unit_system) { + this._unitSystem = ev.detail.value.unit_system; + } if (this._country) { this._skipCore = true; this._save(ev); return; } + fireEvent(this, "onboarding-progress", { increase: 0.5 }); await this.updateComplete; setTimeout( - () => this.renderRoot.querySelector("ha-textfield")!.focus(), + () => this.renderRoot.querySelector("ha-country-picker")!.focus(), 100 ); } - private _unitSystemChanged(ev: CustomEvent) { - this._unitSystem = (ev.target as HaRadio).value as - | "metric" - | "us_customary"; - } - private async _save(ev) { - if (!this._location) { + if (!this._location || !this._country) { return; } ev.preventDefault(); @@ -327,12 +157,15 @@ class OnboardingCoreConfig extends LitElement { ), latitude: this._location[0], longitude: this._location[1], - elevation: Number(this._elevationValue), - unit_system: this._unitSystemValue, - time_zone: this._timeZoneValue || "UTC", - currency: this._currencyValue || "EUR", - country: this._countryValue, - language: this._languageValue, + elevation: Number(this._elevation), + unit_system: + this._unitSystem || ["US", "MM", "LR"].includes(this._country) + ? "us_customary" + : "metric", + time_zone: this._timeZone || "UTC", + currency: this._currency || countryCurrency[this._country] || "EUR", + country: this._country, + language: this._language, }); const result = await onboardCoreConfigStep(this.hass); fireEvent(this, "onboarding-step", { diff --git a/src/onboarding/onboarding-create-user.ts b/src/onboarding/onboarding-create-user.ts index ea24e6b661..e8d50bfcc7 100644 --- a/src/onboarding/onboarding-create-user.ts +++ b/src/onboarding/onboarding-create-user.ts @@ -1,7 +1,6 @@ import "@material/mwc-button"; import { genClientId } from "home-assistant-js-websocket"; import { - css, CSSResultGroup, html, LitElement, @@ -16,6 +15,8 @@ import type { HaForm } from "../components/ha-form/ha-form"; import { HaFormDataContainer, HaFormSchema } from "../components/ha-form/types"; import { onboardUserStep } from "../data/onboarding"; import { ValueChangedEvent } from "../types"; +import { onBoardingStyles } from "./styles"; +import { debounce } from "../common/util/debounce"; const CREATE_USER_SCHEMA: HaFormSchema[] = [ { @@ -58,7 +59,7 @@ class OnboardingCreateUser extends LitElement { protected render(): TemplateResult { return html` -

${this.localize("ui.panel.page-onboarding.intro")}

+

${this.localize("ui.panel.page-onboarding.user.header")}

${this.localize("ui.panel.page-onboarding.user.intro")}

${this._errorMsg @@ -67,25 +68,27 @@ class OnboardingCreateUser extends LitElement { - - - ${this.localize("ui.panel.page-onboarding.user.create_account")} - +
+ + ${this.localize("ui.panel.page-onboarding.user.create_account")} + +
`; } @@ -111,20 +114,48 @@ class OnboardingCreateUser extends LitElement { localize(`ui.panel.page-onboarding.user.data.${schema.name}`); } + private _computeHelper(localize) { + return (schema: HaFormSchema) => + localize(`ui.panel.page-onboarding.user.helper.${schema.name}`); + } + private _handleValueChanged( ev: ValueChangedEvent ): void { const nameChanged = ev.detail.value.name !== this._newUser.name; + const passwordChanged = + ev.detail.value.password !== this._newUser.password || + ev.detail.value.password_confirm !== this._newUser.password_confirm; this._newUser = ev.detail.value; if (nameChanged) { this._maybePopulateUsername(); } + if (passwordChanged) { + if (this._formError.password_confirm) { + this._checkPasswordMatch(); + } else { + this._debouncedCheckPasswordMatch(); + } + } + } + + private _debouncedCheckPasswordMatch = debounce( + () => this._checkPasswordMatch(), + 500 + ); + + private _checkPasswordMatch(): void { + const old = this._formError.password_confirm; this._formError.password_confirm = + this._newUser.password_confirm && this._newUser.password !== this._newUser.password_confirm ? this.localize( "ui.panel.page-onboarding.user.error.password_not_match" ) : ""; + if (old !== this._formError.password_confirm) { + this.requestUpdate("_formError"); + } } private _maybePopulateUsername(): void { @@ -167,14 +198,7 @@ class OnboardingCreateUser extends LitElement { } static get styles(): CSSResultGroup { - return css` - mwc-button { - margin: 32px 0 0; - text-align: center; - display: block; - text-align: right; - } - `; + return onBoardingStyles; } } diff --git a/src/onboarding/onboarding-integrations.ts b/src/onboarding/onboarding-integrations.ts index 6475ae6695..19c05b2af3 100644 --- a/src/onboarding/onboarding-integrations.ts +++ b/src/onboarding/onboarding-integrations.ts @@ -21,6 +21,7 @@ import { scanUSBDevices } from "../data/usb"; import { SubscribeMixin } from "../mixins/subscribe-mixin"; import { HomeAssistant } from "../types"; import "./integration-badge"; +import { onBoardingStyles } from "./styles"; const HIDDEN_DOMAINS = new Set([ "hassio", @@ -131,11 +132,11 @@ class OnboardingIntegrations extends SubscribeMixin(LitElement) { } return html` -

+

${this.onboardingLocalize( "ui.panel.page-onboarding.integration.header" )} -

+

${this.onboardingLocalize("ui.panel.page-onboarding.integration.intro")}

@@ -158,7 +159,7 @@ class OnboardingIntegrations extends SubscribeMixin(LitElement) { : nothing}
- + ${this.onboardingLocalize( "ui.panel.page-onboarding.integration.finish" )} @@ -187,30 +188,23 @@ class OnboardingIntegrations extends SubscribeMixin(LitElement) { } static get styles(): CSSResultGroup { - return css` - h2 { - text-align: center; - } - p { - font-size: 14px; - line-height: 20px; - } - .badges { - margin-top: 24px; - display: grid; - grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); - row-gap: 24px; - } - .more { - display: flex; - justify-content: center; - align-items: center; - height: 100%; - } - .footer { - text-align: right; - } - `; + return [ + onBoardingStyles, + css` + .badges { + margin-top: 24px; + display: grid; + grid-template-columns: repeat(auto-fill, minmax(106px, 1fr)); + row-gap: 24px; + } + .more { + display: flex; + justify-content: center; + align-items: center; + height: 100%; + } + `, + ]; } } diff --git a/src/onboarding/onboarding-loading.ts b/src/onboarding/onboarding-loading.ts index e9182332ec..23f9967d21 100644 --- a/src/onboarding/onboarding-loading.ts +++ b/src/onboarding/onboarding-loading.ts @@ -4,7 +4,7 @@ import { customElement } from "lit/decorators"; @customElement("onboarding-loading") class OnboardingLoading extends LitElement { protected render(): TemplateResult { - return html`
`; + return html`
`; } static get styles(): CSSResultGroup { diff --git a/src/onboarding/onboarding-location.ts b/src/onboarding/onboarding-location.ts index b58137d19b..b4b3209a9f 100644 --- a/src/onboarding/onboarding-location.ts +++ b/src/onboarding/onboarding-location.ts @@ -1,5 +1,10 @@ import "@material/mwc-button/mwc-button"; -import { mdiCrosshairsGps, mdiMapMarker, mdiMapSearchOutline } from "@mdi/js"; +import { + mdiCrosshairsGps, + mdiMagnify, + mdiMapMarker, + mdiMapSearchOutline, +} from "@mdi/js"; import { css, CSSResultGroup, @@ -30,6 +35,7 @@ import { reverseGeocode, searchPlaces, } from "../data/openstreetmap"; +import { onBoardingStyles } from "./styles"; const AMSTERDAM: [number, number] = [52.3731339, 4.8903147]; const mql = matchMedia("(prefers-color-scheme: dark)"); @@ -43,7 +49,7 @@ class OnboardingLocation extends LitElement { @state() private _working = false; - @state() private _location?: [number, number]; + @state() private _location: [number, number] = AMSTERDAM; @state() private _places?: OpenStreetMapPlace[] | null; @@ -87,6 +93,11 @@ class OnboardingLocation extends LitElement { ); return html` +

+ ${this.onboardingLocalize( + "ui.panel.page-onboarding.core-config.location_header" + )} +

${this._error ? html`${this._error}` : nothing} @@ -97,78 +108,85 @@ class OnboardingLocation extends LitElement { )}

- - ${this._working +
+ + + ${this._working + ? html` + + ` + : html` + + `} + + ${this._places !== undefined ? html` - + + ${this._places?.length + ? this._places.map((place) => { + const primary = [ + place.name || place.address[place.category], + place.address.house_number, + place.address.road || place.address.waterway, + place.address.village || place.address.town, + place.address.suburb || place.address.subdivision, + place.address.city || place.address.municipality, + ] + .filter(Boolean) + .join(", "); + const secondary = [ + place.address.county || + place.address.state_district || + place.address.region, + place.address.state, + place.address.country, + ] + .filter(Boolean) + .join(", "); + return html` + ${primary || secondary} + ${primary ? secondary : ""} + `; + }) + : html`${this._places === null + ? "" + : "No results"}`} + ` - : html` - - `} - - ${this._places !== undefined - ? html` - - ${this._places?.length - ? this._places.map((place) => { - const primary = [ - place.name || place.address[place.category], - place.address.house_number, - place.address.road || place.address.waterway, - place.address.village || place.address.town, - place.address.suburb || place.address.subdivision, - place.address.city || place.address.municipality, - ] - .filter(Boolean) - .join(", "); - const secondary = [ - place.address.county || - place.address.state_district || - place.address.region, - place.address.state, - place.address.country, - ] - .filter(Boolean) - .join(", "); - return html` - ${primary || secondary} - ${primary ? secondary : ""} - `; - }) - : html`${this._places === null ? "" : "No results"}`} - - ` - : nothing} -

${addressAttribution}

+ : nothing} +
+

${addressAttribution}

+
- + ${this.onboardingLocalize( "ui.panel.page-onboarding.core-config.finish" )} @@ -301,7 +318,6 @@ class OnboardingLocation extends LitElement { private async _searchAddress(address: string) { this._working = true; - this._location = undefined; this._highlightedMarker = undefined; this._error = undefined; this._places = null; @@ -464,74 +480,76 @@ class OnboardingLocation extends LitElement { } static get styles(): CSSResultGroup { - return css` - p { - font-size: 14px; - line-height: 20px; - } - ha-textfield { - display: block; - } - ha-textfield > ha-icon-button { - position: absolute; - top: 10px; - right: 10px; - --mdc-icon-button-size: 36px; - --mdc-icon-size: 20px; - color: var(--secondary-text-color); - inset-inline-start: initial; - inset-inline-end: 10px; - direction: var(--direction); - } - ha-textfield > ha-circular-progress { - position: relative; - left: 12px; - } - ha-locations-editor { - display: block; - height: 300px; - margin-top: 8px; - border-radius: var(--mdc-shape-small, 4px); - overflow: hidden; - } - mwc-list { - width: 100%; - border: 1px solid var(--divider-color); - box-sizing: border-box; - border-top-width: 0; - border-bottom-left-radius: var(--mdc-shape-small, 4px); - border-bottom-right-radius: var(--mdc-shape-small, 4px); - --mdc-list-vertical-padding: 0; - } - ha-list-item { - height: 72px; - } - .footer { - margin-top: 16px; - text-align: right; - } - .attribution { - /* textfield helper style */ - margin: 0; - padding: 4px 16px 12px 16px; - color: var(--mdc-text-field-label-ink-color, rgba(0, 0, 0, 0.6)); - font-family: var( - --mdc-typography-caption-font-family, - var(--mdc-typography-font-family, Roboto, sans-serif) - ); - font-size: var(--mdc-typography-caption-font-size, 0.75rem); - font-weight: var(--mdc-typography-caption-font-weight, 400); - letter-spacing: var( - --mdc-typography-caption-letter-spacing, - 0.0333333333em - ); - text-decoration: var(--mdc-typography-caption-text-decoration, inherit); - text-transform: var(--mdc-typography-caption-text-transform, inherit); - } - .attribution a { - color: inherit; - } - `; + return [ + onBoardingStyles, + css` + .location-search { + margin-top: 32px; + margin-bottom: 32px; + } + ha-textfield { + display: block; + } + ha-textfield > ha-icon-button { + position: absolute; + top: 10px; + right: 10px; + --mdc-icon-button-size: 36px; + --mdc-icon-size: 20px; + color: var(--secondary-text-color); + inset-inline-start: initial; + inset-inline-end: 10px; + direction: var(--direction); + } + ha-textfield > ha-circular-progress { + position: relative; + left: 12px; + } + ha-locations-editor { + display: block; + height: 300px; + margin-top: 8px; + border-radius: var(--mdc-shape-large, 16px); + overflow: hidden; + } + mwc-list { + width: 100%; + border: 1px solid var(--divider-color); + box-sizing: border-box; + border-top-width: 0; + border-bottom-left-radius: var(--mdc-shape-small, 4px); + border-bottom-right-radius: var(--mdc-shape-small, 4px); + --mdc-list-vertical-padding: 0; + } + ha-list-item { + height: 72px; + } + .attribution { + /* textfield helper style */ + margin: 0; + padding: 4px 16px 12px 16px; + color: var(--mdc-text-field-label-ink-color, rgba(0, 0, 0, 0.6)); + font-family: var( + --mdc-typography-caption-font-family, + var(--mdc-typography-font-family, Roboto, sans-serif) + ); + font-size: var(--mdc-typography-caption-font-size, 0.75rem); + font-weight: var(--mdc-typography-caption-font-weight, 400); + letter-spacing: var( + --mdc-typography-caption-letter-spacing, + 0.0333333333em + ); + text-decoration: var( + --mdc-typography-caption-text-decoration, + inherit + ); + text-transform: var(--mdc-typography-caption-text-transform, inherit); + } + .attribution a { + color: inherit; + } + `, + ]; } } diff --git a/src/onboarding/onboarding-restore-backup.ts b/src/onboarding/onboarding-restore-backup.ts index 49dbf5db83..006ebeadb8 100644 --- a/src/onboarding/onboarding-restore-backup.ts +++ b/src/onboarding/onboarding-restore-backup.ts @@ -1,44 +1,34 @@ import "@material/mwc-button/mwc-button"; import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit"; -import { customElement, property } from "lit/decorators"; +import { customElement, property, state } from "lit/decorators"; import { showBackupUploadDialog } from "../../hassio/src/dialogs/backup/show-dialog-backup-upload"; import { showHassioBackupDialog } from "../../hassio/src/dialogs/backup/show-dialog-hassio-backup"; import type { LocalizeFunc } from "../common/translations/localize"; -import "../components/ha-card"; import "../components/ha-ansi-to-html"; +import "../components/ha-card"; import { fetchInstallationType } from "../data/onboarding"; -import { makeDialogManager } from "../dialogs/make-dialog-manager"; -import { ProvideHassLitMixin } from "../mixins/provide-hass-lit-mixin"; -import { haStyle } from "../resources/styles"; import "./onboarding-loading"; - -declare global { - interface HASSDomEvents { - restoring: undefined; - } -} +import { onBoardingStyles } from "./styles"; @customElement("onboarding-restore-backup") -class OnboardingRestoreBackup extends ProvideHassLitMixin(LitElement) { +class OnboardingRestoreBackup extends LitElement { @property() public localize!: LocalizeFunc; @property() public language!: string; - @property({ type: Boolean }) public restoring = false; + @state() public _restoring = false; protected render(): TemplateResult { - return this.restoring - ? html` - - ` + return this._restoring + ? html`

+ ${this.localize("ui.panel.page-onboarding.restore.in_progress")} +

+ ` : html` - +

${this.localize("ui.panel.page-onboarding.restore.header")}

+ + ${this.localize("ui.panel.page-onboarding.restore.upload_backup")} + `; } @@ -51,12 +41,11 @@ class OnboardingRestoreBackup extends ProvideHassLitMixin(LitElement) { protected firstUpdated(changedProps) { super.firstUpdated(changedProps); - makeDialogManager(this, this.shadowRoot!); setInterval(() => this._checkRestoreStatus(), 1000); } private async _checkRestoreStatus(): Promise { - if (this.restoring) { + if (this._restoring) { try { await fetchInstallationType(); } catch (err: any) { @@ -72,32 +61,20 @@ class OnboardingRestoreBackup extends ProvideHassLitMixin(LitElement) { slug, onboarding: true, localize: this.localize, + onRestoring: () => { + this._restoring = true; + }, }); } static get styles(): CSSResultGroup { return [ - haStyle, + onBoardingStyles, css` - .logentry { - text-align: center; - } - ha-card { - padding: 4px; - margin-top: 8px; - } - ha-ansi-to-html { - display: block; - line-height: 22px; - padding: 0 8px; - white-space: pre-wrap; - } - - @media all and (min-width: 600px) { - ha-card { - width: 600px; - margin-left: -100px; - } + :host { + display: flex; + flex-direction: column; + align-items: center; } `, ]; diff --git a/src/onboarding/onboarding-welcome-link.ts b/src/onboarding/onboarding-welcome-link.ts new file mode 100644 index 0000000000..05d8019ab8 --- /dev/null +++ b/src/onboarding/onboarding-welcome-link.ts @@ -0,0 +1,103 @@ +import "@material/mwc-ripple"; +import type { Ripple } from "@material/mwc-ripple"; +import { RippleHandlers } from "@material/mwc-ripple/ripple-handlers"; +import { CSSResultGroup, LitElement, TemplateResult, css, html } from "lit"; +import { + customElement, + eventOptions, + property, + queryAsync, + state, +} from "lit/decorators"; +import "../components/ha-card"; + +@customElement("onboarding-welcome-link") +class OnboardingWelcomeLink extends LitElement { + @property() public label!: string; + + @property() public iconPath!: string; + + @queryAsync("mwc-ripple") private _ripple!: Promise; + + @state() private _shouldRenderRipple = false; + + protected render(): TemplateResult { + return html` + + + ${this.label} + ${this._shouldRenderRipple ? html`` : ""} + + `; + } + + private _rippleHandlers: RippleHandlers = new RippleHandlers(() => { + this._shouldRenderRipple = true; + return this._ripple; + }); + + private handleRippleMouseEnter() { + this._rippleHandlers.startHover(); + } + + private handleRippleMouseLeave() { + this._rippleHandlers.endHover(); + } + + @eventOptions({ passive: true }) + private handleRippleActivate(evt?: Event) { + this._rippleHandlers.startPress(evt); + } + + private handleRippleDeactivate() { + this._rippleHandlers.endPress(); + } + + private handleRippleFocus() { + this._rippleHandlers.startFocus(); + } + + private handleRippleBlur() { + this._rippleHandlers.endFocus(); + } + + static get styles(): CSSResultGroup { + return css` + :host { + cursor: pointer; + } + ha-card { + overflow: hidden; + display: flex; + flex-direction: column; + align-items: center; + text-align: center; + font-weight: 500; + padding: 32px 16px; + } + ha-svg-icon { + color: var(--text-primary-color); + background: var(--welcome-link-color, var(--primary-color)); + border-radius: 50%; + padding: 8px; + margin-bottom: 16px; + } + `; + } +} + +declare global { + interface HTMLElementTagNameMap { + "onboarding-welcome-link": OnboardingWelcomeLink; + } +} diff --git a/src/onboarding/onboarding-welcome-links.ts b/src/onboarding/onboarding-welcome-links.ts new file mode 100644 index 0000000000..1fec0ee38b --- /dev/null +++ b/src/onboarding/onboarding-welcome-links.ts @@ -0,0 +1,84 @@ +import { mdiAccountGroup, mdiFileDocument, mdiTabletCellphone } from "@mdi/js"; +import { CSSResultGroup, LitElement, TemplateResult, css, html } from "lit"; +import { customElement, property } from "lit/decorators"; +import type { LocalizeFunc } from "../common/translations/localize"; +import "../components/ha-card"; +import type { HomeAssistant } from "../types"; +import { showAppDialog } from "./dialogs/show-app-dialog"; +import { showCommunityDialog } from "./dialogs/show-community-dialog"; +import "./onboarding-welcome-link"; + +@customElement("onboarding-welcome-links") +class OnboardingWelcomeLinks extends LitElement { + @property({ attribute: false }) public hass!: HomeAssistant; + + @property() public localize!: LocalizeFunc; + + protected render(): TemplateResult { + return html` + + + + + + + `; + } + + private _openCommunity(): void { + showCommunityDialog(this, { localize: this.localize }); + } + + private _openApp(): void { + showAppDialog(this, { localize: this.localize }); + } + + static get styles(): CSSResultGroup { + return css` + :host { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); + margin-top: 16px; + column-gap: 16px; + row-gap: 16px; + } + @media (max-width: 550px) { + :host { + grid-template-columns: 1fr; + } + } + .community { + --welcome-link-color: #008142; + } + .app { + --welcome-link-color: #6e41ab; + } + a { + text-decoration: none; + } + `; + } +} + +declare global { + interface HTMLElementTagNameMap { + "onboarding-welcome-links": OnboardingWelcomeLinks; + } +} diff --git a/src/onboarding/onboarding-welcome.ts b/src/onboarding/onboarding-welcome.ts new file mode 100644 index 0000000000..719d58e44e --- /dev/null +++ b/src/onboarding/onboarding-welcome.ts @@ -0,0 +1,79 @@ +import { + CSSResultGroup, + LitElement, + TemplateResult, + css, + html, + nothing, +} from "lit"; +import { customElement, property } from "lit/decorators"; +import type { LocalizeFunc } from "../common/translations/localize"; +import type { HomeAssistant } from "../types"; +import { onBoardingStyles } from "./styles"; +import { fireEvent } from "../common/dom/fire_event"; +import "../components/ha-button"; + +@customElement("onboarding-welcome") +class OnboardingWelcome extends LitElement { + @property({ attribute: false }) public hass!: HomeAssistant; + + @property() public localize!: LocalizeFunc; + + @property({ type: Boolean }) public supervisor?: boolean; + + protected render(): TemplateResult { + return html` +

${this.localize("ui.panel.page-onboarding.welcome.header")}

+

${this.localize("ui.panel.page-onboarding.intro")}

+ + + ${this.localize("ui.panel.page-onboarding.welcome.start")} + + + ${this.supervisor + ? html` + ${this.localize("ui.panel.page-onboarding.welcome.restore_backup")} + ` + : nothing} + `; + } + + private _start(): void { + fireEvent(this, "onboarding-step", { + type: "init", + result: { restore: false }, + }); + } + + private _restoreBackup(): void { + fireEvent(this, "onboarding-step", { + type: "init", + result: { restore: true }, + }); + } + + static get styles(): CSSResultGroup { + return [ + onBoardingStyles, + css` + :host { + display: flex; + flex-direction: column; + align-items: center; + } + .start { + --button-height: 48px; + --mdc-typography-button-font-size: 1rem; + --mdc-button-horizontal-padding: 24px; + margin: 16px 0; + } + `, + ]; + } +} + +declare global { + interface HTMLElementTagNameMap { + "onboarding-welcome": OnboardingWelcome; + } +} diff --git a/src/onboarding/particles.ts b/src/onboarding/particles.ts index ca10b20259..71e347c7a0 100644 --- a/src/onboarding/particles.ts +++ b/src/onboarding/particles.ts @@ -1,5 +1,6 @@ import { tsParticles } from "tsparticles-engine"; import { loadLinksPreset } from "tsparticles-preset-links"; +import { DEFAULT_PRIMARY_COLOR } from "../resources/ha-style"; loadLinksPreset(tsParticles).then(() => { tsParticles.load("particles", { @@ -22,16 +23,16 @@ loadLinksPreset(tsParticles).then(() => { }, particles: { color: { - value: "#fff", - animation: { - enable: true, - speed: 50, - sync: false, - }, + value: DEFAULT_PRIMARY_COLOR, + }, + animation: { + enable: true, + speed: 50, + sync: false, }, links: { color: { - value: "random", + value: DEFAULT_PRIMARY_COLOR, }, distance: 100, enable: true, diff --git a/src/onboarding/styles.ts b/src/onboarding/styles.ts new file mode 100644 index 0000000000..dd3eed044e --- /dev/null +++ b/src/onboarding/styles.ts @@ -0,0 +1,19 @@ +import { css } from "lit"; + +export const onBoardingStyles = css` + h1 { + text-align: center; + font-weight: 400; + font-size: 28px; + line-height: 36px; + } + p { + font-size: 1rem; + line-height: 1.5rem; + text-align: center; + } + .footer { + margin-top: 16px; + text-align: right; + } +`; diff --git a/src/translations/en.json b/src/translations/en.json index 7a838beaef..0758890e68 100644 --- a/src/translations/en.json +++ b/src/translations/en.json @@ -5687,8 +5687,21 @@ "intro": "Are you ready to awaken your home, reclaim your privacy and join a worldwide community of tinkerers?", "next": "Next", "finish": "Finish", - "language": "Language", + "help": "Help", + "welcome": { + "header": "Welcome!", + "start": "Create my smart home", + "restore_backup": "Restore from backup", + "vision": "Read our vision", + "community": "Join our community", + "download_app": "Download our app", + "forums": "Home Assistant forums", + "open_home_newsletter": "Building the Open Home newsletter", + "discord": "Discord chat", + "twitter": "Twitter" + }, "user": { + "header": "Create user", "intro": "Let's get started by creating a user account.", "required_field": "Required", "data": { @@ -5697,18 +5710,22 @@ "password": "Password", "password_confirm": "Confirm password" }, + "helper": { + "password": "Choose a strong and unique password. Make sure to save it, so you don't forget it." + }, "create_account": "Create account", "error": { "password_not_match": "Passwords don't match" } }, "core-config": { + "location_header": "Home location", "intro_location": "Let's set up the location of your home so that you can display information such as the local weather and use sun-based or presence-based automations.", "location_address": "Powered by {openstreetmap} ({osm_privacy_policy}).", "osm_privacy_policy": "Privacy policy", "title_location_detect": "Do you want us to detect your location?", "intro_location_detect": "We can detect your location by making a one-time request to an external service.", - "intro_core_config": "We filled out some details about your location. Please check if they are correct and continue.", + "country_intro": "We would like to know the country your home is in, so we can use the correct units for you.", "location_name": "Name of your Home Assistant installation", "location_name_default": "Home", "address_label": "Search address", @@ -5716,12 +5733,13 @@ "finish": "Next" }, "integration": { - "header": "We already found compatible devices on your network!", - "intro": "We have set some of them up for you. Some might need more configuration.", + "header": "We found compatible devices!", + "intro": "These are found on your local network. Some are already added, others may need extra configuration.", "more_integrations": "+{count} more", "finish": "Finish" }, "analytics": { + "header": "Help us help you", "finish": "Next", "preferences": { "base": { @@ -5746,20 +5764,8 @@ "intro": "[%key:ui::panel::config::analytics::intro%]" }, "restore": { - "description": "Alternatively you can restore from a previous backup.", + "header": "Restore a backup", "in_progress": "Restore in progress", - "show_log": "Show full log", - "hide_log": "Hide full log", - "full_backup": "[%key:supervisor::backup::full_backup%]", - "partial_backup": "[%key:supervisor::backup::partial_backup%]", - "name": "[%key:supervisor::backup::name%]", - "type": "[%key:supervisor::backup::type%]", - "select_type": "[%key:supervisor::backup::select_type%]", - "folders": "[%key:supervisor::backup::folders%]", - "addons": "[%key:supervisor::backup::addons%]", - "password_protection": "[%key:supervisor::backup::password_protection%]", - "password": "[%key:supervisor::backup::password%]", - "confirm_password": "[%key:supervisor::backup::confirm_password%]", "upload_backup": "[%key:supervisor::backup::upload_backup%]" } },