ActionButton

ActionButton components are used to display the result of the server-side Action directly inside the button.

When the server-side action was successfull, a checkmark will be displayed inside a button. The checkmark is surrounded by a circular countdown, which's timeout can be controlled using the cooldownseconds prop. The ActionButton does not react on any further clicks, until the CircularCountdown of the success or failure reaction has finished.

import { html, Component } from './rebase-ui-runtime'
import ActionButton from './components/ActionButton'

export default class MyView extends Component {
  render = () => {
    return `
      <${ActionButton} 
        text="Login"
        textColor="#fff"
        iconOnRight=${true}
        icon="arrow-right"
        onClickAction=${() => ({
          action: 'user.login',
          username: this.state.username...,
          password: this.state.password...
        })}
        onActionResolved=${this.onLoginSuccessfull}
        defaultErrorMessage="Invalid Credentials"
        style=${{ 
          paddingBotton: 10,
          backgroundColor: '#00f'
        }}
      />
    `
  }
}

In case the server-side action was not successfull (the server's json response's successfull property is beeing checked) the response's errorMessage property is beeing used to display the error message next to the button. When there is no errorMessage property, you can use the defaultErrorMessage property to define a fallback message.