feat(addon/components/paper-password): converts to glimmer component.

addon/components/paper-password.hbs

@@ -3,7 +3,7 @@
   @class={{@inputClass}}
   @label={{@label}}
   @value={{@value}}
-  @onChange={{@onChange}}
+  @onChange={{this.onChange}}
   @onFocus={{@onFocus}}
   @onBlur={{@onBlur}}
   @onKeyDown={{@onKeyDown}}
@@ -21,7 +21,7 @@
         @value={{this.strengthValue}}
         @warn={{this.strengthWarning}}
       />
-      <div class='flex-80'>Password Strength: {{this.strengthLevel}}</div>
+      <div class='flex-80'>{{this.strengthLabel}} {{this.strengthLevel}}</div>
     </div>
   {{/if}}
 </PaperInput>

addon/components/paper-password.js

@@ -1,69 +1,64 @@
-import Component from '@ember/component';
-import { computed } from '@ember/object';
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
 import { A } from '@ember/array';
 import { assert } from '@ember/debug';
 import zxcvbn from 'zxcvbn';
 
-export default Component.extend({
-  minStrength: 3,
-  strengthLabel: 'Password strength: ',
-  strengthLevels: A(['Very Poor', 'Poor', 'Fair', 'Good', 'Excellent']),
-  passwordErrorMessage: 'Please enter a stronger password.',
-  errors: A([]),
-  customValidations: A([]),
+export default class PaperPassword extends Component {
+  @tracked errors = A([]);
 
-  passwordStrength: computed('value', function () {
-    let password = this.value;
+  constructor() {
+    super(...arguments);
+
+    assert(
+      '<PaperPassword> requires an `onChange` action or null for no action.',
+      this.args.onChange !== undefined
+    );
+
+    // configure defaults
+    this.customValidations = this.args.customValidations || A([]);
+    this.minStrength = this.args.minStrength || 3;
+    this.onChange = this.args.onChange || null;
+    this.passwordErrorMessage =
+      this.args.passwordErrorMessage || 'Please enter a stronger password.';
+    this.strengthLabel = this.args.strengthLabel || 'Password strength: ';
+    this.strengthLevels =
+      this.args.strengthLevels ||
+      A(['Very Poor', 'Poor', 'Fair', 'Good', 'Excellent']);
+  }
+
+  get passwordStrength() {
+    let password = this.args.value || '';
     if (password) {
       return zxcvbn(password);
     } else {
       return { score: 0 };
     }
-  }),
-  strengthValue: computed('passwordStrength.score', function () {
+  }
+
+  get strengthValue() {
     return (this.passwordStrength.score / 4) * 100;
-  }),
-  strengthLevel: computed(
-    'passwordStrength.score',
-    'strengthLevels',
-    function () {
-      return this.strengthLevels[this.passwordStrength.score];
-    }
-  ),
-  strengthWarning: computed(
-    'minStrength',
-    'passwordStrength.score',
-    function () {
-      return this.passwordStrength.score < this.minStrength;
-    }
-  ),
+  }
+
+  get strengthWarning() {
+    return this.passwordStrength.score < this.minStrength;
+  }
 
-  inputErrors: computed(
-    'errors.[]',
-    'minStrength',
-    'passwordErrorMessage',
-    'passwordStrength.score',
-    'value',
-    function () {
-      let myErrors = A().pushObjects(this.errors);
-      let passwordStrength = this.passwordStrength.score;
-      let password = this.value;
+  get strengthLevel() {
+    return this.strengthLevels[this.passwordStrength.score];
+  }
 
-      if (password && passwordStrength < this.minStrength) {
-        myErrors.pushObject({
-          message: this.passwordErrorMessage,
-        });
-      }
+  get inputErrors() {
+    let myErrors = A().pushObjects(this.errors);
+    let passwordStrength = this.passwordStrength.score;
+    let password = this.value;
 
-      return myErrors;
+    if (password && passwordStrength < this.minStrength) {
+      myErrors.pushObject({
+        message: this.passwordErrorMessage,
+      });
     }
-  ),
 
-  didReceiveAttrs() {
-    this._super(...arguments);
-    assert(
-      '{{paper-password}} requires an `onChange` action or null for no action.',
-      this.onChange !== undefined
-    );
-  },
-});
+    return myErrors;
+  }
+}