add auth web components

va-auth-dialog.html

@@ -0,0 +1,169 @@
+<dom-module id="va-auth-dialog">
+
+  <template>
+
+    <style>
+    </style>
+
+    <paper-dialog id="dialog" entry-animation="scale-up-animation" exit-animation="fade-out-animation" with-backdrop>
+
+      <paper-tabs selected="{{selected}}">
+        <paper-tab>Sign In</paper-tab>
+        <paper-tab>Sign Up</paper-tab>
+      </paper-tabs>
+
+      <iron-pages selected="[[selected]]">
+
+        <div>
+          <h3>Sign in with your social account.</h3>
+
+          <paper-button on-click="authWithGoogle">Google</paper-button>
+          <paper-button on-click="authWithFacebook">Facebook</paper-button>
+          <paper-button on-click="authWithTwitter">Twitter</paper-button>
+
+          <h3>Sign in with email and password</h3>
+
+          <form is="iron-form" id="signInForm">
+            <paper-input label="Email" value="{{signInEmail}}" invalid="{{invalidSignInEmail}}" required auto-validate>
+              <iron-icon icon="mail" prefix></iron-icon>
+            </paper-input>
+            <paper-input label="Password" value="{{signInPassword}}" type="password" invalid="{{invalidSignInPassword}}" required auto-validate></auto-validate> error-message="Password is at least 6 characters.">
+              <iron-icon icon="lock" prefix></iron-icon>
+            </paper-input>
+            <div class="buttons">
+              <paper-button on-click="signInWithEmail" disabled="[[!submittableSignIn]]" raised>Sign in</paper-button>
+            </div>
+          </form>
+        </div>
+
+        <div>
+          <h3>Sign up with your social account.</h3>
+
+          <paper-button on-click="authWithGoogle">Google</paper-button>
+          <paper-button on-click="authWithFacebook">Facebook</paper-button>
+          <paper-button on-click="authWithTwitter">Twitter</paper-button>
+
+          <h3>Sign up with email and password</h3>
+
+          <form is="iron-form" id="signUpForm">
+            <paper-input label="Email" value="{{signUpEmail}}" invalid="{{invalidSignUpEmail}}" required auto-validate>
+              <iron-icon icon="mail" prefix></iron-icon>
+            </paper-input>
+            <paper-input label="Password" value="{{signUpPassword}}" type="password" invalid="{{invalidSignUpPassword}}" required auto-validate></auto-validate> error-message="Password is at least 6 characters.">
+              <iron-icon icon="lock" prefix></iron-icon>
+            </paper-input>
+            <paper-input label="Password confirmation" value="{{signUpPasswordConfirmation}}" type="password" invalid="{{invalidSignUpPasswordConfirmation}}" required auto-validate></auto-validate> error-message="Password is at least 6 characters.">
+              <iron-icon icon="lock" prefix></iron-icon>
+            </paper-input>
+            <div class="buttons">
+              <paper-button on-click="signUpWithEmail" disabled="[[!submittableSignUp]]" raised>Sign Up</paper-button>
+            </div>
+          </form>
+        </div>
+
+      </iron-pages>
+
+    </paper-dialog>
+
+  </template>
+
+  <script>
+    Polymer({
+
+      is: 'va-auth-dialog',
+
+      observers: [
+        '_isSubmittableSignIn(signInEmail, signInPassword, invalidSignInEmail, invalidSignInPassword)',
+        '_isSubmittableSignUp(signUpEmail, signUpPassword, signUpPasswordConfirmation, invalidSignUpEmail, invalidSignUpPassword, invalidSignUpPasswordConfirmation)'
+      ],
+
+      listeners: {
+        'dialog.iron-overlay-closed': 'reset',
+        'dialog.iron-overlay-canceled': 'reset',
+      },
+
+      properties: {
+
+        selected: {
+          type: Number,
+          value: 0
+        },
+
+        email: String,
+
+        password: String,
+
+        invalidEmail: Boolean,
+
+        invalidPassword: Boolean,
+
+        submittable: Boolean,
+      },
+
+      failSignIn: function () {
+        this.invalidSignInEmail = true;
+        this.invalidSignInPassword = true;
+      },
+
+      failSignUp: function () {
+        this.invalidSignUpEmail = true;
+        this.invalidSignUpPassword = true;
+      },
+
+      openSignIn: function () {
+        this.$.selected = 0;
+        this.$.dialog.open();
+      },
+
+      openSignUp: function () {
+        this.$.selected = 1;
+        this.$.dialog.open();
+      },
+
+      close: function () {
+        this.$.dialog.close();
+      },
+
+      authWithGoogle: function () {
+        this.fire('auth', { provider: 'google' });
+      },
+
+      authWithFacebook: function () {
+        this.fire('auth', { provider: 'facebook' });
+      },
+
+      authWithTwitter: function () {
+        this.fire('auth', { provider: 'twitter' });
+      },
+
+      signInWithEmail: function () {
+        this.fire('signInWithEmail', {
+          email: this.signInEmail,
+          password: this.signInPassword
+        });
+      },
+
+      signUpWithEmail: function () {
+        this.fire('signUpWithEmail', {
+          email: this.signUpEmail,
+          password: this.signUpPassword
+        });
+      },
+
+      reset: function () {
+        this.$.signInForm.reset();
+        this.$.signUpForm.reset();
+      },
+
+      _isSubmittableSignIn: function (email, password, invalidEmail, invalidPassword) {
+        this.set('submittableSignIn', email.length > 0 && password.length >= 6 && !invalidEmail && !invalidPassword);
+      },
+
+      _isSubmittableSignUp: function (email, password, passwordConfirmation, invalidEmail, invalidPassword, invalidPasswordConfirmation) {
+        this.set('submittableSignUp', email.length > 0 && password.length >= 6 && password.length === passwordConfirmation && !invalidEmail && !invalidPassword && !invalidPasswordConfirmation);
+      }
+
+    });
+  </script>
+
+</dom-module>

va-auth.html

@@ -0,0 +1,73 @@
+<dom-module id="va-auth">
+
+  <template>
+
+    <firebase-auth id="auth"></firebase-auth>
+
+    <va-auth-dialog id="dialog"></va-auth-dialog>
+
+  </template>
+
+  <script>
+    Polymer({
+
+      is: 'va-auth',
+
+      listeners: {
+        'dialog.auth': '_auth',
+        'dialog.signInWithEmail': '_signInWithEmail',
+        'dialog.signUpWithEmail': '_signUpWithEmail'
+      },
+
+      link: function (provider) {
+      },
+
+      signUp: function () {
+        this.$.dialog.openSignUp();
+      },
+
+      signIn: function (provider, credential) {
+        this.$.dialog.openSignIn();
+      },
+
+      signOut: function () {
+        this.$.auth.auth.signOut();
+      },
+
+      _signInWithEmail: function (e) {
+        var promise = this.$.auth.signInWithEmailAndPassword(e.detail.email, e.detail.password);
+
+        promise.then(function () {
+          this.$.dialog.close();
+          this.fire('done');
+        }.bind(this), function () {
+          this.$.dialog.failSignIn();
+          this.fire('error');
+        }.bind(this));
+      },
+
+      _signUpWithEmail: function (e) {
+        var promise = this.$.auth.createUserWithEmailAndPassword(e.detail.email, e.detail.password);
+
+        promise.then(function () {
+          this.$.dialog.close();
+          this.fire('done');
+        }.bind(this), function () {
+          this.$.dialog.failSignUp();
+          this.fire('error');
+        }.bind(this));
+      },
+
+      _auth: function (e) {
+        var promise = this.$.auth.signInWithPopup(e.detail.provider);
+
+        promise.then(function () {
+          this.$.dialog.close();
+          this.fire('done');
+        }.bind(this));
+      }
+
+    });
+  </script>
+
+</dom-module>