hummingbird-me/kitsu-web

View on GitHub
app/templates/components/application/auth-onboarding/sign-in.hbs

Summary

Maintainability
Test Coverage
<div class="modal-wrapper">
  <div class="auth-section active">
    <h6 class="auth-section-title">Welcome back!</h6>
    <p class="auth-section-helper">Login to your Kitsu account below. If you need an account, <a href="#" {{action "changeComponent" "social-auth"}}>create one</a>.</p>
  </div>

  <div class="modal-actions login-actions">
    <div class="connect-buttons">
      <button class="button button--facebook" title="Connect with Facebook" aria-label="Connect with Facebook" {{action (perform loginWithFacebook)}}>
        <span class="svgIcon">
          {{svg-jar "l-facebook"}}
        </span>
        <div class="button-labelSet">
          <span class="button-label button-label--multiLine">
            Continue with Facebook
          </span>
        </div>
      </button>
    </div>
    <small>Or, sign in with:</small>
    <form>
      <div class="form-group email-login">
        <input
          placeholder="Email"
          autocomplete="email username"
          class="form-control username"
          value={{identification}}
          oninput={{action (mut identification) value="target.value"}}
          autofocus required data-test-identification>

        <input
          placeholder="Password"
          autocomplete="current-password"
          type="password"
          class="form-control password"
          value={{password}}
          oninput={{action (mut password) value="target.value"}}
          required data-test-password>

        <a href={{href-to "password-reset"}} class="forgot-pass-link" {{action "transitionToForgot"}}>forgot password?</a>
      </div>

      <div class="form-cta">
        <button type="submit" class="btn button--primary"
                disabled={{if (or (is-empty identification) (is-empty password)) "disabled"}}
                data-test-sign-in
                {{action (perform login)}}>
          {{#if authentication.isRunning}}
            {{loading-spinner}}
          {{else}}
            Login
          {{/if}}
        </button>
      </div>
    </form>

  </div>
</div>