Change emergency kit format (#23428)

* Change emergency kit format

* Update src/panels/config/backup/ha-config-backup-settings.ts

* review

src/data/backup.ts

@@ -6,6 +6,11 @@ import type { LocalizeFunc } from "../common/translations/localize";
 import type { HomeAssistant } from "../types";
 import { domainToName } from "./integration";
 import type { FrontendLocaleData } from "./translation";
+import {
+  formatDateTime,
+  formatDateTimeNumeric,
+} from "../common/datetime/format_date_time";
+import { fileDownload } from "../util/file_download";
 
 export const enum BackupScheduleState {
   NEVER = "never",
@@ -288,6 +293,45 @@ export const generateEncryptionKey = () => {
   return result;
 };
 
+export const generateEmergencyKit = (
+  hass: HomeAssistant,
+  encryptionKey: string
+) =>
+  "data:text/plain;charset=utf-8," +
+  encodeURIComponent(`Home Assistant Backup Emergency Kit
+
+This emergency kit contains your backup encryption key. You need this key
+to be able to restore your Home Assistant backups.
+
+Date: ${formatDateTime(new Date(), hass.locale, hass.config)}
+
+Instance:
+${hass.config.location_name}
+
+URL:
+${hass.auth.data.hassUrl}
+
+Encryption key:
+${encryptionKey}
+
+For more information visit: https://www.home-assistant.io/more-info/backup-emergency-kit`);
+
+export const geneateEmergencyKitFileName = (
+  hass: HomeAssistant,
+  append?: string
+) =>
+  `home_assistant_backup_emergency_kit_${append ? `${append}_` : ""}${formatDateTimeNumeric(new Date(), hass.locale, hass.config).replace(",", "").replace(" ", "_")}.txt`;
+
+export const downloadEmergencyKit = (
+  hass: HomeAssistant,
+  key: string,
+  appendFileName?: string
+) =>
+  fileDownload(
+    generateEmergencyKit(hass, key),
+    geneateEmergencyKitFileName(hass, appendFileName)
+  );
+
 export const getFormattedBackupTime = memoizeOne(
   (locale: FrontendLocaleData, config: HassConfig) => {
     const date = setMinutes(setHours(new Date(), 4), 45);

src/panels/config/backup/components/config/ha-backup-config-encryption-key.ts

@@ -6,9 +6,10 @@ import "../../../../../components/ha-md-list";
 import "../../../../../components/ha-md-list-item";
 import type { HomeAssistant } from "../../../../../types";
 import { showChangeBackupEncryptionKeyDialog } from "../../dialogs/show-dialog-change-backup-encryption-key";
-import { fileDownload } from "../../../../../util/file_download";
 import { showSetBackupEncryptionKeyDialog } from "../../dialogs/show-dialog-set-backup-encryption-key";
 
+import { downloadEmergencyKit } from "../../../../../data/backup";
+
 @customElement("ha-backup-config-encryption-key")
 class HaBackupConfigEncryptionKey extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
@@ -64,10 +65,7 @@ class HaBackupConfigEncryptionKey extends LitElement {
     if (!this._value) {
       return;
     }
-    fileDownload(
-      "data:text/plain;charset=utf-8," + encodeURIComponent(this._value),
-      "emergency_kit.txt"
-    );
+    downloadEmergencyKit(this.hass, this._value);
   }
 
   private _change() {

src/panels/config/backup/dialogs/dialog-backup-onboarding.ts

@@ -24,6 +24,7 @@ import {
   BackupScheduleState,
   CLOUD_AGENT,
   CORE_LOCAL_AGENT,
+  downloadEmergencyKit,
   generateEncryptionKey,
   HASSIO_LOCAL_AGENT,
   updateBackupConfig,
@@ -31,7 +32,6 @@ import {
 import type { HassDialog } from "../../../../dialogs/make-dialog-manager";
 import { haStyle, haStyleDialog } from "../../../../resources/styles";
 import type { HomeAssistant } from "../../../../types";
-import { fileDownload } from "../../../../util/file_download";
 import { showToast } from "../../../../util/toast";
 import "../components/config/ha-backup-config-agents";
 import "../components/config/ha-backup-config-data";
@@ -392,10 +392,7 @@ class DialogBackupOnboarding extends LitElement implements HassDialog {
     if (!key) {
       return;
     }
-    fileDownload(
-      "data:text/plain;charset=utf-8," + encodeURIComponent(key),
-      "emergency_kit.txt"
-    );
+    downloadEmergencyKit(this.hass, key);
   }
 
   private _copyKeyToClipboard() {
@@ -465,6 +462,7 @@ class DialogBackupOnboarding extends LitElement implements HassDialog {
           width: 90vw;
           max-width: 560px;
           --dialog-content-padding: 8px 24px;
+          max-height: min(605px, 100% - 48px);
         }
         ha-md-list {
           background: none;

src/panels/config/backup/dialogs/dialog-change-backup-encryption-key.ts

@@ -13,11 +13,13 @@ import type { HaMdDialog } from "../../../../components/ha-md-dialog";
 import "../../../../components/ha-md-list";
 import "../../../../components/ha-md-list-item";
 import "../../../../components/ha-password-field";
-import { generateEncryptionKey } from "../../../../data/backup";
+import {
+  downloadEmergencyKit,
+  generateEncryptionKey,
+} from "../../../../data/backup";
 import type { HassDialog } from "../../../../dialogs/make-dialog-manager";
 import { haStyle, haStyleDialog } from "../../../../resources/styles";
 import type { HomeAssistant } from "../../../../types";
-import { fileDownload } from "../../../../util/file_download";
 import { showToast } from "../../../../util/toast";
 import type { ChangeBackupEncryptionKeyDialogParams } from "./show-dialog-change-backup-encryption-key";
 
@@ -224,22 +226,14 @@ class DialogChangeBackupEncryptionKey extends LitElement implements HassDialog {
     if (!this._params?.currentKey) {
       return;
     }
-    fileDownload(
-      "data:text/plain;charset=utf-8," +
-        encodeURIComponent(this._params.currentKey),
-      "emergency_kit_old.txt"
-    );
+    downloadEmergencyKit(this.hass, this._params.currentKey, "old");
   }
 
   private _downloadNew() {
     if (!this._newEncryptionKey) {
       return;
     }
-    fileDownload(
-      "data:text/plain;charset=utf-8," +
-        encodeURIComponent(this._newEncryptionKey),
-      "emergency_kit.txt"
-    );
+    downloadEmergencyKit(this.hass, this._newEncryptionKey);
   }
 
   private async _submit() {

src/panels/config/backup/dialogs/dialog-set-backup-encryption-key.ts

@@ -11,11 +11,13 @@ import type { HaMdDialog } from "../../../../components/ha-md-dialog";
 import "../../../../components/ha-md-list";
 import "../../../../components/ha-md-list-item";
 import "../../../../components/ha-password-field";
-import { generateEncryptionKey } from "../../../../data/backup";
+import {
+  downloadEmergencyKit,
+  generateEncryptionKey,
+} from "../../../../data/backup";
 import type { HassDialog } from "../../../../dialogs/make-dialog-manager";
 import { haStyle, haStyleDialog } from "../../../../resources/styles";
 import type { HomeAssistant } from "../../../../types";
-import { fileDownload } from "../../../../util/file_download";
 import type { SetBackupEncryptionKeyDialogParams } from "./show-dialog-set-backup-encryption-key";
 
 const STEPS = ["new", "save"] as const;
@@ -162,11 +164,7 @@ class DialogSetBackupEncryptionKey extends LitElement implements HassDialog {
     if (!this._newEncryptionKey) {
       return;
     }
-    fileDownload(
-      "data:text/plain;charset=utf-8," +
-        encodeURIComponent(this._newEncryptionKey),
-      "emergency_kit.txt"
-    );
+    downloadEmergencyKit(this.hass, this._newEncryptionKey);
   }
 
   private _encryptionKeyChanged(ev) {

src/panels/config/backup/ha-config-backup-settings.ts

@@ -141,9 +141,9 @@ class HaConfigBackupSettings extends LitElement {
             <div class="card-content">
               <p>
                 Keep this encryption key in a safe place, as you will need it to
-                access your backup, allowing it to be restored. Either record
-                the characters below or download them as an emergency kit file.
-                Encryption keeps your backups private and secure.
+                access your backup, allowing it to be restored. Download them as
+                an emergency kit file and store it somewhere safe. Encryption
+                keeps your backups private and secure.
               </p>
               <ha-backup-config-encryption-key
                 .hass=${this.hass}