Add support for secure devices pin (#3101)

src/data/cloud.ts

@@ -17,18 +17,20 @@ export interface CertificateInformation {
   fingerprint: string;
 }
 
+interface CloudPreferences {
+  google_enabled: boolean;
+  alexa_enabled: boolean;
+  google_secure_devices_pin: string | undefined;
+  cloudhooks: { [webhookId: string]: CloudWebhook };
+}
+
 export type CloudStatusLoggedIn = CloudStatusBase & {
   email: string;
   google_entities: EntityFilter;
   google_domains: string[];
   alexa_entities: EntityFilter;
   alexa_domains: string[];
-  prefs: {
+  prefs: CloudPreferences;
-    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;
@@ -78,9 +80,9 @@ export const fetchCloudSubscriptionInfo = (hass: HomeAssistant) =>
 export const updateCloudPref = (
   hass: HomeAssistant,
   prefs: {
-    google_enabled?: boolean;
+    google_enabled?: CloudPreferences["google_enabled"];
-    alexa_enabled?: boolean;
+    alexa_enabled?: CloudPreferences["alexa_enabled"];
-    google_allow_unlock?: boolean;
+    google_secure_devices_pin?: CloudPreferences["google_secure_devices_pin"];
   }
 ) =>
   hass.callWS({

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

@@ -17,6 +17,7 @@ import { fireEvent } from "../../../common/dom/fire_event";
 import { HomeAssistant } from "../../../types";
 import "./cloud-exposed-entities";
 import { CloudStatusLoggedIn, updateCloudPref } from "../../../data/cloud";
+import { PaperInputElement } from "@polymer/paper-input/paper-input";
 
 export class CloudGooglePref extends LitElement {
   public hass?: HomeAssistant;
@@ -34,7 +35,10 @@ export class CloudGooglePref extends LitElement {
       return html``;
     }
 
-    const { google_enabled, google_allow_unlock } = this.cloudStatus.prefs;
+    const {
+      google_enabled,
+      google_secure_devices_pin,
+    } = this.cloudStatus.prefs;
 
     return html`
       <paper-card heading="Google Assistant">
@@ -71,13 +75,18 @@ export class CloudGooglePref extends LitElement {
           >
           ${google_enabled
             ? html`
-                <div class="unlock">
+                <div class="secure_devices">
-                  <div>Allow unlocking locks</div>
+                  Please enter a pin to interact with security devices. Security
-                  <paper-toggle-button
+                  devices are doors, garage doors and locks. You will be asked
-                    id="google_allow_unlock"
+                  to say/enter this pin when interacting with such devices via
-                    .checked="${google_allow_unlock}"
+                  Google Assistant.
-                    @change="${this._toggleChanged}"
+                  <paper-input
-                  ></paper-toggle-button>
+                    label="Secure Devices Pin"
+                    id="google_secure_devices_pin"
+                    placeholder="Secure devices disabled"
+                    .value=${google_secure_devices_pin || ""}
+                    @change="${this._pinChanged}"
+                  ></paper-input>
                 </div>
                 <p>Exposed entities:</p>
                 <cloud-exposed-entities
@@ -110,6 +119,19 @@ export class CloudGooglePref extends LitElement {
     }
   }
 
+  private async _pinChanged(ev) {
+    const input = ev.target as PaperInputElement;
+    try {
+      await updateCloudPref(this.hass!, {
+        [input.id]: input.value || null,
+      });
+      fireEvent(this, "ha-refresh-cloud-status");
+    } catch (err) {
+      alert(`Unable to store pin: ${err.message}`);
+      input.value = this.cloudStatus!.prefs.google_secure_devices_pin;
+    }
+  }
+
   static get styles(): CSSResult {
     return css`
       a {
@@ -124,13 +146,11 @@ export class CloudGooglePref extends LitElement {
         color: var(--primary-color);
         font-weight: 500;
       }
-      .unlock {
+      .secure_devices {
-        display: flex;
-        flex-direction: row;
         padding-top: 16px;
       }
-      .unlock > div {
+      paper-input {
-        flex: 1;
+        width: 200px;
       }
     `;
   }