fs-signin.html

<link rel="import" href="../polymer/polymer-element.html">
<link rel="import" href="../fs-client/fs-client.html">
<link rel="import" href="../fs-api-aware/fs-api-aware.html">
<link rel="import" href="../paper-button/paper-button.html">
<link rel="import" href="../paper-styles/color.html">

<!--
A FamilySearch sign in button.

Example:

    <fs-signin></fs-signin>

### Styling

The following custom properties are available for styling:

Custom property | Description | Default
----------------|-------------|----------
`--fs-signin-signout` | Mixin applied when the button is in the signed out state | {}
`--fs-signin-signin` | Mixin applied when the button is in the signed in state | {}

@group FamilySearch Elements
@customElement
@polymer
@demo demo/index.html
-->
<dom-module id="fs-signin">
  <template>
    <style>
      :host {
        font-family: arial;
      }
      
      paper-button {
        background-color: var(--paper-grey-200);
        color: #333;
        @apply --fs-signin-signout;
      }
      
      paper-button.recommended {
        background-color: var(--paper-blue-500);
        color: #fff;
        @apply --fs-signin-signin;
      }
    </style>
    <fs-client id="client" name="[[clientName]]" authenticated="{{signedIn}}"></fs-client>
    <paper-button id="button" class$="{{_computeClass(signedIn)}}" on-click="_clickAction">{{_computeText(signedIn)}}</paper-button>
  </template>
  <script>
  
    class FSSignin extends FSApiAwareMixin(Polymer.Element) {
      
      static get is() { return 'fs-signin'; }
      
      static get properties()  {
        return {
          signedIn: {
            type: Boolean,
            notify: true,
            value: false
          }
        };
      }
  
      _clickAction() {
        if(this.signedIn){
          this.$.client.signOut();
        } else {
          this.$.client.signIn();
        }
      }
      
      _computeText(signedIn) {
        return signedIn ? 'Sign Out' : 'Sign In';
      }
      
      _computeClass(signedIn) {
        return signedIn ? '' : 'recommended';
      }
      
    }
    
    customElements.define(FSSignin.is, FSSignin);
  </script>
</dom-module>