diff --git a/addon/components/paper-password.hbs b/addon/components/paper-password.hbs
index 992c524..6d3d273 100644
--- a/addon/components/paper-password.hbs
+++ b/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}}
/>
-
Password Strength: {{this.strengthLevel}}
+ {{this.strengthLabel}} {{this.strengthLevel}}
{{/if}}
\ No newline at end of file
diff --git a/addon/components/paper-password.js b/addon/components/paper-password.js
index a8e12df..ad7fa44 100644
--- a/addon/components/paper-password.js
+++ b/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(
+ ' 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;
+ }
+}