github
/
ha-frontend
mirror of https://github.com/home-assistant/frontend
1
Fork 0
Code Releases Activity

Update onboarding (#17734) 

Co-authored-by: Paul Bottein <paul.bottein@gmail.com>
This commit is contained in:
Bram Kragten 2023-08-30 13:24:25 +02:00 committed by GitHub
parent 2ab67328d4
commit c485e8d03e
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
32 changed files with 7866 additions and 947 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
hassio/src/dialogs/backup/dialog-hassio-backup.ts
View File

@ -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),

1
hassio/src/dialogs/backup/show-dialog-hassio-backup.ts
View File

@ -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;

BIN
public/static/images/logo_discord.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.3 KiB

BIN
public/static/images/logo_twitter.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.2 KiB

4
src/auth/ha-authorize.ts
View File

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

4
src/components/ha-dialog.ts
View File

@ -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`
<div class="header_title">${title}</div>
<ha-icon-button
.label=${hass.localize("ui.dialogs.generic.close")}
.label=${hass?.localize("ui.dialogs.generic.close") ?? "Close"}
.path=${mdiClose}
dialogAction="close"
class="header_button"

40
src/components/ha-language-picker.ts
View File

@ -7,6 +7,7 @@ import { formatLanguageCode } from "../common/language/format_language";
import { caseInsensitiveStringCompare } from "../common/string/compare";
import { FrontendLocaleData } from "../data/translation";
import "../resources/intl-polyfill";
import { translationMetadata } from "../resources/translations-metadata";
import { HomeAssistant } from "../types";
import "./ha-list-item";
import "./ha-select";
@ -20,7 +21,7 @@ export class HaLanguagePicker extends LitElement {
@property() public languages?: string[];
@property({ attribute: false }) public hass!: HomeAssistant;
@property({ attribute: false }) public hass?: HomeAssistant;
@property({ type: Boolean, reflect: true }) public disabled = false;
@ -62,8 +63,8 @@ export class HaLanguagePicker extends LitElement {
}
const languageOptions = this._getLanguagesOptions(
this.languages ?? this._defaultLanguages,
this.hass.locale,
this.nativeName
this.nativeName,
this.hass?.locale
);
const selectedItemIndex = languageOptions.findIndex(
(option) => 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`
<ha-select
.label=${this.label ||
this.hass.localize("ui.components.language-picker.language")}
.value=${value}
.label=${this.label ??
(this.hass?.localize("ui.components.language-picker.language") ||
"Language")}
.value=${value || ""}
.required=${this.required}
.disabled=${this.disabled}
@selected=${this._changed}
@ -151,9 +147,9 @@ export class HaLanguagePicker extends LitElement {
>
${languageOptions.length === 0
? html`<ha-list-item value=""
>${this.hass.localize(
>${this.hass?.localize(
"ui.components.language-picker.no_languages"
)}</ha-list-item
) || "No languages"}</ha-list-item
>`
: 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;

3
src/components/ha-select.ts
View File

@ -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;

15
src/components/language-datalist.ts
View File

@ -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;
};

50
src/html/onboarding.html.template
View File

@ -6,57 +6,40 @@
<%= renderTemplate("_style_base.html.template") %>
<style>
html {
background-color: var(--primary-background-color, #fafafa);
color: var(--primary-text-color, #212121);
background-color: #0277bd !important;
}
@media (prefers-color-scheme: dark) {
html {
background-color: var(--primary-background-color, #111111);
color: var(--primary-text-color, #e1e1e1);
}
}
body {
height: auto;
padding: 64px 0;
padding: 32px 0;
}
.content {
box-sizing: border-box;
padding: 20px 16px;
border-radius: var(--ha-card-border-radius, 12px);
max-width: 432px;
max-width: 560px;
margin: 0 auto;
box-shadow: var(
--ha-card-box-shadow,
rgba(0, 0, 0, 0.25) 0px 54px 55px,
rgba(0, 0, 0, 0.12) 0px -12px 30px,
rgba(0, 0, 0, 0.12) 0px 4px 6px,
rgba(0, 0, 0, 0.17) 0px 12px 13px,
rgba(0, 0, 0, 0.09) 0px -3px 5px
);
background: var(
--ha-card-background,
var(--card-background-color, white)
);
color: var(--primary-text-color, #212121);
box-sizing: border-box;
}
.header {
text-align: center;
font-size: 1.96em;
display: flex;
align-items: center;
justify-content: center;
font-weight: 300;
margin-bottom: 32px;
}
.header img {
margin-right: 16px;
height: 56px;
width: 56px;
}
@media (prefers-color-scheme: dark) {
html {
color: #e1e1e1;
}
}
@media (max-width: 450px) {
@media (max-width: 592px) {
.content {
min-height: 100%;
margin: 0;
margin: 0 16px;
}
}
</style>
@ -64,8 +47,7 @@
<body id="particles">
<div class="content">
<div class="header">
<img src="/static/icons/favicon-192x192.png" height="52" width="52" alt="" />
Home Assistant
<img src="/static/icons/favicon-192x192.png" alt="Home Assistant" />
</div>
<ha-onboarding></ha-onboarding>
</div>

27
src/mixins/lit-localize-lite-mixin.ts
View File

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

85
src/onboarding/action-badge.ts
View File

@ -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`
<div class="icon">
<ha-svg-icon .path=${this.icon}></ha-svg-icon>
${this.badgeIcon
? html`<ha-svg-icon
class="badge"
.path=${this.badgeIcon}
></ha-svg-icon>`
: ""}
</div>
<div class="title">${this.title}</div>
`;
}
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;
}
}

6759
src/onboarding/dialogs/app-dialog.ts Normal file
View File

File diff suppressed because one or more lines are too long

106
src/onboarding/dialogs/community-dialog.ts Normal file
View File

@ -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<void> {
this.localize = params.localize;
}
public async closeDialog(): Promise<void> {
this.localize = undefined;
fireEvent(this, "dialog-closed", { dialog: this.localName });
}
protected render() {
if (!this.localize) {
return nothing;
}
return html`<ha-dialog
open
hideActions
@closed=${this.closeDialog}
.heading=${createCloseHeading(
undefined,
this.localize("ui.panel.page-onboarding.welcome.community")
)}
>
<mwc-list>
<a
target="_blank"
rel="noreferrer noopener"
href="https://community.home-assistant.io/"
>
<ha-list-item hasMeta graphic="icon">
<img src="/static/icons/favicon-192x192.png" slot="graphic" />
${this.localize("ui.panel.page-onboarding.welcome.forums")}
<ha-svg-icon slot="meta" .path=${mdiOpenInNew}></ha-svg-icon>
</ha-list-item>
</a>
<a
target="_blank"
rel="noreferrer noopener"
href="https://www.home-assistant.io/newsletter/"
>
<ha-list-item hasMeta graphic="icon">
<img src="/static/icons/favicon-192x192.png" slot="graphic" />
${this.localize(
"ui.panel.page-onboarding.welcome.open_home_newsletter"
)}
<ha-svg-icon slot="meta" .path=${mdiOpenInNew}></ha-svg-icon>
</ha-list-item>
</a>
<a
target="_blank"
rel="noreferrer noopener"
href="https://www.home-assistant.io/join-chat"
>
<ha-list-item hasMeta graphic="icon">
<img src="/static/images/logo_discord.png" slot="graphic" />
${this.localize("ui.panel.page-onboarding.welcome.discord")}
<ha-svg-icon slot="meta" .path=${mdiOpenInNew}></ha-svg-icon>
</ha-list-item>
</a>
<a
target="_blank"
rel="noreferrer noopener"
href="https://twitter.com/home_assistant"
>
<ha-list-item hasMeta graphic="icon">
<img src="/static/images/logo_twitter.png" slot="graphic" />
${this.localize("ui.panel.page-onboarding.welcome.twitter")}
<ha-svg-icon slot="meta" .path=${mdiOpenInNew}></ha-svg-icon>
</ha-list-item>
</a>
</mwc-list>
</ha-dialog>`;
}
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;
}
}

15
src/onboarding/dialogs/show-app-dialog.ts Normal file
View File

@ -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,
});
};

15
src/onboarding/dialogs/show-community-dialog.ts Normal file
View File

@ -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,
});
};

205
src/onboarding/ha-onboarding.ts
View File

@ -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<OnboardingEvent>;
"onboarding-progress": HASSDomEvent<OnboardingProgressEvent>;
}
}
@ -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`<mwc-linear-progress
.progress=${this._progress}
></mwc-linear-progress>
<ha-card>
<div class="card-content">${this._renderStep()}</div>
</ha-card>
${this._init
? html`<onboarding-welcome-links
.localize=${this.localize}
></onboarding-welcome-links>`
: nothing}
<div class="footer">
<ha-language-picker
.value=${this.language}
.label=${""}
nativeName
@value-changed=${this._languageChanged}
></ha-language-picker>
<a
href="https://www.home-assistant.io/getting-started/onboarding/"
target="_blank"
rel="noreferrer noopener"
>${this.localize("ui.panel.page-onboarding.help")}</a
>
</div>`;
}
private _renderStep() {
if (this._init) {
return html`<onboarding-welcome
.localize=${this.localize}
.language=${this.language}
.supervisor=${this._supervisor}
></onboarding-welcome>`;
}
if (this._restoring) {
return html`<onboarding-restore-backup .localize=${this.localize}>
</onboarding-restore-backup>`;
}
const step = this._curStep()!;
if (this._loading || !step) {
return html`<onboarding-loading></onboarding-loading> `;
}
if (step.step === "user") {
return html`
${!this._restoring
? html`<onboarding-create-user
.localize=${this.localize}
.language=${this.language}
>
</onboarding-create-user>`
: ""}
${this._supervisor
? html`<onboarding-restore-backup
.localize=${this.localize}
.restoring=${this._restoring}
@restoring=${this._restoringBackup}
>
</onboarding-restore-backup>`
: ""}
`;
return html`<onboarding-create-user
.localize=${this.localize}
.language=${this.language}
>
</onboarding-create-user>`;
}
if (step.step === "core_config") {
return html`
@ -114,7 +166,6 @@ class HaOnboarding extends litLocalizeLiteMixin(HassElement) {
></onboarding-analytics>
`;
}
if (step.step === "integration") {
return html`
<onboarding-integrations
@ -133,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) {
@ -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<void> {
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<OnboardingProgressEvent>) {
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<OnboardingEvent>) {
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 {

24
src/onboarding/integration-badge.ts
View File

@ -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`<ha-svg-icon
class="badge"
.path=${this.badgeIcon}
></ha-svg-icon>`
: ""}
</div>
<div class="title">${this.title}</div>
`;
@ -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;

60
src/onboarding/onboarding-analytics.ts
View File

@ -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`
<h1>${this.localize("ui.panel.page-onboarding.analytics.header")}</h1>
<p>${this.localize("ui.panel.page-onboarding.analytics.intro")}</p>
<p>
<a
.href=${documentationUrl(this.hass, "/integrations/analytics/")}
target="_blank"
rel="noreferrer"
>
${this.localize("ui.panel.page-onboarding.analytics.learn_more")}
<ha-svg-icon .path=${mdiOpenInNew}></ha-svg-icon>
</a>
</p>
<ha-analytics
translation_key_panel="page-onboarding"
@analytics-preferences-changed=${this._preferencesChanged}
@ -33,16 +46,13 @@ class OnboardingAnalytics extends LitElement {
</ha-analytics>
${this._error ? html`<div class="error">${this._error}</div>` : ""}
<div class="footer">
<mwc-button @click=${this._save} .disabled=${!this._analyticsDetails}>
<mwc-button
unelevated
@click=${this._save}
.disabled=${!this._analyticsDetails}
>
${this.localize("ui.panel.page-onboarding.analytics.finish")}
</mwc-button>
<a
.href=${documentationUrl(this.hass, "/integrations/analytics/")}
target="_blank"
rel="noreferrer"
>
${this.localize("ui.panel.page-onboarding.analytics.learn_more")}
</a>
</div>
`;
}
@ -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;
}
`,
];
}
}

314
src/onboarding/onboarding-core-config.ts
View File

@ -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`<onboarding-name
.hass=${this.hass}
.onboardingLocalize=${this.onboardingLocalize}
@value-changed=${this._nameChanged}
></onboarding-name>`;
}
if (!this._location) {
return html`<onboarding-location
.hass=${this.hass}
@ -71,156 +55,34 @@ class OnboardingCoreConfig extends LitElement {
@value-changed=${this._locationChanged}
></onboarding-location>`;
}
if (this._skipCore) {
return html`<div class="row center">
<ha-circular-progress active></ha-circular-progress>
</div>`;
}
return html`
${
this._error
? html`<ha-alert alert-type="error">${this._error}</ha-alert>`
: nothing
}
${this._error
? html`<ha-alert alert-type="error">${this._error}</ha-alert>`
: nothing}
<p>
${this.onboardingLocalize(
"ui.panel.page-onboarding.core-config.intro_core_config"
)}
${this.onboardingLocalize(
"ui.panel.page-onboarding.core-config.country_intro"
)}
</p>
<div class="row">
<ha-country-picker
class="flex"
.language=${this.hass.locale.language}
.label=${
this.hass.localize(
"ui.panel.config.core.section.core.core_config.country"
) || "Country"
}
name="country"
required
.disabled=${this._working}
.value=${this._countryValue}
@value-changed=${this._handleValueChanged}
>
</ha-country-picker>
<ha-language-picker
class="flex"
.hass=${this.hass}
nativeName
.label=${this.hass.localize(
"ui.panel.config.core.section.core.core_config.language"
)}
name="language"
required
.value=${this._languageValue}
.disabled=${this._working}
@value-changed=${this._handleValueChanged}
>
</ha-language-picker>
</div>
<div class="row">
<ha-timezone-picker
class="flex"
.label=${this.hass.localize(
"ui.panel.config.core.section.core.core_config.time_zone"
)}
name="timeZone"
.disabled=${this._working}
.value=${this._timeZoneValue}
@value-changed=${this._handleValueChanged}
>
</ha-timezone-picker>
<ha-textfield
class="flex"
.label=${this.hass.localize(
"ui.panel.config.core.section.core.core_config.elevation"
)}
name="elevation"
type="number"
.disabled=${this._working}
.value=${this._elevationValue}
.suffix=${this.hass.localize(
"ui.panel.config.core.section.core.core_config.elevation_meters"
)}
@change=${this._handleChange}
>
</ha-textfield>
</div>
<div class="row">
<div class="flex">
${this.hass.localize(
"ui.panel.config.core.section.core.core_config.unit_system"
)}
</div>
<div class="radio-group">
<ha-formfield
.label=${html`${this.hass.localize(
"ui.panel.config.core.section.core.core_config.unit_system_metric"
)}
<div class="secondary">
${this.hass.localize(
"ui.panel.config.core.section.core.core_config.metric_example"
)}
</div>`}
>
<ha-radio
name="unit_system"
value="metric"
.checked=${this._unitSystemValue === "metric"}
@change=${this._unitSystemChanged}
.disabled=${this._working}
></ha-radio>
</ha-formfield>
<ha-formfield
.label=${html`${this.hass.localize(
"ui.panel.config.core.section.core.core_config.unit_system_us_customary"
)}
<div class="secondary">
${this.hass.localize(
"ui.panel.config.core.section.core.core_config.us_customary_example"
)}
</div>`}
>
<ha-radio
name="unit_system"
value="us_customary"
.checked=${this._unitSystemValue === "us_customary"}
@change=${this._unitSystemChanged}
.disabled=${this._working}
></ha-radio>
</ha-formfield>
</div>
</div>
<div class="row">
<div class="flex">
${this.hass.localize(
"ui.panel.config.core.section.core.core_config.currency"
)}<br />
<a
href="https://en.wikipedia.org/wiki/ISO_4217#Active_codes"
target="_blank"
rel="noopener noreferrer"
>${this.hass.localize(
"ui.panel.config.core.section.core.core_config.find_currency_value"
)}</a
>
</div>
<ha-currency-picker
class="flex"
.label=${this.hass.localize(
"ui.panel.config.core.section.core.core_config.currency"
)}
name="currency"
.disabled=${this._working}
.value=${this._currencyValue}
@value-changed=${this._handleValueChanged}
>
</ha-currency-picker
>
</div>
</div>
<ha-country-picker
class="flex"
.language=${this.hass.locale.language}
.label=${this.hass.localize(
"ui.panel.config.core.section.core.core_config.country"
) || "Country"}
required
.disabled=${this._working}
.value=${this._countryValue}
@value-changed=${this._handleCountryChanged}
>
</ha-country-picker>
<div class="footer">
<mwc-button @click=${this._save} .disabled=${this._working}>
@ -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<string>) {
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<string>) {
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;
}

70
src/onboarding/onboarding-create-user.ts
View File

@ -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`
<p>${this.localize("ui.panel.page-onboarding.intro")}</p>
<h1>${this.localize("ui.panel.page-onboarding.user.header")}</h1>
<p>${this.localize("ui.panel.page-onboarding.user.intro")}</p>
${this._errorMsg
@ -67,25 +68,27 @@ class OnboardingCreateUser extends LitElement {
<ha-form
.computeLabel=${this._computeLabel(this.localize)}
.computeHelper=${this._computeHelper(this.localize)}
.data=${this._newUser}
.disabled=${this._loading}
.error=${this._formError}
.schema=${CREATE_USER_SCHEMA}
@value-changed=${this._handleValueChanged}
></ha-form>
<mwc-button
raised
@click=${this._submitForm}
.disabled=${this._loading ||
!this._newUser.name ||
!this._newUser.username ||
!this._newUser.password ||
!this._newUser.password_confirm ||
this._newUser.password !== this._newUser.password_confirm}
>
${this.localize("ui.panel.page-onboarding.user.create_account")}
</mwc-button>
<div class="footer">
<mwc-button
unelevated
@click=${this._submitForm}
.disabled=${this._loading ||
!this._newUser.name ||
!this._newUser.username ||
!this._newUser.password ||
!this._newUser.password_confirm ||
this._newUser.password !== this._newUser.password_confirm}
>
${this.localize("ui.panel.page-onboarding.user.create_account")}
</mwc-button>
</div>
`;
}
@ -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<HaFormDataContainer>
): 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;
}
}

185
src/onboarding/onboarding-integrations.ts
View File

@ -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`
<integration-badge
.domain=${entry.domain}
.title=${title}
.badgeIcon=${mdiCheck}
.darkOptimizedIcon=${this.hass.themes?.darkMode}
></integration-badge>
`,
];
}
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`
<button .flowId=${flow.flow_id} @click=${this._continueFlow}>
<integration-badge
clickable
.domain=${flow.handler}
.title=${title}
.darkOptimizedIcon=${this.hass.themes?.darkMode}
></integration-badge>
</button>
`,
];
const foundDevices = domains.length;
if (domains.length > 12) {
const uniqueDomains: Set<string> = 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`
<h1>
${this.onboardingLocalize(
"ui.panel.page-onboarding.integration.header"
)}
</h1>
<p>
${this.onboardingLocalize("ui.panel.page-onboarding.integration.intro")}
</p>
<div class="badges">
${content}
<button @click=${this._createFlow}>
<action-badge
clickable
title=${this.onboardingLocalize(
"ui.panel.page-onboarding.integration.more_integrations"
)}
.icon=${mdiDotsHorizontal}
></action-badge>
</button>
${domains.map(
([domain, title]) =>
html`<integration-badge
.domain=${domain}
.title=${title}
.darkOptimizedIcon=${this.hass.themes?.darkMode}
></integration-badge>`
)}
${foundDevices > domains.length
? html`<div class="more">
${this.onboardingLocalize(
"ui.panel.page-onboarding.integration.more_integrations",
{ count: foundDevices - domains.length }
)}
</div>`
: nothing}
</div>
<div class="footer">
<mwc-button @click=${this._finish}>
<mwc-button unelevated @click=${this._finish}>
${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%;
}
`,
];
}
}

2
src/onboarding/onboarding-loading.ts
View File

@ -4,7 +4,7 @@ import { customElement } from "lit/decorators";
@customElement("onboarding-loading")
class OnboardingLoading extends LitElement {
protected render(): TemplateResult {
return html` <div class="loader"></div> `;
return html`<div class="loader"></div>`;
}
static get styles(): CSSResultGroup {

308
src/onboarding/onboarding-location.ts
View File

@ -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`
<h1>
${this.onboardingLocalize(
"ui.panel.page-onboarding.core-config.location_header"
)}
</h1>
${this._error
? html`<ha-alert alert-type="error">${this._error}</ha-alert>`
: nothing}
@ -97,78 +108,85 @@ class OnboardingLocation extends LitElement {
)}
</p>
<ha-textfield
label=${this.onboardingLocalize(
"ui.panel.page-onboarding.core-config.address_label"
)}
.disabled=${this._working}
iconTrailing
@keyup=${this._addressSearch}
>
${this._working
<div class="location-search">
<ha-textfield
label=${this.onboardingLocalize(
"ui.panel.page-onboarding.core-config.address_label"
)}
.disabled=${this._working}
icon
iconTrailing
@keyup=${this._addressSearch}
>
<ha-svg-icon slot="leadingIcon" .path=${mdiMagnify}></ha-svg-icon>
${this._working
? html`
<ha-circular-progress
slot="trailingIcon"
active
size="small"
></ha-circular-progress>
`
: html`
<ha-icon-button
@click=${this._handleButtonClick}
slot="trailingIcon"
.disabled=${this._working}
.label=${this.onboardingLocalize(
this._search
? "ui.common.search"
: "ui.panel.page-onboarding.core-config.button_detect"
)}
.path=${this._search ? mdiMapSearchOutline : mdiCrosshairsGps}
></ha-icon-button>
`}
</ha-textfield>
${this._places !== undefined
? html`
<ha-circular-progress
slot="trailingIcon"
active
size="small"
></ha-circular-progress>
<mwc-list activatable>
${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`<ha-list-item
@click=${this._itemClicked}
.placeId=${place.place_id}
.selected=${this._highlightedMarker === place.place_id}
.activated=${this._highlightedMarker === place.place_id}
.twoline=${primary && secondary}
>
${primary || secondary}
<span slot="secondary"
>${primary ? secondary : ""}</span
>
</ha-list-item>`;
})
: html`<ha-list-item noninteractive
>${this._places === null
? ""
: "No results"}</ha-list-item
>`}
</mwc-list>
`
: html`
<ha-icon-button
@click=${this._handleButtonClick}
slot="trailingIcon"
.disabled=${this._working}
.label=${this.onboardingLocalize(
this._search
? "ui.common.search"
: "ui.panel.page-onboarding.core-config.button_detect"
)}
.path=${this._search ? mdiMapSearchOutline : mdiCrosshairsGps}
></ha-icon-button>
`}
</ha-textfield>
${this._places !== undefined
? html`
<mwc-list activatable>
${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`<ha-list-item
@click=${this._itemClicked}
.placeId=${place.place_id}
.selected=${this._highlightedMarker === place.place_id}
.activated=${this._highlightedMarker === place.place_id}
.twoline=${primary && secondary}
>
${primary || secondary}
<span slot="secondary">${primary ? secondary : ""}</span>
</ha-list-item>`;
})
: html`<ha-list-item noninteractive
>${this._places === null ? "" : "No results"}</ha-list-item
>`}
</mwc-list>
`
: nothing}
<p class="attribution">${addressAttribution}</p>
: nothing}
</div>
<ha-locations-editor
class="flex"
.hass=${this.hass}
@ -184,11 +202,10 @@ class OnboardingLocation extends LitElement {
@marker-clicked=${this._markerClicked}
></ha-locations-editor>
<p class="attribution">${addressAttribution}</p>
<div class="footer">
<mwc-button
@click=${this._save}
.disabled=${!this._location || this._working}
>
<mwc-button @click=${this._save} unelevated .disabled=${this._working}>
${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;
}
`,
];
}
}

111
src/onboarding/onboarding-name.ts
View File

@ -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`
<p>
${this.onboardingLocalize(
"ui.panel.page-onboarding.core-config.intro",
{ name: this.hass.user!.name }
)}
</p>
<ha-textfield
.label=${this.onboardingLocalize(
"ui.panel.page-onboarding.core-config.location_name"
)}
.value=${this._nameValue}
@change=${this._nameChanged}
></ha-textfield>
<p>
${this.onboardingLocalize(
"ui.panel.page-onboarding.core-config.intro_core"
)}
</p>
<div class="footer">
<mwc-button @click=${this._save} .disabled=${!this._nameValue}>
${this.onboardingLocalize(
"ui.panel.page-onboarding.core-config.finish"
)}
</mwc-button>
</div>
`;
}
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;
}
}

69
src/onboarding/onboarding-restore-backup.ts
View File

@ -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`<ha-card
.header=${this.localize(
"ui.panel.page-onboarding.restore.in_progress"
)}
>
<onboarding-loading></onboarding-loading>
</ha-card>`
return this._restoring
? html`<h1>
${this.localize("ui.panel.page-onboarding.restore.in_progress")}
</h1>
<onboarding-loading></onboarding-loading>`
: html`
<button class="link" @click=${this._uploadBackup}>
${this.localize("ui.panel.page-onboarding.restore.description")}
</button>
<h1>${this.localize("ui.panel.page-onboarding.restore.header")}</h1>
<ha-button unelevated @click=${this._uploadBackup}>
${this.localize("ui.panel.page-onboarding.restore.upload_backup")}
</ha-button>
`;
}
@ -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<void> {
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;
}
`,
];

103
src/onboarding/onboarding-welcome-link.ts Normal file
View File

@ -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<Ripple | null>;
@state() private _shouldRenderRipple = false;
protected render(): TemplateResult {
return html`
<ha-card
@focus=${this.handleRippleFocus}
@blur=${this.handleRippleBlur}
@mousedown=${this.handleRippleActivate}
@mouseup=${this.handleRippleDeactivate}
@mouseenter=${this.handleRippleMouseEnter}
@mouseleave=${this.handleRippleMouseLeave}
@touchstart=${this.handleRippleActivate}
@touchend=${this.handleRippleDeactivate}
@touchcancel=${this.handleRippleDeactivate}
>
<ha-svg-icon .path=${this.iconPath}></ha-svg-icon>
${this.label}
${this._shouldRenderRipple ? html`<mwc-ripple></mwc-ripple>` : ""}
</ha-card>
`;
}
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;
}
}

84
src/onboarding/onboarding-welcome-links.ts Normal file
View File

@ -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`<a
target="_blank"
rel="noreferrer noopener"
href="https://www.home-assistant.io/blog/2016/01/19/perfect-home-automation/"
>
<onboarding-welcome-link
.iconPath=${mdiFileDocument}
.label=${this.localize("ui.panel.page-onboarding.welcome.vision")}
>
</onboarding-welcome-link>
</a>
<onboarding-welcome-link
class="community"
@click=${this._openCommunity}
.iconPath=${mdiAccountGroup}
.label=${this.localize("ui.panel.page-onboarding.welcome.community")}
>
</onboarding-welcome-link>
<onboarding-welcome-link
class="app"
@click=${this._openApp}
.iconPath=${mdiTabletCellphone}
.label=${this.localize("ui.panel.page-onboarding.welcome.download_app")}
>
</onboarding-welcome-link>`;
}
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;
}
}

79
src/onboarding/onboarding-welcome.ts Normal file
View File

@ -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`
<h1>${this.localize("ui.panel.page-onboarding.welcome.header")}</h1>
<p>${this.localize("ui.panel.page-onboarding.intro")}</p>
<ha-button unelevated @click=${this._start} class="start">
${this.localize("ui.panel.page-onboarding.welcome.start")}
</ha-button>
${this.supervisor
? html`<ha-button @click=${this._restoreBackup}>
${this.localize("ui.panel.page-onboarding.welcome.restore_backup")}
</ha-button>`
: 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;
}
}

15
src/onboarding/particles.ts
View File

@ -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,

19
src/onboarding/styles.ts Normal file
View File

@ -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;
}
`;

36
src/translations/en.json
View File

@ -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": {