hummingbird-me/kitsu-web

<div class="modal-wrapper">
  <form>
    <div class="auth-section">
      <h6 class="auth-section-title">What email should we use?</h6>
      <p class="auth-section-helper">We'll use your email address to send you occasional updates and help you out if you forget your password.</p>
      <div class="form-group {{if hasInvalidEmail "has-warning"}} {{if hasValidEmail "has-success"}}">
        {{one-way-email user.email
          update=(action (mut user.email))
          class=(form-input-class hasInvalidEmail hasValidEmail)
          focusIn=(action "focused")
          placeholder="Email"
          data-test-email="true"}}
        {{#if hasInvalidEmail}}
          <div class="form-control-feedback" data-test-validation-email>
            {{v-get user "email" "message"}}
          </div>
        {{/if}}
      </div>
    </div>

    <div class="auth-section {{if hasValidName "active"}}">
      <h6 class="auth-section-title">What should we call you?</h6>
      <p class="auth-section-helper">Your username should be original, being witty is optional.</p>
      <div class="form-group {{if hasInvalidName "has-warning"}} {{if hasValidName "has-success"}}">
        {{one-way-text user.name
          update=(action (mut user.name))
          class=(form-input-class hasInvalidName hasValidName)
          focusIn=(action "focused")
          placeholder="Username"
          autofocus="autofocus"
          data-test-username="true"}}
        {{#if hasInvalidName}}
          <div class="form-control-feedback" data-test-validation-username>
            {{v-get user "name" "message"}}
          </div>
        {{/if}}
      </div>
    </div>

    {{#unless user.hasPassword}}
      <div class="auth-section">
        <h6 class="auth-section-title">Think of a strong password.</h6>
        <p class="auth-section-helper">Your password should be at least 8 characters. You should also consider mixing in numbers and special characters! This is to keep the bad guys from doing bad guy things with your account.</p>
        <div class="form-group password-form {{if hasInvalidPassword "has-warning"}} {{if hasValidPassword "has-success"}}">
          {{one-way-password user.password
            update=(action (mut user.password))
            class=(form-input-class hasInvalidPassword hasValidPassword)
            focusIn=(action "focused")
            placeholder="Password"
            data-test-password="true"}}
          {{#if hasInvalidPassword}}
            <div class="form-control-feedback" data-test-validation-password>
              {{v-get user "password" "message"}}
            </div>
          {{/if}}
          <span class="password-step password-{{passwordStrength.score}}" data-test-password-strength>
          </span>
        </div>
      </div>
    {{/unless}}

    <div class="form-group form-cta">
      <button type="submit" class="button button--primary"
              disabled={{if user.validations.isInvalid "disabled"}}
              {{action (perform updateAccount)}}>
        {{#if updateAccount.isRunning}}
          {{loading-spinner}}
        {{else}}
          {{t "onboarding.aozora-account-details.submit"}}
        {{/if}}
      </button>
    </div>
  </form>
</div>