Add localization to persons config page (#3846) (#3871)

src/panels/config/person/dialog-person-detail.ts

@@ -55,7 +55,11 @@ class DialogPersonDetail extends LitElement {
         opened
         @opened-changed="${this._openedChanged}"
       >
-        <h2>${this._params.entry ? this._params.entry.name : "New Person"}</h2>
+        <h2>
+          ${this._params.entry
+            ? this._params.entry.name
+            : this.hass!.localize("ui.panel.config.person.detail.new_person")}
+        </h2>
         <paper-dialog-scrollable>
           ${this._error
             ? html`
@@ -66,12 +70,18 @@ class DialogPersonDetail extends LitElement {
             <paper-input
               .value=${this._name}
               @value-changed=${this._nameChanged}
-              label="Name"
+              label="${this.hass!.localize(
-              error-message="Name is required"
+                "ui.panel.config.person.detail.name"
+              )}"
+              error-message="${this.hass!.localize(
+                "ui.panel.config.person.detail.name_error_msg"
+              )}"
               .invalid=${nameInvalid}
             ></paper-input>
             <ha-user-picker
-              label="Linked User"
+              label="${this.hass!.localize(
+                "ui.panel.config.person.detail.linked_user"
+              )}"
               .hass=${this.hass}
               .value=${this._userId}
               .users=${this._params.users}
@@ -104,7 +114,7 @@ class DialogPersonDetail extends LitElement {
                   @click="${this._deleteEntry}"
                   .disabled=${this._submitting}
                 >
-                  DELETE
+                  ${this.hass!.localize("ui.panel.config.person.detail.delete")}
                 </mwc-button>
               `
             : html``}
@@ -112,7 +122,9 @@ class DialogPersonDetail extends LitElement {
             @click="${this._updateEntry}"
             .disabled=${nameInvalid || this._submitting}
           >
-            ${this._params.entry ? "UPDATE" : "CREATE"}
+            ${this._params.entry
+              ? this.hass!.localize("ui.panel.config.person.detail.update")
+              : this.hass!.localize("ui.panel.config.person.detail.create")}
           </mwc-button>
         </div>
       </ha-paper-dialog>

src/panels/config/person/ha-config-person.ts

@@ -55,17 +55,21 @@ class HaConfigPerson extends LitElement {
         <hass-loading-screen></hass-loading-screen>
       `;
     }
+    const hass = this.hass;
     return html`
-      <hass-subpage header="Persons">
+      <hass-subpage header=${hass.localize("ui.panel.config.person.caption")}>
         <ha-config-section .isWide=${this.isWide}>
-          <span slot="header">Persons</span>
+          <span slot="header"
+            >${hass.localize("ui.panel.config.person.caption")}</span
+          >
           <span slot="introduction">
-            Here you can define each person of interest in Home Assistant.
+            ${hass.localize("ui.panel.config.person.introduction")}
             ${this._configItems.length > 0
               ? html`
                   <p>
-                    Note: persons configured via configuration.yaml cannot be
+                    ${hass.localize(
-                    edited via the UI.
+                      "ui.panel.config.person.note_about_persons_configured_in_yaml"
+                    )}
                   </p>
                 `
               : ""}
@@ -83,9 +87,13 @@ class HaConfigPerson extends LitElement {
             ${this._storageItems.length === 0
               ? html`
                   <div class="empty">
-                    Looks like you have not created any persons yet.
+                    ${hass.localize(
+                      "ui.panel.config.person.no_persons_created_yet"
+                    )}
                     <mwc-button @click=${this._createPerson}>
-                      CREATE PERSON</mwc-button
+                      ${hass.localize(
+                        "ui.panel.config.person.create_person"
+                      )}</mwc-button
                     >
                   </div>
                 `
@@ -112,7 +120,7 @@ class HaConfigPerson extends LitElement {
       <ha-fab
         ?is-wide=${this.isWide}
         icon="hass:plus"
-        title="Add Person"
+        title="${hass.localize("ui.panel.config.person.add_person")}"
         @click=${this._createPerson}
       ></ha-fab>
     `;
@@ -180,9 +188,11 @@ class HaConfigPerson extends LitElement {
       },
       removeEntry: async () => {
         if (
-          !confirm(`Are you sure you want to delete this person?
+          !confirm(`${this.hass!.localize(
+            "ui.panel.config.person.confirm_delete"
+          )}
 
-All devices belonging to this person will become unassigned.`)
+${this.hass!.localize("ui.panel.config.person.confirm_delete2")}`)
         ) {
           return false;
         }

src/translations/en.json

@@ -939,11 +939,24 @@
         "person": {
           "caption": "Persons",
           "description": "Manage the persons that Home Assistant tracks.",
+          "introduction": "Here you can define each person of interest in Home Assistant.",
+          "note_about_persons_configured_in_yaml": "Note: persons configured via configuration.yaml cannot be edited via the UI.",
+          "no_persons_created_yet": "Looks like you have not created any persons yet.",
+          "create_person": "Create Person",
+          "add_person": "Add Person",
+          "confirm_delete": "Are you sure you want to delete this person?",
+          "confirm_delete2": "All devices belonging to this person will become unassigned.",
           "detail": {
+            "new_person": "New Person",
             "name": "Name",
+            "name_error_msg": "Name is required",
+            "linked_user": "Linked User",
             "device_tracker_intro": "Select the devices that belong to this person.",
             "device_tracker_picked": "Track Device",
-            "device_tracker_pick": "Pick device to track"
+            "device_tracker_pick": "Pick device to track",
+            "delete": "Delete",
+            "create": "Create",
+            "update": "Update"
           }
         },
         "integrations": {