Update cloud card (#2919)

src/data/cloud.ts

@@ -1,4 +1,51 @@
 import { HomeAssistant } from "../types";
+import { Webhook } from "./webhook";
+
+export interface EntityFilter {
+  include_domains: string[];
+  include_entities: string[];
+  exclude_domains: string[];
+  exclude_entities: string[];
+}
+interface CloudStatusBase {
+  logged_in: boolean;
+  cloud: "disconnected" | "connecting" | "connected";
+}
+
+interface CertificateInformation {
+  common_name: string;
+  expire_date: string;
+  fingerprint: string;
+}
+
+export type CloudStatusLoggedIn = CloudStatusBase & {
+  email: string;
+  google_entities: EntityFilter;
+  google_domains: string[];
+  alexa_entities: EntityFilter;
+  alexa_domains: string[];
+  prefs: {
+    google_enabled: boolean;
+    alexa_enabled: boolean;
+    google_allow_unlock: boolean;
+    cloudhooks: { [webhookId: string]: CloudWebhook };
+  };
+  remote_domain: string | undefined;
+  remote_connected: boolean;
+  remote_certificate: undefined | CertificateInformation;
+};
+
+export type CloudStatus = CloudStatusBase | CloudStatusLoggedIn;
+
+export interface SubscriptionInfo {
+  human_description: string;
+}
+
+export interface WebhookDialogParams {
+  webhook: Webhook;
+  cloudhook: CloudWebhook;
+  disableHook: () => void;
+}
 
 export interface CloudWebhook {
   webhook_id: string;
@@ -28,3 +75,19 @@ export const disconnectCloudRemote = (hass: HomeAssistant) =>
   hass.callWS({
     type: "cloud/remote/disconnect",
   });
+
+export const fetchCloudSubscriptionInfo = (hass: HomeAssistant) =>
+  hass.callWS<SubscriptionInfo>({ type: "cloud/subscription" });
+
+export const updateCloudPref = (
+  hass: HomeAssistant,
+  prefs: {
+    google_enabled?: boolean;
+    alexa_enabled?: boolean;
+    google_allow_unlock?: boolean;
+  }
+) =>
+  hass.callWS({
+    type: "cloud/update_prefs",
+    ...prefs,
+  });

src/dialogs/more-info/controls/more-info-camera.ts

@@ -46,7 +46,8 @@ class MoreInfoCamera extends UpdatingElement {
       return;
     }
     // tslint:disable-next-line
-    const Hls = ((await import("hls.js")) as any).default as HLSModule;
+    const Hls = ((await import(/* webpackChunkName: "hls.js" */ "hls.js")) as any)
+      .default as HLSModule;
 
     if (Hls.isSupported()) {
       try {

src/panels/config/cloud/cloud-alexa-pref.ts

@@ -3,6 +3,8 @@ import {
   LitElement,
   PropertyDeclarations,
   TemplateResult,
+  CSSResult,
+  css,
 } from "lit-element";
 import "@material/mwc-button";
 import "@polymer/paper-card/paper-card";
@@ -12,9 +14,8 @@ import { PaperToggleButtonElement } from "@polymer/paper-toggle-button/paper-tog
 
 import { fireEvent } from "../../../common/dom/fire_event";
 import { HomeAssistant } from "../../../types";
-import { updatePref } from "./data";
-import { CloudStatusLoggedIn } from "./types";
 import "./cloud-exposed-entities";
+import { CloudStatusLoggedIn, updateCloudPref } from "../../../data/cloud";
 
 export class CloudAlexaPref extends LitElement {
   public hass?: HomeAssistant;
@@ -35,7 +36,6 @@ export class CloudAlexaPref extends LitElement {
     const enabled = this.cloudStatus!.prefs.alexa_enabled;
 
     return html`
-      ${this.renderStyle()}
       <paper-card heading="Alexa">
         <paper-toggle-button
           .checked="${enabled}"
@@ -51,7 +51,7 @@ export class CloudAlexaPref extends LitElement {
             </li>
             <li>
               <a
-                href="https://www.home-assistant.io/cloud/alexa/"
+                href="https://www.nabucasa.com/config/amazon_alexa/"
                 target="_blank"
               >
                 Config documentation
@@ -80,25 +80,23 @@ export class CloudAlexaPref extends LitElement {
   private async _toggleChanged(ev) {
     const toggle = ev.target as PaperToggleButtonElement;
     try {
-      await updatePref(this.hass!, { alexa_enabled: toggle.checked! });
+      await updateCloudPref(this.hass!, { alexa_enabled: toggle.checked! });
       fireEvent(this, "ha-refresh-cloud-status");
     } catch (err) {
       toggle.checked = !toggle.checked;
     }
   }
 
-  private renderStyle(): TemplateResult {
+  static get styles(): CSSResult {
-    return html`
+    return css`
-      <style>
+      a {
-        a {
+        color: var(--primary-color);
-          color: var(--primary-color);
+      }
-        }
+      paper-card > paper-toggle-button {
-        paper-card > paper-toggle-button {
+        position: absolute;
-          position: absolute;
+        right: 8px;
-          right: 8px;
+        top: 16px;
-          top: 16px;
+      }
-        }
-      </style>
     `;
   }
 }

src/panels/config/cloud/cloud-google-pref.ts

@@ -3,6 +3,8 @@ import {
   LitElement,
   PropertyDeclarations,
   TemplateResult,
+  CSSResult,
+  css,
 } from "lit-element";
 import "@material/mwc-button";
 import "@polymer/paper-card/paper-card";
@@ -13,9 +15,8 @@ import "../../../components/buttons/ha-call-api-button";
 
 import { fireEvent } from "../../../common/dom/fire_event";
 import { HomeAssistant } from "../../../types";
-import { updatePref } from "./data";
-import { CloudStatusLoggedIn } from "./types";
 import "./cloud-exposed-entities";
+import { CloudStatusLoggedIn, updateCloudPref } from "../../../data/cloud";
 
 export class CloudGooglePref extends LitElement {
   public hass?: HomeAssistant;
@@ -36,7 +37,6 @@ export class CloudGooglePref extends LitElement {
     const { google_enabled, google_allow_unlock } = this.cloudStatus.prefs;
 
     return html`
-      ${this.renderStyle()}
       <paper-card heading="Google Assistant">
         <paper-toggle-button
           id="google_enabled"
@@ -58,7 +58,7 @@ export class CloudGooglePref extends LitElement {
             </li>
             <li>
               <a
-                href="https://www.home-assistant.io/cloud/google_assistant/"
+                href="https://www.nabucasa.com/config/google_assistant/"
                 target="_blank"
               >
                 Config documentation
@@ -103,37 +103,35 @@ export class CloudGooglePref extends LitElement {
   private async _toggleChanged(ev) {
     const toggle = ev.target as PaperToggleButtonElement;
     try {
-      await updatePref(this.hass!, { [toggle.id]: toggle.checked! });
+      await updateCloudPref(this.hass!, { [toggle.id]: toggle.checked! });
       fireEvent(this, "ha-refresh-cloud-status");
     } catch (err) {
       toggle.checked = !toggle.checked;
     }
   }
 
-  private renderStyle(): TemplateResult {
+  static get styles(): CSSResult {
-    return html`
+    return css`
-      <style>
+      a {
-        a {
+        color: var(--primary-color);
-          color: var(--primary-color);
+      }
-        }
+      paper-card > paper-toggle-button {
-        paper-card > paper-toggle-button {
+        position: absolute;
-          position: absolute;
+        right: 8px;
-          right: 8px;
+        top: 16px;
-          top: 16px;
+      }
-        }
+      ha-call-api-button {
-        ha-call-api-button {
+        color: var(--primary-color);
-          color: var(--primary-color);
+        font-weight: 500;
-          font-weight: 500;
+      }
-        }
+      .unlock {
-        .unlock {
+        display: flex;
-          display: flex;
+        flex-direction: row;
-          flex-direction: row;
+        padding-top: 16px;
-          padding-top: 16px;
+      }
-        }
+      .unlock > div {
-        .unlock > div {
+        flex: 1;
-          flex: 1;
+      }
-        }
-      </style>
     `;
   }
 }

src/panels/config/cloud/cloud-remote-pref.ts

@@ -0,0 +1,148 @@
+import {
+  html,
+  LitElement,
+  PropertyDeclarations,
+  TemplateResult,
+  customElement,
+  CSSResult,
+  css,
+} from "lit-element";
+import "@material/mwc-button";
+import "@polymer/paper-card/paper-card";
+import "@polymer/paper-toggle-button/paper-toggle-button";
+import "@polymer/paper-item/paper-item-body";
+// tslint:disable-next-line
+import { PaperToggleButtonElement } from "@polymer/paper-toggle-button/paper-toggle-button";
+import "../../../components/buttons/ha-call-api-button";
+
+import { fireEvent } from "../../../common/dom/fire_event";
+import { HomeAssistant } from "../../../types";
+import {
+  connectCloudRemote,
+  disconnectCloudRemote,
+  CloudStatusLoggedIn,
+} from "../../../data/cloud";
+import format_date_time from "../../../common/datetime/format_date_time";
+
+@customElement("cloud-remote-pref")
+export class CloudRemotePref extends LitElement {
+  public hass?: HomeAssistant;
+  public cloudStatus?: CloudStatusLoggedIn;
+
+  static get properties(): PropertyDeclarations {
+    return {
+      hass: {},
+      cloudStatus: {},
+    };
+  }
+
+  protected render(): TemplateResult | void {
+    if (!this.cloudStatus) {
+      return html``;
+    }
+
+    const {
+      remote_connected,
+      remote_domain,
+      remote_certificate,
+    } = this.cloudStatus;
+
+    return html`
+      <paper-card heading="Remote Control">
+        <paper-toggle-button
+          .checked="${remote_connected}"
+          @change="${this._toggleChanged}"
+        ></paper-toggle-button>
+        <div class="card-content">
+          Home Assistant Cloud provides you with a secure remote connection to
+          your instance while away from home. Your instance
+          ${remote_connected ? "is" : "will be"} available at
+          <a href="https://${remote_domain}" target="_blank">
+            https://${remote_domain}</a
+          >.
+          ${!remote_certificate
+            ? ""
+            : html`
+                <div class="data-row">
+                  <paper-item-body two-line>
+                    Certificate expiration date
+                    <div secondary>Will be automatically renewed</div>
+                  </paper-item-body>
+                  <div class="data-value">
+                    ${format_date_time(
+                      new Date(remote_certificate.expire_date),
+                      this.hass!.language
+                    )}
+                  </div>
+                </div>
+                <div class="data-row">
+                  <paper-item-body>
+                    Certificate fingerprint
+                  </paper-item-body>
+                  <div class="data-value">
+                    ${remote_certificate.fingerprint}
+                  </div>
+                </div>
+              `}
+        </div>
+        <div class="card-actions">
+          <a href="https://www.nabucasa.com/config/remote/" target="_blank">
+            <mwc-button>Learn how it works</mwc-button>
+          </a>
+        </div>
+      </paper-card>
+    `;
+  }
+
+  private async _toggleChanged(ev) {
+    const toggle = ev.target as PaperToggleButtonElement;
+
+    try {
+      if (toggle.checked) {
+        await connectCloudRemote(this.hass!);
+      } else {
+        await disconnectCloudRemote(this.hass!);
+      }
+      fireEvent(this, "ha-refresh-cloud-status");
+    } catch (err) {
+      toggle.checked = !toggle.checked;
+    }
+  }
+
+  static get styles(): CSSResult {
+    return css`
+      .data-row {
+        display: flex;
+      }
+      .data-value {
+        padding: 16px 0;
+      }
+      a {
+        color: var(--primary-color);
+      }
+      paper-card > paper-toggle-button {
+        position: absolute;
+        right: 8px;
+        top: 16px;
+      }
+      ha-call-api-button {
+        color: var(--primary-color);
+        font-weight: 500;
+      }
+      .unlock {
+        display: flex;
+        flex-direction: row;
+        padding-top: 16px;
+      }
+      .unlock > div {
+        flex: 1;
+      }
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "cloud-remote-pref": CloudRemotePref;
+  }
+}

src/panels/config/cloud/data.ts

@@ -1,18 +0,0 @@
-import { HomeAssistant } from "../../../types";
-import { SubscriptionInfo } from "./types";
-
-export const fetchSubscriptionInfo = (hass: HomeAssistant) =>
-  hass.callWS<SubscriptionInfo>({ type: "cloud/subscription" });
-
-export const updatePref = (
-  hass: HomeAssistant,
-  prefs: {
-    google_enabled?: boolean;
-    alexa_enabled?: boolean;
-    google_allow_unlock?: boolean;
-  }
-) =>
-  hass.callWS({
-    type: "cloud/update_prefs",
-    ...prefs,
-  });

src/panels/config/cloud/ha-config-cloud-account.js

@@ -16,11 +16,10 @@ import formatDateTime from "../../../common/datetime/format_date_time";
 import EventsMixin from "../../../mixins/events-mixin";
 import LocalizeMixin from "../../../mixins/localize-mixin";
 import { fireEvent } from "../../../common/dom/fire_event";
-
+import { fetchCloudSubscriptionInfo } from "../../../data/cloud";
-import { fetchSubscriptionInfo } from "./data";
 import "./cloud-alexa-pref";
 import "./cloud-google-pref";
-import { connectCloudRemote, disconnectCloudRemote } from "../../../data/cloud";
+import "./cloud-remote-pref";
 
 let registeredWebhookDialog = false;
 
@@ -98,25 +97,6 @@ class HaConfigCloudAccount extends EventsMixin(LocalizeMixin(PolymerElement)) {
                 <div class="status">[[cloudStatus.cloud]]</div>
               </div>
 
-              <div class="account-row">
-                <paper-item-body two-line>
-                  Remote Access
-                  <div class="secondary">
-                    <a
-                      href="https://[[cloudStatus.remote_domain]]"
-                      target="_blank"
-                      >[[cloudStatus.remote_domain]]</a
-                    >
-                  </div>
-                </paper-item-body>
-                <div class="status">
-                  <paper-toggle-button
-                    checked="[[cloudStatus.remote_connected]]"
-                    on-change="_remoteChanged"
-                  ></paper-toggle-button>
-                </div>
-              </div>
-
               <div class="card-actions">
                 <a href="https://account.nabucasa.com" target="_blank"
                   ><mwc-button>Manage Account</mwc-button></a
@@ -144,6 +124,11 @@ class HaConfigCloudAccount extends EventsMixin(LocalizeMixin(PolymerElement)) {
               </p>
             </div>
 
+            <cloud-remote-pref
+              hass="[[hass]]"
+              cloud-status="[[cloudStatus]]"
+            ></cloud-remote-pref>
+
             <cloud-alexa-pref
               hass="[[hass]]"
               cloud-status="[[cloudStatus]]"
@@ -195,24 +180,12 @@ class HaConfigCloudAccount extends EventsMixin(LocalizeMixin(PolymerElement)) {
     }
   }
 
-  async _remoteChanged(ev) {
-    const toggle = ev.target;
-
-    try {
-      this.cloudStatus = toggle.checked
-        ? await connectCloudRemote(this.hass)
-        : await disconnectCloudRemote(this.hass);
-    } catch (err) {
-      toggle.checked = !toggle.checked;
-    }
-  }
-
   _computeRemoteConnected(connected) {
     return connected ? "Connected" : "Not Connected";
   }
 
   async _fetchSubscriptionInfo() {
-    this._subscription = await fetchSubscriptionInfo(this.hass);
+    this._subscription = await fetchCloudSubscriptionInfo(this.hass);
     if (
       this._subscription.provider &&
       this.cloudStatus &&

src/panels/config/cloud/ha-config-cloud-login.js

@@ -74,9 +74,10 @@ class HaConfigCloudLogin extends NavigateMixin(EventsMixin(PolymerElement)) {
             <span slot="header">Home Assistant Cloud</span>
             <div slot="introduction">
               <p>
-                Home Assistant Cloud allow you to remotely and securely control
+                Home Assistant Cloud provides you with a secure remote
-                your instance away from home. It also allows you to connect with
+                connection to your instance while away from home. It also allows
-                cloud-only services like Amazon Alexa and Google Assistant.
+                you to connect with cloud-only services: Amazon Alexa and Google
+                Assistant.
               </p>
               <p>
                 This service is run by our partner

src/panels/config/cloud/ha-config-cloud-register.js

@@ -66,7 +66,7 @@ class HaConfigCloudRegister extends EventsMixin(PolymerElement) {
               The trial will give you access to all the benefits of Home Assistant Cloud, including:
             </p>
             <ul>
-              <li>Control Home Assistant away from home</li>
+              <li>Control of Home Assistant away from home</li>
               <li>Integration with Google Assistant</li>
               <li>Integration with Amazon Alexa</li>
               <li>Easy integration with webhook-based apps like OwnTracks</li>

src/panels/config/cloud/types.ts

@@ -1,39 +0,0 @@
-import { CloudWebhook } from "../../../data/cloud";
-import { Webhook } from "../../../data/webhook";
-
-export interface EntityFilter {
-  include_domains: string[];
-  include_entities: string[];
-  exclude_domains: string[];
-  exclude_entities: string[];
-}
-interface CloudStatusBase {
-  logged_in: boolean;
-  cloud: "disconnected" | "connecting" | "connected";
-}
-
-export type CloudStatusLoggedIn = CloudStatusBase & {
-  email: string;
-  google_entities: EntityFilter;
-  google_domains: string[];
-  alexa_entities: EntityFilter;
-  alexa_domains: string[];
-  prefs: {
-    google_enabled: boolean;
-    alexa_enabled: boolean;
-    google_allow_unlock: boolean;
-    cloudhooks: { [webhookId: string]: CloudWebhook };
-  };
-};
-
-export type CloudStatus = CloudStatusBase | CloudStatusLoggedIn;
-
-export interface SubscriptionInfo {
-  human_description: string;
-}
-
-export interface WebhookDialogParams {
-  webhook: Webhook;
-  cloudhook: CloudWebhook;
-  disableHook: () => void;
-}