bs.js

<BsForm
    @formLayout="vertical"
    @model={{this.changeset}}
    @onSubmit={{action "register"}}
    class="register-form"
    as |form|
  >

    <h2>{{t "forms.register.headings.account"}}</h2>

    <form.element
      @label={{t "forms.register.username.label"}}
      @property="username"
      class="username-field"
      as |el|
    >
      <el.control required={{true}} />
    </form.element>

    <form.element
      @label={{t "forms.register.email.label"}}
      @property="email"
      @controlType="email"
      class="email-field"
      as |el|
    >
      <el.control required={{true}} />
    </form.element>

    <form.element
      @label={{t "forms.register.password.label"}}
      @controlType="password"
      @property="password"
      class="password-field"
      as |el|
    >
      <el.control required={{true}} />
    </form.element>

    <form.element
      @label={{t "forms.register.password-confirmation.label"}}
      @controlType="password"
      @property="password_confirmation"
      class="password-confirmation-field"
      as |el|
    >
      <el.control required={{true}} />
    </form.element>

    <form.element
      @property="accepted_terms"
      @controlType="checkbox"
      invisibleLabel={{true}}
      class="accepted-terms-field"
      as |el|
    >
      <el.control required={{true}} />
      <label class="form-check-label small" id={{el.id}}>
        I have read and accept the
        <a href={{this.hrefs.terms}} target="_blank">terms of use</a> and
        <a href={{this.hrefs.privacy}} target="_blank">privacy policy</a>
      </label>
    </form.element>

    <h2>{{t "forms.register.headings.quiz"}}</h2>

    <form.element
      @label={{t "forms.register.q-topics.label"}}
      @controlType="textarea"
      @property="q_topics"
      class="q-topics-field"
      as |el|
    >
      <el.control required={{true}} />
    </form.element>

    <form.element
      @label={{t "forms.register.q-why-join.label"}}
      @controlType="textarea"
      @property="q_why_join"
      class="q-why-join-field"
      as |el|
    >
      <el.control required={{true}} />
    </form.element>

    <form.element
      @label={{t "forms.register.q-experience.label"}}
      @controlType="textarea"
      @property="q_experience"
      class="q-experience-field"
      as |el|
    >
      <el.control required={{true}} />
    </form.element>

    <BsButton
      @buttonType="submit"
      @type="primary"
      @defaultText={{t "forms.register.submit.idle"}}
      disabled={{this.notSubmittable}}
      class="submit-button btn-block"
    />

  </BsForm>