Merge Confirmation Dialogs into Alert, Confirmation or Prompt (#4114)

* ✨ Add alert dialog 🔨 Add alert dialogs 🔨 add more 🔨 Add more 🔨 Enhance check Co-Authored-By: Bram Kragten <mail@bramkragten.nl> 🔥 Combine confirmation into alert dialog 🔨 Replace confirmation calls with alert dialog ✏️ Remove 3 🔨 Add prompt logic Rename to generic Rename and add new params for alert, confirmation and prompt Renames and prop changes Rename and props Cleanup Setup prompt Wording Use text for prompt Add prompts and confirmation on delete user Rename Rename Rename imports Fix parms change Only use default for confirmation Co-Authored-By: Bram Kragten <mail@bramkragten.nl> Update src/dialogs/generic/dialog-box.ts Co-Authored-By: Bram Kragten <mail@bramkragten.nl> Update change text Add autofocus Merge show dialogs into one generic Add automation delete confirmation Modal Remove deleted file Add delete donfirm to script Fix error with tslint Fix from rebase Fix from rebase Fix from rebase * 🔧 Split dialog functions * 🔧 Fix from rebase * 🔧 More fixes * 🔧 Fix * 🔧 Apply suggestions from code review Co-Authored-By: Bram Kragten <mail@bramkragten.nl> * 🔧 Update from suggestion * 🔧 Renames and cleanup * 🔧 Camelcase Co-Authored-By: Bram Kragten <mail@bramkragten.nl> * 🔧 camel case Co-Authored-By: Bram Kragten <mail@bramkragten.nl> Co-authored-by: Bram Kragten <mail@bramkragten.nl>
2025-07-25 02:06:42 +00:00 · 2020-01-25 16:48:29 +00:00 · 2020-01-25 16:48:29 +00:00 · 15be1688ad
commit 15be1688ad
parent 0c0e82a3ba
24 changed files with 318 additions and 180 deletions
--- a/src/components/buttons/ha-call-service-button.js
+++ b/src/components/buttons/ha-call-service-button.js
@ -3,7 +3,7 @@ import { PolymerElement } from "@polymer/polymer/polymer-element";

 import "./ha-progress-button";
 import { EventsMixin } from "../../mixins/events-mixin";
-import { showConfirmationDialog } from "../../dialogs/confirmation/show-dialog-confirmation";
+import { showConfirmationDialog } from "../../dialogs/generic/show-dialog-box";

 /*
 * @appliesMixin EventsMixin
--- a/src/dialogs/config-flow/step-flow-create-entry.ts
+++ b/src/dialogs/config-flow/step-flow-create-entry.ts
@ -25,6 +25,7 @@ import {
 } from "../../data/area_registry";
 import { DataEntryFlowStepCreateEntry } from "../../data/data_entry_flow";
 import { FlowConfig } from "./show-dialog-data-entry-flow";
+import { showPromptDialog } from "../generic/show-dialog-box";

@customElement("step-flow-create-entry")
 class StepFlowCreateEntry extends LitElement {
@ -93,7 +94,7 @@ class StepFlowCreateEntry extends LitElement {
      <div class="buttons">
        ${this.devices.length > 0
          ? html`
-              <mwc-button @click="${this._addArea}"
+              <mwc-button @click="${this._promptAddArea}"
                >${localize(
                  "ui.panel.config.integrations.config_flow.add_area"
                )}</mwc-button
@ -114,12 +115,7 @@ class StepFlowCreateEntry extends LitElement {
    fireEvent(this, "flow-update", { step: undefined });
  }

-  private async _addArea() {
-    const name = prompt(
-      this.hass.localize(
-        "ui.panel.config.integrations.config_flow.name_new_area"
-      )
-    );
+  private async _addArea(name?: string) {
    if (!name) {
      return;
    }
@ -137,6 +133,18 @@ class StepFlowCreateEntry extends LitElement {
    }
  }

+  private async _promptAddArea() {
+    showPromptDialog(this, {
+      title: this.hass.localize(
+        "ui.panel.config.integrations.config_flow.name_new_area"
+      ),
+      inputLabel: this.hass.localize(
+        "ui.panel.config.integrations.config_flow.area_picker_label"
+      ),
+      confirm: (text) => this._addArea(text),
+    });
+  }
+
  private async _handleAreaChanged(ev: Event) {
    const dropdown = ev.currentTarget as any;
    const device = dropdown.device;
--- a/src/dialogs/confirmation/show-dialog-confirmation.ts
+++ b/src/dialogs/confirmation/show-dialog-confirmation.ts
@ -1,23 +0,0 @@
-import { fireEvent } from "../../common/dom/fire_event";
-
-export interface ConfirmationDialogParams {
-  title?: string;
-  text: string;
-  confirmBtnText?: string;
-  cancelBtnText?: string;
-  confirm: () => void;
-}
-
-export const loadConfirmationDialog = () =>
-  import(/* webpackChunkName: "confirmation" */ "./dialog-confirmation");
-
-export const showConfirmationDialog = (
-  element: HTMLElement,
-  systemLogDetailParams: ConfirmationDialogParams
-): void => {
-  fireEvent(element, "show-dialog", {
-    dialogTag: "dialog-confirmation",
-    dialogImport: loadConfirmationDialog,
-    dialogParams: systemLogDetailParams,
-  });
-};
--- a/src/dialogs/confirmation/dialog-confirmation.ts
+++ b/src/dialogs/confirmation/dialog-confirmation.ts
@ -14,17 +14,21 @@ import "../../components/dialog/ha-paper-dialog";
 import "../../components/ha-switch";

 import { HomeAssistant } from "../../types";
-import { ConfirmationDialogParams } from "./show-dialog-confirmation";
+import { DialogParams } from "./show-dialog-box";
 import { PolymerChangedEvent } from "../../polymer-types";
 import { haStyleDialog } from "../../resources/styles";

-@customElement("dialog-confirmation")
-class DialogConfirmation extends LitElement {
+@customElement("dialog-box")
+class DialogBox extends LitElement {
  @property() public hass!: HomeAssistant;
-  @property() private _params?: ConfirmationDialogParams;
+  @property() private _params?: DialogParams;
+  @property() private _value?: string;

-  public async showDialog(params: ConfirmationDialogParams): Promise<void> {
+  public async showDialog(params: DialogParams): Promise<void> {
    this._params = params;
+    if (params.prompt) {
+      this._value = params.defaultValue;
+    }
  }

  protected render(): TemplateResult | void {
@ -32,6 +36,8 @@ class DialogConfirmation extends LitElement {
      return html``;
    }

+    const confirmPrompt = this._params.confirmation || this._params.prompt;
+
    return html`
      <ha-paper-dialog
        with-backdrop
@ -42,33 +48,67 @@ class DialogConfirmation extends LitElement {
        <h2>
          ${this._params.title
            ? this._params.title
-            : this.hass.localize("ui.dialogs.confirmation.title")}
+            : this._params.confirmation &&
+              this.hass.localize(
+                "ui.dialogs.generic.default_confirmation_title"
+              )}
        </h2>
        <paper-dialog-scrollable>
-          <p>${this._params.text}</p>
+          ${this._params.text
+            ? html`
+                <p>${this._params.text}</p>
+              `
+            : ""}
+          ${this._params.prompt
+            ? html`
+                <paper-input
+                  autofocus
+                  .value=${this._value}
+                  @value-changed=${this._valueChanged}
+                  .label=${this._params.inputLabel
+                    ? this._params.inputLabel
+                    : ""}
+                  .type=${this._params.inputType
+                    ? this._params.inputType
+                    : "text"}
+                ></paper-input>
+              `
+            : ""}
        </paper-dialog-scrollable>
        <div class="paper-dialog-buttons">
-          <mwc-button @click="${this._dismiss}">
-            ${this._params.cancelBtnText
-              ? this._params.cancelBtnText
-              : this.hass.localize("ui.dialogs.confirmation.cancel")}
-          </mwc-button>
+          ${confirmPrompt &&
+            html`
+              <mwc-button @click="${this._dismiss}">
+                ${this._params.dismissText
+                  ? this._params.dismissText
+                  : this.hass.localize("ui.dialogs.generic.cancel")}
+              </mwc-button>
+            `}
          <mwc-button @click="${this._confirm}">
-            ${this._params.confirmBtnText
-              ? this._params.confirmBtnText
-              : this.hass.localize("ui.dialogs.confirmation.ok")}
+            ${this._params.confirmText
+              ? this._params.confirmText
+              : this.hass.localize("ui.dialogs.generic.ok")}
          </mwc-button>
        </div>
      </ha-paper-dialog>
    `;
  }

+  private _valueChanged(ev: PolymerChangedEvent<string>) {
+    this._value = ev.detail.value;
+  }
+
  private async _dismiss(): Promise<void> {
+    if (this._params!.cancel) {
+      this._params!.cancel();
+    }
    this._params = undefined;
  }

  private async _confirm(): Promise<void> {
-    this._params!.confirm();
+    if (this._params!.confirm) {
+      this._params!.confirm(this._value);
+    }
    this._dismiss();
  }

@ -107,6 +147,6 @@ class DialogConfirmation extends LitElement {

 declare global {
  interface HTMLElementTagNameMap {
-    "dialog-confirmation": DialogConfirmation;
+    "dialog-box": DialogBox;
  }
 }
--- a/src/dialogs/generic/show-dialog-box.ts
+++ b/src/dialogs/generic/show-dialog-box.ts
@ -0,0 +1,62 @@
+import { fireEvent } from "../../common/dom/fire_event";
+
+interface AlertDialogParams {
+  confirmText?: string;
+  text?: string;
+  title?: string;
+  confirm?: (out?: string) => void;
+}
+
+interface ConfirmationDialogParams extends AlertDialogParams {
+  dismissText?: string;
+  cancel?: () => void;
+}
+
+interface PromptDialogParams extends AlertDialogParams {
+  inputLabel?: string;
+  inputType?: string;
+  defaultValue?: string;
+}
+
+export interface DialogParams
+  extends ConfirmationDialogParams,
+    PromptDialogParams {
+  confirmation?: boolean;
+  prompt?: boolean;
+}
+
+export const loadGenericDialog = () =>
+  import(/* webpackChunkName: "confirmation" */ "./dialog-box");
+
+export const showAlertDialog = (
+  element: HTMLElement,
+  dialogParams: AlertDialogParams
+): void => {
+  fireEvent(element, "show-dialog", {
+    dialogTag: "dialog-box",
+    dialogImport: loadGenericDialog,
+    dialogParams,
+  });
+};
+
+export const showConfirmationDialog = (
+  element: HTMLElement,
+  dialogParams: ConfirmationDialogParams
+): void => {
+  fireEvent(element, "show-dialog", {
+    dialogTag: "dialog-box",
+    dialogImport: loadGenericDialog,
+    dialogParams: { ...dialogParams, confirmation: true },
+  });
+};
+
+export const showPromptDialog = (
+  element: HTMLElement,
+  dialogParams: PromptDialogParams
+): void => {
+  fireEvent(element, "show-dialog", {
+    dialogTag: "dialog-box",
+    dialogImport: loadGenericDialog,
+    dialogParams: { ...dialogParams, prompt: true },
+  });
+};
--- a/src/dialogs/more-info/more-info-controls.js
+++ b/src/dialogs/more-info/more-info-controls.js
@ -21,7 +21,7 @@ import { EventsMixin } from "../../mixins/events-mixin";
 import LocalizeMixin from "../../mixins/localize-mixin";
 import { computeRTL } from "../../common/util/compute_rtl";
 import { removeEntityRegistryEntry } from "../../data/entity_registry";
-import { showConfirmationDialog } from "../confirmation/show-dialog-confirmation";
+import { showConfirmationDialog } from "../generic/show-dialog-box";
 import { showEntityRegistryDetailDialog } from "../../panels/config/entities/show-dialog-entity-registry-detail";

 const DOMAINS_NO_INFO = ["camera", "configurator", "history_graph"];
@ -252,8 +252,8 @@ class MoreInfoControls extends LocalizeMixin(EventsMixin(PolymerElement)) {
      text: this.localize(
        "ui.dialogs.more_info_control.restored.confirm_remove_text"
      ),
-      confirmBtnText: this.localize("ui.common.yes"),
-      cancelBtnText: this.localize("ui.common.no"),
+      confirmText: this.localize("ui.common.yes"),
+      dismissText: this.localize("ui.common.no"),
      confirm: () =>
        removeEntityRegistryEntry(this.hass, this.stateObj.entity_id),
    });
--- a/src/panels/config/automation/ha-automation-editor.ts
+++ b/src/panels/config/automation/ha-automation-editor.ts
@ -25,7 +25,10 @@ import {
  Trigger,
 } from "../../../data/automation";
 import { Action } from "../../../data/script";
-import { showConfirmationDialog } from "../../../dialogs/confirmation/show-dialog-confirmation";
+import {
+  showAlertDialog,
+  showConfirmationDialog,
+} from "../../../dialogs/generic/show-dialog-box";
 import "../../../layouts/ha-app-layout";
 import { haStyle } from "../../../resources/styles";
 import { HomeAssistant } from "../../../types";
@ -65,7 +68,7 @@ export class HaAutomationEditor extends LitElement {
                      "ui.panel.config.automation.picker.delete_automation"
                    )}"
                    icon="hass:delete"
-                    @click=${this._delete}
+                    @click=${this._deleteConfirm}
                  ></paper-icon-button>
                `}
          </app-toolbar>
@ -252,17 +255,18 @@ export class HaAutomationEditor extends LitElement {
            this._config = config;
          },
          (resp) => {
-            alert(
-              resp.status_code === 404
-                ? this.hass.localize(
-                    "ui.panel.config.automation.editor.load_error_not_editable"
-                  )
-                : this.hass.localize(
-                    "ui.panel.config.automation.editor.load_error_unknown",
-                    "err_no",
-                    resp.status_code
-                  )
-            );
+            showAlertDialog(this, {
+              text:
+                resp.status_code === 404
+                  ? this.hass.localize(
+                      "ui.panel.config.automation.editor.load_error_not_editable"
+                    )
+                  : this.hass.localize(
+                      "ui.panel.config.automation.editor.load_error_unknown",
+                      "err_no",
+                      resp.status_code
+                    ),
+            });
            history.back();
          }
        );
@ -326,8 +330,8 @@ export class HaAutomationEditor extends LitElement {
        text: this.hass!.localize(
          "ui.panel.config.automation.editor.unsaved_confirm"
        ),
-        confirmBtnText: this.hass!.localize("ui.common.yes"),
-        cancelBtnText: this.hass!.localize("ui.common.no"),
+        confirmText: this.hass!.localize("ui.common.yes"),
+        dismissText: this.hass!.localize("ui.common.no"),
        confirm: () => history.back(),
      });
    } else {
@ -335,14 +339,18 @@ export class HaAutomationEditor extends LitElement {
    }
  }

+  private async _deleteConfirm() {
+    showConfirmationDialog(this, {
+      text: this.hass.localize(
+        "ui.panel.config.automation.picker.delete_confirm"
+      ),
+      confirmText: this.hass!.localize("ui.common.yes"),
+      dismissText: this.hass!.localize("ui.common.no"),
+      confirm: () => this._delete(),
+    });
+  }
+
  private async _delete() {
-    if (
-      !confirm(
-        this.hass.localize("ui.panel.config.automation.picker.delete_confirm")
-      )
-    ) {
-      return;
-    }
    await deleteAutomation(this.hass, this.automation.attributes.id!);
    history.back();
  }
--- a/src/panels/config/entities/entity-registry-settings.ts
+++ b/src/panels/config/entities/entity-registry-settings.ts
@ -25,7 +25,7 @@ import {
  removeEntityRegistryEntry,
  EntityRegistryEntry,
 } from "../../../data/entity_registry";
-import { showConfirmationDialog } from "../../../dialogs/confirmation/show-dialog-confirmation";
+import { showConfirmationDialog } from "../../../dialogs/generic/show-dialog-box";
 import { fireEvent } from "../../../common/dom/fire_event";

@customElement("entity-registry-settings")
--- a/src/panels/config/entities/ha-config-entities.ts
+++ b/src/panels/config/entities/ha-config-entities.ts
@ -45,7 +45,7 @@ import {
  HaDataTable,
  DataTableColumnData,
 } from "../../../components/data-table/ha-data-table";
-import { showConfirmationDialog } from "../../../dialogs/confirmation/show-dialog-confirmation";
+import { showConfirmationDialog } from "../../../dialogs/generic/show-dialog-box";
 import { SubscribeMixin } from "../../../mixins/subscribe-mixin";
 import { DialogEntityRegistryDetail } from "./dialog-entity-registry-detail";

@ -410,8 +410,8 @@ export class HaConfigEntities extends SubscribeMixin(LitElement) {
      text: this.hass.localize(
        "ui.panel.config.entities.picker.enable_selected.confirm_text"
      ),
-      confirmBtnText: this.hass.localize("ui.common.yes"),
-      cancelBtnText: this.hass.localize("ui.common.no"),
+      confirmText: this.hass.localize("ui.common.yes"),
+      dismissText: this.hass.localize("ui.common.no"),
      confirm: () => {
        this._selectedEntities.forEach((entity) =>
          updateEntityRegistryEntry(this.hass, entity, {
@ -433,8 +433,8 @@ export class HaConfigEntities extends SubscribeMixin(LitElement) {
      text: this.hass.localize(
        "ui.panel.config.entities.picker.disable_selected.confirm_text"
      ),
-      confirmBtnText: this.hass.localize("ui.common.yes"),
-      cancelBtnText: this.hass.localize("ui.common.no"),
+      confirmText: this.hass.localize("ui.common.yes"),
+      dismissText: this.hass.localize("ui.common.no"),
      confirm: () => {
        this._selectedEntities.forEach((entity) =>
          updateEntityRegistryEntry(this.hass, entity, {
@ -460,8 +460,8 @@ export class HaConfigEntities extends SubscribeMixin(LitElement) {
      text: this.hass.localize(
        "ui.panel.config.entities.picker.remove_selected.confirm_text"
      ),
-      confirmBtnText: this.hass.localize("ui.common.yes"),
-      cancelBtnText: this.hass.localize("ui.common.no"),
+      confirmText: this.hass.localize("ui.common.yes"),
+      dismissText: this.hass.localize("ui.common.no"),
      confirm: () => {
        removeableEntities.forEach((entity) =>
          removeEntityRegistryEntry(this.hass, entity)
--- a/src/panels/config/integrations/config-entry/ha-config-entry-page.ts
+++ b/src/panels/config/integrations/config-entry/ha-config-entry-page.ts
@ -17,7 +17,10 @@ import { DeviceRegistryEntry } from "../../../../data/device_registry";
 import { AreaRegistryEntry } from "../../../../data/area_registry";
 import { fireEvent } from "../../../../common/dom/fire_event";
 import { showConfigEntrySystemOptionsDialog } from "../../../../dialogs/config-entry-system-options/show-dialog-config-entry-system-options";
-import { showConfirmationDialog } from "../../../../dialogs/confirmation/show-dialog-confirmation";
+import {
+  showAlertDialog,
+  showConfirmationDialog,
+} from "../../../../dialogs/generic/show-dialog-box";

 class HaConfigEntryPage extends LitElement {
  @property() public hass!: HomeAssistant;
@ -177,11 +180,11 @@ class HaConfigEntryPage extends LitElement {
    deleteConfigEntry(this.hass, this.configEntryId).then((result) => {
      fireEvent(this, "hass-reload-entries");
      if (result.require_restart) {
-        alert(
-          this.hass.localize(
+        showAlertDialog(this, {
+          text: this.hass.localize(
            "ui.panel.config.integrations.config_entry.restart_confirm"
-          )
-        );
+          ),
+        });
      }
      navigate(this, "/config/integrations/dashboard", true);
    });
--- a/src/panels/config/integrations/ha-config-entries-dashboard.ts
+++ b/src/panels/config/integrations/ha-config-entries-dashboard.ts
@ -43,7 +43,7 @@ import { ConfigEntry, deleteConfigEntry } from "../../../data/config_entries";
 import { fireEvent } from "../../../common/dom/fire_event";
 import { EntityRegistryEntry } from "../../../data/entity_registry";
 import { DataEntryFlowProgress } from "../../../data/data_entry_flow";
-import { showConfirmationDialog } from "../../../dialogs/confirmation/show-dialog-confirmation";
+import { showConfirmationDialog } from "../../../dialogs/generic/show-dialog-box";

@customElement("ha-config-entries-dashboard")
 export class HaConfigManagerDashboard extends LitElement {
@ -277,7 +277,7 @@ export class HaConfigManagerDashboard extends LitElement {
      text: this.hass!.localize(
        "ui.panel.config.integrations.ignore.confirm_ignore"
      ),
-      confirmBtnText: this.hass!.localize(
+      confirmText: this.hass!.localize(
        "ui.panel.config.integrations.ignore.ignore"
      ),
      confirm: () => {
@ -302,7 +302,7 @@ export class HaConfigManagerDashboard extends LitElement {
      text: this.hass!.localize(
        "ui.panel.config.integrations.ignore.confirm_delete_ignore"
      ),
-      confirmBtnText: this.hass!.localize(
+      confirmText: this.hass!.localize(
        "ui.panel.config.integrations.ignore.stop_ignore"
      ),
      confirm: async () => {
--- a/src/panels/config/scene/ha-scene-editor.ts
+++ b/src/panels/config/scene/ha-scene-editor.ts
@ -54,7 +54,7 @@ import { SubscribeMixin } from "../../../mixins/subscribe-mixin";
 import memoizeOne from "memoize-one";
 import { computeDomain } from "../../../common/entity/compute_domain";
 import { HassEvent } from "home-assistant-js-websocket";
-import { showConfirmationDialog } from "../../../dialogs/confirmation/show-dialog-confirmation";
+import { showConfirmationDialog } from "../../../dialogs/generic/show-dialog-box";

 interface DeviceEntities {
  id: string;
@ -560,8 +560,8 @@ export class HaSceneEditor extends SubscribeMixin(LitElement) {
        text: this.hass!.localize(
          "ui.panel.config.scene.editor.unsaved_confirm"
        ),
-        confirmBtnText: this.hass!.localize("ui.common.yes"),
-        cancelBtnText: this.hass!.localize("ui.common.no"),
+        confirmText: this.hass!.localize("ui.common.yes"),
+        dismissText: this.hass!.localize("ui.common.no"),
        confirm: () => this._goBack(),
      });
    } else {
@ -577,8 +577,8 @@ export class HaSceneEditor extends SubscribeMixin(LitElement) {
  private _deleteTapped(): void {
    showConfirmationDialog(this, {
      text: this.hass!.localize("ui.panel.config.scene.picker.delete_confirm"),
-      confirmBtnText: this.hass!.localize("ui.common.yes"),
-      cancelBtnText: this.hass!.localize("ui.common.no"),
+      confirmText: this.hass!.localize("ui.common.yes"),
+      dismissText: this.hass!.localize("ui.common.no"),
      confirm: () => this._delete(),
    });
  }
--- a/src/panels/config/script/ha-script-editor.ts
+++ b/src/panels/config/script/ha-script-editor.ts
@ -22,7 +22,7 @@ import {
  ScriptConfig,
  deleteScript,
 } from "../../../data/script";
-import { showConfirmationDialog } from "../../../dialogs/confirmation/show-dialog-confirmation";
+import { showConfirmationDialog } from "../../../dialogs/generic/show-dialog-box";
 import "../../../layouts/ha-app-layout";
 import { haStyle } from "../../../resources/styles";
 import { HomeAssistant } from "../../../types";
@ -61,7 +61,7 @@ export class HaScriptEditor extends LitElement {
                      "ui.panel.config.script.editor.delete_script"
                    )}"
                    icon="hass:delete"
-                    @click=${this._delete}
+                    @click=${this._deleteConfirm}
                  ></paper-icon-button>
                `}
          </app-toolbar>
@ -228,8 +228,8 @@ export class HaScriptEditor extends LitElement {
        text: this.hass!.localize(
          "ui.panel.config.common.editor.confirm_unsaved"
        ),
-        confirmBtnText: this.hass!.localize("ui.common.yes"),
-        cancelBtnText: this.hass!.localize("ui.common.no"),
+        confirmText: this.hass!.localize("ui.common.yes"),
+        dismissText: this.hass!.localize("ui.common.no"),
        confirm: () => history.back(),
      });
    } else {
@ -237,14 +237,16 @@ export class HaScriptEditor extends LitElement {
    }
  }

+  private async _deleteConfirm() {
+    showConfirmationDialog(this, {
+      text: this.hass.localize("ui.panel.config.script.editor.delete_confirm"),
+      confirmText: this.hass!.localize("ui.common.yes"),
+      dismissText: this.hass!.localize("ui.common.no"),
+      confirm: () => this._delete(),
+    });
+  }
+
  private async _delete() {
-    if (
-      !confirm(
-        this.hass.localize("ui.panel.config.script.editor.delete_confirm")
-      )
-    ) {
-      return;
-    }
    await deleteScript(this.hass, computeObjectId(this.script.entity_id));
    history.back();
  }
--- a/src/panels/config/users/ha-user-editor.ts
+++ b/src/panels/config/users/ha-user-editor.ts
@ -24,6 +24,11 @@ import {
  SYSTEM_GROUP_ID_ADMIN,
 } from "../../../data/user";
 import { showSaveSuccessToast } from "../../../util/toast-saved-success";
+import {
+  showAlertDialog,
+  showConfirmationDialog,
+  showPromptDialog,
+} from "../../../dialogs/generic/show-dialog-box";

 declare global {
  interface HASSDomEvents {
@ -106,12 +111,12 @@ class HaUserEditor extends LitElement {
          </table>

          <div class="card-actions">
-            <mwc-button @click=${this._handleRenameUser}>
+            <mwc-button @click=${this._handlePromptRenameUser}>
              ${hass.localize("ui.panel.config.users.editor.rename_user")}
            </mwc-button>
            <mwc-button
              class="warning"
-              @click=${this._deleteUser}
+              @click=${this._promptDeleteUser}
              .disabled=${user.system_generated}
            >
              ${hass.localize("ui.panel.config.users.editor.delete_user")}
@ -137,12 +142,7 @@ class HaUserEditor extends LitElement {
    );
  }

-  private async _handleRenameUser(ev): Promise<void> {
-    ev.currentTarget.blur();
-    const newName = prompt(
-      this.hass!.localize("ui.panel.config.users.editor.enter_new_name"),
-      this.user!.name
-    );
+  private async _handleRenameUser(newName?: string) {
    if (newName === null || newName === this.user!.name) {
      return;
    }
@ -153,14 +153,24 @@ class HaUserEditor extends LitElement {
      });
      fireEvent(this, "reload-users");
    } catch (err) {
-      alert(
-        `${this.hass!.localize(
+      showAlertDialog(this, {
+        text: `${this.hass!.localize(
          "ui.panel.config.users.editor.user_rename_failed"
-        )} ${err.message}`
-      );
+        )} ${err.message}`,
+      });
    }
  }

+  private async _handlePromptRenameUser(ev): Promise<void> {
+    ev.currentTarget.blur();
+    showPromptDialog(this, {
+      title: this.hass!.localize("ui.panel.config.users.editor.enter_new_name"),
+      defaultValue: this.user!.name,
+      inputLabel: this.hass!.localize("ui.panel.config.users.add_user.name"),
+      confirm: (text) => this._handleRenameUser(text),
+    });
+  }
+
  private async _handleGroupChange(ev): Promise<void> {
    const selectEl = ev.currentTarget as HTMLSelectElement;
    const newGroup = selectEl.value;
@ -171,38 +181,39 @@ class HaUserEditor extends LitElement {
      showSaveSuccessToast(this, this.hass!);
      fireEvent(this, "reload-users");
    } catch (err) {
-      alert(
-        `${this.hass!.localize(
+      showAlertDialog(this, {
+        text: `${this.hass!.localize(
          "ui.panel.config.users.editor.group_update_failed"
-        )} ${err.message}`
-      );
+        )} ${err.message}`,
+      });
      selectEl.value = this.user!.group_ids[0];
    }
  }

-  private async _deleteUser(ev): Promise<void> {
-    if (
-      !confirm(
-        this.hass!.localize(
-          "ui.panel.config.users.editor.confirm_user_deletion",
-          "name",
-          this._name
-        )
-      )
-    ) {
-      ev.target.blur();
-      return;
-    }
+  private async _deleteUser() {
    try {
      await deleteUser(this.hass!, this.user!.id);
    } catch (err) {
-      alert(err.code);
+      showAlertDialog(this, {
+        text: err.code,
+      });
      return;
    }
    fireEvent(this, "reload-users");
    navigate(this, "/config/users");
  }

+  private async _promptDeleteUser(_ev): Promise<void> {
+    showConfirmationDialog(this, {
+      text: this.hass!.localize(
+        "ui.panel.config.users.editor.confirm_user_deletion",
+        "name",
+        this._name
+      ),
+      confirm: () => this._deleteUser(),
+    });
+  }
+
  static get styles(): CSSResultArray {
    return [
      haStyle,
--- a/src/panels/developer-tools/event/developer-tools-event.js
+++ b/src/panels/developer-tools/event/developer-tools-event.js
@ -12,6 +12,7 @@ import "./events-list";
 import "./event-subscribe-card";
 import { EventsMixin } from "../../../mixins/events-mixin";
 import LocalizeMixin from "../../../mixins/localize-mixin";
+import { showAlertDialog } from "../../../dialogs/generic/show-dialog-box";

 const ERROR_SENTINEL = {};
 /*
@ -154,11 +155,11 @@ class HaPanelDevEvent extends EventsMixin(LocalizeMixin(PolymerElement)) {

  fireEvent() {
    if (!this.eventType) {
-      alert(
-        this.hass.localize(
+      showAlertDialog(this, {
+        text: this.hass.localize(
          "ui.panel.developer-tools.tabs.events.alert_event_type"
-        )
-      );
+        ),
+      });
      return;
    }
    this.hass.callApi("POST", "events/" + this.eventType, this.parsedJSON).then(
--- a/src/panels/developer-tools/service/developer-tools-service.js
+++ b/src/panels/developer-tools/service/developer-tools-service.js
@ -11,6 +11,7 @@ import "../../../components/ha-service-picker";
 import "../../../resources/ha-style";
 import "../../../util/app-localstorage-document";
 import LocalizeMixin from "../../../mixins/localize-mixin";
+import { showAlertDialog } from "../../../dialogs/generic/show-dialog-box";

 const ERROR_SENTINEL = {};
 /*
@ -290,14 +291,13 @@ class HaPanelDevService extends LocalizeMixin(PolymerElement) {

  _callService() {
    if (this.parsedJSON === ERROR_SENTINEL) {
-      // eslint-disable-next-line
-      alert(
-        this.hass.localize(
+      showAlertDialog(this, {
+        text: this.hass.localize(
          "ui.panel.developer-tools.tabs.services.alert_parsing_yaml",
          "data",
          this.serviceData
-        )
-      );
+        ),
+      });
      return;
    }

--- a/src/panels/developer-tools/state/developer-tools-state.js
+++ b/src/panels/developer-tools/state/developer-tools-state.js
@ -11,6 +11,7 @@ import "../../../components/ha-code-editor";
 import "../../../resources/ha-style";
 import { EventsMixin } from "../../../mixins/events-mixin";
 import LocalizeMixin from "../../../mixins/localize-mixin";
+import { showAlertDialog } from "../../../dialogs/generic/show-dialog-box";

 const ERROR_SENTINEL = {};
 /*
@ -257,11 +258,11 @@ class HaPanelDevState extends EventsMixin(LocalizeMixin(PolymerElement)) {

  handleSetState() {
    if (!this._entityId) {
-      alert(
-        this.hass.localize(
+      showAlertDialog(this, {
+        text: this.hass.localize(
          "ui.panel.developer-tools.tabs.states.alert_entity_field"
-        )
-      );
+        ),
+      });
      return;
    }
    this.hass.callApi("POST", "states/" + this._entityId, {
--- a/src/panels/lovelace/editor/delete-card.ts
+++ b/src/panels/lovelace/editor/delete-card.ts
@ -1,6 +1,9 @@
 import { Lovelace } from "../types";
 import { deleteCard } from "./config-util";
-import { showConfirmationDialog } from "../../../dialogs/confirmation/show-dialog-confirmation";
+import {
+  showAlertDialog,
+  showConfirmationDialog,
+} from "../../../dialogs/generic/show-dialog-box";
 import { HomeAssistant } from "../../../types";

 export async function confDeleteCard(
@ -15,7 +18,9 @@ export async function confDeleteCard(
      try {
        await lovelace.saveConfig(deleteCard(lovelace.config, path));
      } catch (err) {
-        alert(`Deleting failed: ${err.message}`);
+        showAlertDialog(element, {
+          text: `Deleting failed: ${err.message}`,
+        });
      }
    },
  });
--- a/src/panels/lovelace/editor/view-editor/hui-edit-view.ts
+++ b/src/panels/lovelace/editor/view-editor/hui-edit-view.ts
@ -34,7 +34,10 @@ import { processEditorEntities } from "../process-editor-entities";
 import { navigate } from "../../../../common/navigate";
 import { Lovelace } from "../../types";
 import { deleteView, addView, replaceView } from "../config-util";
-import { showConfirmationDialog } from "../../../../dialogs/confirmation/show-dialog-confirmation";
+import {
+  showAlertDialog,
+  showConfirmationDialog,
+} from "../../../../dialogs/generic/show-dialog-box";

@customElement("hui-edit-view")
 export class HuiEditView extends LitElement {
@ -179,13 +182,17 @@ export class HuiEditView extends LitElement {
      this._closeDialog();
      navigate(this, `/lovelace/0`);
    } catch (err) {
-      alert(`Deleting failed: ${err.message}`);
+      showAlertDialog(this, {
+        text: `Deleting failed: ${err.message}`,
+      });
    }
  }

  private _deleteConfirm(): void {
    if (this._cards && this._cards.length > 0) {
-      alert(this.hass!.localize("ui.panel.lovelace.views.existing_cards"));
+      showAlertDialog(this, {
+        text: this.hass!.localize("ui.panel.lovelace.views.existing_cards"),
+      });
      return;
    }

@ -243,7 +250,9 @@ export class HuiEditView extends LitElement {
      );
      this._closeDialog();
    } catch (err) {
-      alert(`Saving failed: ${err.message}`);
+      showAlertDialog(this, {
+        text: `Saving failed: ${err.message}`,
+      });
    } finally {
      this._saving = false;
    }
--- a/src/panels/lovelace/hui-editor.ts
+++ b/src/panels/lovelace/hui-editor.ts
@ -29,7 +29,10 @@ import { HaCodeEditor } from "../../components/ha-code-editor";
 import { HomeAssistant } from "../../types";
 import { computeRTL } from "../../common/util/compute_rtl";
 import { LovelaceConfig } from "../../data/lovelace";
-import { showConfirmationDialog } from "../../dialogs/confirmation/show-dialog-confirmation";
+import {
+  showAlertDialog,
+  showConfirmationDialog,
+} from "../../dialogs/generic/show-dialog-box";

 const lovelaceStruct = struct.interface({
  title: "string?",
@ -213,8 +216,8 @@ class LovelaceFullConfigEditor extends LitElement {
        text: this.hass.localize(
          "ui.panel.lovelace.editor.raw_editor.confirm_remove_config_text"
        ),
-        confirmBtnText: this.hass.localize("ui.common.yes"),
-        cancelBtnText: this.hass.localize("ui.common.no"),
+        confirmText: this.hass.localize("ui.common.yes"),
+        dismissText: this.hass.localize("ui.common.no"),
        confirm: () => this._removeConfig(),
      });
      return;
@ -236,38 +239,38 @@ class LovelaceFullConfigEditor extends LitElement {
    try {
      config = safeLoad(value);
    } catch (err) {
-      alert(
-        this.hass.localize(
+      showAlertDialog(this, {
+        text: this.hass.localize(
          "ui.panel.lovelace.editor.raw_editor.error_parse_yaml",
          "error",
          err
-        )
-      );
+        ),
+      });
      this._saving = false;
      return;
    }
    try {
      config = lovelaceStruct(config);
    } catch (err) {
-      alert(
-        this.hass.localize(
+      showAlertDialog(this, {
+        text: this.hass.localize(
          "ui.panel.lovelace.editor.raw_editor.error_invalid_config",
          "error",
          err
-        )
-      );
+        ),
+      });
      return;
    }
    try {
      await this.lovelace!.saveConfig(config);
    } catch (err) {
-      alert(
-        this.hass.localize(
+      showAlertDialog(this, {
+        text: this.hass.localize(
          "ui.panel.lovelace.editor.raw_editor.error_save_yaml",
          "error",
          err
-        )
-      );
+        ),
+      });
    }
    this._generation = this.yamlEditor
      .codemirror!.getDoc()
--- a/src/panels/lovelace/hui-root.ts
+++ b/src/panels/lovelace/hui-root.ts
@ -50,6 +50,7 @@ import { computeRTLDirection } from "../../common/util/compute_rtl";
 import { loadLovelaceResources } from "./common/load-resources";
 import { showVoiceCommandDialog } from "../../dialogs/voice-command-dialog/show-ha-voice-command-dialog";
 import { isComponentLoaded } from "../../common/config/is_component_loaded";
+import { showAlertDialog } from "../../dialogs/generic/show-dialog-box";
 import memoizeOne from "memoize-one";

 class HUIRoot extends LitElement {
@ -580,7 +581,9 @@ class HUIRoot extends LitElement {

  private _editModeEnable(): void {
    if (this._yamlMode) {
-      window.alert("The edit UI is not available when in YAML mode.");
+      showAlertDialog(this, {
+        text: "The edit UI is not available when in YAML mode.",
+      });
      return;
    }
    this.lovelace!.setEditMode(true);
--- a/src/panels/profile/ha-long-lived-access-tokens-card.js
+++ b/src/panels/profile/ha-long-lived-access-tokens-card.js
@ -10,6 +10,7 @@ import "../../components/ha-card";
 import "../../resources/ha-style";

 import "./ha-settings-row";
+import { showAlertDialog } from "../../dialogs/generic/show-dialog-box";

 /*
 * @appliesMixin EventsMixin
@ -121,9 +122,11 @@ class HaLongLivedTokens extends LocalizeMixin(EventsMixin(PolymerElement)) {
    } catch (err) {
      // eslint-disable-next-line
      console.error(err);
-      alert(
-        this.localize("ui.panel.profile.long_lived_access_tokens.create_failed")
-      );
+      showAlertDialog(this, {
+        text: this.localize(
+          "ui.panel.profile.long_lived_access_tokens.create_failed"
+        ),
+      });
    }
  }

@ -148,9 +151,11 @@ class HaLongLivedTokens extends LocalizeMixin(EventsMixin(PolymerElement)) {
    } catch (err) {
      // eslint-disable-next-line
      console.error(err);
-      alert(
-        this.localize("ui.panel.profile.long_lived_access_tokens.delete_failed")
-      );
+      showAlertDialog(this, {
+        text: this.localize(
+          "ui.panel.profile.long_lived_access_tokens.delete_failed"
+        ),
+      });
    }
  }
 }
--- a/src/panels/profile/ha-panel-profile.ts
+++ b/src/panels/profile/ha-panel-profile.ts
@ -35,7 +35,7 @@ import { haStyle } from "../../resources/styles";
 import { HomeAssistant } from "../../types";
 import { fireEvent } from "../../common/dom/fire_event";
 import { UnsubscribeFunc } from "home-assistant-js-websocket";
-import { showConfirmationDialog } from "../../dialogs/confirmation/show-dialog-confirmation";
+import { showConfirmationDialog } from "../../dialogs/generic/show-dialog-box";

 class HaPanelProfile extends LitElement {
  @property() public hass!: HomeAssistant;
@ -175,7 +175,7 @@ class HaPanelProfile extends LitElement {
    showConfirmationDialog(this, {
      title: this.hass.localize("ui.panel.profile.logout_title"),
      text: this.hass.localize("ui.panel.profile.logout_text"),
-      confirmBtnText: this.hass.localize("ui.panel.profile.logout"),
+      confirmText: this.hass.localize("ui.panel.profile.logout"),
      confirm: () => fireEvent(this, "hass-logout"),
    });
  }
--- a/src/translations/en.json
+++ b/src/translations/en.json
@ -577,10 +577,10 @@
        "label": "Type a question and press 'Enter'",
        "label_voice": "Type and press 'Enter' or tap the microphone to speak"
      },
-      "confirmation": {
+      "generic": {
        "cancel": "Cancel",
        "ok": "OK",
-        "title": "Are you sure?"
+        "default_confirmation_title": "Are you sure?"
      },
      "more_info_control": {
        "dismiss": "Dismiss dialog",