button-connect-facebook.html

<link rel="import" href="../polymer/polymer.html">
<link rel="import" href="../oauth-connect-facebook/oauth-connect-facebook.html">
<link rel="import" href="../oauth-session/oauth-session.html">
<link rel="import" href="../../styles/style-button/style-button.html">

<dom-module id="button-connect-facebook">
  <style include="style-button"></style>
  <style>
    :host {
      display: inline-block;
    }

    .btn{
      @apply(--button-connect-facebook);
    }
  </style>
  <template>

    <oauth-session id="session" is-authenticated="{{isAuthenticated}}"></oauth-session>

    <oauth-connect-facebook id="service" client_id="{{client_id}}"></oauth-connect-facebook>
    <button class="btn btn-sm btn-primary" disabled$="{{isAuthenticated}}" on-click="connect" on-click="on_submit">Sign In with Facebook</button>

  </template>
</dom-module>
<script>
  Polymer({

    is: 'button-connect-facebook',

    properties: {
      client_id: {
        type: String
      }
    },

    connect: function () {
      this.$.service.connect();
    }

  });
</script>