Add password field support to ha-form (#1418)

* Add password field support to ha-form

* Lint

* Load ha-iconset-svg

src/authorize.html

@@ -18,5 +18,6 @@
     }
     </script>
     <script src="/frontend_latest/authorize.js"></script>
+    <script src='/frontend_latest/hass-icons.js' async></script>
   </body>
 </html>

src/components/ha-form.js

@@ -1,5 +1,6 @@
 import '@polymer/paper-checkbox/paper-checkbox.js';
 import '@polymer/paper-dropdown-menu/paper-dropdown-menu.js';
+import '@polymer/paper-icon-button/paper-icon-button.js';
 import '@polymer/paper-input/paper-input.js';
 import '@polymer/paper-item/paper-item.js';
 import '@polymer/paper-listbox/paper-listbox.js';
@@ -35,13 +36,33 @@ class HaForm extends EventsMixin(PolymerElement) {
       </template>
 
       <template is="dom-if" if="[[_equals(schema.type, &quot;string&quot;)]]" restamp="">
-        <paper-input
+        <template is="dom-if" if="[[_includes(schema.name, &quot;password&quot;)]]" restamp="">
-          label="[[computeLabel(schema)]]"
+          <paper-input
-          value="{{data}}"
+            type="[[_passwordFieldType(unmaskedPassword)]]"
-          required="[[schema.required]]"
+            label="[[computeLabel(schema)]]"
-          auto-validate="[[schema.required]]"
+            value="{{data}}"
-          error-message='Required'
+            required="[[schema.required]]"
-        ></paper-input>
+            auto-validate="[[schema.required]]"
+            error-message='Required'
+          >
+            <paper-icon-button toggles
+              active="{{unmaskedPassword}}"
+              slot="suffix"
+              icon="[[_passwordFieldIcon(unmaskedPassword)]]"
+              id="iconButton"
+              title="Click to toggle between masked and clear password">
+            </paper-icon-button>
+          </paper-input>
+        </template>
+        <template is="dom-if" if="[[!_includes(schema.name, &quot;password&quot;)]]" restamp="">
+          <paper-input
+            label="[[computeLabel(schema)]]"
+            value="{{data}}"
+            required="[[schema.required]]"
+            auto-validate="[[schema.required]]"
+            error-message='Required'
+          ></paper-input>
+        </template>
       </template>
 
       <template is="dom-if" if="[[_equals(schema.type, &quot;integer&quot;)]]" restamp="">
@@ -71,7 +92,7 @@ class HaForm extends EventsMixin(PolymerElement) {
           required="[[schema.required]]"
           auto-validate="[[schema.required]]"
           error-message='Required'
-      ></paper-input>
+        ></paper-input>
       </template>
 
       <template is="dom-if" if="[[_equals(schema.type, &quot;boolean&quot;)]]" restamp="">
@@ -129,6 +150,10 @@ class HaForm extends EventsMixin(PolymerElement) {
     return a === b;
   }
 
+  _includes(a, b) {
+    return a.indexOf(b) >= 0;
+  }
+
   _getValue(obj, item) {
     return obj[item.name];
   }
@@ -136,6 +161,14 @@ class HaForm extends EventsMixin(PolymerElement) {
   _valueChanged(ev) {
     this.set(['data', ev.model.item.name], ev.detail.value);
   }
+
+  _passwordFieldType(unmaskedPassword) {
+    return unmaskedPassword ? 'text' : 'password';
+  }
+
+  _passwordFieldIcon(unmaskedPassword) {
+    return unmaskedPassword ? 'hass:eye-off' : 'hass:eye';
+  }
 }
 
 customElements.define('ha-form', HaForm);

src/components/ha-iconset-svg.js

@@ -7,9 +7,7 @@ class HaIconset extends IronIconsetClass {
    * Fire 'iron-iconset-added' event at next microtask.
    */
   _fireIronIconsetAdded() {
-    this.async(function () {
+    this.async(() => this.fire('iron-iconset-added', this, { node: window }));
-      this.fire('iron-iconset-added', this, { node: window });
-    });
   }
 
   /**
@@ -23,9 +21,9 @@ class HaIconset extends IronIconsetClass {
     this._meta.value = this;
     if (this.ownerDocument && this.ownerDocument.readyState === 'loading') {
       // Document still loading. It could be that not all icons in the iconset are parsed yet.
-      this.ownerDocument.addEventListener('DOMContentLoaded', function () {
+      this.ownerDocument.addEventListener('DOMContentLoaded', () => {
         this._fireIronIconsetAdded();
-      }.bind(this));
+      });
     } else {
       this._fireIronIconsetAdded();
     }

src/entrypoints/authorize.js

@@ -4,6 +4,8 @@ import '@polymer/polymer/lib/elements/dom-repeat.js';
 import { html } from '@polymer/polymer/lib/utils/html-tag.js';
 import { PolymerElement } from '@polymer/polymer/polymer-element.js';
 
+import '../components/ha-iconset-svg.js';
+
 import '../auth/ha-auth-flow.js';
 import '../auth/ha-pick-auth-provider.js';