firebase-auth-manager.html

<link rel="import" href="../polymer/polymer-element.html">

<link rel="import" href="../paper-toast/paper-toast.html">

<link rel="import" href="../polymerfire/firebase-auth.html">
<link rel="import" href="../polymerfire/firebase-document.html">

<!--
`<firebase-auth-manager>` is a wrapper element to `<firebase-auth>` that listens to the various `sign-XXX` event and delegate their execution.
Whenever an error occurs during a firebase operation, it displays an error dialog with the corresponding error message. For successful operation, it shows a toast.

@group GoogleWebComponents Elements
@element firebase-auth-manager
@hero hero.svg
@demo demo/index.html
-->
<dom-module id="firebase-auth-manager">
  <template>
      <firebase-auth id="firebaseAuth"
                     user="{{_user}}"
                     signed-in="{{logged}}">
      </firebase-auth>

      <firebase-document id="firebaseAuthDoc"
                         path="[[_profilePath]]"
                         data="{{profile}}">
      </firebase-document>

      <!-- TODO PG: eventually write a firebase-toast and extract it-->
      <paper-toast id="toast" text="[[_toastMessage]]" duration="3000"></paper-toast>
  </template>
  <script>

    class FirebaseAuthManager extends Polymer.Element {
      static get is() { return 'firebase-auth-manager' }

      static get properties() {
        return {
          /**
          * Logged used for the `<firebase-auth>` inner element
          */
          logged: {
            type: Boolean,
            notify: true,
            observer: '_notifyStatus'
          },
          /**
          * Profile base path used for the profile firebase document
          */
          profileBasePath: {
            type: String,
            value: '/profiles',
            notify: true
          },
          /**
          * Value of the profile firebase document
          */
          profile: {
            type: Object,
            notify: true
          },
          /**
          * Computed path used for the profile firebase document
          */
          _profilePath: {
            type: String,
            computed: '_computeProfilePath(profileBasePath, _user)'
          },
          /**
          * User used for the `<firebase-auth>` inner element
          */
          _user: {
            type: Object,
            value: null
          },
          /**
          * Text message of the toast
          */
          _toastMessage: {
            type: String
          }
        }
      }

      static get observers() {
        return [
          '_profileChanged(profile, _user)',
        ]
      }

      ready() {
        window.addEventListener('sign-up', this._signUpHandler.bind(this))
        window.addEventListener('sign-in', this._signInHandler.bind(this))
        window.addEventListener('sign-out', this._signOutHandler.bind(this))
        window.addEventListener('user-created', this._userHandler.bind(this))
        window.addEventListener('login', this._userHandler.bind(this))
        window.addEventListener('logout', this._userHandler.bind(this))
        window.addEventListener('error', this._errorHandler.bind(this))
        super.ready()
      }

      disconnectedCallback() {
        window.removeEventListener('sign-up', this._signUpHandler.bind(this));
        window.removeEventListener('sign-in', this._signInHandler.bind(this));
        window.removeEventListener('sign-out', this._signOutHandler.bind(this));
        window.removeEventListener('user-created', this._userHandler.bind(this));
        window.removeEventListener('login', this._userHandler.bind(this));
        window.removeEventListener('logout', this._userHandler.bind(this));
        window.removeEventListener('error', this._errorHandler.bind(this));
        super.disconnectedCallback()
      }

      _notifyStatus(newStatus, oldStatus) {
        if (oldStatus && !newStatus) {
          this.dispatchEvent(new CustomEvent('logout', { bubbles: true, composed: true }))
        }
        if (newStatus && !oldStatus) {
          this.dispatchEvent(new CustomEvent('login', { bubbles: true, composed: true }));
        }
      }

      _computeProfilePath(profileBasePath, user) {
        if (this.logged) {
          return [profileBasePath, user.uid].join('/')
        } else {
          return [profileBasePath, 'undefined'].join('/')
        }
      }

      _profileChanged(profile, user) {
        if (user && profile && Object.keys(profile).length === 0) {
          var providerInfo = user.providerData;
          var i;

          profile.displayName = user.displayName;
          if (!profile.displayName) {
            for (i=0; i<providerInfo.length; i++) {
              profile.displayName = providerInfo[i].displayName;
              if (profile.displayName) break;
            }
            profile.displayName = profile.displayName || '';
          }
          profile.email = user.email;
          if (!profile.email) {
            for (i=0; i<providerInfo.length; i++) {
              profile.email = providerInfo[i].email;
              if (profile.email) break;
            }
            profile.email = profile.email || '';
          }
          profile.picture = user.photoURL;
          if (!profile.picture) {
            for (i=0; i<providerInfo.length; i++) {
              profile.picture = providerInfo[i].photoURL;
              if (profile.picture) break;
            }
            profile.picture = profile.picture || '';
          }
          this.$.firebaseAuthDoc.saveValue(this.profileBasePath, user.uid);
          this.set('profile', profile);
        }
      }

      _signUpHandler(e) {
        this.$.firebaseAuth.createUserWithEmailAndPassword(
          e.detail.params.email,
          e.detail.params.password
        );
      }

      _signInHandler(e) {
        this.$.firebaseAuth.provider = e.detail.provider;
        if (e.detail.provider == "password") {
          this.$.firebaseAuth.signInWithEmailAndPassword(
            e.detail.params.email,
            e.detail.params.password
          );
        }
        else {
          this.$.firebaseAuth.signInWithPopup();
        }
      }

      _signOutHandler() {
        this.$.firebaseAuth.signOut();
        // this.async(function() {
        //   this.set('profile', undefined);
        // });
      }

      _userHandler(e) {
        switch (e.type) {
          case 'user-created':
            this._toastMessage = 'Sign-Up ';
            break;
          case 'login':
            this._toastMessage = 'Sign-In ';
            break;
          case 'logout':
            this._toastMessage = 'Sign-Out ';
            break;
        }
        this._toastMessage += 'successful!';
        this.$.toast.open();
      }

      _errorHandler(e) {
        if (e.detail && e.detail.code == 'auth/popup-blocked') {
          this.$.firebaseAuth.signInWithRedirect();
          return;
        }
        console.error('Unknown error: ' + e.detail);
      }
    }

    customElements.define(FirebaseAuthManager.is, FirebaseAuthManager)
  </script>
</dom-module>