From c485e8d03e5cdbe7e5bb2971b545c81a4f67d730 Mon Sep 17 00:00:00 2001 From: Bram Kragten Date: Wed, 30 Aug 2023 13:24:25 +0200 Subject: [PATCH] Update onboarding (#17734) Co-authored-by: Paul Bottein --- .../dialogs/backup/dialog-hassio-backup.ts | 5 +- .../backup/show-dialog-hassio-backup.ts | 1 + public/static/images/logo_discord.png | Bin 0 -> 1298 bytes public/static/images/logo_twitter.png | Bin 0 -> 1201 bytes src/auth/ha-authorize.ts | 4 +- src/components/ha-dialog.ts | 4 +- src/components/ha-language-picker.ts | 40 +- src/components/ha-select.ts | 3 + src/components/language-datalist.ts | 15 - src/html/onboarding.html.template | 50 +- src/mixins/lit-localize-lite-mixin.ts | 27 +- src/onboarding/action-badge.ts | 85 - src/onboarding/dialogs/app-dialog.ts | 6759 +++++++++++++++++ src/onboarding/dialogs/community-dialog.ts | 106 + src/onboarding/dialogs/show-app-dialog.ts | 15 + .../dialogs/show-community-dialog.ts | 15 + src/onboarding/ha-onboarding.ts | 205 +- src/onboarding/integration-badge.ts | 24 - src/onboarding/onboarding-analytics.ts | 60 +- src/onboarding/onboarding-core-config.ts | 314 +- src/onboarding/onboarding-create-user.ts | 70 +- src/onboarding/onboarding-integrations.ts | 185 +- src/onboarding/onboarding-loading.ts | 2 +- src/onboarding/onboarding-location.ts | 308 +- src/onboarding/onboarding-name.ts | 111 - src/onboarding/onboarding-restore-backup.ts | 69 +- src/onboarding/onboarding-welcome-link.ts | 103 + src/onboarding/onboarding-welcome-links.ts | 84 + src/onboarding/onboarding-welcome.ts | 79 + src/onboarding/particles.ts | 15 +- src/onboarding/styles.ts | 19 + src/translations/en.json | 36 +- 32 files changed, 7866 insertions(+), 947 deletions(-) create mode 100644 public/static/images/logo_discord.png create mode 100644 public/static/images/logo_twitter.png delete mode 100644 src/components/language-datalist.ts delete mode 100644 src/onboarding/action-badge.ts create mode 100644 src/onboarding/dialogs/app-dialog.ts create mode 100644 src/onboarding/dialogs/community-dialog.ts create mode 100644 src/onboarding/dialogs/show-app-dialog.ts create mode 100644 src/onboarding/dialogs/show-community-dialog.ts delete mode 100644 src/onboarding/onboarding-name.ts create mode 100644 src/onboarding/onboarding-welcome-link.ts create mode 100644 src/onboarding/onboarding-welcome-links.ts create mode 100644 src/onboarding/onboarding-welcome.ts create mode 100644 src/onboarding/styles.ts diff --git a/hassio/src/dialogs/backup/dialog-hassio-backup.ts b/hassio/src/dialogs/backup/dialog-hassio-backup.ts index 230ecc1f22..fbf1edc46f 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 { @@ -219,7 +220,7 @@ class HassioBackupDialog this._error = error.body.message; } } else { - fireEvent(this, "restoring"); + this._dialogParams?.onRestoring?.(); await fetch(`/api/hassio/backups/${this._backup!.slug}/restore/partial`, { method: "POST", body: JSON.stringify(backupDetails), @@ -268,7 +269,7 @@ class HassioBackupDialog } ); } else { - fireEvent(this, "restoring"); + this._dialogParams?.onRestoring?.(); fetch(`/api/hassio/backups/${this._backup!.slug}/restore/full`, { method: "POST", body: JSON.stringify(backupDetails), 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 0000000000000000000000000000000000000000..24e567e1eba2331f522e0494f17b027b41a9b8af GIT binary patch literal 1298 zcmV+t1?~EYP){n&%S7qy0W$agF?NNaLS7q#1W$agF>{n&&S7q#1W$agF>{n&&S7q#0W$agF z?Nw#$S7q&2W$agF>{n*&S7hv0X6;vJ>{4XyS7q$~|NmNO^jT)?{QUl2YV2ES_FHJ| zR%Gm4Yy3@J>s)I2P+#mWNb2$N{ZnG>GD_+`QtLHL>-qWqMOf?g_Wjw~`J}1xa(nJ% zaP3}g|2IzS>g)U8;QF_^^sTY;VQuV5TI)Jc>mx$y)zihft=ji+8=K9Ug_q@RMv$yn^p7E5L@QRV|Zg}nF<@(3T_NlJ& zj+O9#hwd9c>HszBKve6>&G*U6_7OYk05%0ST5q2|{cmzP+;WVWJjRx8oZz+uf1_ z3VYjqNlGRYQB4g{3LuXM(|9E6nBMB zNZ3mvJflz|W~I8U%nU}99RY3i@f<>5(WbOG2Pb_&(Rsj#w2sD<$S?(N0mW=2qOyaQ z!c7H2ASc7CGXptiUkTkyWf`qFAg8EY(&Ub*l2@sNj;xhb8ema!2`wZz$RMp7W}#gc zA9N$5S;{njmc{aA!EEYjU_S7pA7oTMysl(LTeaI-_3Elxd%AYaY^7FL!3VDTK`NUm z+iPF+$-9v1axxT=Wb)z}_jcr3)9_-zOoSyP4(Nc5^5a9YS( zhJ-+BR6OvkebwXM`K$K62j;^dsNDnCGxdCwIr2JnY#ANCR!>6!q{gktT@Ok9$D_5s z^*Q}fCxjz$uIthW7E_l%Zj6oipIc>aGZ7W@N z!AFgRQmuGpfIniVVMSzzUc`JUkSc&&<~6=pHU9nOtMSiwZ}A}q0g%y@w|3AOW`>?? zVVF6(%X*6^X$*ca?IzN@m_os%PrvP4#yx zpKm>0-A24>3y?n}*fcoF$&N0VPV|d@S zz<@x$?+$-b5;*2U2P;sbs=$IE163t7e6WU(at44$1fji<6rX!|n15W^!t*Hd4GC*X zWcEzs0uo{gG$Y4wf6E>_cV`?sQKYzGkDY=LEutCF2rjO>qxEh=!S9-_EhjAXH~26g zTf>s1Oq=GD_ArljVh-Z|ec0NJt}U&uEKJhs(pq%$tL<*-AA?$8%T?@cPg?bMAL%{`22|=A4*~R1qAU#)*#n?q9dv+901O4HtdaqNThJ=es)bj{M8(gAw&ee}K08-! zpPn$k*h&_^7(O{yqm-aTiHZncIwcInl6wg&a zs+IQPB~~9y?^1==D*|dDz()FBEw>E8=oGG%kW8^M^qPDt1&r z6Lac3fim-+GNoCW$X8I<3g2pIdpUHRqljWFys99l3J6?YEL@~A&@JJUf{CPM0E^nh z6IunK@{TIArgvP{_0&HSTWJQ!0%Q(@wJ?P&42Y%YS>Bw}OY2)o^+@++d=-DC2U1&14FgKuzoMgP!oOB?8% z530=Eq6oL^Min%-^4OVqD5tunl30K0H0<4_O$0t1YpI-7$>_`wGz^FP%V*^Kds$o0NXU zmq&)TFK~~#JBGSTrVccHfU9s>nKt502?RkCKJ})ZSzTA_w0>qdd}&Kq!x_n(zJp1p zkwwL6A0h+W-e0Z%jZOh^f#*)f*rY0Fhx_PX6>lCql${b0qyZmZ?CX~{dm2CdA+~{_ z=iQAV@0}iI*5*%cGde%?UWI8+AXg|{TQ$T9#EIwG7g=}GCK&8JrL;Q@XXrzBzy&*t zvy_*wCX8o8@>)oVA!A-KS(MF5>w48Y_n+eJ!)sGa3&Eg-`C?2@_ngjszVQy$K3G6- zkI?adG=M#2nK5)c@T_Zs-;uwPJh=FD!X%%#!CP>;SYVmsnS2-lQq{9x1Iy&9t` zhnd{S$4V;ytzrE0G~Bi6YG1m(*Kq!Hr}y73^bE1oQ7bDtvTG;nWKzFJF=x_(?aFPH?EnJXT8Xc6N&16~dyGB{wvWUu`O& zxVmm_B}2*2>SbFyh6x*6EV1|Z9PUcFG>V`9>8{>QLfGrlT>__e5tTP=OY8BcEnO3a zuhXMQ2RPJjCyn;k2eJJ=8FI&xhb{%D%~;18m%|-L%q~l|z~9Y9@iZ+n#JLT!a*-fd zMm;9Cnn<^LWF0QVTD5A;Tm86(G!WInBi$ItR%((TpAZGl#PcG0PT0t#FGn1OC-Pd3 zvU?jIAC!5fJl)yGl3hjiCs(%he*FGh6FqSwDVkGMTryS|mUrGpy;gcK)$n@FarBn} N5I`XM)%#G={{!ySZnppc literal 0 HcmV?d00001 diff --git a/src/auth/ha-authorize.ts b/src/auth/ha-authorize.ts index 67313d4ffa..9778edfc0a 100644 --- a/src/auth/ha-authorize.ts +++ b/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} 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 1824f4727b..9f89da79f0 100644 --- a/src/html/onboarding.html.template +++ b/src/html/onboarding.html.template @@ -6,57 +6,40 @@ <%= renderTemplate("_style_base.html.template") %> @@ -64,8 +47,7 @@
- - Home Assistant + Home Assistant
diff --git a/src/mixins/lit-localize-lite-mixin.ts b/src/mixins/lit-localize-lite-mixin.ts index ecfd84957d..2259a23dff 100644 --- a/src/mixins/lit-localize-lite-mixin.ts +++ b/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 = >( // 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 = >( ); } - 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 = >( } protected async _initializeLocalizeLite() { - if (this.resources) { + if (this._resources) { return; } @@ -68,7 +73,7 @@ export const litLocalizeLiteMixin = >( 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 = >( this.translationFragment!, this.language! ); - this.resources = { + this._resources = { [this.language!]: data, }; } diff --git a/src/onboarding/action-badge.ts b/src/onboarding/action-badge.ts deleted file mode 100644 index c53f57ca52..0000000000 --- a/src/onboarding/action-badge.ts +++ /dev/null @@ -1,85 +0,0 @@ -import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit"; -import { customElement, property } from "lit/decorators"; -import "../components/ha-svg-icon"; - -@customElement("action-badge") -class ActionBadge extends LitElement { - @property() public icon!: string; - - @property() public title!: string; - - @property() public badgeIcon?: string; - - @property({ type: Boolean, reflect: true }) public clickable = false; - - protected render(): TemplateResult { - return html` -
- - ${this.badgeIcon - ? html`` - : ""} -
-
${this.title}
- `; - } - - static get styles(): CSSResultGroup { - return css` - :host { - display: inline-flex; - flex-direction: column; - text-align: center; - color: var(--primary-text-color); - } - - :host([clickable]) { - color: var(--primary-text-color); - } - - .icon { - position: relative; - box-sizing: border-box; - margin: 0 auto 8px; - height: 40px; - width: 40px; - border-radius: 50%; - border: 1px solid var(--secondary-text-color); - display: flex; - align-items: center; - justify-content: center; - } - - :host([clickable]) .icon { - border-color: var(--primary-color); - border-width: 2px; - } - - .badge { - position: absolute; - color: var(--primary-color); - bottom: -5px; - right: -5px; - background-color: white; - border-radius: 50%; - width: 18px; - display: block; - height: 18px; - } - - .title { - min-height: 2.3em; - word-break: break-word; - } - `; - } -} - -declare global { - interface HTMLElementTagNameMap { - "action-badge": ActionBadge; - } -} 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 f08917aaa4..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,35 +6,45 @@ import { getAuth, subscribeConfig, } from "home-assistant-js-websocket"; -import { html, PropertyValues, nothing } 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 { - 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"]; @@ -49,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; } } @@ -65,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; @@ -74,29 +97,58 @@ class HaOnboarding extends litLocalizeLiteMixin(HassElement) { @state() private _steps?: OnboardingStep[]; protected render() { + return html` + +
${this._renderStep()}
+ + ${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` @@ -114,7 +166,6 @@ class HaOnboarding extends litLocalizeLiteMixin(HassElement) { > `; } - if (step.step === "integration") { return html` 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) { @@ -170,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(); @@ -222,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(); } @@ -233,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({ @@ -258,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; @@ -331,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. @@ -338,6 +425,60 @@ class HaOnboarding extends litLocalizeLiteMixin(HassElement) { setTimeout(resolve, 0); }); } + + private _languageChanged(ev: CustomEvent) { + const language = ev.detail.value; + this.language = language; + 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(--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; + } + `; } declare global { diff --git a/src/onboarding/integration-badge.ts b/src/onboarding/integration-badge.ts index fc440b1589..e888460046 100644 --- a/src/onboarding/integration-badge.ts +++ b/src/onboarding/integration-badge.ts @@ -9,8 +9,6 @@ class IntegrationBadge extends LitElement { @property() public title!: string; - @property() public badgeIcon?: string; - @property({ type: Boolean }) public darkOptimizedIcon?: boolean; @property({ type: Boolean, reflect: true }) public clickable = false; @@ -27,12 +25,6 @@ class IntegrationBadge extends LitElement { })} referrerpolicy="no-referrer" /> - ${this.badgeIcon - ? html`` - : ""}
${this.title}
`; @@ -47,10 +39,6 @@ class IntegrationBadge extends LitElement { color: var(--primary-text-color); } - :host([clickable]) { - color: var(--primary-text-color); - } - img { max-width: 100%; max-height: 100%; @@ -66,18 +54,6 @@ class IntegrationBadge extends LitElement { justify-content: center; } - .badge { - position: absolute; - color: white; - bottom: -7px; - right: -10px; - background-color: var(--label-badge-green); - border-radius: 50%; - display: block; - --mdc-icon-size: 18px; - border: 2px solid white; - } - .title { min-height: 2.3em; word-break: break-word; 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 3ea32cd556..6306e8ba64 100644 --- a/src/onboarding/onboarding-core-config.ts +++ b/src/onboarding/onboarding-core-config.ts @@ -13,22 +13,12 @@ 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"; import type { HomeAssistant, ValueChangedEvent } from "../types"; import { getLocalLanguage } from "../util/common-translation"; import "./onboarding-location"; -import "./onboarding-name"; @customElement("onboarding-core-config") class OnboardingCoreConfig extends LitElement { @@ -38,32 +28,26 @@ class OnboardingCoreConfig extends LitElement { @state() private _working = false; - @state() private _name?: ConfigUpdateValues["location_name"]; - @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"]; @state() private _error?: string; + @state() private _skipCore = false; + protected render(): TemplateResult { - if (!this._name) { - return html``; - } if (!this._location) { return html``; } + if (this._skipCore) { + return html`
+ +
`; + } 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" - )} -
- - -
- + +
@@ -232,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) => { @@ -255,84 +103,69 @@ 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 _nameChanged(ev: CustomEvent) { - this._name = ev.detail.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(); this._working = true; try { await saveCoreConfig(this.hass, { - location_name: this._name, + location_name: this.onboardingLocalize( + "ui.panel.page-onboarding.core-config.location_name_default" + ), 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", { @@ -340,6 +173,7 @@ class OnboardingCoreConfig extends LitElement { result, }); } catch (err: any) { + this._skipCore = false; this._working = false; this._error = err.message; } @@ -380,6 +214,10 @@ class OnboardingCoreConfig extends LitElement { margin-top: 16px; } + .center { + justify-content: center; + } + .row > * { margin: 0 8px; } 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 c2c145359a..19c05b2af3 100644 --- a/src/onboarding/onboarding-integrations.ts +++ b/src/onboarding/onboarding-integrations.ts @@ -1,14 +1,12 @@ import "@material/mwc-button/mwc-button"; -import { mdiCheck, mdiDotsHorizontal } from "@mdi/js"; import { UnsubscribeFunc } from "home-assistant-js-websocket"; import { - css, CSSResultGroup, - html, LitElement, - nothing, PropertyValues, - TemplateResult, + css, + html, + nothing, } from "lit"; import { customElement, property, state } from "lit/decorators"; import { isComponentLoaded } from "../common/config/is_component_loaded"; @@ -16,23 +14,14 @@ import { fireEvent } from "../common/dom/fire_event"; import { stringCompare } from "../common/string/compare"; import { LocalizeFunc } from "../common/translations/localize"; import { ConfigEntry, subscribeConfigEntries } from "../data/config_entries"; -import { - getConfigFlowInProgressCollection, - localizeConfigFlowTitle, - subscribeConfigFlowInProgress, -} from "../data/config_flow"; +import { subscribeConfigFlowInProgress } from "../data/config_flow"; import { DataEntryFlowProgress } from "../data/data_entry_flow"; import { domainToName } from "../data/integration"; import { scanUSBDevices } from "../data/usb"; -import { - loadConfigFlowDialog, - showConfigFlowDialog, -} from "../dialogs/config-flow/show-dialog-config-flow"; import { SubscribeMixin } from "../mixins/subscribe-mixin"; -import { showAddIntegrationDialog } from "../panels/config/integrations/show-add-integration-dialog"; import { HomeAssistant } from "../types"; -import "./action-badge"; import "./integration-badge"; +import { onBoardingStyles } from "./styles"; const HIDDEN_DOMAINS = new Set([ "hassio", @@ -63,7 +52,7 @@ class OnboardingIntegrations extends SubscribeMixin(LitElement) { integrations.add(flow.handler); } } - this.hass.loadBackendTranslation("config", Array.from(integrations)); + this.hass.loadBackendTranslation("title", Array.from(integrations)); }), subscribeConfigEntries( this.hass, @@ -109,65 +98,68 @@ class OnboardingIntegrations extends SubscribeMixin(LitElement) { return nothing; } // Render discovered and existing entries together sorted by localized title. - const entries: Array<[string, TemplateResult]> = this._entries.map( - (entry) => { - const title = - entry.title || - domainToName(this.hass.localize, entry.domain) || - entry.domain; - return [ - title, - html` - - `, - ]; - } + const entries: Array<[string, string]> = this._entries.map((entry) => [ + entry.domain, + domainToName(this.hass.localize, entry.domain), + ]); + const discovered: Array<[string, string]> = this._discovered.map((flow) => [ + flow.handler, + domainToName(this.hass.localize, flow.handler), + ]); + let domains = [...entries, ...discovered].sort((a, b) => + stringCompare(a[0], b[0], this.hass.locale.language) ); - const discovered: Array<[string, TemplateResult]> = this._discovered.map( - (flow) => { - const title = localizeConfigFlowTitle(this.hass.localize, flow); - return [ - title, - html` - - `, - ]; + + const foundDevices = domains.length; + + if (domains.length > 12) { + const uniqueDomains: Set = new Set(); + domains.forEach(([domain]) => { + uniqueDomains.add(domain); + }); + if (uniqueDomains.size < domains.length) { + domains = domains.filter(([domain]) => { + if (uniqueDomains.has(domain)) { + uniqueDomains.delete(domain); + return true; + } + return false; + }); } - ); - const content = [...entries, ...discovered] - .sort((a, b) => stringCompare(a[0], b[0], this.hass.locale.language)) - .map((item) => item[1]); + if (domains.length > 12) { + domains = domains.slice(0, 11); + } + } return html` +

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

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

- ${content} - + ${domains.map( + ([domain, title]) => + html`` + )} + ${foundDevices > domains.length + ? html`
+ ${this.onboardingLocalize( + "ui.panel.page-onboarding.integration.more_integrations", + { count: foundDevices - domains.length } + )} +
` + : nothing}
- + ${this.onboardingLocalize( "ui.panel.page-onboarding.integration.finish" )} @@ -178,22 +170,8 @@ class OnboardingIntegrations extends SubscribeMixin(LitElement) { protected firstUpdated(changedProps: PropertyValues) { super.firstUpdated(changedProps); - this.hass.loadBackendTranslation("title", undefined, true); + this.hass.loadBackendTranslation("title"); this._scanUSBDevices(); - loadConfigFlowDialog(); - } - - private _createFlow() { - showAddIntegrationDialog(this); - } - - private _continueFlow(ev) { - showConfigFlowDialog(this, { - continueFlowId: ev.currentTarget.flowId, - dialogClosedCallback: () => { - getConfigFlowInProgressCollection(this.hass!.connection).refresh(); - }, - }); } private async _scanUSBDevices() { @@ -210,34 +188,23 @@ class OnboardingIntegrations extends SubscribeMixin(LitElement) { } static get styles(): CSSResultGroup { - return css` - p { - font-size: 14px; - line-height: 20px; - } - .badges { - margin-top: 24px; - display: flex; - flex-direction: row; - flex-wrap: wrap; - justify-content: flex-start; - align-items: flex-start; - } - .badges > * { - width: 96px; - margin-bottom: 24px; - } - button { - cursor: pointer; - padding: 0; - border: 0; - background: 0; - font: inherit; - } - .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-name.ts b/src/onboarding/onboarding-name.ts deleted file mode 100644 index 6d8d023137..0000000000 --- a/src/onboarding/onboarding-name.ts +++ /dev/null @@ -1,111 +0,0 @@ -import "@material/mwc-button/mwc-button"; -import { CSSResultGroup, LitElement, TemplateResult, css, html } from "lit"; -import { customElement, property } from "lit/decorators"; -import { fireEvent } from "../common/dom/fire_event"; -import type { LocalizeFunc } from "../common/translations/localize"; -import "../components/ha-alert"; -import "../components/ha-formfield"; -import "../components/ha-radio"; -import "../components/ha-textfield"; -import "../components/map/ha-locations-editor"; -import { ConfigUpdateValues } from "../data/core"; -import type { HomeAssistant } from "../types"; - -@customElement("onboarding-name") -class OnboardingName extends LitElement { - @property({ attribute: false }) public hass!: HomeAssistant; - - @property() public onboardingLocalize!: LocalizeFunc; - - private _name?: ConfigUpdateValues["location_name"]; - - protected render(): TemplateResult { - return html` -

- ${this.onboardingLocalize( - "ui.panel.page-onboarding.core-config.intro", - { name: this.hass.user!.name } - )} -

- - - -

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

- -
- - ${this.onboardingLocalize( - "ui.panel.page-onboarding.core-config.finish" - )} - -
- `; - } - - protected firstUpdated(changedProps) { - super.firstUpdated(changedProps); - setTimeout( - () => this.renderRoot.querySelector("ha-textfield")!.focus(), - 100 - ); - this.addEventListener("keyup", (ev) => { - if (ev.key === "Enter") { - this._save(ev); - } - }); - } - - private get _nameValue() { - return this._name !== undefined - ? this._name - : this.onboardingLocalize( - "ui.panel.page-onboarding.core-config.location_name_default" - ); - } - - private _nameChanged(ev) { - this._name = ev.target.value; - } - - private async _save(ev) { - ev.preventDefault(); - fireEvent(this, "value-changed", { - value: this._nameValue, - }); - } - - static get styles(): CSSResultGroup { - return css` - ha-textfield { - display: block; - } - p { - font-size: 14px; - line-height: 20px; - } - .footer { - margin-top: 16px; - text-align: right; - } - a { - color: var(--primary-color); - } - `; - } -} - -declare global { - interface HTMLElementTagNameMap { - "onboarding-name": OnboardingName; - } -} 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 e0c3a88753..051837943b 100644 --- a/src/translations/en.json +++ b/src/translations/en.json @@ -5701,7 +5701,21 @@ "intro": "Are you ready to awaken your home, reclaim your privacy and join a worldwide community of tinkerers?", "next": "Next", "finish": "Finish", + "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": { @@ -5710,20 +5724,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": { - "intro": "Hello {name}, welcome to Home Assistant. How would you like to name your home?", - "intro_core": "We will set up the basics together. You can always change this later in the settings.", - "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. This data is never shared outside of your network.", + "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", @@ -5731,11 +5747,13 @@ "finish": "Next" }, "integration": { - "intro": "Devices and services are represented in Home Assistant as integrations. You can set them up now, or do it later from the settings.", - "more_integrations": "More", + "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": { @@ -5760,8 +5778,9 @@ "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", + "upload_backup": "[%key:supervisor::backup::upload_backup%]", "show_log": "Show full log", "hide_log": "Hide full log", "full_backup": "[%key:supervisor::backup::full_backup%]", @@ -5773,8 +5792,7 @@ "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%]" + "confirm_password": "[%key:supervisor::backup::confirm_password%]" } }, "custom": {