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; + } +}