RxJS + Polymer

slack-login.html

<dom-module id="slack-login">
  <style>
    :host {
      display: block;
    }
    
    #card {
      min-width: 500px;
    }
    
    #team {
      min-width: 100px;
      display: inline-block;
    }
  </style>
  
  <template>
    <paper-card id="card" heading="Login to Slack">
      <iron-pages id="pages">
        <div>
          <paper-input id="team" label="Team Name" bind-value="{{teamName}}"></paper-input><span>.slack.com</span>
        </div>
        
        <div>
          <paper-input id="username" label="User Name"></paper-input>
          <paper-input id="password" type="password" label="Password"></paper-input>
        </div>
      </iron-pages>
      
      <paper-button id="goBack" on-click="_back">Go Back</paper-button>
      <paper-button id="goForward" on-click="_next">Next</paper-button>
    </paper-card>
  </template>
  
  <script>
  const RxBehavior = {
    when: function(key, node=null) {
      node = node || this;
      let dashCaseKey = Polymer.CaseMap.camelToDashCase(key);
      
      return Rx.DOM.fromEvent(node, `${dashCaseKey}-changed`)
        .startWith(null)
        .map(() => node[key]);
    },
    
    on: function(key, node=null) {
      node = node || this;
      return Rx.DOM.fromEvent(node, key);
    },
    
    bind: function(disposable) {
      this.__toDispose = this.__toDispose || [];
      this.__toDispose.push(disposable);
    },
    
    detached: function() {
      for (let d of this.__toDispose) { d.dispose(); }
    }
  };
  
  class SlackLogin {
    beforeRegister() {
      this.is = 'slack-login';
      
      this.properties = {
        teamName: {
          type: String,
          notify: true,
          reflectToAttribute: true,
        },
        token: {
          type: String,
          notify: true
        }
      };
    }
    
    get behaviors() {
      return [RxBehavior];
    }
    
    attached() {
      let anythingChanged = Rx.Observable.combineLatest(
        this.when('selected', this.$.pages),
        this.when('teamName'),
        this.when('value', this.$.username),
        this.when('value', this.$.password),
        (page, teamName, user, pass) => { return {page, teamName, user, pass}; })
        
      anythingChanged.subscribe(({page, teamName, user, pass}) => {
        switch (page) {
        case 0:
          this.$.goBack.disabled = true;
          this.$.goForward.disabled = 
            this.$.team.invalid =
            !teamName || (teamName.length < 2 || teamName.length > 30);
          
          this.$.goForward.text = "Next";
          break;
        case 1:
          this.$.goBack.disabled = false;
          this.$.goForward.disabled = 
            (user.length < 2 || user.length > 30) ||
            (pass.length < 2 || pass.length > 30);
            
          this.$.goForward.text = "Login";
          break;
        }
      });
      
      this.$.pages.selected = 0;
    }

    _back() { this.$.pages.selectPrevious(); }
    _next() { this.$.pages.selectNext(); }
  }
  
  Polymer(SlackLogin);
  </script>
</dom-module>

Awesome! Thanks :)