Added social auth buttons

imports/ui/components/Form.jsx

@@ -1,15 +1,17 @@
 import React from 'react';
 import {Accounts} from 'meteor/accounts-base';
+import './SocialButtons.jsx';
 import './Fields.jsx';
 import './Buttons.jsx';
 import './FormMessage.jsx';
 
 export class Form extends React.Component {
   render() {
-    const { fields, buttons, error, message, ready = true, className } = this.props;
+    const { oauthServices, fields, buttons, error, message, ready = true, className } = this.props;
     return (
       <form className={[className, ready ? "ready" : null].join(' ')}
         onSubmit={ evt => evt.preventDefault() } className="accounts-ui">
+        <Accounts.ui.SocialButtons oauthServices={ oauthServices } />
         <Accounts.ui.Fields fields={ fields } />
         <Accounts.ui.Buttons buttons={ buttons } />
         <Accounts.ui.FormMessage message={ message } />
@@ -18,6 +20,7 @@ export class Form extends React.Component {
   }
 }
 Form.propTypes = {
+  oauthServices: React.PropTypes.object,
   fields: React.PropTypes.object.isRequired,
   buttons: React.PropTypes.object.isRequired,
   error: React.PropTypes.string,

imports/ui/components/LoginForm.jsx

@@ -417,6 +417,44 @@ export class LoginForm extends Tracker.Component {
     });
   }
 
+  oauthButtons() {
+    const { formState, waiting } = this.state;
+    let oauthButtons = [];
+    if (formState == STATES.SIGN_IN || formState == STATES.SIGN_UP ) {
+      if(Accounts.oauth) {
+        Accounts.oauth.serviceNames().map((service) => {
+          oauthButtons.push({
+            id: service,
+            label: service,
+            disabled: waiting,
+            type: 'submit',
+            onClick: this.oauthSignIn.bind(this, service)
+          });
+        });
+      }
+    }
+    return _.indexBy(oauthButtons, 'id');
+  }
+  oauthSignIn(service) {
+    const { formState, waiting, user } = this.state;
+    //Thanks Josh Owens for this one.
+    function capitalService() {
+      return service.charAt(0).toUpperCase() + service.slice(1);
+    }
+    login = Meteor["loginWith" + capitalService()];
+    login({requestPermissions: [ 'email' ]}, (error) => {
+      if (error) {
+        this.showMessage(T9n.get(`error.accounts.${error.reason}`) || T9n.get("Unknown error"));
+      } else {
+        this.setState({ formState: STATES.SIGN_OUT, message: '' });
+        loginResultCallback(() => {
+          Meteor.setTimeout(() => Accounts.ui._options.onSignedInHook(), 100);
+        });
+      }
+    });
+
+  }
+
   signUp(options = {}) {
     const {
       username = null,
@@ -615,7 +653,11 @@ export class LoginForm extends Tracker.Component {
   }
 
   render() {
-    return <Accounts.ui.Form fields={this.fields()} buttons={this.buttons()} {...this.state} />;
+    this.oauthButtons();
+    return <Accounts.ui.Form oauthServices={this.oauthButtons()}
+                             fields={this.fields()} 
+                             buttons={this.buttons()}
+                             {...this.state} />;
   }
 }
 

imports/ui/components/SocialButtons.jsx

@@ -0,0 +1,20 @@
+import React from 'react';
+import './Button.jsx';
+import {Accounts} from 'meteor/accounts-base';
+
+
+export class SocialButtons extends React.Component {
+  render() {
+    let { oauthServices = {}, className = "social_buttons" } = this.props;
+    return(
+      <div className={ className }>
+        {Object.keys(oauthServices).map((id, i) => {
+          return <Accounts.ui.Button {...oauthServices[id]} key={i} />;
+        })}
+      </div>
+    );
+  }
+}
+
+
+Accounts.ui.SocialButtons = SocialButtons;