Refactor lock and alarm panel code dialog (#17254)

src/data/lock.ts

@@ -2,6 +2,8 @@ import {
   HassEntityAttributeBase,
   HassEntityBase,
 } from "home-assistant-js-websocket";
+import { showEnterCodeDialogDialog } from "../dialogs/enter-code/show-enter-code-dialog";
+import { HomeAssistant } from "../types";
 
 export const FORMAT_TEXT = "text";
 export const FORMAT_NUMBER = "number";
@@ -18,3 +20,32 @@ interface LockEntityAttributes extends HassEntityAttributeBase {
 export interface LockEntity extends HassEntityBase {
   attributes: LockEntityAttributes;
 }
+
+type ProtectedLockService = "lock" | "unlock" | "open";
+
+export const callProtectedLockService = async (
+  element: HTMLElement,
+  hass: HomeAssistant,
+  stateObj: LockEntity,
+  service: ProtectedLockService
+) => {
+  let code: string | undefined;
+
+  if (stateObj!.attributes.code_format) {
+    const response = await showEnterCodeDialogDialog(element, {
+      codeFormat: "text",
+      codePattern: stateObj!.attributes.code_format,
+      title: hass.localize(`ui.dialogs.more_info_control.lock.${service}`),
+      submitText: hass.localize(`ui.dialogs.more_info_control.lock.${service}`),
+    });
+    if (!response) {
+      throw new Error("Code dialog closed");
+    }
+    code = response;
+  }
+
+  await hass.callService("lock", service, {
+    entity_id: stateObj!.entity_id,
+    code,
+  });
+};

src/dialogs/more-info/components/lock/ha-more-info-lock-toggle.ts

@@ -15,9 +15,8 @@ import "../../../../components/ha-control-button";
 import "../../../../components/ha-control-switch";
 import { UNAVAILABLE, UNKNOWN } from "../../../../data/entity";
 import { forwardHaptic } from "../../../../data/haptics";
-import { LockEntity } from "../../../../data/lock";
+import { callProtectedLockService, LockEntity } from "../../../../data/lock";
 import { HomeAssistant } from "../../../../types";
-import { showEnterCodeDialogDialog } from "../../../enter-code/show-enter-code-dialog";
 
 @customElement("ha-more-info-lock-toggle")
 export class HaMoreInfoLockToggle extends LitElement {
@@ -68,30 +67,12 @@ export class HaMoreInfoLockToggle extends LitElement {
       return;
     }
     forwardHaptic("light");
-
+    callProtectedLockService(
-    let code: string | undefined;
+      this,
-
+      this.hass,
-    if (this.stateObj.attributes.code_format) {
+      this.stateObj,
-      const response = await showEnterCodeDialogDialog(this, {
+      turnOn ? "lock" : "unlock"
-        codeFormat: "text",
+    );
-        codePattern: this.stateObj.attributes.code_format,
-        title: this.hass.localize(
-          `ui.dialogs.more_info_control.lock.${turnOn ? "lock" : "unlock"}`
-        ),
-        submitText: this.hass.localize(
-          `ui.dialogs.more_info_control.lock.${turnOn ? "lock" : "unlock"}`
-        ),
-      });
-      if (response == null) {
-        throw new Error("cancel");
-      }
-      code = response;
-    }
-
-    await this.hass.callService("lock", turnOn ? "lock" : "unlock", {
-      entity_id: this.stateObj.entity_id,
-      code,
-    });
   }
 
   protected render(): TemplateResult {

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

@@ -1,6 +1,6 @@
 import "@material/web/iconbutton/outlined-icon-button";
 import { mdiDoorOpen, mdiLock, mdiLockOff } from "@mdi/js";
-import { css, CSSResultGroup, html, LitElement, nothing } from "lit";
+import { CSSResultGroup, LitElement, css, html, nothing } from "lit";
 import { customElement, property } from "lit/decorators";
 import { styleMap } from "lit/directives/style-map";
 import { domainIcon } from "../../../common/entity/domain_icon";
@@ -8,9 +8,12 @@ import { stateColorCss } from "../../../common/entity/state_color";
 import { supportsFeature } from "../../../common/entity/supports-feature";
 import "../../../components/ha-attributes";
 import { UNAVAILABLE } from "../../../data/entity";
-import { LockEntity, LockEntityFeature } from "../../../data/lock";
+import {
+  LockEntity,
+  LockEntityFeature,
+  callProtectedLockService,
+} from "../../../data/lock";
 import type { HomeAssistant } from "../../../types";
-import { showEnterCodeDialogDialog } from "../../enter-code/show-enter-code-dialog";
 import { moreInfoControlStyle } from "../components/ha-more-info-control-style";
 import "../components/ha-more-info-state-header";
 import "../components/lock/ha-more-info-lock-toggle";
@@ -22,41 +25,15 @@ class MoreInfoLock extends LitElement {
   @property({ attribute: false }) public stateObj?: LockEntity;
 
   private async _open() {
-    this._callService("open");
+    callProtectedLockService(this, this.hass, this.stateObj!, "open");
   }
 
   private async _lock() {
-    this._callService("lock");
+    callProtectedLockService(this, this.hass, this.stateObj!, "lock");
   }
 
   private async _unlock() {
-    this._callService("unlock");
+    callProtectedLockService(this, this.hass, this.stateObj!, "unlock");
-  }
-
-  private async _callService(service: "open" | "lock" | "unlock") {
-    let code: string | undefined;
-
-    if (this.stateObj!.attributes.code_format) {
-      const response = await showEnterCodeDialogDialog(this, {
-        codeFormat: "text",
-        codePattern: this.stateObj!.attributes.code_format,
-        title: this.hass.localize(
-          `ui.dialogs.more_info_control.lock.${service}`
-        ),
-        submitText: this.hass.localize(
-          `ui.dialogs.more_info_control.lock.${service}`
-        ),
-      });
-      if (!response) {
-        return;
-      }
-      code = response;
-    }
-
-    this.hass.callService("lock", service, {
-      entity_id: this.stateObj!.entity_id,
-      code,
-    });
   }
 
   protected render() {