Add l10n suppor for profile panel (#1717)

* L10N support for profile panel and mfa module

* L10N support for mfa setup flow

* Lint

* Lint

* Lint

src/panels/profile/ha-change-password-card.js

@@ -5,9 +5,14 @@ import '@polymer/paper-card/paper-card.js';
 import { html } from '@polymer/polymer/lib/utils/html-tag.js';
 import { PolymerElement } from '@polymer/polymer/polymer-element.js';
 
+import LocalizeMixin from '../../mixins/localize-mixin.js';
+
 import '../../resources/ha-style.js';
 
-class HaChangePasswordCard extends PolymerElement {
+/*
+ * @appliesMixin LocalizeMixin
+ */
+class HaChangePasswordCard extends LocalizeMixin(PolymerElement) {
   static get template() {
     return html`
     <style include="ha-style">
@@ -29,7 +34,7 @@ class HaChangePasswordCard extends PolymerElement {
       }
     </style>
     <div>
-      <paper-card heading="Change Password">
+      <paper-card heading="[[localize('ui.panel.profile.change_password.header')]]">
         <div class="card-content">
           <template is="dom-if" if="[[_errorMsg]]">
             <div class='error'>[[_errorMsg]]</div>
@@ -38,30 +43,30 @@ class HaChangePasswordCard extends PolymerElement {
             <div class="status">[[_statusMsg]]</div>
           </template>
           <paper-input
-            class='currentPassword'
-            label='Current Password'
-            type='password'
-            value='{{_currentPassword}}'
+            class="currentPassword"
+            label="[[localize('ui.panel.profile.change_password.current_password')]]"
+            type="password"
+            value="{{_currentPassword}}"
             required
             auto-validate
-            error-message='Required'
+            error-message="[[localize('ui.panel.profile.change_password.error_required')]]"
           ></paper-input>
-          <template is='dom-if' if='[[_currentPassword]]'>
+          <template is="dom-if" if="[[_currentPassword]]">
             <paper-input
-              label='New Password'
-              type='password'
-              value='{{_password1}}'
+              label="[[localize('ui.panel.profile.change_password.new_password')]]"
+              type="password"
+              value="{{_password1}}"
               required
               auto-validate
-              error-message='Required'
+              error-message="[[localize('ui.panel.profile.change_password.error_required')]]"
             ></paper-input>
             <paper-input
-              label='Confirm New Password'
-              type='password'
-              value='{{_password2}}'
+              label="[[localize('ui.panel.profile.change_password.confirm_new_password')]]"
+              type="password"
+              value="{{_password2}}"
               required
               auto-validate
-              error-message='Required'
+              error-message="[[localize('ui.panel.profile.change_password.error_required')]]"
             ></paper-input>
           </template>
         </div>
@@ -70,7 +75,9 @@ class HaChangePasswordCard extends PolymerElement {
             <div><paper-spinner active></paper-spinner></div>
           </template>
           <template is="dom-if" if="[[!_loading]]">
-            <paper-button on-click="_changePassword">Submit</paper-button>
+            <paper-button
+              on-click="_changePassword"
+            >[[localize('ui.panel.profile.change_password.submit')]]</paper-button>
           </template>
         </div>
       </paper-card>

src/panels/profile/ha-mfa-module-setup-flow.js

@@ -48,10 +48,10 @@ class HaMfaModuleSetupFlow extends
     <paper-dialog id="dialog" with-backdrop="" opened="{{_opened}}" on-opened-changed="_openedChanged">
       <h2>
         <template is="dom-if" if="[[_equals(_step.type, 'abort')]]">
-          Aborted
+          [[localize('ui.panel.profile.mfa_setup.title_aborted')]]
         </template>
         <template is="dom-if" if="[[_equals(_step.type, 'create_entry')]]">
-          Success!
+          [[localize('ui.panel.profile.mfa_setup.title_success')]]
         </template>
         <template is="dom-if" if="[[_equals(_step.type, 'form')]]">
           [[_computeStepTitle(localize, _step)]]
@@ -70,7 +70,7 @@ class HaMfaModuleSetupFlow extends
           </template>
 
           <template is="dom-if" if="[[_equals(_step.type, 'create_entry')]]">
-            <p>Setup done for [[_step.title]]</p>
+            <p>[[localize('ui.panel.profile.mfa_setup.step_done', 'step', _step.title)]]</p>
           </template>
 
           <template is="dom-if" if="[[_equals(_step.type, 'form')]]">
@@ -90,17 +90,23 @@ class HaMfaModuleSetupFlow extends
       </paper-dialog-scrollable>
       <div class="buttons">
         <template is="dom-if" if="[[_equals(_step.type, 'abort')]]">
-          <paper-button on-click="_flowDone">Close</paper-button>
+          <paper-button
+            on-click="_flowDone"
+          >[[localize('ui.panel.profile.mfa_setup.close')]]</paper-button>
         </template>
         <template is="dom-if" if="[[_equals(_step.type, 'create_entry')]]">
-          <paper-button on-click="_flowDone">Close</paper-button>
+          <paper-button
+            on-click="_flowDone"
+          >[[localize('ui.panel.profile.mfa_setup.close')]]</paper-button>
         </template>
         <template is="dom-if" if="[[_equals(_step.type, 'form')]]">
           <template is="dom-if" if="[[_loading]]">
             <div class='submit-spinner'><paper-spinner active></paper-spinner></div>
           </template>
           <template is="dom-if" if="[[!_loading]]">
-            <paper-button on-click="_submitStep">Submit</paper-button>
+            <paper-button
+              on-click="_submitStep"
+            >[[localize('ui.panel.profile.mfa_setup.submit')]]</paper-button>
           </template>
         </template>
       </div>

src/panels/profile/ha-mfa-modules-card.js

@@ -41,7 +41,7 @@ class HaMfaModulesCard extends EventsMixin(LocalizeMixin(PolymerElement)) {
         margin-right: -.57em;
       }
     </style>
-    <paper-card heading="Multi-factor Authentication Modules">
+    <paper-card heading="[[localize('ui.panel.profile.mfa.header')]]">
       <template is="dom-repeat" items="[[mfaModules]]" as="module">
         <paper-item>
           <paper-item-body two-line="">
@@ -49,10 +49,14 @@ class HaMfaModulesCard extends EventsMixin(LocalizeMixin(PolymerElement)) {
             <div secondary="">[[module.id]]</div>
           </paper-item-body>
           <template is="dom-if" if="[[module.enabled]]">
-            <paper-button on-click="_disable">Disable</paper-button>
+            <paper-button
+              on-click="_disable"
+            >[[localize('ui.panel.profile.mfa.disable')]]</paper-button>
           </template>
           <template is="dom-if" if="[[!module.enabled]]">
-            <paper-button on-click="_enable">Enable</paper-button>
+            <paper-button
+              on-click="_enable"
+            >[[localize('ui.panel.profile.mfa.enable')]]</paper-button>
           </template>
         </paper-item>
       </template>
@@ -99,7 +103,12 @@ class HaMfaModulesCard extends EventsMixin(LocalizeMixin(PolymerElement)) {
   }
 
   _disable(ev) {
-    if (!confirm(`Are you sure you want to disable ${ev.model.module.name}?`)) return;
+    if (!confirm(this.localize(
+      'ui.panel.profile.mfa.confirm_disable',
+      'name', ev.model.module.name
+    ))) {
+      return;
+    }
 
     const mfaModuleId = ev.model.module.id;
 

src/panels/profile/ha-panel-profile.js

@@ -12,6 +12,7 @@ import '../../components/ha-menu-button.js';
 import '../../resources/ha-style.js';
 
 import EventsMixin from '../../mixins/events-mixin.js';
+import LocalizeMixin from '../../mixins/localize-mixin.js';
 
 import './ha-change-password-card.js';
 import './ha-mfa-modules-card.js';
@@ -24,8 +25,9 @@ import './ha-push-notifications-row.js';
 
 /*
  * @appliesMixin EventsMixin
+ * @appliesMixin LocalizeMixin
  */
-class HaPanelProfile extends EventsMixin(PolymerElement) {
+class HaPanelProfile extends EventsMixin(LocalizeMixin(PolymerElement)) {
   static get template() {
     return html`
     <style include="ha-style">
@@ -51,15 +53,15 @@ class HaPanelProfile extends EventsMixin(PolymerElement) {
       <app-header slot="header" fixed>
         <app-toolbar>
           <ha-menu-button narrow='[[narrow]]' show-menu='[[showMenu]]'></ha-menu-button>
-          <div main-title>Profile</div>
+          <div main-title>[[localize('panel.profile')]]</div>
         </app-toolbar>
       </app-header>
 
       <div class='content'>
         <paper-card heading='[[hass.user.name]]'>
           <div class='card-content'>
-            You are currently logged in as [[hass.user.name]].
-            <template is='dom-if' if='[[hass.user.is_owner]]'>You are an owner.</template>
+            [[localize('ui.panel.profile.current_user', 'fullName', hass.user.name)]]
+            <template is='dom-if' if='[[hass.user.is_owner]]'>[[localize('ui.panel.profile.is_owner')]]</template>
           </div>
 
           <ha-pick-language-row
@@ -79,7 +81,7 @@ class HaPanelProfile extends EventsMixin(PolymerElement) {
             <paper-button
               class='warning'
               on-click='_handleLogOut'
-            >Log out</paper-button>
+            >[[localize('ui.panel.profile.logout')]]</paper-button>
           </div>
         </paper-card>
 

src/translations/en.json

@@ -51,7 +51,8 @@
     "dev-events": "Events",
     "dev-templates": "Templates",
     "dev-mqtt": "MQTT",
-    "dev-info": "Info"
+    "dev-info": "Info",
+    "profile": "Profile"
   },
   "state": {
     "default": {
@@ -728,6 +729,9 @@
         "delete_button": "Delete"
       },
       "profile": {
+        "current_user": "You are currently logged in as {fullName}.",
+        "is_owner": "You are an owner.",
+        "logout": "Log out",
         "push_notifications": {
           "header": "Push Notifications",
           "description": "Send notifications to this device.",
@@ -747,6 +751,27 @@
           "link_promo": "Learn about themes",
           "dropdown_label": "Theme"
         },
+        "change_password": {
+          "header": "Change Password",
+          "current_password": "Current Password",
+          "new_password": "New Password",
+          "confirm_new_password": "Confirm New Password",
+          "error_required": "Required",
+          "submit": "Submit"
+        },
+        "mfa": {
+          "header": "Multi-factor Authentication Modules",
+          "disable": "Disable",
+          "enable": "Enable",
+          "confirm_disable": "Are you sure you want to disable {name}?"
+        },
+        "mfa_setup": {
+          "title_aborted": "Aborted",
+          "title_success": "Success!",
+          "step_done": "Setup done for {step}",
+          "close": "Close",
+          "submit": "Submit"
+        },
         "refresh_tokens": {
           "header": "Refresh Tokens",
           "description": "Each refresh token represents a login session. Refresh tokens will be automatically removed when you click log out. The following refresh tokens are currently active for your account.",