michaelchadwick/ember-remember-stuff

<h3>{{t "components.passwordValidator.head"}}</h3>
{{#let (unique-id) as |templateId|}}
  <div class="password-validator" data-test-password-validator>
    <label for="password-{{templateId}}">
      {{t "general.password"}}:
    </label>
    <input
      id="password-{{templateId}}"
      type="text"
      value={{this.password}}
      {{on "input" (pick "target.value" this.setPassword)}}
      {{on "keyup" (queue (fn this.addErrorDisplayFor "password") (perform this.saveOrCancel))}}
      data-test-password-input
    />
    {{#if (has-error-for this.password)}}
      <ValidationError @errors={{get-errors-for this.password}} />
    {{else if (gt this.password.length 0)}}
      <span
        class="password-strength {{concat 'strength-' this.passwordStrengthScore}}"
        data-test-password-strength-text
      >
        {{#if (eq this.passwordStrengthScore 0)}}
          {{t "general.tryHarder"}}
        {{else if (eq this.passwordStrengthScore 1)}}
          {{t "general.bad"}}
        {{else if (eq this.passwordStrengthScore 2)}}
          {{t "general.weak"}}
        {{else if (eq this.passwordStrengthScore 3)}}
          {{t "general.good"}}
        {{else if (eq this.passwordStrengthScore 4)}}
          {{t "general.strong"}}
        {{/if}}
      </span>
      <meter max="4" value={{this.passwordStrengthScore}} data-test-password-strength-meter></meter>
    {{/if}}
    <div class="buttons">
      <button
        type="button"
        class="done text"
        disabled={{this.save.isRunning}}
        {{on "click" (perform this.save)}}
        data-test-submit
      >
        {{#if this.save.isRunning}}
          <LoadingSpinner />
        {{else}}
          {{t "components.passwordValidator.validate"}}
        {{/if}}
      </button>
    </div>
  </div>
{{/let}}