Login({
  mixin: {
    emailSvc: "email",
    userSvc: "user"
  },
  hovering: false,
  username: ViewModel.property.string.notBlank
    .invalidMessage(`Unique username is required`)
    .validatingMessage(`Checking if username is available`)
    .validateAsync((value, done) => {
      this.userSvc.checkUsername(value, done);
    }),
  email: ViewModel.property.string
    .validate(value => this.emailSvc.validEmail(value))
    .invalidMessage(`Valid email is required`),
  password: ViewModel.property.string
    .min(8)
    .invalidMessage(`Password must be at least 8 characters long`),
  createAccount() {
    if (this.valid()) {
      this.userSvc.createAccount(
        this.username(),
        this.email(),
        this.password()
      );
    }
  },
  render() {
    <div class="ui centered grid">
      <div class="column">
        <div class="ui form segment">
          {/* .field.required + error class if validating the username asynchronously
              or it's invalid and hovering over the button */}
          <div class="field required">
            <label>Username</label>
            {/* .icon + loading class if validating the username asynchronously */}
            <div class="ui icon input">
              <input type="text" placeholder="Username" />
              <i class="user icon" />
            </div>
          </div>

          {/* .field.required + error class if it's invalid and hovering over the button */}
          <div class="field required">
            <label>Email</label>
            <div class="ui icon input">
              <input type="email" placeholder="Email" />
              <i class="mail icon" />
            </div>
          </div>

          {/* .field.required + error class if it's invalid and hovering over the button */}
          <div class="field required">
            <label>Password</label>
            <div class="ui icon input">
              <input type="password" />
              <i class="lock icon" />
            </div>
          </div>

          {/*
            Sign up button calls createAccount when clicked.
            Has class 'primary' if the form is in a valid state.
            Has classes 'basic red' if hovering over the button and the form is invalid.
          */}
          <div class="ui button">Sign Up</div>
        </div>

        {/* Only show .red.segment if the form is in an invalid state */}
        <div class="ui red segment">
          <ul class="ui list">
            {/* Repeat the li element for each error in the form */}
            <li>Error Message</li>
          </ul>
        </div>
      </div>
    </div>;
  }
});