diff --git a/package.json b/package.json
index 8336c0692c..09facfc322 100644
--- a/package.json
+++ b/package.json
@@ -85,7 +85,7 @@
"fuse.js": "^3.4.4",
"google-timezones-json": "^1.0.2",
"hls.js": "^0.12.4",
- "home-assistant-js-websocket": "^4.4.0",
+ "home-assistant-js-websocket": "4.4.1",
"intl-messageformat": "^2.2.0",
"js-yaml": "^3.13.1",
"leaflet": "^1.4.0",
diff --git a/src/fake_data/demo_config.ts b/src/fake_data/demo_config.ts
index 1361937db4..91e7080771 100644
--- a/src/fake_data/demo_config.ts
+++ b/src/fake_data/demo_config.ts
@@ -17,4 +17,5 @@ export const demoConfig: HassConfig = {
version: "DEMO",
whitelist_external_dirs: [],
config_source: "storage",
+ safe_mode: false,
};
diff --git a/src/panels/config/areas/dialog-area-registry-detail.ts b/src/panels/config/areas/dialog-area-registry-detail.ts
index 520d676195..093f099766 100644
--- a/src/panels/config/areas/dialog-area-registry-detail.ts
+++ b/src/panels/config/areas/dialog-area-registry-detail.ts
@@ -6,6 +6,7 @@ import {
TemplateResult,
property,
} from "lit-element";
+import "@material/mwc-button";
import "@polymer/paper-dialog-scrollable/paper-dialog-scrollable";
import "@polymer/paper-input/paper-input";
diff --git a/src/panels/lovelace/cards/hui-safe-mode-card.ts b/src/panels/lovelace/cards/hui-safe-mode-card.ts
new file mode 100644
index 0000000000..01f579d3f8
--- /dev/null
+++ b/src/panels/lovelace/cards/hui-safe-mode-card.ts
@@ -0,0 +1,70 @@
+import {
+ html,
+ LitElement,
+ TemplateResult,
+ customElement,
+ css,
+ CSSResult,
+ property,
+} from "lit-element";
+import "@material/mwc-button";
+
+import "../../../components/ha-card";
+
+import { LovelaceCard } from "../types";
+import { HomeAssistant } from "../../../types";
+
+@customElement("hui-safe-mode-card")
+export class HuiSafeModeCard extends LitElement implements LovelaceCard {
+ @property() public hass?: HomeAssistant;
+
+ public getCardSize(): number {
+ return 3;
+ }
+
+ public setConfig(_config: any): void {
+ // No config necessary.
+ }
+
+ protected render(): TemplateResult {
+ return html`
+
+
+ ${this.hass!.localize(
+ "ui.panel.lovelace.cards.safe-mode.description"
+ )}
+
+
+
+ `;
+ }
+
+ static get styles(): CSSResult {
+ return css`
+ ha-card {
+ --ha-card-header-color: var(--primary-color);
+ }
+ .card-actions a {
+ text-decoration: none;
+ }
+ `;
+ }
+}
+
+declare global {
+ interface HTMLElementTagNameMap {
+ "hui-safe-mode-card": HuiSafeModeCard;
+ }
+}
diff --git a/src/panels/lovelace/common/generate-lovelace-config.ts b/src/panels/lovelace/common/generate-lovelace-config.ts
index ae5c5dff95..8f450fcdea 100644
--- a/src/panels/lovelace/common/generate-lovelace-config.ts
+++ b/src/panels/lovelace/common/generate-lovelace-config.ts
@@ -404,6 +404,17 @@ export const generateLovelaceConfigFromData = async (
entities: HassEntities,
localize: LocalizeFunc
): Promise => {
+ if (config.safe_mode) {
+ return {
+ title: config.location_name,
+ views: [
+ {
+ cards: [{ type: "safe-mode" }],
+ },
+ ],
+ };
+ }
+
const viewEntities = extractViews(entities);
const views = viewEntities.map((viewEntity: GroupEntity) => {
@@ -461,11 +472,8 @@ export const generateLovelaceConfigFromData = async (
// User has no entities
if (views.length === 1 && views[0].cards!.length === 0) {
- import(
- /* webpackChunkName: "hui-empty-state-card" */ "../cards/hui-empty-state-card"
- );
views[0].cards!.push({
- type: "custom:hui-empty-state-card",
+ type: "empty-state",
});
}
diff --git a/src/panels/lovelace/create-element/create-card-element.ts b/src/panels/lovelace/create-element/create-card-element.ts
index 74f171580f..d3acc76267 100644
--- a/src/panels/lovelace/create-element/create-card-element.ts
+++ b/src/panels/lovelace/create-element/create-card-element.ts
@@ -31,11 +31,13 @@ const ALWAYS_LOADED_TYPES = new Set([
const LAZY_LOAD_TYPES = {
"alarm-panel": () => import("../cards/hui-alarm-panel-card"),
+ "empty-state": () => import("../cards/hui-empty-state-card"),
"entity-filter": () => import("../cards/hui-entity-filter-card"),
"picture-elements": () => import("../cards/hui-picture-elements-card"),
"picture-entity": () => import("../cards/hui-picture-entity-card"),
"picture-glance": () => import("../cards/hui-picture-glance-card"),
"plant-status": () => import("../cards/hui-plant-status-card"),
+ "safe-mode": () => import("../cards/hui-safe-mode-card"),
"shopping-list": () => import("../cards/hui-shopping-list-card"),
conditional: () => import("../cards/hui-conditional-card"),
gauge: () => import("../cards/hui-gauge-card"),
diff --git a/src/panels/lovelace/hui-root.ts b/src/panels/lovelace/hui-root.ts
index 33f3191644..abedfe33f0 100644
--- a/src/panels/lovelace/hui-root.ts
+++ b/src/panels/lovelace/hui-root.ts
@@ -226,7 +226,8 @@ class HUIRoot extends LitElement {
`
: ""}
- ${this.hass!.user!.is_admin
+ ${this.hass!.user!.is_admin &&
+ !this.hass!.config.safe_mode
? html`